homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

Div being pushed to right in IE

 2:01 pm on Oct 27, 2008 (gmt 0)

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

body {
margin: 0;
padding: 0;
background: #000000;
text-align: center;
font-family: Verdana, Arial, Helvetica, sans-serif;
#wrapper {
background: #E1CC95;
height: 768px;
width: 1000px;
margin: 20px auto;
position: relative;
#header {
background: url(images/slices/header-bk.jpg) no-repeat;
height: 134px;
width: 1000px;
#feature {
height: 376px;
width: 764px;
background: url(images/slices/rack-feature.jpg) no-repeat;
#buttons3 {
height: 376px;
width: 236px;
background: url(images/slices/3buttons.jpg);
position: relative;
#bullet-1 {
height: 35px;
position: absolute;
top: 97px;
color: #F6CE6E;
font: bold 12px Verdana, Arial, Helvetica, sans-serif;
vertical-align: middle;
left: 33px;
width: 161px;
#rck_feature {
color: #F6CE6E;
text-decoration: none;
height: 265px;
width: 215px;
margin-top: 100px;
margin-left: 61px;
font: bold 11px Verdana, Arial, Helvetica, sans-serif;
background: #0000CC;
text-align: left;
.fltrt {
float: right;
.fltlft {
float: left;
.clrflt {
clear: both;
Here's the HTML:
<div id="wrapper">
<div id="header"></div>
<div class="fltlft" id="buttons3">
<div id="bullet-1">Shop For Racks</div>
<div class="fltrt" id="feature">
<div id="rck_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>



 2:56 pm on Oct 27, 2008 (gmt 0)

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.


 10:15 pm on Oct 27, 2008 (gmt 0)


It does make sense to think of it that way.

is this the kind of workaround you were referring to?

<!--[if IE]>
#rck_feature {
position: absolute;


 12:03 am on Oct 28, 2008 (gmt 0)

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" />


 12:07 am on Oct 28, 2008 (gmt 0)

Hi blueman2,

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.


 12:19 am on Oct 28, 2008 (gmt 0)

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]


 12:41 am on Oct 28, 2008 (gmt 0)

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.


 12:48 am on Oct 28, 2008 (gmt 0)

At the risk this drifts further from the original topic...
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. 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.

 2:35 am on Oct 28, 2008 (gmt 0)

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".


 3:06 pm on Oct 28, 2008 (gmt 0)


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.

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved