...

View Full Version : Trouble with Nav Headers in Firefox



silentsid1
01-06-2008, 06:09 PM
I'm having a bit of trouble with my nav headers. In Firefox/Camino, my nav headers are quite a bit below where they should be in my header bar. The strange thing is, in Opera and Safari, they line up just fine. What am I missing? Code is below. Any help would be greatly appreciated.

****

html {
height:100%;
max-height:100%;
padding:0;
margin:0;
border:0;
background-image: url(images/webbackground.jpg);
background-repeat: no-repeat;
font-size:76%;
font-family:georgia, palatino linotype, times new roman, serif;
/* hide overflow:hidden from IE5/Mac */
/* \*/
overflow: hidden;
/* */
}

body {
height:100%;
max-height:100%;
overflow:hidden;
padding:0;
margin:0;
border:0;
background-image: url(images/webbackground.jpg);
background-repeat: no-repeat;
}

#content {
display:block;
overflow:auto;
position:absolute;
z-index:3;
top:75px;
bottom:64px;
width:1000px;
margin-left:-500px;
left:50%;
border-left:0px solid #000;
border-right:0px solid #000;
border-bottom 0px solid #000;
background: url(images/background.png);
background-repeat: no-repeat;
}

* html #content {
top:0;
bottom:0;
height:100%;
width:875px;
border-top:154px solid #fff;
border-bottom:50px solid #fff;
}

#head {
position:absolute;
margin-left:-500px;
left:50%;
top:0px;
width:994px;
min-width:640px;
height:80px;
background-image: url(images/header.jpg);
font-size:13px;
z-index:5;
border:0px solid #000;
}

* html #head {
top:2px; width:875px; height:75px;
}


