Im my web page there is a div with width 0 which has a left and right border of 1px width each.
In Firefox when I give the following code it holds the div with 50px width, but it happens to be 48px wide in IE7.
<div style="width: 48px; border: #a9a9a9 1px solid; height: 30px;">test div</div>
Can anyone help me resolving this issue?
Thanks in advance.
Looks like IE box model bug. If in Quirks mode, IE subtracts border, padding, marginfrom element width. See the diagram below:
If you declare correct DOCTYPE for your HTML, this problem should go away.
Related
In Lightbox2 I'm trying to get the caption text centred and wider than the image. I'm using the CSS file section at:
.lb-data .lb-details {
width: 100%;
float: left;
text-align: center;
line-height: 1.2em;
}
By increasing "width" I can get wider text to the right and by changing the "float" to right I can get the wider text to hang to the left.
I've also tried setting "float" to "none" and "inherit" with no success.
What I want to do is have a portrait image with centred text wider than the image.
As the text can be made to be wider than the image I don't think it's a container issue but I could be wrong.
Any suggestions? All help appreciated.
It is a container issue. The div.lb-dataContainer get's a width applied to it that matches the image container above it. To make it wider, you can override it by either by editing the lightbox.js source or by using CSS, ex. .lb-dataContainer { width: 100% !important; }
The main div is 600 pixels wide. By my understanding, an iPhone 5 is 640 pixels wide. But when I pull the website up on the iPhone 5, the main div only takes up a small fraction of the screen, maybe a third. Why is that?
Website
So I've seen IOS shrink content so that the whole page is displayed on the phone screen when using css transforms.
So the offending css was
background: url('/images/mobile-device-down-arrow.gif') no-repeat center;
transform: rotate(180deg);
-ms-transform: rotate(180deg);
-webkit-transform: rotate(180deg) scale(1);
we replaced it with
background: url('/images/mobile-device-up-arrow.gif') no-repeat center;
and it fixed the problem.
I remember a bug in webkit for this, but I can't find it right now.
This just happened to me and I managed to fix the issue by wrapping the affected elements that were being shrunk in a div that defined the exact width that the element needed to be, in my case this was: width: calc(100vw - 2rem);
Hopefully this helps anybody having this issue, it seems to only occur on mobile devices when using the rotate transform with transition at any positive degree as when removing the transform, the element reverted to 0deg without shrinking.
I am currently working on this repo with my friend: https://github.com/openteach/openteach.
I have this bug that I can not fix. I have tried everything, but nothing seems to work?!
I have attached a picture of the bug.
Any help/ideas is appreciated.
Thanks.
Picture of bug:
Bug
You can do as Mike King suggest, just remember to set the background size to cover aswell:
background-size: cover;
This will make sure the background will always cover all of it's element, no matter what size the image is.
Another thing could be the element is not taking all of the height of the viewport. This can be fixed by setting the height relative to the viewport like:
body {
height: 100vh;
background-image: url(assets/images/stardust.png);
background-size: cover;
}
Set the background on the body, and you won't have a gap any more
body{
background: url(assets/images/stardust.png);
}
The sum of the heights doesn't fill the whole page, and you only have the background on the <div class="App_component">
The other way is to set that class on the body tag:
<body class="App_component">
I am trying to build a grid created by AngularJS's ng-grid module that will extend across the width of the webpage. However, when I create the grid, by default it only extends roughly 1/2 of the way across the page. Increasing the width of columns only results in columns being cut off instead of expanding the overall grid. I can't find any online documentation on how to expand the width of grids so any help would be appreciated.
Create a grid style.
.gridStyle {
border: 1px solid #ccc;
width: 100%;
height: 300px
}
And then apply it to the HTML
<div class="gridStyle" ng-grid="gridOptions">
I'm having a slight issue with my width=100% css rule. On desktop browsers it's fine, however on mobile, it only uses 100% of the device width. So On a phone I'll end up have a div that spans 480px rather than across the entire horizontal screen.
Thanks for your help!
#intro {background-color: #1F1F1F; width: 100%; margin: auto; display:block;}
#intro-inner {height:450px; width:1105px; padding-top:50px;display:block;margin:0 auto;position:relative;}
On the HTML page, the intro inner div is inside the intro div. The background color is blue. On a desktop the site appears fine. However on a mobile after the devise width, ex. 480px, the #intro div background and it's color ends.