homepage Welcome to WebmasterWorld Guest from 54.205.254.108
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Div being pushed to right in IE
blueman2




msg:3774214
 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:
</head>
<body>
<div id="wrapper">
<div id="header"></div>
<div class="fltlft" id="buttons3">
<div id="bullet-1">Shop For Racks</div>
</div>
<div class="fltrt" id="feature">
<div id="rck_feature">
<ul>
<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>
</ul>
</div>
</div>
</div>
</body>
</html>


 

swa66




msg:3774258
 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.

blueman2




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

Thanks

It does make sense to think of it that way.

is this the kind of workaround you were referring to?

<!--[if IE]>
<style>
#rck_feature {
position: absolute;
left:250px;
}
</style>
<![endif]-->

swa66




msg:3774711
 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" />
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="ie7.css" />
<![endif]-->

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" />
<![endif]-->

alt131




msg:3774715
 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.

swa66




msg:3774724
 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]

alt131




msg:3774741
 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.

@swa66
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.

swa66




msg:3774750
 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.
alt131




msg:3774783
 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".

blueman2




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

alt131

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