Internet Explorer 11 adds space in a way I do not understand. In the element below it adds white space on left border.
Link to a page that illustrates the problem showing how element is displayed in different browsers
This is the code:
<div style="position:absolute;width:330px;left:30px;top:120px;visibility:visible;border:1px solid black">
<div style="position:relative;height:14px;background-color:#B02C2A;padding:6px 0 6px 8px;color:white;"><span>hejsan</span>
</div>
</div>
Removing positioning absolute or the border attribute makes the problem disappear, but I need these features. Is there anything I'm missing or is it a bug?
<div style="position:absolute;width:330px;left:30px;top:120px;visibility:visible;border:1px solid black">
<div style="position:relative;height:14px;background-color:#B02C2A;padding:6px 0 6px 8px;color:white;"><span>hejsan</span>
</div>
</div>
apply background-color:#B02C2A; to the first div, that way it won't show the white spacing of the div
Related
Once assigning overflow with a value other than visible, all its child elements will be clipped. It is the purpose of the overflow property. However, I have to make one of the child elements to be 'floated' and not clipped (like a popup) -- just one of them; not all. Is it possible?
Take the following as an example. Is there any CSS setting that does not clip the yellow div, while clipping the blue element? (Currently they are both clipped)
<div style="position:absolute;width:100px;height:50px;overflow:hidden;border:1px solid black">
<div style="top:30px;width:50px;height:100px;background:yellow">
</div>
<div style="position:absolute;left:50px;top:0;width:50px;height:100px;background:blue">
</div>
</div>
The code can be also found at http://jsfiddle.net/kZBxD/
Do you need something like this:
check this fiddle : http://jsfiddle.net/kZBxD/3/
<div style="position:absolute;width:100px;height:50px;overflow:hidden;border:1px solid black">
<div style=" position:fixed;width:50px;height:100px;background:yellow"></div>
try the below fiddle: the yellow div is floating outside and blue div is inside as per you need.
http://jsfiddle.net/kZBxD/2/
I'm trying to understand a behavior I've seen when I was messing around with some html code you can see here.
You'll notice that if you change the following:
<div style="border: solid 1px black;">
<div style="margin-top:50px;">
Post Title
</div>
</div>
to this (ie. "border: solid 1px black;" to "border: solid 0px black;"):
<div style="border: solid 0px black;">
<div style="margin-top:50px;">
Post Title
</div>
</div>
the margin of the inner div does not effect the outer div any longer. I've been trying to find the W3.org specification which defines this behavior, but no luck. Anyone want to help?
This is called "collapsing margins".
Certain adjoining margins combine to form a single margin. Those
margins are said to “collapse.” Margins are adjoining if there are no
nonempty content, padding or border areas or clearance to separate
them.
http://www.w3.org/TR/CSS2/box.html#collapsing-margins
http://www.w3.org/TR/css3-box/#collapsing-margins
Some easier reads:
http://reference.sitepoint.com/css/collapsingmargins
http://www.howtocreate.co.uk/tutorials/css/margincollapsing
I have a div floating left and a div floating right, and I would like to have a background-color changed. It changes the background, but it stops right before the floating divs. When I take them off, it continues having the correct background color that I desire.
<div style='clear:both;border-bottom:3px solid #999;border-top:#333 solid thin;background:#D7E7E8;position:relative;'>
<div style='width:1091px;margin:0 auto;margin-top:70px;'>
<div style='float:left;width:200px;border:thin solid black;margin-bottom:50px;position:relative;'>
float LEFT
</div>
<div style='float:right;border:thin solid black; width:800px;border:thin solid black;margin-bottom:50px;position:relative;'>
float RIGHT
</div>
</div>
</div>
thank you!
You must clear the floats so the parent can surround them.
<div style='clear:both;border-bottom:3px solid #999;border-top:#333 solid thin;background:#D7E7E8;position:relative;'>
<div style='width:1091px;margin:0 auto;margin-top:70px;'>
<div style='float:left;width:200px;border:thin solid black;margin-bottom:50px;position:relative;'>
float LEFT
</div>
<div style='float:right;border:thin solid black; width:800px;border:thin solid black;margin-bottom:50px;position:relative;'>
float RIGHT
</div>
<!--HERE IS THE CLEARING DIV: -->
<div style="clear: left;"></div>
</div>
</div>
You can also, make the parent itself float, and then you won't need the additional markup (clearing div). If you do this, then your parent will need a width specified.
EXPLANATION:
When an element is floating, the parent is not aware of its height (unless it is a floating element itself). You need a clear below the floats so that the parent div recognises the full height of all its children.
You don't need to force-clear the floats - you need only to define the overflow for any position:relative div. Overflow:hidden and overflow:auto close the div without any further intervention, on everything from IE6 up.
Change the first line to:
<div style='clear:both;border-bottom:3px solid #999;border-top:#333 solid thin;background:#D7E7E8;position:relative; overflow:hidden;'>
and it'll accomplish the same thing as forcing the div closed.
I know about the double margin bug, but this is different.. the scenario is having an element with a bottom margin, then directly below it an element that contains floating elements (which are cleared at the end), the container element could have say a bottom border that should sit just under the floating elements it contains.. however ie IE7 and 6, the bottom border is spaced away from its contents, by the exact same amount of the bottom margin of the element above it..
It's not really inheritance, more that a margin is applied twice and in a wrong position.. here's some repo code:
<h1 style="margin: 0 0 50px 0;">Menu</h1>
<div style="border-bottom: solid 1px #000;">
<div style="float: left;">Hello world?</div>
<div style="clear: left;"></div>
</div>
Stick that in a complaint page (I used xhtml transitional), you'll notice the border doesn't appear under the text, but 50px away from it... the same distance that 'Menu' is spaced away from the text..
Test this against say.. IE8, and the border is correctly sat just under the text.
This is something I've noticed previously and managed to ignore and work around, but I'm wondering if this bug is named, and if there is a good way to get around it..
(the way I would usually get around this is to space H1 with padding instead, but this isn't always reasonable).
You need to invoke hasLayout on the outer div to have IE display properly. You can do that by adding width or height to your div or zoom:1.
Those will also clear your float in IE so you can remove <div style="clear: left;"></div>. To clear the float in other browsers use overflow:hidden;
<h1 style="margin: 0 0 50px 0;">Menu</h1>
<div style="border-bottom: solid 1px #000;overflow:hidden;zoom:1;">
<div style="float: left;">Hello world?</div>
</div>
Sadly, CSS outline isn't supported in IE7, so i'm stuck using border. But adding a border to any element on the page takes up room and possibly shifts the page.
If i'm adding a 2px border, then I set a -2px margin, it sill isn't perfect, as list items move to the left, and "margin:auto" really screws with it.
You can see examples here:
http://paul.slowgeek.com/nodeSelector/tests/simple.html
http://paul.slowgeek.com/nodeSelector/tests/center1.html
For example, if a page had :
<div>
<p>Lorem Ipsum</p>
</div>
And then I did :
<div>
<p style="border: 5px solid red">Lorem Ipsum</p>
</div>
The page would now be 10 px bigger and the p element would be 5 pixels indented. But if i did :
<div>
<p style="outline: 5px solid red">Lorem Ipsum</p>
</div>
in firefox 3, the page would be the exact same height and the element would be in the same position. I want this behavior to work cross browser.
Basically, how can you use a CSS border to get the effect of a CSS outline?
If it's hover effects you're worried about, and your background is of uniform colour then simply set the non-hover border ot the elements to the background colour, and then just change the colour on hover. So the element is always the same size, though you will have to decrease the padding to adjust for the border always being there.
so
instead of
a p {padding: 10px;}
a:hover {border: 5px solid red;}
use
a p {border: 5px solid white;padding:5px}
a:hover p {border-color: red;}
As an aside, if you're using :hover on any element other than a link or an input then no effect will be seen in ie6, which a lot of people still use. But you can use the ie7 script to fix that: http://code.google.com/p/ie7-js/