101 Pre-loading Background Images

Fantastic article, and it really helped me in writing my own UL/LI DHTML menu article over at another site (email me if you want the link, don’t want to cross post on here :))

Anyway, on a related note I have run across an odd little “bug” which I cannot find any references to sorting out on the web. So hopefully the brains around here could help (and spread the knowledge.) I hope this is suitable for this forum, if not please ignore.

I have a UL/LI menu arrangement which works well but it relies on two images in the rollover sequence, an on and off effect. They are defined like so:

a.item
{ background-image: url(../img/btn_arrw1_off.gif); background-position: 15px 6px;
}

and

a.item:hover
{ background-image: url(../img/btn_arrw1_on.gif); background-position: 15px 6px;
}

The problem though is that they do not seem to pre-load properly. I inserted some pre-load script but to no avail. When I mouseover the LI items the images are pulled from the server, even the off image!

However if I use JavaScript to swap the images then pre-loading works fine, but of course that just negates the whole beauty of the a:hover feature.

Any help appreciated, ta :)

posted at 12:55 am on November 18, 2002 by Paul Watson

102 Fixing menu problems

An absolutely terrific article!

I noticed the jumping, as well as Netscape drawing every other dividing line.

1. To fixing jumping: remove borders, padding, etc.
2. To fix the every other line problem, move the border from the bottom to the top. It does look a little different, but it works!

#button li { border-top: 1px solid #90bade; margin: 0; }

See it in action on my site:
http://www.supernaturalwoman.com

I’ve tried it on Explorer 5.5, Netscape 7, and Opera 7 under Windows.

Peter

posted at 11:17 am on November 30, 2002 by Peter Jones

103 Fixing problems

Great article. To fix the jumping problem, get rid of the left and right border. To fix the every other line problem in Netscape, flip the border from the bottom to the top. Looks very similar, and it works!

See it: http://www.supernaturalwoman.com

Peter

posted at 11:22 am on November 30, 2002 by Peter Jones

104 list-style-image problems in Opera

I’m using a list item image that’s 10px wide (the fact that it is wider than a standard bullet might be important) .

IE6 and M121 both render the list as expected using the margin-left AND padding-left rule described by eric meyer.

So far so good.

However, O7 fails to push the text to the right along with the added width of the image (over the standard bullet). I mention this because it looks fine with the standard bullet. In other words, Opera seems to have a “constant” padding between the image and the text, no matter what.

This is the css I’m using:

The ul is contained within the same div as the paragraphs. Evidently the div settings do not cause the problem.

So…what should I do? I am DESPERATE!!! And yes, I have tried everything (short of uninstalling Opera… )

posted at 07:34 pm on December 7, 2002 by Lars

105 IE5.2mac + horizontal lists + anchor

See: http://www.levendis.com/listnav/

this is a direct implementation of this article’s horizontal list navbar. the ONLY thing added were links (a href’s). All’s well in Mozilla browsers and IE PC 5.5 +

On the mac, IE 5.2, caput.

Pleeeeaaase! Someone help! :)

Thanks!

B.

posted at 10:57 am on December 10, 2002 by Boris Anthony

106 Horizontal Menu on NS4?

I am trying to design two sites right now and I’d really like to NOT use tables for layout. My Graphic Designer has a tabbed design…I am trying to get close with CSS, but I can’t seem to figure out a good way to degrade on NS4? The majority of our audience is high school students, who seem to use NS4 (at least 70% of our hits at last check). I have server-side scripting at my disposal (ColdFusion), should I browser sniff and use alternate layouts? Any suggestions or links to help are greatly appreciated.

BTW: Great article, this may be my new favorite site.

posted at 10:00 pm on December 12, 2002 by Shawn J

107 What causes button (lists) to jump left

When I move my mouse over the stack of blue buttons (in the example from http://www.alistapart.com/stories/taminglists/) in IE6, they jump to the left about 40px or so. The “real” example at http://www.assetsurveillance.com.au/ doesn’t do this. I am curious to know why….

posted at 11:27 am on December 20, 2002 by DC

108 Positioning not working in Mozilla 1.2.1?

Hey there. I tried to remove the left indent of a list as described under Positioning. I did it exactly as the article tells you to do. Looks fine in IE, but in Mozilla it doesn’t appear to be moving to the left. I am doing something wrong or is this just evil non-compliance? Please help me out :)

posted at 08:11 am on January 20, 2003 by Marek

109 problems with opera and netscape

hi, I choosed for using lists for some hyperlinks in my navigation menu, lists work fine with ie, but netscape and opera place the links on top of eachother… how comes ? my stylesheet page looks like this for the <ul> : ul.menulinks { list-style: none; margin-left: 1%; text-align: left; padding: 0;
} internet explorer gives each link on a different line, opera or netscape doesn’t…

posted at 07:24 am on January 31, 2003 by wim

110 Making :hover apply to the whole box?

I googled here, which turned out to be exactly the right place, but I didn’t find my own issue addressed. I have a nav-menu which is a series of anchors in boxes, but the :hover background color only comes into play when the mouse is over the text, not when it’s over the trailing whitespace. It’s the same with this article’s menu.

Can anyone think of a solution to make the entire box “hot”?

posted at 11:26 am on February 14, 2003 by Matt