Home › Forums › CSS › Slew of layout problems – Firefox › Re: Slew of layout problems – Firefox
Al,
Thanks for that link, it was real helpful. I’m about 95% done with figuring out everything in the drop down, but I’ve run into 2 small formatting issues. Both of these need to be looked at in Firefox as I’ve not tried implementing the jQuery part of the code yet (although my formatting is off in IE too!).
1.) On the right side of my navigation screen, you can see the nav icons don’t extend all the way across the nav bar. This is especially noticeable if you rollover the ‘Contact Us’ link.
2.) Rolling over ‘Our Services’ you can see the drop down menu is wider than the nav icon (which is set at 148px). I can’t figure out why, but I have a feeling that both of these issues are related.
I think I’ve identified the problem with the #nav li a.home { call in my CSS, but I can’t figure out what to do with it. Can someone take a look?
Link:
http://www.stonescapesofcincinnati.com
CSS
background: url(images/top_head_bg.jpg) repeat-x left top;
background-color: #E8E4D6;
margin: 0;
padding: 0;
}
.centeredImage {
text-align: center;
margin: 0;
padding: 20px 0;
}
.justify {
text-align: justify;
}
#page-wrap {
width: 768px;
margin: 0 auto;
}
#header {
background: url(images/top_head.jpg) no-repeat left top;
height: 150px;
width: 100%;
margin:0 auto;
}
/*START NAVIGATION*/
#nav {
background: url(images/nav_bg.jpg) no-repeat;
height: 38px;
width: 100%;
margin: 0 auto;
padding: 0;
list-style-type: none;
list-style-position: outside;
position: relative;
}
#nav, #nav ul{
margin:0;
padding:0;
list-style-type:none;
list-style-position:outside;
position:relative;
line-height:36px;
}
#nav a:link, #nav a:active, #nav a:visited{
display:block;
border:1px solid #333;
color:#fff;
text-decoration:none;
background-color:#615B4A;
}
#nav li{
float:left;
position:relative;
width: 148px; /*I added to make tabs 148 px wide*/
}
#nav ul {
position:absolute;
display:none;
width:148px;
top:38px;
}
#nav li ul a{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
width:148px; /* I think this sets the dropdown width but it’s appearing too wide*/
float:left;
padding: 0px 5px;
line-height: 30px;
}
#nav li ul a:hover {
color:#ffffff;
text-decoration: underline;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{
display:block;
}
#nav li a.home {
background: url(images/nav_home.png) no-repeat bottom center;
width: 148px;
/*left: 10px;*/
margin-left: 14px;
text-indent: -9999px;
}
ul#nav li a.services {
background: url(images/nav_services.png) no-repeat bottom center;
width: 148px;
text-indent: -9999px;
}
ul#nav li a.about {
background: url(images/nav_about.png) no-repeat bottom center;
width: 148px;
text-indent: -9999px;
}
ul#nav li a.diy {
background: url(images/nav_diy.png) no-repeat bottom center;
width: 148px;
text-indent: -9999px;
}
ul#nav li a.contact {
background: url(images/nav_contact.png) no-repeat bottom center;
width: 148px;
text-indent: -9999px;
}
#nav a.home:hover,
#nav a.about:hover,
#nav a.services:hover,
#nav a.diy:hover,
#nav a.contact:hover {
background-position: top center;
}
/*END NAVIGATION*/
#container {
clear: both;
background: url(images/sides.jpg) repeat-y;
width: 100%;
margin: 0 auto;
margin-top: 0px;
}
#left-main {
float: left;
width: 360px;
padding-left: 25px;
padding-top: 10px;
font-weight: bold;
display: inline; /* For IE6. DM Bug */
}
#right-main {
float: right;
width: 330px;
padding-right: 25px;
padding-top: 10px;
font-weight: bold;
display: inline; /* For IE6. DM Bug */
}
#bottom {
clear: both;
background: url(images/bottom.jpg) no-repeat;
height: 29px;
width: 100%;
margin-top: 0px;
margin-bottom: 20px;
margin: 0 auto;
}