My buttons are aligning on the menubar quite well, but there is some ententity beneath them that is not quite the same size or alignment. The background that turns gray on hover is the same height but 4px wider than the button, and is aligned left but 4px lower than the button. I'm stumped at to what is doing that.
<head>
div.menuBar {
background-color: transparent;
padding: 0 0 0 0;
margin: 0 0 0 0;
text-align: left;
}
div.menuBar a.menuButton {
position: relative;
left: 0px;
top: 0px;
margin: 0 15px 0 0;
border: 0 0 0 0;
padding: 0 0 0 0;
background-color: transparent;
cursor: default;
z-index: 100;
}
div.menuBar a.menuButton:hover {
border: 0 0 0 0;
background-color: #9BAECC;
}
</head>
<body>
<div class="menuBar" style="margin-left:auto; margin-right:auto; margin-top:-22px; width:730px">
<a class="menuButton" href=http://www.webdeveloper.com/forum/archive/index.php/"index.php">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"menu1a.gif" name="menub1" border="0" onMouseOut="RestoreImg()" onMouseOver="SwitchImg('document.menub1','document.menub1','menu1b.gif')">
</a>
/* etcetera for more buttons */
</div>
</body>
Everything is working quite nicely except for this little alignment problem. Can anyone shed any light on that for me? It's not online anywhere, or I'd post a link.img {display:block;}That causes them to come off of their alignment on the menubar altogether and stack themselves vertically descending from the left end of the menubar.Place the anchor and image on the same line.
<a class="menuButton" href="index.php"><img src=http://www.webdeveloper.com/forum/archive/index.php/"menu1a.gif" name="menub1" border="0" onMouseOut="RestoreImg()" onMouseOver="SwitchImg('document.menub1','document.menub1','menu1b.gif')"></a>
If that does not help your will have to post the complete document.That seems to do the trick. Can you explain why?
Not that I don't appreciate the solution, but knowing why it is a solution may solve similar situations in the future, and would in any case increase my knowledge.
Just having the solution is of great value tho, thanks.Well, I spoke a little too soon; IE matches the image and background, but Firefox still doesn't. Firefox is actually putting the image in the right place, with the background a little to low, while IE has both image and background too low.
I have a blown up image of the two different buttons here (<!-- m --><a class="postlink" href="http://www.sonora-sw.com/eight/demo.gif">http://www.sonora-sw.com/eight/demo.gif</a><!-- m -->). The bottom of the button should be just above the dark blue line.
The page itself is here (<!-- m --><a class="postlink" href="http://www.sonora-sw.com/eight/test.html">http://www.sonora-sw.com/eight/test.html</a><!-- m -->) and the css file here (<!-- m --><a class="postlink" href="http://www.sonora-sw.com/eight/bassmain.css">http://www.sonora-sw.com/eight/bassmain.css</a><!-- m -->).Change the DTD and add a charset:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<head>
<title>Bass Company of San Diego California</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href=http://www.webdeveloper.com/forum/archive/index.php/"bassmain.css" rel="stylesheet" type="text/css"/>
change margin-top:-25px; in #menuBar and add .menuButton img {vertical-align:bottom;} to the css
Typo in #spacer margins: auto;
Miss-matched <div> missing closing tag
Lost </td> end of #crightI really appreciate the help, Fang. That puts IE right on the money, but Firefox is still locating the image about 2px too low and the background about 6px too low. New image blow up is here (<!-- m --><a class="postlink" href="http://www.sonora-sw.com/eight/demo.gif">http://www.sonora-sw.com/eight/demo.gif</a><!-- m -->).
The html/css files are at the same links and are updated with your corrections.I don't see the vertical-align
Add this:
/* top of css */
* {margin:0;padding:0;}
body {margin-top:10px;}
/* near the menu stuff */
.menuButton img {vertical-align:bottom;}Nope, that didn't make any difference at all.It aligns the menu in IE and FF for me, see attachment.
btw the js menu does not work in IE5
<head>
div.menuBar {
background-color: transparent;
padding: 0 0 0 0;
margin: 0 0 0 0;
text-align: left;
}
div.menuBar a.menuButton {
position: relative;
left: 0px;
top: 0px;
margin: 0 15px 0 0;
border: 0 0 0 0;
padding: 0 0 0 0;
background-color: transparent;
cursor: default;
z-index: 100;
}
div.menuBar a.menuButton:hover {
border: 0 0 0 0;
background-color: #9BAECC;
}
</head>
<body>
<div class="menuBar" style="margin-left:auto; margin-right:auto; margin-top:-22px; width:730px">
<a class="menuButton" href=http://www.webdeveloper.com/forum/archive/index.php/"index.php">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"menu1a.gif" name="menub1" border="0" onMouseOut="RestoreImg()" onMouseOver="SwitchImg('document.menub1','document.menub1','menu1b.gif')">
</a>
/* etcetera for more buttons */
</div>
</body>
Everything is working quite nicely except for this little alignment problem. Can anyone shed any light on that for me? It's not online anywhere, or I'd post a link.img {display:block;}That causes them to come off of their alignment on the menubar altogether and stack themselves vertically descending from the left end of the menubar.Place the anchor and image on the same line.
<a class="menuButton" href="index.php"><img src=http://www.webdeveloper.com/forum/archive/index.php/"menu1a.gif" name="menub1" border="0" onMouseOut="RestoreImg()" onMouseOver="SwitchImg('document.menub1','document.menub1','menu1b.gif')"></a>
If that does not help your will have to post the complete document.That seems to do the trick. Can you explain why?
Not that I don't appreciate the solution, but knowing why it is a solution may solve similar situations in the future, and would in any case increase my knowledge.
Just having the solution is of great value tho, thanks.Well, I spoke a little too soon; IE matches the image and background, but Firefox still doesn't. Firefox is actually putting the image in the right place, with the background a little to low, while IE has both image and background too low.
I have a blown up image of the two different buttons here (<!-- m --><a class="postlink" href="http://www.sonora-sw.com/eight/demo.gif">http://www.sonora-sw.com/eight/demo.gif</a><!-- m -->). The bottom of the button should be just above the dark blue line.
The page itself is here (<!-- m --><a class="postlink" href="http://www.sonora-sw.com/eight/test.html">http://www.sonora-sw.com/eight/test.html</a><!-- m -->) and the css file here (<!-- m --><a class="postlink" href="http://www.sonora-sw.com/eight/bassmain.css">http://www.sonora-sw.com/eight/bassmain.css</a><!-- m -->).Change the DTD and add a charset:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<head>
<title>Bass Company of San Diego California</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href=http://www.webdeveloper.com/forum/archive/index.php/"bassmain.css" rel="stylesheet" type="text/css"/>
change margin-top:-25px; in #menuBar and add .menuButton img {vertical-align:bottom;} to the css
Typo in #spacer margins: auto;
Miss-matched <div> missing closing tag
Lost </td> end of #crightI really appreciate the help, Fang. That puts IE right on the money, but Firefox is still locating the image about 2px too low and the background about 6px too low. New image blow up is here (<!-- m --><a class="postlink" href="http://www.sonora-sw.com/eight/demo.gif">http://www.sonora-sw.com/eight/demo.gif</a><!-- m -->).
The html/css files are at the same links and are updated with your corrections.I don't see the vertical-align
Add this:
/* top of css */
* {margin:0;padding:0;}
body {margin-top:10px;}
/* near the menu stuff */
.menuButton img {vertical-align:bottom;}Nope, that didn't make any difference at all.It aligns the menu in IE and FF for me, see attachment.
btw the js menu does not work in IE5