Page 1 of 2

ul/li problem with CSS and IE

Posted: Mon Jul 10, 2006 11:27 am
by SpiderMonkey
consider the following:

Code: Select all

  <ul class="menubar">
    <li class="menutop"><img src="images/sidebartop.png" /></li>
    <li class="menuitem"><img class="menuoff" src="images/sidebareditorial.png" />
      <img class="menuon" src="images/sidebareditorialroll.png" /></li>
    <li class="menuitem"><img class="menuoff" src="images/sidebarcalendar.png" />
      <img class="menuon" src="images/sidebarcalendarroll.png" /></li>    
    <li class="menuitem"><img src="images/sidebarbottom.png" /></li>
  </ul>
with the following css:

Code: Select all

img.menuon {
    position: absolute;
    display: none;
    margin: 0px;    
}

img.menuoff {
    position: absolute;
    margin: 0px;
}

ul.menubar {
    position: absolute;
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    top: 170px;
}

li.menuitem {
    position: static;
    height: 21px;
}

li.menutop {
    position: static;
    height: 18px;
}

li.menuitem:hover img.menuon { display: block; }
The button images all display on top of each other in IE5.2 on a mac. Can anyone shed any light on the problem?

Posted: Mon Jul 10, 2006 12:54 pm
by RobertGonzalez
Try adding the li's to the ul element...

Code: Select all

ul.menubar { 
    position: absolute; 
    list-style-type: none; 
    margin: 0px; 
    padding: 0px; 
    top: 170px; 
} 

ul.menubar li.menuitem { 
    display: block;
    position: static; 
    height: 21px; 
} 

ul.menubar li.menutop { 
    display: block;
    position: static; 
    height: 18px; 
} 

/*
 * This thing might not do what you'd expect it to
li.menuitem:hover img.menuon { display: block; } 
*/

ul.menubar li.menuitem img.menuon { 
    position: absolute; 
    display: none; 
    margin: 0px;    
} 

ul.menubar li.menuitem img.menuoff { 
    position: absolute; 
    margin: 0px; 
} 

Posted: Tue Jul 11, 2006 3:19 am
by SpiderMonkey
Thanks for the response. I made the alterations and it hasn't changed how the page displays.

I've suspected myself the reason could lie in how IE renders <li> but I've tried using a <div> tag in each list item and applying the properties to that instead, but with no luck.

I'm aware the rollover won't work in any case, but frankly if you use such a crap browser you don't deserve pretty rollovers. The site will be quite functional without them.

Some screenshots to give an idea whats going on:

http://www.antiquesfairsguide.co.uk/AFGinSafari.png
http://www.antiquesfairsguide.co.uk/AFGinIE.png

Posted: Tue Jul 11, 2006 8:58 am
by RobertGonzalez
Whoah... could you either place links to the images or put a '[56K Warn] -' at the beginning of your original post title. The pictures are nice, but they are huge!

Posted: Tue Jul 11, 2006 11:04 am
by matthijs
This site has everything about IE5 mac.

But if I may ask: is IE5 mac a requirement? I thought everyone stopped supporting that one years ago.

Posted: Wed Jul 12, 2006 3:51 am
by SpiderMonkey
matthijs wrote:This site has everything about IE5 mac.

But if I may ask: is IE5 mac a requirement? I thought everyone stopped supporting that one years ago.
Sadly, it is in my ofcie, because we use only macs here - so the requirement of a website is it must work in Safari and IE5 mac. Despite havign a different layout engine it does share some of the same CSS bugs as Windows IE, which is useful to me.

Still, its damn annoying that my nicely laid out, compact and readable pages that work fine in Firefox, Safari, Opera etc. have to be mangled with hacks to work in a browser that belongs in the bronze age.

Posted: Wed Jul 12, 2006 8:06 am
by matthijs
Too bad. Indeed annoying.

Have you thought about using the midpass filter of Tantek to feed ie5 mac it's own stylesheet? That way, you keep your normal stylesheets clean?
See http://tantek.com/log/2004/07.html#ie5macbandpass, http://www.stopdesign.com/examples/ie5mac-bpf/

Posted: Wed Jul 12, 2006 10:36 am
by SpiderMonkey
Thats nailed it matthijs, thanks.

The relevant part of the stylesheet now goes:

Code: Select all

ul.menubar li.menuitem img.menuon {
    /*\*/
    position: absolute;
    /* IE5 mac hack */
    display: none;
    margin: 0px;   
    border: 0px;
}

ul.menubar li.menuitem img.menuoff {
    /*\*/
    position: absolute;
    /* IE5 mac hack */
    margin: 0px;
    border: 0px;
}

Posted: Wed Jul 26, 2006 6:35 am
by SpiderMonkey
Update on this problem:

I've got the rollovers working in IE by introducing a behaviour.

The thing displays fine in mac IE

However, there are some annoying spaces between the list elements in IE 6. Does anybody know how to get rid of these?

Posted: Wed Jul 26, 2006 7:34 am
by matthijs
Those have probably something to do with the whitespace in the code between the <li>'s (yes, sounds strange).
Try removing that.

Code: Select all

<ul><li>item</li><li>item 2</li><li>etc etc</li></ul>

