Jump to content

Layout problem In IE


mikelmao

Recommended Posts

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.  ;)

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.