Layout problem In IE

mikelmao · 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>

<!--[if IE]>

<![endif]-->

</head>

<body>

<ul>

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

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

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

</div>

</body>

</html>

Please reply as soon as possible .. Thanks

TheFilmGod · 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!

mikelmao · 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

TheFilmGod · 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?

mikelmao · August 17, 2008

IE6 and 7

sKunKbad · 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.

mikelmao · August 18, 2008

No, that didn't change anything

TheFilmGod · 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).

sKunKbad · 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.

bronzemonkey · 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.

TheFilmGod · 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.

sKunKbad · 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.

mikelmao · 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

TheFilmGod · 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.

sKunKbad · 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.

bronzemonkey · 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.

Sign In

Layout problem In IE

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information