PDA

View Full Version : Solid Block Menu: Not aligned properly using Firefox



TheCrazyLexx
08-10-2007, 12:52 PM
1) Script Title:
Solid Block Menu
2) Script URL (on DD):
http://www.dynamicdrive.com/style/csslibrary/item/solid-block-menu/
3) Describe problem:

I've using the solid block menu on my site and the implementation works perfectly when using IE7. But Firefox is a differen story, as the text/content part of the menu isn't properly aligned to the background image:

http://www.gamepals.de/problem_ie_vs_ff.jpg

What's causing this behaviour in Firefox? Could somebody take a look at my testpage (http://www.gamepals.de/index.php?area=3)or the code below?


CSS


/* NavBlock */
.solidblockmenu{
margin: auto;
padding: 0;
float: center;
font: bold 13px Arial;
width:774px;
height:34px;
border: 1px solid #494949;
border-width: 0px ;
background: black url(../img/blocknav/blockdefault.gif) center center repeat-x;
}

.solidblockmenu li{
display: inline;
}

.solidblockmenu li a{
float: left;
color: white;
padding: 9px 11px;
text-decoration: none;
border-right: 1px solid white;
}

.solidblockmenu li a:visited{
color: white;
}

.solidblockmenu li a:hover, .solidblockmenu li .current{
color: white;
background: transparent url(../img/blocknav/blockactive.gif) center center repeat-x;
}

.solidblockmenu .selected a, #solidblockmenu .selected a hover{ /*currently selected tab*/
background: transparent url(../img/blocknav/blockactive.gif) center center repeat-x;
}

/* ######### Style for Drop Down Menu ######### */

.dropmenudiv{
position:absolute;
top: 0;
border: 0px solid #FEC009; /*THEME CHANGE HERE*/
border-top-width: 5px ;
font:bold 13px Arial;
text-align:center;
line-height:18px;
z-index:100;
background-color: #000000;
background:transparent url(../img/blocknav/opaque.png);
width: 200px;
visibility: hidden;
}


.dropmenudiv a{
width: auto;
display: block;
text-indent: 3px;
border: 0 solid #494949; /*THEME CHANGE HERE*/
border-bottom-width: 1px;
padding: 2px 0;
text-decoration: none;
color: white;
}

* html .dropmenudiv a{ /*IE only hack*/
width: 100%;
}

.dropmenudiv a:visited{
color: white;
}

.dropmenudiv a:hover{ /*THEME CHANGE HERE*/
background-color: #FEC009;
color: white;
}

<!--[if IE]>
p.iepara{ /*Conditional CSS- For IE (inc IE7), create 1em spacing between menu and paragraph that follows*/
padding-top: 1em;
}

#hauptmenu {
width:774px;
height: 37px;
border: 1px solid #FF0000;
}

HTML:


<div id="hauptmenu" class="solidblockmenu">
<ul>
<li><img src="templates/{$theme}/img/blocknav/blockarrow.gif" width="95" height="34" align="left" alt="" /></li>
<li><a href="http://www.gamepals.de/">Startseite</a></li>
<li><a href="http://www.gamepals.de" rel="dropmenu1" >News</a></li>
<li><a href="http://www.gamepals.de/index.php?p=articles&area=1" rel="dropmenu2" >Artikel</a></li>
<li><a href="http://gamepals.blogspot.com/">Podcast</a></li>
<li><a href="http://www.gamepals.de/index.php?p=gallery&area=1" rel="dropmenu3" >Media</a></li>
<li><a href="http://www.gamepals.de/index.php?area=1&p=static&page=impressum" rel="dropmenu4">Intern</a></li>
</ul>
</div>

<!--1st drop down menu -->
<div id="dropmenu1" class="dropmenudiv">
<a href="http://www.gamepals.de/index.php?p=index&categ=3&area=1">Allgemein</a>
<a href="http://www.gamepals.de/index.php?p=index&categ=4&area=1">Microsoft</a>
<a href="http://www.gamepals.de/index.php?p=index&categ=1&area=1">Nintendo</a>
<a href="http://www.gamepals.de/index.php?p=index&categ=2&area=1">Sony</a>
</div>

<!--2st drop down menu -->
<div id="dropmenu2" class="dropmenudiv">
<a href="http://www.gamepals.de/index.php?p=articles&categ=5">Playstation</a>
<a href="http://www.gamepals.de/index.php?p=articles&categ=13">Xbox</a>
<a href="http://www.gamepals.de/index.php?p=articles&categ=33">Wii</a>
<a href="http://www.gamepals.de/index.php?p=articles&categ=11">Nintendo DS</a>
<a href="http://www.gamepals.de/index.php?p=articles&categ=6">PSP</a>
<a href="http://www.gamepals.de/index.php?p=articles&categ=9">Gameboy Advanced</a>
<a href="http://www.gamepals.de/index.php?p=articles&categ=10">GameCube</a>
<a href="http://www.gamepals.de/index.php?p=articles&categ=16">Spezial</a>
</div>

<!--3st drop down menu -->
<div id="dropmenu3" class="dropmenudiv">
<a href="http://www.gamepals.de/index.php?p=gallery&area=1">Gallerien</a>
<a href="http://www.gamepals.de/index.php?p=downloads&area=1">Downloads</a>
<a href="http://www.gamepals.de/index.php?categ=1&parent=0&p=downloads&area=1">Videos</a>
</div>

<!--4st drop down menu -->
<div id="dropmenu4" class="dropmenudiv">
<a href="http://www.gamepals.de/index.php?area=1&p=static&page=team">Team</a>
<a href="http://www.gamepals.de/contact_1.htm">Kontakt</a>
<a href="http://www.gamepals.de/index.php?area=1&p=static&page=jobs">Jobs</a>
<a href="http://www.gamepals.de/index.php?area=1&p=static&page=impressum">Impressum</a>
</div>

<script type="text/javascript">
//SYNTAX: tabdropdown.init("menu_id", [integer OR "auto"])
tabdropdown.init("hauptmenu", 0)
</script>
<br clear="all">

Sliight
08-11-2007, 01:38 AM
Just looked at it in Firefox, and it's fine... I assume you fixed the issue?

TheCrazyLexx
08-11-2007, 08:38 AM
Well, actually, no I didn't touch the side since yesterday?! Just checked and the buttons are still lower than the background image.

TheCrazyLexx
08-12-2007, 10:16 AM
Anyone?

tech_support
08-12-2007, 11:11 AM
Try changing this:


.solidblockmenu li a{
float: left;
color: white;
padding: 9px 11px;
text-decoration: none;
border-right: 1px solid white;
}
to this:


.solidblockmenu li a{
float: left;
color: white;
padding: 9px 11px;
padding-top:0px;
text-decoration: none;
border-right: 1px solid white;
}

TheCrazyLexx
08-12-2007, 02:41 PM
Nope, that doesn work. All it does it crop up some of the button space from the top.

FF:
http://www.gamepals.de/test/pading-top_ff.jpg

IE:
http://www.gamepals.de/test/pading-top_ie.jpg