I thought this might be a margin doubling problem but it's not. The Div - "#rck_feature" is being pushed around 250px to the right when viewed in IE. It's fine in firefox. If anyone can help with this I'd appreciate it. Thanks Here's the css: 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> Code (markup):
Try something like this Or in short, what I've added: IE will read the if statement while other software will just ignore it so you can put whatever you need in there safe in the knowledge it won't screw up your design in FF or other. This may not be the exact solution to your problem but it can help a lot Hope this helps! Scoty
Thanks Scoty, That did the trick. I'm just wondering a couple of things: What it is that IE is interpreting differently so I can anticipate this behavior in the future? How did you come up with the "250" number? If this div is now absolutely positioned, is that going to cause other problems? Thanks again Mike
Np. Basically, <!--[if IE]> whatever is in here only IE will read the others will see it as a comment and ignore <![endif]--> When I first set the value to 0 it was too far left so just guessed lol 250 seemed close to what you wanted Depends what you wanted to do with it, if you just wanted it to remain on that part of the page then no, otherwise you may want to have it as relative or whatever, just depends what you need it to do. It won't cause any problems with anything else unless you had another layer going above or under other then that no Just noticed 250 is probably 10 or 20px too much, just play about with it until you get what you want EDIT: Also IE will have read the id from the previous CSS and apply anything in there first and ammend it with the new values so if you add something new to the main CSS then it will still be added when you view it in IE if you get what I'm saying Scoty
Thanks Scoty To clarify my first question: I was wondering if it's possible to anticipate this behavior (pushing the div to the right) from IE so I can either put your fix in from the beginning or avoid whatever it is that IE is doing to cause the div to push to the right? Thanks again
Ideally it would be best finding the problem and eliminating it (through the process of elimination), I would help out but going to be busy for the next fortnight. If you find the problem and it's something you definately need then the fix I have provided is probably the next best thing. As for putting it in from the beginning, it's really more a bandaid where you don't put it on until after the skin has been cut, except it can be a permanent solution. Having looked at your code again you should try adding another container div around the one you're having the problem with because it looks as if IE is floating it right to the edge of wrapper. Because your code style is entirely different to mine it really would be better to eliminate the problem so it flows with the rest of your code Scoty
ie6 also has a bug that doubles the margins of some floated elements read more about it here: http://www.jaymeblackmon.com/ie6-double-margin-bug-fix
As I mentioned,it's not the margin doubling error as the margin is set to 61px and the div is movine over about the width of div which is 215px