Margins working in IE but not Firefox.

Discussion in 'CSS' started by Anduril66, Dec 24, 2006.

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

    [​IMG]
    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.
     
    Anduril66, Dec 24, 2006 IP
  2. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #2
    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.
     
    Dan Schulz, Dec 24, 2006 IP
  3. Anduril66

    Anduril66 Well-Known Member

    Messages:
    390
    Likes Received:
    17
    Best Answers:
    0
    Trophy Points:
    108
    #3
    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.
     
    Anduril66, Dec 24, 2006 IP
  4. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Just one quick question (which I forgot to ask earlier):

    How many main columns do you want for the general layout? One, two, three?
     
    Dan Schulz, Dec 25, 2006 IP
  5. Anduril66

    Anduril66 Well-Known Member

    Messages:
    390
    Likes Received:
    17
    Best Answers:
    0
    Trophy Points:
    108
    #5
    two would be great. Maybe a smaller right one for news, ads, etc? I could also change if needed.
     
    Anduril66, Dec 26, 2006 IP
  6. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #6
    Try
    
    .titleblock img {
        vertical-align: bottom;
        }
    Code (markup):
    See Mysterious Gaps.

    cheers,

    gary
     
    kk5st, Dec 26, 2006 IP
    Anduril66 likes this.
  7. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #7
    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.)
     
    Dan Schulz, Dec 26, 2006 IP
  8. Anduril66

    Anduril66 Well-Known Member

    Messages:
    390
    Likes Received:
    17
    Best Answers:
    0
    Trophy Points:
    108
    #8
    after would be great
     
    Anduril66, Dec 26, 2006 IP
  9. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #9
    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?
     
    Dan Schulz, Dec 29, 2006 IP
  10. Anduril66

    Anduril66 Well-Known Member

    Messages:
    390
    Likes Received:
    17
    Best Answers:
    0
    Trophy Points:
    108
    #10
    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.
     
    Anduril66, Dec 30, 2006 IP
  11. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #11
    Ok. If you want me to whip up "my version" then just let me know :).
     
    Dan Schulz, Dec 30, 2006 IP