a.nav1, a.nav2, a.nav3, a.nav4, a.nav5, a.nav6, a.nav7 {width:120px; height:80px; display:block; float:right; background:url(images/heading.jpg); text-align:center; font-size:13px; font-weight:bold; color:#edeae4; text-decoration:none; font-family:verdana, arial, sans-serif; line-height:5px; overflow:hidden;}
#head a .pad {display:block; width:40px; height:50px; background:transparent; border-bottom:0px solid #000;}

a.nav1 {background-position:0 150px;}
a.nav2 {background-position:-80px 150px;}
a.nav3 {background-position:-160px 150px;}
a.nav4 {background-position:-240px 150px;}
a.nav5 {background-position:-320px 150px;}
a.nav6 {background-position:-400px 150px;}
a.nav7 {background-position:-480px 150px;}

a.nav1:hover {background-position:0 0;}
a.nav1:hover .button {color:#90151c;}
a.nav2:hover {background-position:-80px 0;}
a.nav2:hover .button {color:#90151c;}
a.nav3:hover {background-position:-160px 0;}
a.nav3:hover .button {color:#90151c;}
a.nav4:hover {background-position:-240px 0;}
a.nav4:hover .button {color:#90151c;}
a.nav5:hover {background-position:-320px 0;}
a.nav5:hover .button {color:#90151c;}
a.nav6:hover {background-position:-400px 0;}
a.nav6:hover .button {color:#90151c;}
a.nav7:hover {background-position:-480px 0;}
a.nav7:hover .button {color:#90151c;}

#foot {
text-align:right;
position:absolute;
margin-left:-500px;
left:50%;
bottom:0;
width:1000px;
min-width:640px;
height:55px;
background:url(images/heading.jpg);
background-position:0 100px;
font-size:1em;
z-index:5;
border:0px solid #000;
font-family: trebuchet MS, tahoma, verdana, arial, sans-serif;
font-weight:bold;
color:#000;
}

* html #foot {
bottom:2px; width:875px; height:48px;
}


#content p {
padding:5px; text-align:justify;
}
.boldhead {
font-size:1.5em;
font-weight:bold;
}
.bold {font-weight:bold;}
.left {float:left; margin:10px; border:1px solid #000;}
.right {float:right; margin:10px; border:1px solid #000;}
.lefttext {float:left; width:300px; text-align:justify;}
.righttext {float:right; width:300px; text-align:justify;}

* html .lefttext {float:left; width:310px; text-align:justify;}
* html .righttext {float:right; width:310px; text-align:justify;}

</style>
</head>

<body>

<div id="head">
<a href="http://www.detonics.ws"><img src="http://www.detonics.ws/images/logofinal.png" alt="detonicslogo" width="" height="" border="0px" /></a>
<a class="nav1" href="http://www.detonics.ws/contact.html" title="Contact"><span class="pad"></span><span class="button">Contact</span></a>
<a class="nav2" href="http://www.detonics.ws/media.html" title="Media"><span class="pad"></span><span class="button">Media</span></a>
<a class="nav3" href="http://www.detonics.ws/products.html" title="Products" /><span class="pad"></span><span class="button">Products</span></a>
<a class="nav4" href="http://www.detonics.ws/leadership.html" title="Leadership"><span class="pad"></span><span class="button">Leadership</span></a>
<a class="nav5" href="http://www.detonics.ws/history.html" title="History"><span class="pad"></span><span class="button">History</span></a>
<a class="nav6" href="http://www.detonics.ws/combatscience.html" title="Combat Science"><span class="pad"></span><span class="button">Combat Science</span></a>
<a class="nav7" href="http://www.detonics.ws/news.html" title="News"><span class="pad"></span><span class="button">News</span></a>
</div>

silentsid1
01-06-2008, 06:24 PM
I put it up on my personal site to make it easier to see my problems:

http://pantonality.com/test.html

Excavator
01-06-2008, 07:28 PM
Wow silentsid1,
That's a very complicated page for only having a couple images and a menu...
Validator finds a few errors but nothing that's causing your problem.
I'm not sure what .pad is for?

Missing background:url(images/heading.jpg);

Very confusing way of doing this :confused: ...

This should sort it out for you though:

<div id="head">
<a class="nav1" href="http://www.detonics.ws/contact.html" title="Contact"><span class="pad"></span><span class="button">Contact</span></a>
<a class="nav2" href="http://www.detonics.ws/media.html" title="Media"><span class="pad"></span><span class="button">Media</span></a>
<a class="nav3" href="http://www.detonics.ws/products.html" title="Products"><span class="pad"></span><span class="button">Products</span></a>
<a class="nav4" href="http://www.detonics.ws/leadership.html" title="Leadership"><span class="pad"></span><span class="button">Leadership</span></a>
<a class="nav5" href="http://www.detonics.ws/history.html" title="History"><span class="pad"></span><span class="button">History</span></a>
<a class="nav6" href="http://www.detonics.ws/combatscience.html" title="Combat Science"><span class="pad"></span><span class="button">Combat Science</span></a>
<a class="nav7" href="http://www.detonics.ws/news.html" title="News"><span class="pad"></span><span class="button">News</span></a>

<a href="http://www.detonics.ws"><img src="http://www.detonics.ws/images/logofinal.png" alt="detonicslogo" border="0" height="" width=""></a></div>

Either float:left; that bit in red or present it in the markup AFTER your floats. That way they'll be side by side.

silentsid1
01-06-2008, 08:18 PM
I took the basic layout from a CSS Layout page (free to use and modify without permission).

I made your suggested changes in the Div Head. The problem stemmed from the #head a .pad. Adjusting the height and width of that lined up the Header choices to where I wanted them.

Appreciate all the help. I'll definitely be visiting this site in the future to learn more.

silentsid1
01-07-2008, 05:40 PM
As with all things in HTML and CSS, I've learned that everyone codes for Firefox then recodes/hacks for IE. While my page looks great in FF, Safari, and Opera, it looks pretty interesting in IE 6 and 7. Here is the link for a screenshot I took of the home page in IE6 using CrossOver:

http://pantonality.com/images/homeonie.png

For those interested in the website to pull up in IE, it is http://www.detonics.ws. I'll copy the style sheet from the home page as well as link it at the bottom. Again, I'm still getting my feet weet with all this so any help would be greatly appreciated.

html {
height:100&#37;;
max-height:100%;
padding:0;
margin:0;
border:0;
background-image: url(images/webbackground.jpg);
background-repeat: no-repeat;
font-size:76%;
font-family:georgia, palatino linotype, times new roman, serif;
/* hide overflow:hidden from IE5/Mac */
/* \*/
overflow: hidden;
/* */
}

body {
height:100%;
max-height:100%;
overflow:hidden;
padding:0;
margin:0;
border:0;
background-image: url(images/webbackground.jpg);
background-repeat: no-repeat;
}

#content {
display:block;
overflow:auto;
position:absolute;
z-index:3;
top:75px;
bottom:64px;
width:1000px;
margin-left:-500px;
left:50%;
border-left:0px solid #000;
border-right:0px solid #000;
border-bottom 0px solid #000;
background: url(images/detonicsbackground.png);
background-repeat: no-repeat;
}

* html #content {
top:0;
bottom:0;
height:100%;
width:875px;
border-top:154px solid #fff;
border-bottom:50px solid #fff;
}

#head {
position:absolute;
margin-left:-500px;
left:50%;
top:0px;
width:994px;
min-width:640px;
height:80px;
background-image: url(images/header.jpg);
font-size:13px;
z-index:5;
border:0px solid #000;
}

* html #head {
top:2px; width:875px; height:75px;
}


a.nav1, a.nav2, a.nav3, a.nav4, a.nav5, a.nav6, a.nav7 {width:120px; height:80px; display:block; float:right; text-align:center; font-size:13px; font-weight:bold; color:#edeae4; text-decoration:none; font-family:verdana, arial, sans-serif; line-height:5px; overflow:hidden; }
#head a .pad {display:block; width:100px; height:50px; background:transparent; border-bottom:0px solid #000;}

a.nav1 {background-position:0 0;}
a.nav2 {background-position:-80px 150px;}
a.nav3 {background-position:-160px 150px;}
a.nav4 {background-position:-240px 150px;}
a.nav5 {background-position:-320px 150px;}
a.nav6 {background-position:-400px 150px;}
a.nav7 {background-position:-480px 150px;}

a.nav1:hover {background-position:0 0;}
a.nav1:hover .button {color:#90151c;}
a.nav2:hover {background-position:-80px 0;}
a.nav2:hover .button {color:#90151c;}
a.nav3:hover {background-position:-160px 0;}
a.nav3:hover .button {color:#90151c;}
a.nav4:hover {background-position:-240px 0;}
a.nav4:hover .button {color:#90151c;}
a.nav5:hover {background-position:-320px 0;}
a.nav5:hover .button {color:#90151c;}
a.nav6:hover {background-position:-400px 0;}
a.nav6:hover .button {color:#90151c;}
a.nav7:hover {background-position:-480px 0;}
a.nav7:hover .button {color:#90151c;}

#foot {
text-align:right;
display:inline;
position:absolute;
margin-left:-500px;
left:50%;
bottom:40px;
width:1000px;
min-width:640px;
height:75px;
background:url(images/heading.jpg);
background-position:0 100px;
font-size:1em;
z-index:5;
border:0px solid #000;
font-family: trebuchet MS, tahoma, verdana, arial, sans-serif;
font-weight:bold;
color:#000;
}

* html #foot {
bottom:2px; width:875px; height:48px;
}


#content p {
padding:5px; text-align:justify;
}
.boldhead {
font-size:1.5em;
font-weight:bold;
}
.bold {font-weight:bold;}
.left {float:left; margin:10px; border:1px solid #000;}
.right {float:right; margin:10px; border:1px solid #000;}
.lefttext {float:left; width:300px; text-align:justify;}
.righttext {float:right; width:300px; text-align:justify;}

* html .lefttext {float:left; width:310px; text-align:justify;}
* html .righttext {float:right; width:310px; text-align:justify;}

http://pantonality.com/images/stylehomeie.css

Excavator
01-07-2008, 06:36 PM
Hello again silentsid1,
Have a look at a little different method. Copy/paste this into a new .html and see what you think. It's valid CSS and XHTML 1.0 Strict, LOTS less code and probably works in all browsers. I say probably because I only looked at in IE7 and FF2.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<meta name="" content="authored by http://nopeople.com/Design" />
<style type="text/css">
html, body {
width: 100&#37;;
height: 100%;
background: url(http://www.detonics.ws/images/webbackground.jpg) no-repeat;
font: 76% Georgia, palatino linotype, "Times New Roman", Times, serif;
}
* {
margin: 0;
padding: 0;
border: none;
}
#container {
width: 1000px;
margin: 0 auto;
}
#head {
height: 80px;
background-image: url(http://www.detonics.ws/images/header.jpg);
}
a.nav1, a.nav2, a.nav3, a.nav4, a.nav5, a.nav6, a.nav7 {
width:120px;
height:80px;
display:block;
float:right;
background:url(images/heading.jpg);
text-align:center;
font-size:13px;
font-weight:bold;
color:#edeae4;
text-decoration:none;
font-family:verdana, arial, sans-serif;
line-height:5px;
overflow:hidden;
}
#head a .pad {
display:block;
width:100px;
height:50px;
background:transparent;
border-bottom:0px solid #000;
}
a.nav1 {background-position:0 0;}
a.nav2 {background-position:-80px 150px;}
a.nav3 {background-position:-160px 150px;}
a.nav4 {background-position:-240px 150px;}
a.nav5 {background-position:-320px 150px;}
a.nav6 {background-position:-400px 150px;}
a.nav7 {background-position:-480px 150px;}

a.nav1:hover {background-position:0 0;}
a.nav1:hover .button {color:#90151c;}
a.nav2:hover {background-position:-80px 0;}
a.nav2:hover .button {color:#90151c;}
a.nav3:hover {background-position:-160px 0;}
a.nav3:hover .button {color:#90151c;}
a.nav4:hover {background-position:-240px 0;}
a.nav4:hover .button {color:#90151c;}
a.nav5:hover {background-position:-320px 0;}
a.nav5:hover .button {color:#90151c;}
a.nav6:hover {background-position:-400px 0;}
a.nav6:hover .button {color:#90151c;}
a.nav7:hover {background-position:-480px 0;}
a.nav7:hover .button {color:#90151c;}
#content {
height: 643px;
background: url(http://www.detonics.ws/images/detonicsbackground.png);
}
#foot {
height:75px;
background:url(images/heading.jpg);
background-position:0 100px;
font: 1em trebuchet MS, tahoma, verdana, arial, sans-serif;
text-align:right;
font-weight:bold;
color:#000;
}
</style>
</head>
<body>
<div id="container">
<div id="head">
<a class="nav1" href="http://www.detonics.ws/contact.html" title="Contact"><span class="pad"></span><span class="button">Contact</span></a>
<a class="nav2" href="http://www.detonics.ws/media.html" title="Media"><span class="pad"></span><span class="button">Media</span></a>
<a class="nav3" href="http://www.detonics.ws/products.html" title="Products"><span class="pad"></span><span class="button">Products</span></a>
<a class="nav4" href="http://www.detonics.ws/leadership.html" title="Leadership"><span class="pad"></span><span class="button">Leadership</span></a>
<a class="nav5" href="http://www.detonics.ws/history.html" title="History"><span class="pad"></span><span class="button">History</span></a>
<a class="nav6" href="http://www.detonics.ws/combatscience.html" title="Combat Science"><span class="pad"></span><span class="button">Combat Science</span></a>
<a class="nav7" href="http://www.detonics.ws/news.html" title="News"><span class="pad"></span><span class="button">News</span></a>
<a href="http://www.detonics.ws"><img src="http://www.detonics.ws/images/logofinal.png" alt="detonicslogo" height="82" width="122" /></a>
<!--end head--></div>
<div id="content">
<!--end content--></div>
<div id="foot">
<h3>
This page is best viewed in
<a href="http://www.mozilla.com/en-US/firefox/"><b>Firefox</b></a>,
<a href="http://www.apple.com/safari/"><b>Safari</b></a> and
<a href="http://www.opera.com/"><b>Opera</b></a>
</h3>
<p>
&copy; 2007-2008 Detonics and Double Nickel LLC.
</p>
<!--end foot--></div>
<!--end container--></div>
</body>
</html>


When posting long sections of code like you have been, it makes life a lot easier when you use the code tags so we don't have to scroll down so far.

silentsid1
01-07-2008, 11:45 PM
Excavator,

I really appreciate all the assistance you've given me so far. It's really helped clean up a lot of the code I had. I'm still having some issues with IE6 and 7. The navigational headers in the head are still being cut off and on a few pages. Some images are not showing up on the pages as well. Here is the code from the media page:

http://www.detonics.ws/media.html


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="">
<meta name="keywords" content="">
<title>Detonics Media Files</title>
<style type="text/css">

html, body {
width: 100%;
height: 100%;
background: url(http://www.detonics.ws/images/webbackground.jpg) no-repeat;
font: 76% Georgia, palatino linotype, "Times New Roman", Times, serif;
}
* {
margin: 0;
padding: 0;
border: none;
}
#container {
width: 1000px;
margin: 0 auto;
}
#head {
height: 80px;
background-image: url(http://www.detonics.ws/images/header.jpg);
}
a.nav1, a.nav2, a.nav3, a.nav4, a.nav5, a.nav6, a.nav7 {
width:120px;
height:80px;
display:block;
float:right;
background:url(images/heading.jpg);
text-align:center;
font-size:13px;
font-weight:bold;
color:#edeae4;
text-decoration:none;
font-family:verdana, arial, sans-serif;
line-height:5px;
overflow:hidden;
}
#head a .pad {
display:block;
width:100px;
height:80px;
background:transparent;
border-bottom:0px solid #000;
}
a.nav1 {background-position:0 0;}
a.nav2 {background-position:-80px 150px;}
a.nav3 {background-position:-160px 150px;}
a.nav4 {background-position:-240px 150px;}
a.nav5 {background-position:-320px 150px;}
a.nav6 {background-position:-400px 150px;}
a.nav7 {background-position:-480px 150px;}

a.nav1:hover {background-position:0 0;}
a.nav1:hover .button {color:#90151c;}
a.nav2:hover {background-position:-80px 0;}
a.nav2:hover .button {color:#90151c;}
a.nav3:hover {background-position:-160px 0;}
a.nav3:hover .button {color:#90151c;}
a.nav4:hover {background-position:-240px 0;}
a.nav4:hover .button {color:#90151c;}
a.nav5:hover {background-position:-320px 0;}
a.nav5:hover .button {color:#90151c;}
a.nav6:hover {background-position:-400px 0;}
a.nav6:hover .button {color:#90151c;}
a.nav7:hover {background-position:-480px 0;}
a.nav7:hover .button {color:#90151c;}
#content {
height: 663px;
font: 13px Georgia, palatino linotype, "Times New Roman", Times, serif;
background: #cccbcd;
padding-left:20px;
}
#foot {
height:75px;
background:url(images/heading.jpg);
background-position:0 100px;
font: 1.2em Georgia, palatino linotype, "Times New Roman", Times, serif;
text-align:center;
font-weight:bold;
color:#000;
}
</style>
</head>
<body>

<div id="container">
<div id="head">
<a class="nav1" href="http://www.detonics.ws/contact.html" title="Contact"><span class="pad"></span><span class="button">Contact</span></a>
<a class="nav2" href="http://www.detonics.ws/media.html" title="Media"><span class="pad"></span><span class="button">Media</span></a>
<a class="nav3" href="http://www.detonics.ws/products.html" title="Products" /><span class="pad"></span><span class="button">Products</span></a>
<a class="nav4" href="http://www.detonics.ws/leadership.html" title="Leadership"><span class="pad"></span><span class="button">Leadership</span></a>
<a class="nav5" href="http://www.detonics.ws/history.html" title="History"><span class="pad"></span><span class="button">History</span></a>
<a class="nav6" href="http://www.detonics.ws/combatscience.html" title="Combat Science"><span class="pad"></span><span class="button">Combat Science</span></a>
<a class="nav7" href="http://www.detonics.ws/news.html" title="News"><span class="pad"></span><span class="button">News</span></a>
<a href="http://www.detonics.ws"><img src="http://www.detonics.ws/images/logofinal.png" alt="detonicslogo" width="" height="" border="0px" /></a>
<!-- End of head --></div>

<div id="content">
<br>
<h2><b>Media Files</b></h2>
<br>
<p>
This first video shows...
</p>
<br>
<p>
<a href="http://www.detonics.ws/video/applegate.mpg"><img src="http://www.detonics.ws/images/burroughsapplegate.jpg" alt="burroughsapplegate" width="" height="" border="0" /></a>
</p>
<br>
<p>
In the second video...
</p>
<br>
<p>
<a href="http://www.detonics.ws/video/sparrow.mpg"><img src="http://www.detonics.ws/images/medinasparrow.jpg" alt="" width="" height="" border="0" /></a>
</p>

<!-- End of content --></div>
<!-- End of container --></div>

<div id="foot">&copy; 2007-2008 Detonics and Double Nickle LLC.</div>

<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>

<script type="text/javascript">
_uacct = "UA-451410-1";
urchinTracker();
</script>
</body>
</html>

Again, any help is appreciated. I'm beginning to wonder how you all do this day in and out without heavy drinking...

Excavator
01-08-2008, 01:50 AM
CODE TAGS! Please. Really.
In the message window when your typing your reply/question .. the # button will put code tags up so your code is in a scroll box like my code is.

I think I figured out what .pad is for. It seems to be a spacer to push the menu buttons down from the top. NOT the usual way to do it at all. With .pad set at 80px high it pushes your menu out of #head. Do this:
#head a .pad {
display:block;
width:100px;
height:40px;
background:transparent;
border-bottom:0px solid #000;
}
and your menu is centered... Is that all .pad is for??? I keep asking because I don't want to delete something you're going to use later.
If .pad is just a spacer you should get rid of it and position your menu with a margin.


===========

Why your images aren't showing up... I'm not sure. Why are you wrapping them in p tags?

The p tag is for paragraphs.

Try this instead:
<a href="http://www.detonics.ws/video/applegate.mpg"><img src="http://www.detonics.ws/images/burroughsapplegate.jpg" alt="burroughsapplegate" width="200" height="139" /></a>

Check out the suggestion and links about validating in my sig below. The code I gave you is valid CSS and XHTML 1.0 Strict. The little bit of changes you did added 21 errors, all of which are easy to fix.
The validator is a good learning tool. It lets you know when you've made a mistake and usually gives a good explanation of why.

silentsid1
01-08-2008, 04:02 AM
I apologize for the lack of code tags. I realize now what you were referring to. :(

Let's start with the easy stuff. The images, because of my lack of knowledge, were wrapped in p tags. I made all those changes which should fix the problems with the images.


And the #head a.pad code is for positioning and spacer for the menu. As for using margins, should that go in the #head or would I have to create a new rule?

Thank you once again.

Excavator
01-08-2008, 04:10 AM
And the #head a.pad code is for positioning and spacer for the menu. As for using margins, should that go in the #head or would I have to create a new rule?


Empty divs are just extra markup and not needed. Spacer divs are the old way of doing it.
Try putting margin: 20px 0 0 0; on your buttons with this:
a.nav1, a.nav2, a.nav3, a.nav4, a.nav5, a.nav6, a.nav7 {
width:120px;
height:80px;
margin: 20px 0 0 0;
display:block;
float:right;
background:url(images/heading.jpg);
text-align:center;
font-size:13px;
font-weight:bold;
color:#edeae4;
text-decoration:none;
font-family:verdana, arial, sans-serif;
line-height:5px;
overflow:hidden;
}

You'll need to get rid of everything concerning .pad for that to work.

I'm off to dinner so no chance to look... did removing p tags help?

silentsid1
01-08-2008, 05:00 AM
Removing the p tags fixed the image problems in IE7. I also removed the #head padding and replaced it with the margin definition you suggested. After adjusting the line height and height of the head a.navs, I got the menu situated where I wanted it. This also fixed a small issue on the a.navs pushing away any images I had in the content because the a.nav height was too big.

The only issue I have now in IE7 is with the exception for the home page, all the other pages have the logo missing in the header. I'll be tackling this next.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum