I’m having a issue that my nav bar is not falling in the same spot all the different browsers. I set it to absolute positioning, set the padding and margins to 0, and the top to 27px, but I am still having a problem. Can anyone make some suggestions what to check for.
Thank you.
Nice to hear! Thanks for the feedback. 
From what I understand, it was incomplete. That’s all. The one I used is the full html4 version.
- Under #topnav you added overflow:hidden. I see if that wasn’t added the nav bar would collapse vertically. Why does overflow:hidden solve that?
Containers don’t wrap around floated contents, which has a purpose, but can also be a right pain. So there are various methods for making a container wrap around its floated content—the easiest being to use overflow: hidden. (There are explanations for why it works… such as the idea that for an element to obey the rule, it must look at what it contains, and thus become aware of its contents… or some such thing. But it just works 
… unless you actually need some content to hang outside of the container, in which case other methods are required. )
- Other than the image not being associated with it’s element, why was else was there big problems?
Well, such things would include the doctype, the big background image, the left margin on the UL div that was pushing everything off the page to the right, the blue line on the logo… (from memory)
- For #topnav ul li I see you got rid of display:inline and used float:left. Why wasn’t display:inline the best thing to use here.
Some people think it is the best thing, but personally I always have trouble with it, and I find floating much more reliable. Inline display can have limitations, but not many if any in this instance.
if you were in NYC I would offer to take you to lunch for all your help!
Mmmm, lunch in NYC, that would be nice! What a city. I haven’t been there for a long time, but would love to go back. Sadly, I’m about as far away as I can be from there! Anyway, that you are happy and the problem is fixed is reward enough. Thanks for the thought.
Yeah, so big problems there. Here is the sort of thing I would do (note the updated doctype etc.).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Experiment</title>
<style type="text/css" media="all">
body, div, ul, li, h1, h2, h3, h4, h5, h6, p, blockquote {
margin:0;
padding:0;
}
img { border:none; }
#topnav {
background: url(nav-bg.jpg) repeat-x;
width: 100%;
overflow: hidden;
padding-bottom: 10px;
margin-top: 28px;
}
#topnav ul {
padding: 0;
margin: 0;
font-family:Verdana, Arial, Helvetica, sans-serif;
list-style: none;
margin-left: 287px;
}
#topnav ul li {
float:left;
}
#topnav a{
font-size: 10px;
color:#FFFFFF;
margin:0 20px 0 0;
padding: 6px 11px 7px;
color:#FFFFFF;font-size: 10px;
text-decoration: none;
}
#topnav a:active, #topnav a:hover {
font-size: 10px;
color:#006cb7;
background-color: #eae7e2;
padding: 6px 11px 7px;
text-decoration: none;
}
.tn_selected {
font-size: 10px;
color:#006cb7; background-color: #eae7e2;
padding: 6px 12px; margin:0 20px 0 0;-moz-box-shadow: 2px 2px 2px #777;
-webkit-box-shadow: 2px 2px 2px #777;
box-shadow: 2px 2px 2px #777;
}
#logo {
position: absolute;
top: 0;
left: 0;
width: 287px;
height: 111px;
}
</style>
</head>
<body>
<div id="logo">
<img src="logo.gif" alt="logo">
</div>
<div id="topnav">
<ul>
<li class="tn_selected">HOME</li>
<li class="tn"> <a href="about.html">ABOUT</a></li>
<li class="tn"><a href="clients.html">CLIENT LIST</a></li>
<li class="tn"><a href="portfolio.html">PORTFOLIO</a></li>
<li class="tn"><a href="testmonials.html">TESTIMONIALS</a></li>
<li class="tn"><a href="contact.html">CONTACT</a></li>
<li class="tn"><a href="http://inspiredbymail.com/">BLOG</a></li>
</ul>
</div>
</body>
</html>
You will need the two images I’ve attached below. You might need to redo those—especially the logo, as it’s a bit rough.
What is your recommendation to handling the on the div that contains the nav bar?
#topnav {
position:absolute;
top: 28px;
left: 260px;
width:900px;z-index:3; padding: 0;
margin: 0;
}
I would put another div around the nav div and set it to with: 100%. I would put the background image on that. So I would cut the corner logo out of that and place it separately. You could just absolutely position it in the top left corner.
May I ask what different positioning you are talking about? You don’t have any position declared on your nav div. What problems did you get when trying to apply the background to the nav div? Like Ralph said already it’s not a good idea to mix up background images
It’s best if you post your html and css, or better still, post a link. Otherwise there’s too much guesswork. (If posting code, preferably post a page with the CSS in the head.)
I would probably put it in a separate div that is not inside any other divs, and set it to
position: absolute;
top: 0;
left: 0;
It may need some z-index too—say z-index: 100; (not that the number matters at all).
Also regarding the beige box…
Please ignore what I said about that. I was being an idiot, not looking carefully enough. I thought the beige box was part of the blue background image 
… But you had already done what I meant.
On way to stop that happening is to specify a minimum width for the topnav div, like so:
#topnav {
background: url('../images/global/nav-bg.jpg') repeat-x;
width: 100%;
overflow: hidden;
padding-bottom: 10px;
position:relative; top: 28px;
z-index:1;
[COLOR="Red"]min-width: 1000px;[/COLOR]
}
Not sure if I am understanding everything. Where would you put the corner logo on the body tag or add another div?
Also regarding the beige box, right now I have that as <li class=“tn_selected”>. Are you recommending making that an anchor tag? Something like<li> <a class=“tn_selected” href=“#”>HOME </a></li>
Thank you both to ideamonk and ralph m. I tried both your suggestions. The display:inline:block works. I couldn’t put the image into the nav div because the positioning was different. I tried to move it to #topnav which is the div that is the container for #nav. So that didn’t work. I welcome any other insight.
Ralph thanks for your suggestions. I’m not sure if I completely understand.
Right now I have a div #topnav that contains the ul #nav. Am I correct that you are suggesting add another div(I’ll call it #newnav) to also contain #nav? If yes, what about #topnav? Should that hold the cut out corner logo? And #newnav will hold the remaining part of the background image?
You said
I couldn’t put the image into the nav div because the positioning was different. I tried to move it to #topnav which is the div that is the container for #nav. So that didn’t work
What is it that didn’t work? Try to be a bit more specific
Thank you Ralph for being so very helpful. Everything is working perfect now.
Can I please ask you four questions so I can really understand CSS.
Here they are:
Meryl
BTW, if you were in NYC I would offer to take you to lunch for all your help!
This is what I tried but it did not fix the issue I had with the nav bar not falling in the same spot all the different browsers
#topnav { background: #ffffff url(‘…/images/global/topLogoBackground.gif’) no-repeat; width:1920px; height:111px;
}
#nav {position:absolute;
top: 28px;
left: 260px;
width:900px;z-index:3; padding: 0;
margin: 0;
padding: 0;
margin: 0;font-family:Verdana, Arial, Helvetica, sans-serif;}
#nav li {
display:inline;
}
#nav a{
font-size: 10px; color:#FFFFFF; margin:0 20px 0 0; padding: 6px 11px 7px;}
#nav a:active, #nav a:hover {
font-size: 10px;
color:#006cb7; background-color: #eae7e2;
padding: 6px 11px 7px;
}
.tn_selected {
font-size: 10px;
color:#006cb7; background-color: #eae7e2;
padding: 6px 12px; margin:0 20px 0 0;-moz-box-shadow: 2px 2px 2px #777;
-webkit-box-shadow: 2px 2px 2px #777;
box-shadow: 2px 2px 2px #777;
}
a.textlinks {
color:#231f20;
line-height:120%;
}
#nav a {
color:#FFFFFF;font-size: 10px;
text-decoration:none;
}
I noticed the following -
#nav a{
font-size: 10px; color:#FFFFFF; margin:0 20px 0 0; padding: 6px 12px;}
The nav menu looks same in (chrome, safari, firefox), but from my experience, the issue could be that browsers(old ones, IE, etc) don’t treat a as <a> tag as a block element, so different browsers would treat the padding and margin specified differently.
To enforce this padding and margin to your <a> elements, also add a
display: inline-block;
to such elements which are not block-ish by default.
hope that helps a bit.
My site is up and running. I do wonder why one minor thing is happening.
On the nav bar, if I was to close the browser window widthwise the anchor links of the page that is open at that time, would hop off the nav bar and move a below. Here is the url
Any ideas?
Thank you.
I followed your instructions Ralph and I am still having the same issues with my nav bar in Opera and IE.
Here is a new link
http://tinyurl.com/28k64z4
I welcome any input. Thank you.
I would probably wrap #topnav in a 100% width div called #topnav-outer. I would put the blue strip background on #topnav-outer, but remove the corner logo from this. (That corner logo I would place separately, probably absolutely positioned in the top corner.)
As for the beige box than indicates a current link, I would also remove that from the blue background image and put that on the link itself. So a bit of cutting up here, but it will make things a lot simpler and more robust.
In fact, with all those bits removed from the blue background, you might as well just make it a background color rather than an image. So put a light blue bg color on #topnav-outer, and give each link a width and height, so that you can put the beige background on it when it’s the current link.
Does that make any sense?