Topic: CSS breaks in IE (Page 1 of 1) Pages that link to <a href="http://ozoneasylum.com/backlink?for=27613" title="Pages that link to Topic: CSS breaks in IE (Page 1 of 1)" rel="nofollow" >Topic: CSS breaks in IE <span class="small">(Page 1 of 1)</span>\

 
tj333
Paranoid (IV) Inmate

From: Manitoba, Canada
Insane since: Oct 2001

IP logged posted posted 03-08-2006 21:02 Edit Quote

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

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)

DL-44
Lunatic (VI) Inmate

From: under the bed
Insane since: Feb 2000

IP logged posted posted 03-08-2006 22:14 Edit Quote
code:
#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.

tj333
Paranoid (IV) Inmate

From: Manitoba, Canada
Insane since: Oct 2001

IP logged posted posted 03-08-2006 22:46 Edit Quote

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)

tj333
Paranoid (IV) Inmate

From: Manitoba, Canada
Insane since: Oct 2001

IP logged posted posted 03-09-2006 02:22 Edit Quote

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.

Steve
Maniac (V) Inmate

From: Boston, MA, USA
Insane since: Apr 2000

IP logged posted posted 03-09-2006 03:17 Edit Quote

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.

tj333
Paranoid (IV) Inmate

From: Manitoba, Canada
Insane since: Oct 2001

IP logged posted posted 03-09-2006 04:23 Edit Quote

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.

Steve
Maniac (V) Inmate

From: Boston, MA, USA
Insane since: Apr 2000

IP logged posted posted 03-09-2006 04:42 Edit Quote

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.

divinechaos
Nervous Wreck (II) Inmate

From:
Insane since: Dec 2001

IP logged posted posted 03-09-2006 05:17 Edit Quote

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



Post Reply
 
Your User Name:
Your Password:
Login Options: Remember Me On This Computer
 
Your Text:
Loading...
Options: Show Signature
Enable Slimies
Enable Linkwords

« BackwardsOnwards »

Show Forum Drop Down Menu