With CSS, how can I place a box in the same position in Firefox and IE?

August 24, 2004 3:05 PM

CSS trouble; using absolute positioning for a box doesn't seem to place it in the exact same spot in Firefox and Internet Explorer. [more inside]

Some days ago I redesigned my website (link), going with a tableless/CSS-controlled approach.

Only one bug remains to be solved, and here's where your help is needed.

On the top-right of the content column, there is a rectangular gray box titled "Content". On the top-left of the menu column, lays a similar box titled "Menu".

I'm using the following CSS code for these:

--

#content-indication{
background: #EEEEEE;
border-left: 1px solid #C0C0C0;
border-bottom: 1px solid #C0C0C0;
left: 334px; /* IE wants 335px ?! */
position: absolute;
top: 73px;
width: 87px; /* for IE5/Win */
voice-family: "\"}\"";
voice-family: inherit;
width: 85px; /* actual value */
}

html>body #content-indication{
width: 85px; /* Be nice to Opera */
}

#content-indication h2{
color: #333333;
font: small-caps 10px "Lucida Grande", Verdana, sans-serif;
letter-spacing: 2px;
margin: 0px;
padding: 1px;
text-align: center;
}

#content{
float: left;
margin: 0px;
padding-left: 15px;
padding-right: 15px;
width: 420px; /* for IE5/Win */
voice-family: "\"}\"";
voice-family: inherit;
width: 390px; /* actual value */
}

html>body #content{
width: 390px; /* Be nice to Opera */
}

#menu-indication{
background: #EEEEEE;
border-right: 1px solid #C0C0C0;
border-bottom: 1px solid #C0C0C0;
left: 421px; /* IE wants 422 px ?! */
position: absolute;
top: 73px;
width: 72px; /* for IE5/Win */
voice-family: "\"}\"";
voice-family: inherit;
width: 70px; /* actual value */
}

html>body #menu-indication{
width: 70px; /* Be nice to Opera */
}

#menu-indication h2{
color: #333333;
font: small-caps 10px "Lucida Grande", Verdana, sans-serif;
letter-spacing: 2px;
margin: 0px;
padding: 1px;
text-align: center;
}

--

Ideally, these two boxes should be separated by the vertical red line.

That's the way they look in Firefox, making me a happy man (link).

In Internet Explorer, the boxes are moved 1 pixel to the left from their expected position, thus overlapping the vertical red line, and effectively breaking the whole thing (link).

Any ideas on how to solve the problem? (CSS-discuss wasn't able to help.)

Thanks in advance for your help!

posted by kchristidis to Computers & Internet (10 answers total)

it looks the same to me in firefox 0.9 and ie6... im not seeing the 1px shift.
posted by rhapsodie at 3:12 PM on August 24, 2004

Looks fine in ie 6.0.2800.1106 in win2k and mozilla.
posted by bobo123 at 3:28 PM on August 24, 2004

I had the same problem with a site I was working on that required images to show up at precision positions. After several days of pulling out my hair, I had to create different style sheets for each browser. It was the only solution that I could find. Works great now. Take a look at the source and at the different style sheets, the only difference is the one-pixels to the right or the left depending on which browser you're using.

pwb.
posted by pwb503 at 3:40 PM on August 24, 2004

Response by poster: Hmm... I've got IE 6.0.2600.0000 on WinXP Pro (no Service Packs installed) and the 1px shift is there, exactly as shown in the screenshot.

What the..?

(Pwb, thanks for the tip. I'll wait for a few more suggestions though, since I want to leave the "different stylesheets" approach as a last resort.)
posted by kchristidis at 3:45 PM on August 24, 2004

I'm seeing the 1 pixel shift in IE6, too.
posted by taz at 3:51 PM on August 24, 2004

Best answer: Why not give IE a different position?

* html #menu-indication {
left: 422px; /* IE wants 422 px ?! */
}

You're already doing the whole voice-family dance, so I doubt CSS purity is your concern.
posted by Khalad at 3:54 PM on August 24, 2004

Response by poster: Khalad, could you please give me a few more details on that tip? I'm not aware of this, and It sounds interesting.

Quick questions that come to mind:

1. Is "* html #menu-indication" read only by IE browsers?
2. Do I place this code between "menu-indication" and "html>body #menu-indication" or elsewhere (e.g. after the "Be nice to Opera" rule)?

Thanks.
posted by kchristidis at 2:22 AM on August 25, 2004

Response by poster: While I'm waiting for Khalad's response, I went ahead and applied his solution.

The 1px shift seems to be gone.

But I'm wondering; what do rhapsodie and bobo123 see now (i.e. has a 1px shift appeared)?

Please check if you have the time, thanks.
posted by kchristidis at 4:49 AM on August 25, 2004

Best answer: IE has a bug in that it has a phantom root element that contains the html element. So it matches the * against that make believe element, and obviously html will always match, so in effect putting * html before any rule restricts it to IE only. Other browsers will never match the * since they correctly have html as the root element of the page.

Hopefully that'll make it clear where to place that style rule. You need to make sure IE sees that rule after the "correct" rule, so the left: value will be overridden.
posted by Khalad at 5:56 AM on August 25, 2004

Response by poster: My understanding is that it should be placed just before the "be nice to Opera" rule, and that's the way I implemented it. Please correct me if I'm wrong. (And once again, thank you very much for the tip, and the follow-up explanation.)

I'd still like to hear from rhapsodie and bobo123 whether they now see a 1px shift.
posted by kchristidis at 12:34 PM on August 25, 2004