Slew of layout problems – Firefox

[H2oskier]

Back again…

So obviously I still have some things to learn because as I’m developing this site, I’m having problems in Firefox. I typically have issues with IE, but everything is looking pretty good in IE6. Could someone please help with the following?

First off, the link:
http://www.stonescapesofcincinnati.com

1.) In FF, why is my navigation bar off center? This is aligning properly in IE, and in Dreamweaver.
2.) How come my background image for my container is not repeating vertically? I have set the repeat-y in my style sheet.

Here is my CSS:

Code:

/* CSS Document */

body {
background: url(top_head_bg.jpg) repeat-x left top;
background-color: #E8E4D6;
margin: 0;
padding: 0px;
}

.centeredImage {
text-align:center;
margin-top:20px;
margin-bottom:0px;
padding:0px;
}

div#page-wrap {
width: 800px;
margin: 0 auto;
}

div#header {
background: url(top_head.jpg) no-repeat left top;
height:150px;
width:768px;
margin:0 auto;
}

ul#nav {
background: url(nav_bg.jpg) no-repeat;
height: 38px;
width: 768px;
margin: 0 auto;
list-style: none;
}
ul#nav li {
display: inline;
float: left;
}
ul#nav li a {
text-indent: -9999px;
display: block;
height: 38px;
}
ul#nav li a.home {
background: url(images/nav_home.png) no-repeat bottom center;
width: 148px;
left: 10px;
margin-left: 14px;
}
ul#nav li a.services {
background: url(images/nav_services.png) no-repeat bottom center;
width: 148px;
}
ul#nav li a.about {
background: url(images/nav_about.png) no-repeat bottom center;
width: 148px;
}
ul#nav li a.diy {
background: url(images/nav_diy.png) no-repeat bottom center;
width: 148px;
}
ul#nav li a.contact {
background: url(images/nav_contact.png) no-repeat bottom center;
width: 148px;
}
ul#nav li a.home:hover, a.home:active,
ul#nav li a.services:hover, a.services:active,
ul#nav li a.about:hover, a.about:active,
ul#nav li a.diy:hover, a.diy:active,
ul#nav li a.contact:hover, a.contact:active {
background-position: top center;
width: 148px;
}

div#container {
background: url(sides.jpg) repeat-y;
height: 13px;
width: 768px;
margin: 0 auto;
}

div#bottom {
background: url(bottom.jpg) no-repeat;
height: 29;
width: 768;
margin: 0 auto;
}

div#left-main {
float: left;
width: 400px;
padding-left: 5px;
padding-top: 10px;
text-align: center;
font-weight: bold;
}

[Rob MacKay]

Ok

1) never use dreamweaver design view. It will make you want to destroy things… no matter how easy it looks you will never be able to make something in design veiw that works in all browsers – if it even works in one. Your menu isnt centred because you have not reset the default indent of your UL list. just add padding:0; to your ul#nav

2) Your background container is repeating the image, its just set to height: 13px; so its only 13px high… :)

To be honest, if you don’t know how to code HTML/CSS it would be quicker for you to learn how than to try and design something with a WYSIWYG editor. Never trust dreamweavers design view to tell you "its working" because trust me, it wont. lol

[H2oskier]

Robskiwarrior,

Thanks for the pointers. I don’t use Dreamweaver Design View, just use the code view, so I’m only using HTML/CSS. I suppose I could just as easily use Notepad ++ or whatever else.

[Rob MacKay]

"H2oskier" wrote:

Robskiwarrior,

Thanks for the pointers. I don’t use Dreamweaver Design View, just use the code view, so I’m only using HTML/CSS. I suppose I could just as easily use Notepad ++ or whatever else.

Thats the best news I have had all night :D

[H2oskier]

al_m473,

That looks great! Thank you for taking a look at this as well. I need to go back and see what the both of you did so I can learn from my mistakes.

[H2oskier]

"Robskiwarrior" wrote:

"H2oskier" wrote:

Robskiwarrior,

Thanks for the pointers. I don’t use Dreamweaver Design View, just use the code view, so I’m only using HTML/CSS. I suppose I could just as easily use Notepad ++ or whatever else.

Thats the best news I have had all night :D

You must be having a very slow night.

…If you’re still online, could you make a suggestion on what is the best way to create a drop down box? For the ‘Our Services’ drop down, I need to have a list that contains like 6 options. I know I could go with Javascript, PHP, or CSS (or combination there of), but still learning this, what would be easiest? I’ll obviously be looking around the net for sample code to help me along the way.

[Rob MacKay]

I would agree with Al.

CSS only is a good option but you do need a JS for IE’s rediculas "im not going to let :hover work on anything but links" crap… :)

[H2oskier]

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;
}

[H2oskier]

Sorry to bump this up, but I’m still facing issues with my navigation bar, button sizes.

[H2oskier]

al,

Thanks for the time spent looking. I plan on updating this tonight when I have some more time.

[Author]

Posts