I am having the biggest problem getting my menu bar to line up with my banner image the way I'd like in Mozilla Firefox. The site looks great in IE and I'm afraid that once I get it to work in Firefox it'll look bad in IE! If anyone has time to take a look and let me know what they think I'd really appreciate it.

The site can be seen right now at http://www.piratekingdesign.com/camppndl/index.html

Thanks!

Thought maybe if I posted the code I could get some feedback. For some reason when I copy my code its linking to webmaster-talk.com. My images are obviously not there they are on my own domain!

HTML:
.<div id="header">
.<div id="banner_left"><img src="http://www.webmaster-talk.com/images/banner_left.jpg" class="header_left" /></div>
.<div id="banner_right"><img src="http://www.webmaster-talk.com/images/banner_right.jpg" class="header_right" /><div id="menu"> | Home | About Us |</div></div>
.</div>

CSS:

/* Header styles */

#header {
background: #254117;
clear:none;
float:left;
width:100%;
padding-top: 5px;
}

#menu {
background-image: url(images/menu_bkgd_1.jpg);
background-repeat: repeat-x;
height: 41px;
padding-top: 5px;
padding-right: 0px;
padding-bottom: 5px;
padding-left: 0px;
margin: 0px;
overflow: hidden;
clear: right;
}
.header_right {

}
.header_left {
float: left;
width: 210px;
}
#header #menu a {
position: static;
}

You should never, EVER, design something checking it in IE first, let alone solely. First thing, get rid of the deprecated align="center" attribute on your listhead div and position using CSS. Though this is not causing your problem, make sure you put alt tags in your images, for accessibility's sake. The deprecated tag, I think, is at the heart of your problem, but let's see what happens. If necessary, IE can then be kicked into compliance with conditional comments.

tim

Hi Tim thanks for replying this problem has been killing me all day. I actually was checking the site in Firefox first and then IE second. Most of the day I had the site looking great in Firefox and bad in IE and then suddenly they switched on me! All for this same problem!

I got rid of that align center tag LOL was hoping nobody would see that for now! And I do plan on adding alt text to my images, right now that image is just there for filler and I wasn't sure if the header images would stay this way or if I needed to do something else with them to make this work.

So is it working now?

tim

Hey Tim,
I got it! I went back and did some conditional comments and made separate style sheets for IE 6 and IE 7. I'm not sure if this is an accepted way of doing things, but it worked! I'm open to any other suggestions!

Coding it for FF, then doing separate stylesheets for IE, is actually the standard way of doing things. By doing so you can use those fixes for other pages as well. Good code is organized code. Glad you got it sorted out.

tim