Hello and thank you for taking the time to read my question. I am facing an issue with creating a fixed menu at the top of a website. When I use div elements for the menu items to achieve a specific visual effect, Chrome renders the elements with extra padding at the top, differently than Firefox. I have shared the code and a jsfiddle link to demonstrate the difference. I would greatly appreciate any guidance on how to achieve the desired effect, which is closer to the rendering in Firefox. I want the hover color of the menu items to extend to the bottom of the fixed black bar, with the text equidistant from top to bottom. Thank you for your assistance!
EDIT: Please refer to the conversation below for the desired look I am aiming for (correctly rendering in Chrome) http://jsfiddle.net/9wQxu/5/
The code is as follows: (apologies for the poor formatting)
HTML:
<div id="topbar">
<div class="facebook">
<a href="http://www.facebook.com/pages/Kristen-Hemphill/359919877367564">
<img src="img/facebook_logo.png" style="width:28px; height:28px; padding-left:5px; padding-top:2px; float:left;" />
</a>
<a href="http://twitter.com/krishemp">
<img src="img/twitter.png" style="width:28px; height:28px; padding-left:5px; padding-top:2px; float:left;" />
</a>
</div>
<div class='menuitem'> <a href="index.php">HOME</a>
</div>
<div class='menuitem'> <a href="media.html">LISTEN</a>
</div>
<div class='menuitem'> <a href="gallery.html">GALLERY</a>
</div>
<div class='menuitem'> <a href="bio.html">BIO</a>
</div>
<div class='menuitem'> <a href="calendar.html">CALENDAR</a>
</div>
<div class='menuitem'> <a href="booking.html">BOOKING</a>
</div>
</div>
CSS:
@import url(http://fonts.googleapis.com/css?family=Josefin+Sans:400);
a:link {color:#000;text-decoration:none; font-family: 'Josefin Sans', sans-serif;} /* unvisited link */
a:visited {color:#000;text-decoration:none;font-family: 'Josefin Sans', sans-serif;} /* visited link */
a:hover {color:#36d8e7;text-decoration:none;font-family: 'Josefin Sans', sans-serif;} /* mouse over link */
a:active {color:#36d8e7;text-decoration:none;font-family: 'Josefin Sans', sans-serif;} /* selected link */
.menuitem a{width:auto;
font-size:30px;
z-index:9999;
float:left;
padding: 0px 10px 0px 10px;
color: #fff;
background-color: #000;
}
.menuitem a:hover {
color: #fff;
background-color: #36d8e7;
}
#topbar {
background-color:#000;
position:fixed;
z-index:999;
width:100%;
height:40px;
color:#fff;
top:0;
left:0;
}
.facebook {
top:0px;
position:relative;
float:left;
}