css; firefox vs ie; margin&padding&size
i have this css
DIV.border
{
-moz-opacity: 0.85;
background: #999999;
border: 1px solid black;
filter: alpha(opacity = 85);
margin: 2%;
opacity: 0.85;
padding: 2%;
width: 100%;
}
it shows fine in IE
but in firefox its strectching beyond padding and margin...
for firefox i must set width 92% and ie 100%...
anyone can help me?
[404 byte] By [
Mitsukai] at [2007-11-20 11:14:47]
# 1 Re: css; firefox vs ie; margin&padding&size
Unfortunately, there are no CSS ways of doing if...then statements. I also know that you are worried about people having JavaScript disabled, so you can't dynamically use document.write() depending on the browser. If you have server-side scripting abilities, you could do it that way depending on the browser headers.
If those are not options, can you post the corresponding HTML so we can work with it and see exactly why thing are progressing this way?
# 2 Re: css; firefox vs ie; margin&padding&size
Actually, it's displaying incorrectly in Internet Explorer. The correct behavior with that CSS is for the element to be 100% wide (relative to the first ancestor with a width, or the window if there is no such ancestor.) Then another 2% of the width of the closest ancestor/window is added on each side as padding, resulting in a 104% wide element.
Luckily for you, the default behavior (auto) of a <div> tag is to fill its container, so you can skip the "width: 100%;" statement, and it'll automatically become 96% wide with 4% padding. If you tell it to be 96% wide, Internet Explorer will, again, render it incorrectly and force it to be 92% wide with 4% padding.
If it doesn't fill the area as expected, maybe an ancestor has position: absolute; or float: left/right; in that case, apply a width to that ancestor, and everything should work nicely.
For reference on how the CSS box model is supposed to behave, see W3C's CSS reference on the box model:
http://www.w3.org/TR/CSS21/box.html
# 3 Re: css; firefox vs ie; margin&padding&size
i just fixed it by setting left and top % and width % instead of padding and margin and its displays cool now
