mikelmao Posted August 16, 2008 Share Posted August 16, 2008 Hey people. i have a problem with my layout. It looks normal in FF but it F*** in IE.. The content div should be liquid and the right side bar should be fixed width. FF: http://img58.imageshack.us/img58/9103/fffq5.png IE: http://img296.imageshack.us/img296/5049/ieae0.png The CSS: style.css body { text-align: center; padding: 0; margin: 0; font: 12px Verdana, Arial, sans-serif; color: #000; background: #75a2c7; } a { text-decoration: none; color: #0060E0; } a:hover { text-decoration: underline; color: #0030F0; } a img { border: 0; } #container { text-align: left; margin: 30px auto; background: #fff; width: 80%; background: #f2f2f2 url(images/container-top-left.gif) top left no-repeat; } #container .bottom-right, #container .bottom-left { width: 18px; height: 18px; position: relative; } #container .bottom-right { background: url(images/container-bottom-right.gif); margin-bottom:-18px; margin-left: 98.25%; float: right; } #container .bottom-left { background: url(images/container-bottom-left.gif); } #main .bottom-left { background: url(images/content-bottom-left.gif); height: 20px; width: 23px; margin-bottom: -1.5px; } #main .bottom-right { background: #000 url(images/content-bottom-right.gif) no-repeat; height: 20px; width: 23px; bottom: 18px; } .stretch { margin-right: 200px; padding-left: 10px; } #main { float: left; width: 100%; background: #fff; margin: 18px 0 18px; background: #fff url(images/navbar-bg.gif) repeat-x; overflow: hidden; } #content { padding: 0 10px 10px; overflow: hidden; } #navbar ul { margin: 0; list-style-type: none; height: 37.5px; } #navbar ul li { position: relative; display: inline; padding: 0; margin: 0; height: 23px; right: 40px; top: 10.5px; padding: 10.5px } #navbar ul li a { padding: 12px; color: white; height: 21px; } #navbar ul li a:hover { background: white; color: #272727; font-weight: bold; } #navbar .first { background: url(images/navbar-left.gif) no-repeat; padding-left: 15px; } #sidebar { margin: 18px 0 18px; float: left; width: 164px; padding: 0 1%; text-align: center; } #sidebar h3 { font-size: 14px; } #sidebar ul { margin: 0; padding: 0; list-style-type: none; } #colors { margin-top: 10px; } #colors img { margin-left: 7.5px; } .clear { clear: both; } ie.css #navbar ul li a { padding: 10px 16px 13px 15px; margin: 0; } #navbar ul { padding: 0; } #navbar ul li { padding: 0; position: static; } .stretch { margin: 0; } index.html: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=windows-1250"> <link href="style.css" rel="stylesheet" type="text/css" /> <!--[if IE]> <link href="ie.css" rel="stylesheet" type="text/css" /> <![endif]--> </head> <body> <div id="container"> <div class="stretch"> <div id="main"> <div id="navbar"> <ul> <li class="first"><a href="#">Home</a></li> <li><a href="#">Contact</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Login</a></li> <li><a href="#">Order</a></li> </ul> </div> <div id="content"> <img src="images/wacom.jpg" width="250px" height="175px" alt="Wacom" style="float: right" /> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus eros leo, dictum sed, viverra vitae, molestie vel, mauris. Aliquam elit leo, commodo quis, bibendum bibendum, tempor consequat, erat. Etiam molestie, urna nec tincidunt venenatis, ante sapien ultrices metus, vel <a href="#">faucibus dolor</a> odio sit amet diam. Suspendisse aliquet mi vel dolor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed eleifend ipsum adipiscing lorem. In hac habitasse platea dictumst . Nunc accumsan. Maecenas at tellus in leo pellentesque ullamcorper. Integer id pede vel nunc aliquam venenatis. Maecenas eu odio in nisi feugiat tempor. Vestibulum nec justo eu purus ultricies ultrices. Cras enim lorem, ultrices et, tincidunt sodales, dictum sit amet, diam. Maecenas tellus felis, <a href="#">mollis</a> consequat, pretium a, bibendum in, ante. In aliquet fermentum erat. Nunc aliquet gravida est. Integer eu tortor. Pellentesque turpis pede, rutrum eget, mollis ut, commodo quis, tellus.</p> <p>Etiam massa nunc, rutrum quis, pulvinar eu, vehicula eu, ipsum. Phasellus est nibh, convallis at, pharetra eget, imperdiet quis, arcu. Suspendisse feugiat imperdiet diam. Nunc eu quam at massa imperdiet mattis. Morbi libero. Vestibulum imperdiet nisi et orci. <a href="#">Pellentesque placerat</a>. Etiam euismod. Sed tristique ligula non sapien. Nunc in odio sit amet velit vehicula interdum. Donec turpis. Mauris quis neque ac nisi dignissim dapibus. Praesent ligula. Mauris volutpat, odio in pulvinar posuere, purus urna ornare metus, sed euismod velit arcu luctus ante. Sed tempus, purus eu aliquam convallis, nibh urna ultricies velit, in interdum purus velit iaculis est. Nam neque nisi, tincidunt ut, vulputate quis, semper nec, dui. Sed feugiat. Sed dictum cursus massa.</p> </div> <div class="bottom-left"></div> <div class="bottom-right"></div> </div> </div> <div id="sidebar"> <img src="images/logo.png" /> <div id="colors"> <a href="#"><img src="images/blue.gif" alt="Blue" style="margin: 0;" /></a> <a href="#"><img src="images/green.gif" alt="Green" /></a> <a href="#"><img src="images/yellow.gif" alt="Yellow" /></a> <a href="#"><img src="images/red.gif" alt="Red" /></a> </div> <h3>Sidebar</h3> <ul> <li><a href="#">Sidebar link</a></li> <li><a href="#">Another sidebar link</a></li> <li><a href="#">Sidebar link</a></li> <li><a href="#">Another sidebar link</a></li> </ul> </div> <br class="clear" /> <div class="bottom-right"></div> <div class="bottom-left"></div> </div> </body> </html> Please reply as soon as possible .. Thanks Quote Link to comment Share on other sites More sharing options...
TheFilmGod Posted August 16, 2008 Share Posted August 16, 2008 You have two child divs both floating left. This is known to create problems in IE6, - and not as much in IE7. You should float the second div on the right side to the right. This is so you create a true "fluid" design. Hope that helps! Quote Link to comment Share on other sites More sharing options...
mikelmao Posted August 17, 2008 Author Share Posted August 17, 2008 You have two child divs both floating left. This is known to create problems in IE6, - and not as much in IE7. You should float the second div on the right side to the right. This is so you create a true "fluid" design. Hope that helps! No, when I do that, the sidebar is still at the bottom, but on the right side.. :S Quote Link to comment Share on other sites More sharing options...
TheFilmGod Posted August 17, 2008 Share Posted August 17, 2008 To be quite honest you dumped a bit toooo much code. I just don't have that much time. Why don't you just paste relavant css and html code? I don't need to see how you styled your fonts to debug a positiong error. And out of curiosity, why are you tyring to support ie6? Quote Link to comment Share on other sites More sharing options...
mikelmao Posted August 17, 2008 Author Share Posted August 17, 2008 IE6 and 7 Quote Link to comment Share on other sites More sharing options...
sKunKbad Posted August 18, 2008 Share Posted August 18, 2008 try adding display:inline; to the effected divs. IE6 doubles the padding and margins of floated divs that have padding and margins that are on the same side such as: float: left; padding-left:10px; becomes 20px of padding in IE6 display:inline is a hack to make IE6 cooperate. Quote Link to comment Share on other sites More sharing options...
mikelmao Posted August 18, 2008 Author Share Posted August 18, 2008 No, that didn't change anything Quote Link to comment Share on other sites More sharing options...
TheFilmGod Posted August 18, 2008 Share Posted August 18, 2008 try adding display:inline; to the effected divs. IE6 doubles the padding and margins of floated divs that have padding and margins that are on the same side such as: float: left; padding-left:10px; becomes 20px of padding in IE6 display:inline is a hack to make IE6 cooperate. This bug only occurs in IE6 when a float is a child of a parent float. (float in a float). Quote Link to comment Share on other sites More sharing options...
sKunKbad Posted August 18, 2008 Share Posted August 18, 2008 This bug only occurs in IE6 when a float is a child of a parent float. (float in a float). Well, it was the first thing I thought of when looking at the images. I didn't look at the code. Quote Link to comment Share on other sites More sharing options...
bronzemonkey Posted August 18, 2008 Share Posted August 18, 2008 And out of curiosity, why are you tyring to support ie6? Why aren't you? Unless it's just for little personal projects, you need to support a browser which still has ~30% market share. It's common sense. Quote Link to comment Share on other sites More sharing options...
TheFilmGod Posted August 18, 2008 Share Posted August 18, 2008 And out of curiosity, why are you tyring to support ie6? Why aren't you? Unless it's just for little personal projects, you need to support a browser which still has ~30% market share. It's common sense. Common sense? There is a bigger reason why you shouldn't support ie6. By supporting ie6 you would be disregarding safety issues that arise from ie6 that haven't been fixed until ie7. I think protecting and telling users that you are not supporting it because of their safety is a more important issue than supporting some crappy browser. And the webstie I'm currently creating is next generation. The complex css models that I create are too advanced for ie6. Even hacks and workarounds would not suffice - ie7 barely handles it. Lastly, this site will not be launched for at least another 3 years. I think supporting ie6 then would be unwise. Quote Link to comment Share on other sites More sharing options...
sKunKbad Posted August 19, 2008 Share Posted August 19, 2008 And the webstie I'm currently creating is next generation. The complex css models that I create are too advanced for ie6. Even hacks and workarounds would not suffice - ie7 barely handles it. Lastly, this site will not be launched for at least another 3 years. I think supporting ie6 then would be unwise. I don't mean to be a thread hi-jacker, but I'm interested to see what your working on. It sounds interesting. I tried to PM, but your inbox was full. Quote Link to comment Share on other sites More sharing options...
mikelmao Posted August 19, 2008 Author Share Posted August 19, 2008 I think that wasn't what you meant, but the float in float was not the problem. By getting the XHTML valid, it's solved in IE7, but it still looks odd in IE6 :-\ BTW, here's the page: http://www.joshuawillems.net/ Here's the CSS: http://www.joshuawillems.net/style.css And here's the CSS for IE: http://www.joshuawillems.net/ie.css Quote Link to comment Share on other sites More sharing options...
TheFilmGod Posted August 19, 2008 Share Posted August 19, 2008 And the webstie I'm currently creating is next generation. The complex css models that I create are too advanced for ie6. Even hacks and workarounds would not suffice - ie7 barely handles it. Lastly, this site will not be launched for at least another 3 years. I think supporting ie6 then would be unwise. I don't mean to be a thread hi-jacker, but I'm interested to see what your working on. It sounds interesting. I tried to PM, but your inbox was full. It is still in the early steps of development and planning, but so far it represents a social networking website. Very different than facebook or myspace. The complex css models that I create include divs displayed as fix without a known height (need to center it vertically/horizontally), multi-part email (tables and css), multi layer transparencies, and javascript scripted div orientation. To be quite honest, I don't even know how to do half of these, but with a little use of ol' google and some css books I can probably manage. Quote Link to comment Share on other sites More sharing options...
sKunKbad Posted August 20, 2008 Share Posted August 20, 2008 And the webstie I'm currently creating is next generation. The complex css models that I create are too advanced for ie6. Even hacks and workarounds would not suffice - ie7 barely handles it. Lastly, this site will not be launched for at least another 3 years. I think supporting ie6 then would be unwise. I don't mean to be a thread hi-jacker, but I'm interested to see what your working on. It sounds interesting. I tried to PM, but your inbox was full. It is still in the early steps of development and planning, but so far it represents a social networking website. Very different than facebook or myspace. The complex css models that I create include divs displayed as fix without a known height (need to center it vertically/horizontally), multi-part email (tables and css), multi layer transparencies, and javascript scripted div orientation. To be quite honest, I don't even know how to do half of these, but with a little use of ol' google and some css books I can probably manage. Sounds cool. I'm always excited to see designs that are innovative and go beyond the simple layouts. Quote Link to comment Share on other sites More sharing options...
bronzemonkey Posted August 21, 2008 Share Posted August 21, 2008 Common sense? There is a bigger reason why you shouldn't support ie6. By supporting ie6 you would be disregarding safety issues that arise from ie6 that haven't been fixed until ie7. I think protecting and telling users that you are not supporting it because of their safety is a more important issue than supporting some crappy browser. It is not your place to tell people what browser to use especially since some people do not have a choice. The stats are there; ie6 still has significant market share and will continue to do so until business (on a mass scale) migrate away from XP SP1. No professional developer can avoid supporting IE6 on any client projects. And the webstie I'm currently creating is next generation. The complex css models that I create are too advanced for ie6. Even hacks and workarounds would not suffice - ie7 barely handles it. Lastly, this site will not be launched for at least another 3 years. I think supporting ie6 then would be unwise. You think you're the only one building complex sites? There are also limits as to what designs are appropriate for the web - providing an unusable mess in the name of "innovation" is not something to aim for. And we're not talking about pie-in-the-sky websites that aren't even going to be completed within the next 3 years. Anyone building professional sites at this time needs to be supporting IE6. It's that simple. If you know your code then it isn't even that hard to get IE6 to play along the vast majority of the time. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.