Hi everyone. Medium-time reader, first time poster here. Please let me know if I'm doing anything wrong.
I've been attempting to learn how to build sites using CSS for positioning, but usually get frustrated by browser quirks, and eventually fold and revert to either: - table-based techniques - simply droppping or redesigning the problematic element. I'm working as a research assistant at my university and am currently building an online interview/other media archive for my boss's work on Australian hip-hop. I'm working off an existing Wordpress template since I thought this would be a good way to ease into CSS. Everything seemed to be OK till I tested the site on Win IE6, at which point I found out it doesn't like my horizontal nav menu, moving it up and to the right of where it should be. I've read that IE doesn't like an absolute element nested in a relative one, which I guess is what's giving me grief. The site is here: http://localnoise.net.au/ The CSS for the menu is attached below. As you can see, it's pretty long-winded, and my guess is there's a shorter, more IE-friendly way of doing this. Ideas? Thanks, Pat ---------- CSS: #header ul { height:40px; list-style-type :none; position: relative; text-align:center ; } #header ul li { display:inline; } #header ul li a { background-position:center ; background-repeat:no-repeat ; display:block; height:40px; padding:0pt; position :absolute; top: 80px; } #header ul li a.nav_interviews { background:transparent url(images/header/interviews.gif) no-repeat scroll center bottom ; left:310px ; width:130px; } #header ul li a.nav_interviews:hover, #header ul li a.nav_interviews.current{background-position :center top; } #header ul li a.nav_papers { background:transparent url(images/header/papers.gif) no-repeat scroll center bottom ; left:440px ; width:84px; } #header ul li a.nav_papers:hover, #header ul li a.nav_papers.current {background-position :center top; } #header ul li a.nav_press { background:transparent url(images/header/press.gif) no-repeat scroll center bottom ; left:524px ; width:72px; } #header ul li a.nav_press:hover, #header ul li a.nav_press.current {background-position :center top; } #header ul li a.nav_audio { background:transparent url(images/header/audio.gif) no-repeat scroll left bottom ; left:598px ; width:70px; } #header ul li a.nav_audio:hover, #header ul li a.nav_audio.current {background-position :center top; } #header ul li a.nav_video { background:transparent url(images/header/video.gif) no-repeat scroll center bottom ; left:668px ; width:68px; } #header ul li a.nav_video:hover, #header ul li a.nav_video.current {background-position :center top; } #header ul li a.nav_links { background:transparent url(images/header/links.gif) no-repeat scroll right bottom ; left:736px ; width:89px; } #header ul li a.nav_links:hover, #header ul li a.nav_links.current {background-position :center top; } #header ul li a.nav_about { background:transparent url(images/header/about.gif) no-repeat scroll left bottom ; left:825px ; width:75px; } #header ul li a.nav_about:hover, #header ul li a.nav_about.current {background-position :center top; } ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
