View Full Version : IE/Other - positioning descrep

08-18-2005, 04:51 PM
Hi all,

I have 2 columns - both positioned absolutely - that are showing a 3 pixel descrep between IE and all other browsers.
The descrep has to do with the "top" value.

I tried the:

voice-family: "\"}\"";
voice-family: inherit;

trick and put the IE value first but this had no effect - does this not work on "top"? I know I've seen it used for margins and width I think... :\

Here is the CSS for one of the columns:

#righthome {
background-color: #f5f5f5;
text-align: center;
border-bottom: 2px solid #333333;
border-left: 2px solid #333333;
border-right: 1px solid #333333;
position: absolute;
right: 5px;
top: 132px;
width: 170px;
height: 100%;
padding: 5px;

So I'm looking for a trick to make IE and the others happy with the same distance from the top. ;) IE wants to see top: 135px and the others like top: 132px.

Thanks - please let me know if you need any other code - this project is being developed locally so I can't post an url at this time.


08-18-2005, 06:27 PM
Well... did some reading and found that adding this below the selectors (for the ab positioned columns) did the trick:

* html #righthome, * html #left {
top: 135px;

IE now thinks it should be 135px and the other browsers (Opera 8, Firefox 1.06) use the 132px.

Is this a standard hack? Have I set myself up for trouble later because of this duct tape solution?


Tristan Gray
08-18-2005, 06:50 PM
I try to use as few hacks as possible. Can you upload the actual page if only temporarily? I try to find ways that if the browsers cannot render them identically the difference is minimal and does not 'break' the layout. 3 pixels is pretty small, is it a noticeable difference? For instance with me, FF always preserves space for the scrollbar and so there was about a 5-10pixel shift in FF that was not present in IE for my last page. This meant that the iframe was out of position in FF so all I did was extend the nav bar a bit in length so that it framed it regardless, it is almost impossible to notice unless you are looking for it and neither looks bad.

I see a lot of people on this site who are being paid to design things and yet it is clear by their code that they are mostly just piecing things together from other sites. It is fine to take useful stuff from other sites but I mean the whole design start to finish is just a clone. Often a tell-tale sign is the enormous amount of 'hacks' to solve 'problems' that are way obsolete and don't even exist anymore. I do not encourage this and feel bad for clients that hire these people.

My stance on hacks is that IE will never stop recognizing the browser specific information you provide, but it may very well stop interpreting them the same way. What if IE7 renders it properly? And this is a terrible scenario because IE is by far the most popular browser so you are forced to display a broken page to those using the new browser or the older ones. Both representing a large portion of your traffic for the next few years no doubt. That being said, I suppose if you did what I do in terms of designing so that the discrepency is not really harmful AND use the hack you've got all your bases covered. I still prefer the simplest answer and for me that is to use a strict doctype and be as strict with my code as possible. I had a lot more cross-browser compatibility problems when I used a lot of hacks than I have now. That being said certain hacks can be helpful and if used sparingly they can provide solutions. But if there is any other way... take it.

08-18-2005, 06:56 PM
Hi Tristan,

I would be happy for you to take a look and try to eleiminate the hack - I don't like using hacks either.

I have zipped up the html and css so you can see the deal here.

It's all about the left and right columns "touching" the header.


Tristan Gray
08-18-2005, 07:24 PM
Ok well here's the score. 132px is not the correct value, 131px is at least for me. Makes them touch, 132px leaves a 1px gutter between the subheader and the columns both the menu on the left and the right column. There are a few weird things.

I am guessing you are using position: absolute so that the page will always render similarly despite what resolution because it will always be 5px from the sides correct? I try to avoid using positioning as much as possible but I can see why you are using it. Short of using the hack there is no way to solve this problem without changing the whole layout code-wise. Basically the absolute positioning is having NO EFFECT at all in IE. If you change the top value to 20px in FireFox it moves to near the top of the screen... in IE... it does nothing at all. Otherwise you could just give it a lower z-index than the default and let it overlap with the header by a few pixels.

The way I see it is that you have two options. The general layout you have going on is pretty popular and I bet you can find a good way to code the same sort of layout without needing to use absolute positioning. You may not have time to do this though, I have a few ideas and might give them a try but I can make no promises as I am at work right now.

The other option is to just use the hack. For now it will work perfectly fine cross browsers, but IE7 is looming on the horizon and if it renders this correctly unlike IE6 then the page will have the right column overlapping the subheader by a few pixels.

The choice is yours and it is sort of pick your poison, unless someone else here has a bright idea. Good luck, heh, sorry there's not more that I can do right now.

EDIT: Ok I'm trying a new idea and am like | | close to having it right without any major changes.

08-18-2005, 07:32 PM
I appreciate you taking the time to take a look and analyze for me. I will look into trying to achieve the same effect without the positioning. I wasn't aware it could be done but I'm very new to css layouts so I hope I end up learning something good here. :)


Tristan Gray
08-18-2005, 07:43 PM
See I'm having trouble right now but using margins and floats I think it can be done.

Tristan Gray
08-18-2005, 08:12 PM
.subheader {
position: relative;
z-index: 3;
border: 1px solid #333333;
height: 22px;
padding: 0 0 5px 55px;
margin: 0 5px 0 5px;
background-image: url(images/headerbg.gif);

That should do it. If you have an image for the background then the border etc will not show through but since there was no images here I ekpt fighting against nothing. heh. If it still overlaps in FF... set a background colour as well and then the image over top in the subheader and make sure that left and right columns z-index is set to 0. Then you are fine. Please let me know that this works. heh

08-18-2005, 08:13 PM
Have I set myself up for trouble later because of this duct tape solution?

No. You never set yourself up when using duck tape. And yes, it is actually duck tape.

Tristan Gray
08-18-2005, 08:20 PM
I could use some peking duck right now... mmm... but yeah your alignment between your sub header and right column is off by half a pixel too so make the right column's absolute right: 4.5px instead of 5. :)

08-18-2005, 09:31 PM
ooohhh - Bravo!! That did the trick - no hack needed with the new subheader styles. :)

Again - thanks so much for your time!