Need answer to this navigation issue

xJustin · #1 Jul 1st, 2008, 03:30

http://www.davisspringslawns.com/

There's the site (no the link has nothing to do with what the actual page is about, I'm just using that because i get to use it for another month).

Anyways, if you go under the "Menu" section you will see that the left side navigation just doesn't want to move to the left. In IE it is fine but in Firefox & Safari its messed up o.0

I'm sure it's a real dumb mistake but i spent half a day searching for the problem and I still can't figure it out.
Thanks!

Here's my CSS, im not sure if you can see it with view source =S :

Code: Select all

/* Basic Stuff */
body { 
background-color: #754301;
background-image: url(BG.gif);
background-repeat: repeat-x;
width: 1280px;
height: 400px;
}

p { color: white;
}

h1, h2, h3, h4 {
color: white;
}

h6 {
color: white;
}

/* Container */
#container {
width: 800px;
height: auto;
margin: 0em 0em 0em 15em;
padding: 0;
}

caption {
color: white;
font-size: 2em;
}

/* Header */
#header { 
float: left;
background-image: url(HeaderBG.gif);
background-repeat: no-repeat;
background-position: left bottom;
background-color: white;
width: 800px;
height: 172px;
margin: 0;
padding: 0;
border-top: 1px solid black;
border-left: 1px solid black;
border-right: 1px solid black;
}
#header h1 { 
background-image: url(Header.gif);
float: left;
width: 600px;
height: 143px;
margin: 0.4em 0em 0.4em 0.4em;
padding: 0;
}
#header h1 span { display: none;
}
#RedSquare {
float: left;
width: 150px;
height: 149px;
margin: .5em 0em .5em .2em;
padding: 0;
}




/* Navigation bar */
#nav {
background-color: #5280F8;
margin: 0;
padding: 0em 0em 0em 0em;
width: 800px;
height: 40px;
float: left;
border-right: 1px solid black;
border-left: 1px solid black;
border-bottom: 1px solid black;
}
#nav ul {
margin: 0em 0em 0em 2em;
padding: 0em 0em 0em 0em;
}
#nav li { display: inline;
        padding: 0em 0em 0em 0em;
        margin: 0;                
}
#nav a:link { color: white;
            background: #5280F8;
            padding: .5em 1em 0em 1em;
            float: left;
            width: auto;            
            text-decoration: none;
            font-weight: bold;        
}
#nav a:visited { color: white;
            background: #5280F8;
            padding: .5em 1em 0em 1em;        
            float: left;
            width: auto;            
            text-decoration:none;
            font-weight: bold;
}

#nav a:hover {    color: white;
            background: #5280F8;
            border-bottom: 3px solid black;
            
}







/* Top Row Content */
#topcontent {
background-image: url(TopContentBG.jpg);
background-repeat:no-repeat;
float: left;
background-color: white;
width: 800px;
height: 230px;
margin: 0;
padding: 0;
border-right: 1px solid black;
border-left: 1px solid black;
border-bottom: 1px solid black;
}



/* Bottom Row Content */
#bottomcontent {
float: left;
width: 800px;
height: auto;
margin: 0;
padding: 0;
border-right: 1px solid black;
border-left: 1px solid black;
}


#BottomContentInfo {
text-align: center;
width: 750px;
height: auto;
margin: 1em 0em 0em 1.75em;
padding: 0;
}

#OrangeSquare {
float: left;
width: 150px;
height: 149px;
margin: 4.3em 0em .5em .2em;
padding: 0;
}

#PurpleSquare {
float: left;
width: 150px;
height: 149px;
margin: 4.3em 0em .5em 5.2em;
padding: 0;
}

/* Footer */
#footer {
float: left;
clear:both;
background-color: #543001;
width: 798px;
height: 40px;
margin: 0;
padding: 0;
border: 1px solid black
}







/* Happy Hour CSS */

h2 { color: white;
}
h3 { color: white;
}

#TopcontentSubPg {
width: 800px;
height: auto;
margin: 0;
padding: 0;
float: left;
border-left: 1px solid black;
border-right: 1px solid black;
}

#HappyHrIMG {
float: left;
width: auto;
height: auto;
margin: 1em 0em 0em 1em;
padding: 0;
}



#HappyHrInfo {
text-align: center;
margin: 1.5em 1em 0em 0em;
padding: 0;
width: 300px;
float: right;
}


#BottomContentSubPg {
color: white;
float: left;
width: 800px;
height: auto;
margin: 0;
padding: 0;
border-left: 1px solid black;
border-right: 1px solid black;
border-bottom: 1px solid black;
}

#OrangeSquareSubPg { 
float: left;
width: 150px;
height: 149px;
margin: 2em 0em .5em .5em;
padding: 0;
}

#PurpleSquareSubPg {
width: 150px;
height: 149px;
margin: 2em .5em .5em 0em;
padding: 0;
float: right;
}

#footer {
float: left;
clear:both;
background-color: #543001;
width: 800px;
height: 40px;
margin: 0;
padding: 0;
border: 1px solid black
}










/*CPP Page */

