Topic: CSS breaks in IE (Page 1 of 1)

Okay, somewhat new to this CSS stuff but here we go.
It looks fine in Firefox but IE messes it up by moving/resizing the divs. The left menu bar that disappears in IE6 is somewhere there as it shows up if you shrink the browser to the right point.
The code validates.
I used some of this to create the columns. I color coded it to make it easier to work with.
My Google-fu has failed me on this. For the sake of my sanity, could you spare a moment to help?

The Page.
CSS code

body {
  min-width: 550px;      /* 2x LC width + RC width */
}
#container {
  padding-left: 200px;   /* LC width */
  padding-right: 150px;  /* RC width */
  line-height:100%;
}
#container .column {
  position: relative;
  float: left;
}
#center {
  width: 100%;
}
#navleft{
color:black;
background-color:aqua;
  width: 200px;          /* LC width */
  right: 200px;          /* LC width */
  margin-left: -100%;
}
#footer {
  clear: both;
  color:black;
  background-color:blue;
}
/*** IE6 Fix ***/
* html #left {
  left: 150px;           /* RC width */
}

div.page{
color:black;
background-color:fuchsia;
}

div.navbar{
margin:1px;
color:black;
background-color:gray;
clear:left;
}
div.crumb{
margin:1px;
color:black;
background-color:green;
clear:left;
}

div.title{
margin:1px;
color:black;
background-color:#DEB887;
position: relative;
float: left;
}

div.menuhead{
float:left;
margin:0;
padding:.5em;
font-weight: bold;
}
div.image{
float:left;
}
div.menulist{
float:left;
margin:0;
padding:.5em;
color:black;
background-color:maroon;
}

__________________________
Eagles get sucked into jet engines and weasels are oft maligned, but beavers just make nice hats.

(Edited by tj333 on 03-08-2006 21:05)

#navleft{
color:black;
background-color:aqua;
  width: 200px;          /* LC width */
  right: 200px;          /* LC width */
  margin-left: -100%;
}

I don't understand the
right: 200px; /* LC width */
margin-left: -100%;

why is that there?
There should be no need for it, and it is the type of thing that is asking for trouble.

From A list A Part Column Setup Page

quote:

---

Step 3: Pull the left column into place

The only thing left is to get the colums to line up with the padding on the container. The center column starts exactly where it needs to be, so we?ll focus on the left column.

It takes two steps to get the left column in place. First, we?ll pull it all the way across the center column with a 100% negative margin. Remember that the 100% refers to the central width of the container, which is also exactly the width of the center column.

#left {
width: 200px; /* LC width */
margin-left: -100%;
}

---

Removing that makes the left column go away (presumably under the center column). I just copy and pasted thae code as I cannot really understand it.
If you have a suggestion/link for a better way to do this I would be all to happy to try it.


Side note: It works in IE5 just not IE6.

__________________________
Eagles get sucked into jet engines and weasels are oft maligned, but beavers just make nice hats.

(Edited by tj333 on 03-08-2006 22:46)

Okay, took DL-44 and found an easier to use how to columns setup.
Tutorial here for the interested..
It seems to be working for the time being in IE5 and Firefox1.5. The IE6 PC came down with a virus so can't test that.

__________________________
Eagles get sucked into jet engines and weasels are oft maligned, but beavers just make nice hats.

You're probably better off with Johansson's simpler 2-column layout. The "Holy Grail" article is excellent, but it is a highly evolved and tuned script. Did you happen to notice there were *16 PAGES* of comments following the alistapart article? You can be sure not all of them were congratulating Levine for his bulletproof code.

Did you try the 3-column version in IE before you started adding all you custom classes? Maybe (if you are really in need of a 3-column layout) you should comment out all the stuff you added on top of the basic layout and gradually add it back in until you see what breaks it.

Mea culpa.
I missed the comments. And my IE testing was probaly suspect at the least at that time.
I think I'll get back to that one when I'm not working on a deadline and have a little more expierience with CSS.
But at least I'm not half as stressed as I've been the last few days now that it works.

__________________________
Eagles get sucked into jet engines and weasels are oft maligned, but beavers just make nice hats.

I think you made a smart decision to use a less fragile layout when you have the pressure of a deadline. I have always been impressed by Johansson's work.

If it's CSS, you'll find everything you ever wanted to know here, including 2- and 3-column layouts and a wiki:
http://css-discuss.incutio.com/

For cross-browser CSS bugs, check out:
http://www.positioniseverything.net

With these guys, you'll have a hard time failing. Although that isn't a challenge.

Cheers,
DC