editing this IE hack?

[John Salerno]

Here's the example I'm working from:
---------------
The * html Hack

Several readers bristled at my use of the now unfashionable * html hack.
As well they should! The workaround is trivial. I considered including
it in the article, but I decided that it broke the flow, and that anyone
concerned enough would be able to maneuver around it.

So instead of doing this:


#left {
right: 200px; /* LC width */
}

* html #left {
left: 150px /* RC width */
}

.... do this:


#left {
left: 150px /* RC width for IE 6 */
}

#container > #left {
right: 200px; /* LC width for everyone else */
}
------------

Now, the CSS I'm working with is slightly different, but to put it in
line with the above example, I just did the switch. Of course, this
wrecked the look of it. Here's what I had to work with originally:

#left {
width: 180px; /* LC width */
padding: 0 10px; /* LC padding */
right: 240px; /* LC fullwidth + CC padding */
margin-left: -100%;
}

/*** IE Fix ***/
* html #left {
left: 150px; /* RC fullwidth */
}

And I changed it to this:

#left {
width: 180px; /* LC width */
padding: 0 10px; /* LC padding */
left: 150px;
margin-left: -100%;
}

#container > #left {
right: 240px;
}

But that didn't work. So is there more math involved to make the change?

 

[Mark Parnell]

Deciding to do something for the good of humanity, John Salerno

#left {
width: 180px; /* LC width */
padding: 0 10px; /* LC padding */
left: 150px;
margin-left: -100%;
}

#container > #left {
right: 240px;
}

But that didn't work. So is there more math involved to make the change?

Most likely you need to set left back to its default (i.e. 0). Hard to
say without a url though.

 

[John Salerno]

Deciding to do something for the good of humanity, John Salerno


Most likely you need to set left back to its default (i.e. 0). Hard to
say without a url though.

Sorry. Here's the page with the three column display:
http://www.alistapart.com/d/holygrail/example_4.html

 

[BootNic]

Here's the example I'm working from:
---------------
The * html Hack

Several readers bristled at my use of the now unfashionable * html
hack. As well they should! The workaround is trivial. I considered
including it in the article, but I decided that it broke the flow,
and that anyone concerned enough would be able to maneuver around
it.

So instead of doing this: [snip]

Now, the CSS I'm working with is slightly different, but to put it
in line with the above example, I just did the switch. Of course,
this wrecked the look of it. Here's what I had to work with
originally:
[snip]

But that didn't work. So is there more math involved to make the
change?

<link rel="stylesheet" href="default.css" type="text/css">

<!--[if gte IE 5.5 & lte IE 6]>
<link rel="stylesheet" href="IE.css" type="text/css">
<![endif]-->

<style type="text/css">
body{
margin: 1em;
padding: 1em;
font-size: 2em;
color:#FFD700;
background-color: #008000;
}
</style>

<!--[if gte IE 5.5 & lte IE 6]>
<style type="text/css">
body{
color:#008000;
background-color: #FFD700;
}
</style>
<![endif]-->

--
BootNic Wednesday, February 08, 2006 12:58 AM

Humor is an affirmation of dignity, a declaration of man's
superiority to all that befalls him.
*Romain Gary*

 

[Mark Parnell]

Deciding to do something for the good of humanity, John Salerno

My mistake. left: auto; not 0.

Sorry. Here's the page with the three column display:
http://www.alistapart.com/d/holygrail/example_4.html

Try the above - add left: auto; to #container > #left.