#CPPIMG {
float: left;
width: auto;
height: auto;
margin: 1em 0em 0em 1em;
padding: 0;
}

#CPPInfo {
text-align: center;
margin: 1.5em 1em 0em 0em;
padding: 0;
width: 300px;
float: right;
}






/* Entertainment CSS */
#EnterIMG {
float: left;
width: auto;
height: auto;
margin: 1em 0em 0em 1em;
padding: 0;
}









/* Locations CSS */

#LocsTable {
margin: 1em 0em 0em 5em;
padding: 0;
text-align: center;
}

#LocsTable th {
background-image: url(TableTHBG.gif);
padding: 1.75em .5em 0em .5em;
border: 1px solid black;
}

#LocsTable td {
background-color: #24af78;
margin: 0;
padding: 0;
border: 1px solid black;
}

#LocsTable2 {
margin: 1em 0em 0em 15em;
padding: 0;
text-align: center;
}

#LocsTable2 th {
background-image: url(TableTHBG.gif);
padding: 1.75em .5em 0em .5em;
border: 1px solid black;
}

#LocsTable2 td {
background-color: #24af78;
margin: 0;
padding: 0;
border: 1px solid black;
}






/* Menu CSS */

#ltcolumn {
float: left;
background-color: #543001;
height: 1050px;
width: 170px;
margin: 0;
padding: 0;
border: 1px solid black;
}

/* Menu Nav */
#MenuNav {
margin: 1em 0em 0em .5em;
padding: 0em 0em 0em 0em;
width: 150px;
height: auto;
}
#MenuNav ul {
display: block;
margin: 0;
padding: 0:
width: auto;
height: auto;

}
#MenuNav li {
display: block;
text-align: center;
list-style-type: none;
width: 150px;
height: 33px;
margin: .3em 0em .3em 0em;
padding: 0em 0em 0em 0em;

}
#MenuNav a:link {
display: block;
text-decoration: none;
color: white;
padding: 0;
margin: 0;
width: 150px;
height: 33px;
font-weight: bold;


}
#MenuNav a:visited {
display: block;
text-decoration: none;
color: white;
padding: 0;
margin: 0;
width: 150px;
height: 33px;
font-weight: bold;


}
#MenuNav a:hover {
 display: block;
text-decoration: none;
color: white;
padding: 0;
margin: 0;
width: 150px;
height: 33px;
font-weight: bold;


}




#rtcolumn {
float: right;
background-color: #f6c65a;
height: 1050px;
width: 626px;
margin: 0;
padding: 0;
}

#MenuPatternTop {
height: 52px;
width: 626px;
background-image: url(MenuPattern.gif);
margin: 0;
padding: 0;
}

#MenuTable {
margin: 0;
padding: 0;
width: auto;
height: auto;
}

#MenuTable td {
text-align: center;
margin: 0;
padding: 0;
width: 160px;
height: auto;
}
#MenuTable td span h3 {
color: black;
text-align: center;
margin: 0;
padding: 0;
width: 150px;
height: 70px;
}

EDIT: ALSO, how do you make the webpage stay in the center of the browser? For example if you look at GoDaddy.com with a high resolution it stays in the middle and if you go with a low resolution (800x600) it still stays there. In mine, when i view it in 800x600 the site is too far to the right and i know i'll need to fix this eventually.....im guessing i have to mess with some basic layout stuff

CloudedVision · #2 Jul 1st, 2008, 04:15

I don't see any left side navigation.....

xJustin · #3 Jul 1st, 2008, 04:27

Quote:

Originally Posted by CloudedVision

I don't see any left side navigation.....

did you click the "Menu" button? It's in that section, not the home page...and did you try different browsers? I tried like 3 different ones and its definitely there, just not in the right spot.

Tommyttt · #4 Jul 1st, 2008, 13:19

Have you tried aligning the txt to the right?

moojoo · #5 Jul 1st, 2008, 14:27

The page has a lot more issues than the alignment of your left menu. Clean up your code first, then see if some of the issues don't get fixed. At any rate get it up to standards and I will be happy to take a look under the hood.

http://validator.w3.org/check?verbos...om%2FMenu.html

xJustin · #6 Jul 1st, 2008, 21:34

Everything validates now

but the menu is still not in the right spot when using FF or Safari. I would definitely appreciate it if ya took a look at the code for that navigation issue.

Quote:

Originally Posted by Tommyttt

Have you tried aligning the txt to the right?

I don't really want to align the text to the right though. I should be able to keep the text centered like it is without having a problem...

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Where have you been? Answer to this and more!	JustinStudios	Webforumz Cafe	34	Nov 30th, 2007 00:01
Can any one answer me with benefits of both?	Avena	Search Engine Optimization (SEO)	4	Nov 14th, 2007 15:54
Firefox issue - Not able to scroll down and up thru mouse wheel navigation icon	kallol	Web Page Design	1	Apr 16th, 2007 12:34
Easy answer for newb, won't take more than a min to answer! please help...	Jobsnob	PHP Forum	2	Feb 11th, 2007 14:56

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Need answer to this navigation issue