Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Slew of layout problems – Firefox Re: Slew of layout problems – Firefox

#54288
H2oskier
Member

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

Code:
body {
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;
}