Menu Images not working.. [Archive]

View Full Version : Menu Images not working..

jonnybinthemix

05-24-2006, 10:47 AM

Hi guys,

Thought i had CSS down to a tea, havent had a any problems with it for ages!!

However!!

I am trying to make a horizontal menu below my main logo, using a list, using background images.

The images show up as little strips, looks like the image has been shrunk, and when i do get the images to show, it only shows the first one, I have a left button, a spacer, a middle button and a right button...

Heres the source...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Farting Fish</title>
<style>
body {
margin-top: 0;
margin-left: 0;
margin-right: 0;
background-color: #4F5143;
color: #B5B5B5
}
#header {
width: 100%;
border: 0;
padding: 0;
height: 158px;
vertical-align: top;
background-image: url("images/headerbghoriz.gif");
background-repeat: repeat-x;
}
#logo {
vertical-align: top;
margin: 0 auto;
width: 575px;
height: 128px;
}
#left_px {
width: 61px;
height: 158px;
float: left;
}
#right_px {
width: 61px;
height: 158px;
float: right;
}
#menu {

}
a {
float:left;
text-decoration:none;
}

ul{
float:left;
padding:0;
margin:0;
list-style-type:none;
}
li {
display: inline;
}
li.left {
background-image: url("images/leftnavbutton.gif");
background-repeat:no-repeat;
}
li.right {
background-image: url("images/rightnavebutton.gif");
background-repeat:no-repeat;
}
li.middle {
background-image: url("images/navbutton.gif");
background-repeat:no-repeat;
}
li.sep {
background-image: url("images/navsep.gif");
background-repeat:no-repeat;
}

</style>
</head>
<body>

<div id="header">
<div id="left_px">
<img src="images/leftpixeltech.gif" alt="left_pixel_tech" width="61" height="158">
</div>

<div id="right_px">
<img src="images/rightpixeltech.gif" alt="left_pixel_tech" width="61" height="158">
</div>

<div id="logo">
<img src="images/header.jpg" alt="header" width="575" height="128">
</div>


<div id="menu">
<ul>
<li class="left"><a href="#">1</a></li>
<li class="sep"> </li>
<li class="middle"><a href="#">2</a></li>
<li class="sep"> </li>
<li class="middle"><a href="#">3</a></li>
<li class="sep"> </li>
<li class="middle"><a href="#">4</a></li>
<li class="sep"> </li>
<li class="right"><a href="#">5</a></li>
</ul>
</div>

</div>

</body>
</html>

Any help is apreciated :D

Thanks

Jon

jonnybinthemix

05-24-2006, 02:38 PM

I have tried a couple of other ideas, and i seem to be getting closer to the finished product...

I have this:
HTML:

<div id="menu">
<ul>
<li><a href="#" class="left"> </a></li>
<img src="images/navsep.gif" alt="">
<li><a href="#" class="middle"> </a></li>
<img src="images/navsep.gif" alt="">
<li><a href="#" class="middle"> </a></li>
<img src="images/navsep.gif" alt="">
<li><a href="#" class="middle"> </a></li>
<img src="images/navsep.gif" alt="">
<li><a href="#" class="right"> </a></li>
</ul>
</div>

CSS:

#menu {
vertical-align: bottom;
margin: 0 auto;
width: 600px;
height: 30px;
}
ul
{
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}
a
{
width: auto;
float:left;
height: 30px;
text-decoration:none;
color:black;
padding: 0;
}
li {display:inline;}

a.left {
width:128px;
background-image: url("images/leftnavbutton.gif");
}
a.right {
width: 128px;
background-image: url("images/rightnavebutton.gif");
}

Now the images are showing, however they are not going horizontal, i can get the left button and a seperator inline (although with an annoying gap) and then the net button sits underneath, however the next seperator after the second button sits on the top row next to the other seperator....

