Margins working in IE but not Firefox.

Hello, I am trying to make a steak informational site. I modified a template from oswd.org.


The screen on left is in IE, right is from FF. I can't figure out how to get rid of the white bar in FF.

Relevant code:

.titleblock {
padding:0; margin:0;
}

ul.navbar {
list-style-type:none; float:left; display:block; width:970px; line-height:1.4em;
clear:both; margin:0; padding:0; background-color:#000;}

ul.navbar li {
display:inline; font-size:16px}

a.nav:link, a.nav:visited {
display:block; float:left; width:24.5%; padding:1.2em 0 1.2em 0; margin:0;
text-decoration:none; background-color:#000; color:#ccc;}


<div class="titleblock"><img src="steaklogo.jpg" title="SteakInfo.com" alt="SteakInfo.com" /></div>

<div><ul class="navbar">
<li><a href="index.html" class="nav">Home</a></li>
<li><a href="banking.html" class="nav">Banking</a></li>
<li><a href="pokerrooms.html" class="nav">Poker Rooms</a></li>
<li><a href="strategy.html" class="nav">Strategy</a></li>
</ul></div>


Please dont mind the Navigation Bar links, I copied from a poker website I was designing. Do you have any ideas? Thanks very much.

 

I'm going to leave in about 10 minutes to head over to my folks' place for Christmas (by the way, I hope you enjoy yours too). If you can wait until I get back tomorrow night, I can whip up a layout for you that will work cross-browser with the bare minimum of code.

 

Yeah, I removed the titleblock class because it was unnecessary. I temporarily fixed the appearance in Firefox by changing the ul.navbar margins to margin:-2px 0 0 0; but yeah that seems like a very sloppy hack, must be a better way to do it.

Sure, I'd really appreciate your layout. Thanks a bunch. Merry Christmas.

 

Just one quick question (which I forgot to ask earlier):

How many main columns do you want for the general layout? One, two, three?

 

two would be great. Maybe a smaller right one for news, ads, etc? I could also change if needed.

 

Try

.titleblock img {
    vertical-align: bottom;
    }

Code (markup):

See Mysterious Gaps.

cheers,

gary

 

Ok, do you want the right column's content to be before or after the main column's content in the HTML source code order? (Yes, I can make this work without using absolute positioning.)

 

after would be great

 

Took a few minutes out of the day to start working on this, and realized I don't even have the graphics from the template you're using. Any chance you can forward them to me?

 

As of now, I have made a 970px by 220px header banner with a black background (banner
.

kk5st's solution about the mysterious gap worked for me in this template. I reread my changes to the code and optimized it/removed some unnecessary tags I added. The template has been working alright for me, so I dont absolutely need another template in the immediate future for this particular project, but I really appreciate your offer. If you do make a template, ill definitely use in on another site or this one. Thanks.

 

Ok. If you want me to whip up "my version" then just let me know .