Robin Fisher wrote:
> http://www.augk32.dsl.pipex.com/test/index.htm
> [...] In Opera, it displays how I would like but in Firefox it
> stretches to the far right of the screen and in IE7, off the edge of
> the screen. This will teach me to keep previewing in Opera!!
Looks like you're referring to Opera 8.x, so I used Opera 8.50 as
reference. Looking alright there :-)
Opera 9 renders the page completely different.
1: browsers are not given a clear reference for positioning, which means
they are all over the place.
To get all browsers in line, add...
div#wrap{
height: 1%;
position: relative;
}
...so they all use that same wrapper as reference.
That'll make Opera (all versions), Firefox, and all other
standard-compliant browsers, line up those positioned elements pretty
close to identical - same as Opera 8.5 have done all along - by guessing.
Don't know about IE7 since I haven't started testing in it yet, but IE6
isn't too far off on the basics either.
Note that IE6 needs that 'height: 1%' as a 'hasLayout'[1] trigger, or
else it won't position and calculate dimensions properly. Maybe it'll
help IE7 come to its senses to...
2: the navigation is positioned in a pretty unreliable way, making its
exact position dependent on font-size. Besides, IE6 is making the usual
mess out of it.
The addition of...
div#listnav{
width: 6em;
right: 100%;
margin-right: -88px;
}
...will give it a perfectly stable position regardless of font-resizing
and most other variables browsers can throw at it.
Note that it is positioned "backwards" - from the right, and then
adjusted back into place by the negative margin-right, which is
identical to the margin-left on div#content (83px) + the
border-left-width on div#content (5px), in order to stay in the right spot.
3: IE6 has the usual spaces in the navigation list, and the following
'hasLayout' trigger may be added to fix that...
div#listnav li a{
height: 1%;
}
...but note that this will only work as intended once the additional
'width: 6em' is in place on div#listnav.
---
Whether or not it is a good idea to use absolute positioning to lay out
major parts of a page is debatable, but it'll work quite well on a
simple page (with very few elements) like yours. You should however
study that positioning-method a bit more[2] so yo can control it properly.
regards
Georg
[1]http://www.satzansatz.de/cssd/onhavinglayout.html
[2]http://www.w3.org/TR/CSS21/visuren.html#q28
--
http://www.gunlaug.no
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
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/
