Forum Moderators: not2easy
I have designed a menu that has a beveled image underneath with beveled buttons on top of the background with text on top of the buttons all controlled by CSS so button color changes after clicking.
Everything is working fine except the bottom of background image (whick is 337 pixels high) is cut off after the last button (about 4-5 pixels missing. I've tried everything I can think of to fix it. Buttons are 190 x 36.
Can anyone see anything wrong with my code?
PS. the div box it supposed to employ the CSS Box Hack but I got it to work without it on my Mac 5.2 but I left it in just in case it doesn't work on other browsers.
.divbox {width:190px;}
/* code for menu in list format */
#menu ul {
margin-top:0px;
margin-right:0px;
margin-bottom:3px;
margin-left: -3px; /*this moves list to left as it's usually indented to make room for bullets*/
background-image: url(images/navbar337x190.gif); /*background behind list*/
background-repeat: no-repeat;
padding:7px 0px 0px 0px; /*moves 1st button down 7 px*/
}
/*controls div around the whole menu*/
div#menu {
height: auto;
width: 190px;
}
div#menu li {
height: 31px; /*space between images plus image height of 24*/
width: 190px; /*image width*/
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
text-align:left;
line-height: 3.3; /*space between text baselines*/
list-style-type: none; /*hidden bullet*/
}
/* List treated as a block element*/
div#menu li a {
display: block;
width: 100%;
height: 100%;
text-decoration: none;
}
/*controls link data */
div#menu li a:visited {
color: #ffffff;
padding:0px 0px 0px 18px; /*text indent*/
background-image: url(images/navtan.gif);
background-repeat: no-repeat;
}
div#menu li a:link {
color: #ffffff;
padding:0px 0px 0px 18px;
background-image: url(images/navgray.gif);
background-repeat: no-repeat;
}
div#menu li a:hover {
font-weight: bold;
color: #ffffff;
padding:0px 0px 0px 18px;
background-image: url(images/navgray.gif);
background-repeat: no-repeat;
}
div#menu li a:active {
font-weight: bold;
color: #ffffff;
padding:0px 0px 0px 18px;
background-image: url(images/navgray.gif);
background-repeat: no-repeat;
}
---------------
HTML code
--------------
<table width="190" align="left" border="1" cellpadding="0">
<td><td valign="top">
<div class="divbox">
<div id="menu">
<ul>
<li><a href="index.htm">HOME</a>
<li><a href="page1.html">page1</a>
<li><a href="page2.html">page2</a>
<li><a href="page3.html">page3</a>
<li><a href="page4.html">page4</a>
<li><a href="page5.html">page5</a>
<li><a href="about.html">ABOUT</a>
<li><a href="resources.html">RESOURCES</a>
<li><a href="contact.htm">CONTACT</a>
</li></ul>
</div>
</td></tr></table>
<br><br>
</div>
Buttons are 190 x 36....
height: 31px; /*space between images plus image height of 24*/
There's a slight (5px) discrepancy here between the set height of the LI and the reported size of the button. Seems to match the cut-off you describe. Could this be it?
cEM
And nothing I do seems to bring the bottom of the image back into focus.
BTW, this looks the same in several browsers on the Mac and PC also.
Anyone know why the bottom of the image would dissapear?
Could it be because your closing </div> for <div class="divbox">
is in the wrong place? it should be inside the table..?
Also there are easier ways to do this menu, without the tables at all... if you sticky me with URL to source I am happy to take a look..
I use background images allot for menus
good luck
ZA
Thanks for pointing out the div in the wrong place, however I got it to work in most browsers with it still there.
CreateErrorMsg
Thanks for your comment about the image sizes. The owner of the site and myself have been experimenting and his buttons had a background and mine didn't and I forgot to take his off. Once I fixed the image then I could adjust the padding.
Here is how it works on the following browsers/platforms:
Mac (IE, FF, Si, Net) OK
Win 98 (FF, Net) OK
Win XP (FF, IE, OK, but in Netscape the letter size is doubled and whole menu is moved down at least 1/4 inch. The later would be a padding issue but not font size. This is after fixing the closing div mentioned above and taking the border off the images and adjusting the code.
Anyone know why Netscape 7.2 on Win XP can't read CSS font size? I added font size to the link data also but still doubled. The padding is working everywhere on Netscape except for what I put above the whole menu.
My menu is working correctly now on all browsers except for the font problem on Netscape.
I found an extra LI in the list code which had pushed the whole menu down one row (but only in Netscape).
I researched the font size problem with Netscape on the net and there is a problem with netscape rendering a larger size font unless it's set in the code and I do have it set at a certain size. That particular computer (Win XP) has no option to force the font size larger on Net 7.2 as far as I can see.
Anyone know of a workaround for the font problem on Netscape?