Posted: Wed Jul 26, 2006 8:30 am
by SpiderMonkey
matthijs wrote:Those have probably something to do with the whitespace in the code between the <li>'s (yes, sounds strange).
Try removing that.

Code: Select all

<ul><li>item</li><li>item 2</li><li>etc etc</li></ul>
Thanks for the help, again :)

Removing all the whitespace (and I did remove everything) had no effect. I'm actually relieved in a way, because it made my code horrifically unreadable.

If it helps, here is how the code looks at the moment:

Code: Select all

<ul class="menubar">
  <li class="menuitem"><a href="index.html"><img border="0" class="offbutton" src="images/menu_a1.gif" alt="Home" />
    <img border="0" class="onbutton" src="images/menu_b1.gif" alt="Home" /></a></li>
  <li class="menuitem"><a href="colour.html"><img border="0" class="offbutton" src="images/menu_a2.gif" alt="Colour Samples" />
    <img border="0" class="onbutton" src="images/menu_b2.gif" alt="Colour Samples" /></a></li>
  <li class="menuitem"><a href="tooling.html"><img border="0" class="offbutton" src="images/menu_a3.gif" alt="Tooling Samples" />
    <img border="0" class="onbutton" src="images/menu_b3.gif" alt="Tooling Samples" /></a></li>
  <li class="menuitem"><a href="price.html"><img border="0" class="offbutton" src="images/menu_a4.gif" alt="Price" />
    <img border="0" class="onbutton" src="images/menu_b4.gif" alt="Price" /></a></li>
  <li class="menuitem"><a href="order.html"><img border="0" class="offbutton" src="images/menu_a5.gif" alt="Orders" />
    <img border="0" class="onbutton" src="images/menu_b5.gif" alt="Orders" /></a></li>
  <li class="menuitem"><a href="conditions.html"><img border="0" class="offbutton" src="images/menu_a6.gif" alt="Conditions of Sale" />
    <img border="0" class="onbutton" src="images/menu_b6.gif" alt="Conditions of Sale" /></a></li>
</ul>
And the stylesheet:

Code: Select all

/* Side Menu */

ul.menubar {
  position: absolute;
  width: 165px;
  height: 390px;
  margin: 0px;
  padding: 0px;
  list-style-type: none;
}

ul.menubar li.menuitem {
  position: static;
  height: 65px;
  margin: 0px;
  padding: 0px;
}

ul.menubar li.menuitem img.offbutton {
  /*\*/
  position: absolute;
  /* IE 5 mac hack */
  display: block;
  margin: 0px;
  padding: 0px;
}

ul.menubar li.menuitem img.onbutton {
  /*\*/
  position: absolute;
  /* IE 5 mac hack */
  display: none;
  margin: 0px;
  padding: 0px;
}

ul.menubar li.menuitem:hover img.onbutton { display: block; }

Posted: Wed Jul 26, 2006 10:12 am
by matthijs
Sorry it didn't work for you. (remember that bug though: i'm sure you'll encounter it one day)

What I would do if I were you is take a complete different approach to the rollover list. Instead of hardcoding the images in the html I would place them in the css as background images. There are many good demo's of "css rollover navigation lists" (google that) out there which you can use the code of. For example, http://www.simplebits.com/notebook/2003 ... overs.html or http://www.nundroo.com/navigation/. Don't have much time know, hope this helps a bit.

Posted: Wed Jul 26, 2006 10:20 am
by pickle
IE 5 is notoriously known as the worst Macintosh browser. Period.

I was unable to find any usage statistics that included IE 5 for the Mac - so that shows you how little it's used. If it were up to me, I'd completely ignore IE 5.2, uninstall it from all your computers at work, & burn any discs that may have a copy of it.

If its your boss who's the prime mover on making it work in IE, give him/her a smack. IE Mac is/was notorious for not being compatible with code that worked perfectly fine in other browsers. It was of the browser generation that spawned 3 different versions of a web page because that was easier than making 1 version that worked in all browsers.

Long story short, do all you can to not care about IE Mac.

Posted: Wed Jul 26, 2006 10:25 am
by SpiderMonkey
matthijs wrote:Sorry it didn't work for you. (remember that bug though: i'm sure you'll encounter it one day)

What I would do if I were you is take a complete different approach to the rollover list. Instead of hardcoding the images in the html I would place them in the css as background images. There are many good demo's of "css rollover navigation lists" (google that) out there which you can use the code of. For example, http://www.simplebits.com/notebook/2003 ... overs.html or http://www.nundroo.com/navigation/. Don't have much time know, hope this helps a bit.
Thanks for the links. I may use these, but given that I've *very nearly* got this method of doing it I'll probably continue hacking away at it.

My only other reservation with the way you describe, is that it would place the images (content) in the stylesheet. I'd like to see if its possible to do this without breaking down the relationship between the page and its stylesheet.

Posted: Wed Jul 26, 2006 11:07 am
by matthijs
I can understand how you feel, not wanting to change too much after all the effort so far.

I would disagree with you though about the images being the content and therefore belonging in the html. I see the images as styling/design. The navigation list is just that, a list of links. Preferably in text, thereby making them as accessible as possible (screenreaders, search engines, mobile phones, etc)

Then to add a layer of design on top of that I'd use the background image technique (one of many) to style the list the way you want.

Good luck. Maybe I can help some more later.