I have uploaded the page so you can see what i mean... >>HERE<< (http://www.fartingfish.com/temp/index2.html)

Many Thanks in advance...

Jon

bustamelon

05-24-2006, 04:29 PM

Wanna see something really strange?

I put your EXACT code on my server and it looks fine. Can't say I have any idea why that would be.

http://bustamelon.com/test/horiz.html

jonnybinthemix

05-24-2006, 04:34 PM

now thats wierd!!!!

It doesent even work when i open it locally on my pc! :S

Any ideas anyone??

bustamelon

05-24-2006, 04:44 PM

correction: my version looks good in FF, not in IE. I'm actually seeing broken images in IE, and maybe what i'm seeing in FF is cached.... will get back

Edit:
OK, some info - I was missing the navsep.gif image.... and oddly that seemed to fix everything. Except in IE, it showed the red Xes..... so now it looks the same as yours. But, this is at least a clue. It's those separator images that are throwing it off. I'll investigate some more.

jonnybinthemix

05-24-2006, 04:47 PM

your right....

IE on your server is the same as IE and FF on my server...

Still got that wierd gap between the first button and the first spacer though on both server, both browsers...

bustamelon

05-24-2006, 05:09 PM

ok I think I got it.

I changed your menu html block like so:

<div id="menu">
<ul>
<li><a href="#" class="left"> </a></li>
<li class="navsep"> </li>
<li><a href="#" class="middle"> </a></li>
<li class="navsep"> </li>
<li><a href="#" class="middle"> </a></li>
<li class="navsep"> </li>
<li><a href="#" class="middle"> </a></li>
<li class="navsep"> </li>
<li><a href="#" class="right"> </a></li>
</ul>
</div>

See where I changed the image tags to list elements. I hope that doesn't screw up your plans for anything... anyway, I changed the css like so:

#menu {
vertical-align: bottom;
margin: 0 auto;
/*width: 600px;*/
width: 708px;
height: 30px;
}
ul
{
float:left;
padding:0;
margin:0;
list-style-type:none;
}

li {
display:inline;
float: left;
}

li.navsep {
background: url(images/navsep.gif) no-repeat;
width: 30px;
height: 30px;
line-height: 0;
margin: 0;
padding: 0;
display: inline;
float: left;
}

/* ... */

a.left {
width:127px;
background-image: url("images/leftnavbutton.gif");
}

jonnybinthemix

05-24-2006, 05:22 PM

bustamelon

05-24-2006, 05:29 PM

fantastic, thats solved it....

Im sure i tried it that way earlier, but what a wierd problem!! lol

Still have the annoying little problem about the gap between the first menu image and the first spacer image... any ideas about that? its there in IE and FF.

Thanks for your help :D

I made an edit that fixed that gap, probably while you were typing....

a.left {
width:127px;
background-image: url("images/leftnavbutton.gif");
}

jonnybinthemix

05-24-2006, 05:32 PM

absolutly fabulous!!

I thought about changing the size of that! lol but in photoshop that image says its 128px wide!!!! lol

Thanks so much for your help mate :D

Thanks again

Jon

bustamelon

05-24-2006, 05:34 PM

Nope, it's 127. You're welcome. Glad I could help. I've spent a lot of time recently on this same approach, inline ULs, using ALA's rounded tabs, etc....

It's worth mentioning that you could also have used one long bg image for the whole ul element, that encompasses the separators, and then superimpose the buttons on top of that..... 6 of one, half dozen of the other I guess.

jonnybinthemix

05-24-2006, 05:52 PM

yea that may of been easier and less hassle!!

Just another quick question if i may!....

Vertically Centering the Text in the buttons seems to be an issue! :(

Site (http://fartingfish.com/temp/index2.html)

I have added the following to the anchor style section...

a
{
width: auto;
float: left;
height: 30px;
text-decoration: none;
padding: 0;
vertical-align: middle;
text-align: center;
color: #B5B5B5;
font: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
}

from closer inspection it looks like only the top half of the image will take text, strange? or me doing something wrong!?

Jon Whispers Quietly....ive never been more tempted to go back to tables!!! lol

Thanks

bustamelon

05-24-2006, 06:12 PM

give it a line-height equal to the height of the image, or list item or whatever. And then you may have to make adjustments using padding on top and bottom of the anchors.... because if memory serves, IE does not support vertical-align correctly. You might also need to assign a height to the li's