Previous Message
Next Message

1px vertical offset in IE5/5.5

Sent by Gunlaug_Sørtun on 21 March 2006 13:01


Ben Tisdall wrote:
> I would be grateful if the wise heads here could explain the problem 
> I'm experiencing displaying the following site in IE5/5.5:
> 
> http://www.redcircleit.com/te12st/
> 
> IE 5/5.5 Screenshot:
> 
> http://www.redcircleit.com/te12st/ie5_55.htm

The cause is box-model differences in 'quirks mode' vs.
'standard-compliant mode', and it is not an "offset".

The header is slightly taller in the 'standard-compliant' browsers,
compared to IE5/5.5 which can only calculate and render in 'quirks
mode'. Add 2px in header-height for those old browsers - the same as the
width of 2 times the 1px border-width - and it'll come out right.

> Site's displaying as intended in FF Win/Mac/Linux, IE6, Opera 8 & 
> Safari.
> 
> I'm fairly new to the joys of CSS so please also feel free to 
> critique any and all aspects of what I daresay is some ghastly code!

Well, since you wrote that... :-)

....I'd like to draw your attention towards the weakness of "fixed-sized
fonts(px) combined with a fixed-sized and absolute positioned layout"...
<http://www.gunlaug.no/tos/alien/ie6_and_all.png>
....as that combination has never worked well - and never will - in any
browser.

Most of your layout/CSS looks like it is based on solutions that are
pretty outdated by now - like the voice-family hack. Not that what
you've got doesn't work - more or less - with the mentioned limitations,
but it leads into the past and is not a good base for future web design.

Advice: keep the basics of the HTML you've got now, but restyle it.
Take out all 'position: absolute' and 'hacks' and try to design it with
expansion and flexibility in mind.
The following should give you a few good ideas...
<http://www.alistapart.com/articles/negativemargins/>
....and add to the joys of CSS

regards
	Georg
-- 
http://www.gunlaug.no
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Previous Message
Next Message

Message thread: