|Div being pushed to right in IE|
I thought this might be a margin doubling problem but it's not. The Div - "#rck_feature" is being pushed around to the right when viewed in IE. It's fine in firefox. It seems to be pushing it over exactly the width of the div (not double the margin). Id' also like to know what it is that IE is interpreting differently so I can anticipate this behavior in the future? If anyone can help with this I'd appreciate it. Thanks
font-family: Verdana, Arial, Helvetica, sans-serif;
margin: 20px auto;
background: url(images/slices/header-bk.jpg) no-repeat;
background: url(images/slices/rack-feature.jpg) no-repeat;
font: bold 12px Verdana, Arial, Helvetica, sans-serif;
font: bold 11px Verdana, Arial, Helvetica, sans-serif;
Here's the HTML:
<div class="fltlft" id="buttons3">
<div id="bullet-1">Shop For Racks</div>
<div class="fltrt" id="feature">
<li>Content for this area</li>
<li>Take advantage of the protection that your sax cases are designed to ensure for your fine instruments.</li>
<li>Minimize required storage space.</li>
<li>Easily store and access each of your saxes without accidentally toppling other cases.</li>
<li>Eliminate scuffed walls and crowded closets.</li>
<li>Easily adjustable for different size and shaped baritone, tenor, alto, and soprano sax cases</li>
I've seen IE6 push elements of to the left as well for their full width, never cared to look for the cause, just fixed by adding the width worth of margin to it in a conditional comment. Conditional comments allow me to work around the IE bugs, while allowing me to ignore causes, which is very comforting in the end.
After all I'm not making IE, so I don't care about finding the cause of the bug as long as I can work around it, or let it degrade somewhat gracefully.
It does make sense to think of it that way.
is this the kind of workaround you were referring to?
I just used "margin-left:800px;", but basically: whatever works is good enough.
Your conditional comment should be more specific. The way you wrote it, it selects *all* versions of IE, and I'm still hoping all these bugs won't make it to IE8.
I'd suggest something like:
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="ie6.css" />
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="ie7.css" />
or if you need the same fix for all current versions of IE:
<!--[if IE lt 8]>
<link rel="stylesheet" type="text/css" href="ie.css" />
Conditional comments are a good way to deal with inconsistencies, but have you considered saving some code and the need to track extras by just setting
text-align:left on div#feature? (That also means you can remove the text-align:left from div#rck_feature.)
Works for me on the provided code for on ie6&7, ff2&3, Op9, winSafari3.
To follow the reasoning:
# Put a contrasting background-color on div#feature and comment out the margin-top/left on div#rck_feature. In ie div#rck_feature is drawn "centered" within div#feature.
# Set text-align:left on div#feature (the parent of the problem element) and in all browsers div#rck_feature aligns top/left of its parent.
# Re-apply the margins to div#rck_feature and it is drawn as I think you want in all browsers.
I had missed the "text-align: center;" on the body. Indeed if you add that to have the wrapper centered in IE6, you need to undo it in the wrapper. One of those IE6 things. [Which IMHO belong in a conditional comment as it's an IE fix]
blueman2, this is about detail at the micro-level, so don't allow it to distract from sorting your code.
|One of those IE6 things. [Which IMHO belong in a conditional comment as it's an IE fix] |
Recalling text-align is supposed to be inherited, so ie is behaving correctly.
At the risk this drifts further from the original topic...
But the need to have "text-align:center" is most often (dunno for this specific case due) due to its lack to properly do auto margins on the wrapper. Actually the whole wrapper thing is in many cases only needed for IE as it refuses to let you handle body and html to their full potential.
|Recalling text-align is supposed to be inherited, so ie is behaving correctly. |
|But the need to have "text-align:center" is most often (dunno for this specific case due) due to its lack to properly do auto margins on the wrapper |
In my experience ie handles things like
margin:0 auto without difficulty. At a very high risk of mis-attributing, I think I saw SuzyUk comment just recently on the prevalence of this "myth". SuzyUk, apologies if I have that wrong
I agree html and body do not directly relate to the posters question, so it is very unclear why they have been raised. But for the purpose of sharing as acurate information as possible, I never have difficulties with html or body in ie either.
The poster asked a simple question, the solution is founded in the recommendations, is not a hack, and is one that works cross-browser whether the ua conforms or not. Given ie wasn't even the culprit in this instance, I'm not seeing the point of posts about claimed "ie deficiencies".
Thanks for the fix which does work. Just changing the text alignment alone in the two divs did the job. I'm not sure while the other two suggestions were necessary. Glad I stimulated some other conversation in addition. It only added to my knowledge.