ul/li problem with CSS and IE

JavaScript and client side scripting.

Moderator: General Moderators

SpiderMonkey
Forum Commoner
Posts: 85
Joined: Fri May 05, 2006 4:48 am

ul/li problem with CSS and IE

Post 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?
Last edited by SpiderMonkey on Wed Jul 26, 2006 6:33 am, edited 3 times in total.
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Post 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; 
} 
SpiderMonkey
Forum Commoner
Posts: 85
Joined: Fri May 05, 2006 4:48 am

Post 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
Last edited by SpiderMonkey on Tue Jul 11, 2006 9:43 am, edited 1 time in total.
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Post 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!
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post 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.
SpiderMonkey
Forum Commoner
Posts: 85
Joined: Fri May 05, 2006 4:48 am

Post 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.
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post 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/
SpiderMonkey
Forum Commoner
Posts: 85
Joined: Fri May 05, 2006 4:48 am

Post 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;
}
SpiderMonkey
Forum Commoner
Posts: 85
Joined: Fri May 05, 2006 4:48 am

Post 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?
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post 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>
SpiderMonkey
Forum Commoner
Posts: 85
Joined: Fri May 05, 2006 4:48 am

Post 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; }
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post 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.
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Post 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.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
SpiderMonkey
Forum Commoner
Posts: 85
Joined: Fri May 05, 2006 4:48 am

Post 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.
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post 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.
Post Reply