Previous Message
Next Message

IE/Win, z-index, & CSS

Sent by Gunlaug_Sørtun on 2 March 2005 20:08


Anne Kosmicki wrote:
> http://www.t2000inc.com/test/index.html 
> http://www.t2000inc.com/test/techcss.css

> 1: The header is composed of three graphics, all lined up at the top.
>  The left & right graphics are 158 px high, with the center graphic 
> [PDA man] 249 px high. The PDA man in the circle is supposed to float
>  over top part of the content box. In IE, he slips behind it. The 
> text is also farther down on the page in IE than it should be. I have
>  no idea why the text is not lining up right underneath the search 
> div.

Zoe told you what's happening, but here is a simpler fix for the
problem-- CSS only:

#header img { vertical-align: top; margin-bottom: -100px; position:
relative; z-index: 2; }

....and put this last in your stylesheet:
@media all {
* html #content #fronttext {margin-top: 0;}
}

This all works as if those images were floating, because they are
vertically aligned at the top. Floating them will ruin the header.

IE6 don't treat the top margin like the other browsers, so I hacked it.

IE5.0/win isn't quite good yet (if that matters), but that's not caused
by the header. IE5.x/win can't center with auto-margins...

> 2: The drop-down menus are from Gazingus.org. In all other browsers,
>  the menus pop-down underneath the proper heading, with the left 
> margin of the menu lining up with the beginning of the menu heading.
> 
> Since I added the "margin: auto" to the page, the lists are no longer
>  lining up with the proper heading in IE. In fact, they pop-down as 
> if the page was flush left. Does that make sense?

Can't see any dropdowns, but it makes sense since most of these
dropdowns are absolute positioned and will relate to body if not told
otherwise.

#page {position: relative;}
.... should fix it - if that's what's happening.
---------------

Tested in Opera, Firefox and IE6 - all good.

regards
	Georg
-- 
http://www.gunlaug.no
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
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: