Blog won’t center in Firefox

  • Hi, I’ve just made a ‘lite’ theme for my blog. Everything shows fine in IE, but in Firefox the whole block doesn’t center the way it should. The padding for most divs seems to be ignored aswell.

    Here’s my css:

    body {
    background: #fff;
    margin: 0px;
    padding: 0px;
    font-family: Arial, Verdana, Helvetica;
    font-size: 9pt;
    color: #000;
    text-align: center;
    }

    h1 {
    border-bottom: 1px solid #ccc;
    font: 10pt Verdana, serif;
    letter-spacing: 0.2em;
    margin: 0px 0 0px 0;
    padding-bottom: 2px;
    }

    h2 {
    border-bottom: solid 1px #eee;
    font-family: Verdana, serif;
    font-size: 10pt;
    margin-top: 0;
    }
    a{
    cursor: pointer;
    }

    a:link, a:visited, a:active{
    color: #0002B5;
    font-weight: bold;
    text-decoration: none;
    }

    a:hover {
    background: #0002B5;
    color: #fff;
    text-decoration: none;
    }

    #frame {
    width: 730px;
    text-align: center;
    }

    .frame_left {
    background: url(container_left.gif) repeat-y;
    }

    .frame_right {
    background: url(container_right.gif) repeat-y top right;
    }

    #content {
    float: left;
    margin: 0px 15px 0px 15px;
    width: 500px;
    text-align: justify;<br />
    }

    #menu {
    float: right;
    margin: 0px 15px 0px 15px;
    width: 150px;
    padding: 0px 0px 0px 0px;
    }
    #menu a{
    background-color: #DFF7FF;
    border-bottom: 1px solid #ccc;
    display: block;
    color: black;
    padding: 0px 4px 0px 4px;
    text-align: left;
    }

    #menu a:hover{
    background: #eee;
    }

    .footer {
    width: 480px;
    padding: 4px;
    margin-top: 50px;
    clear: both;
    border: 4px solid #ddd;
    }

    .footer p {
    text-align: center;}

    .visible {display:block;
    }

    .visible a{
    background: Aqua;
    }
    .invisible {
    display: none;
    }

    I read the thing about hacks, but I don’t know which one I’d have to use if appropriate.
    What have I forgotten here?

    Thanks in advance!

Viewing 5 replies - 1 through 5 (of 5 total)

  • Hi Saane – I’m no CSS expert but try this in your block (I’m guessing it’s #frame in your code):

    margin: 0 auto;

    Thread Starter saane

    (@saane)

    Thank you aznbbj! It worked fine!! The only prob I have left is the margin (and not the padding, as I wrote in the 1st post). It should be 15px on either side of each main div (#content and #menu), but in Firefox I’d say there only is about 4px en each side and a wide empty space between the two.

    I would also like to have 50px of top margin for my footer, but if I do that it won’t center.

    I tried this but that won’t work either:

    margin-top: 50px;
    margin-right: 0;
    margin-left: 0;
    margin-bottom: 0;

    If I want it to be centered, the margin: 0 auto; line you gave me is the only thing that works.
    I just read about the browser differences on this page
    https://ajax-prototype.blogspot.com/2005/12/browser-competition.html
    Does this mean there’s nothing to be done about it?

    I don’t understand what I should do here.

    hmm .. can you send me a link of the site you’re working on? it’s tough for me to figure it out without seeing the actual implementation of the code.

    if you’re not comfortable posting it here, you can send it to me via the contact form on my site: https://www.padstyle.com/?page_id=5.

    btw here’s some additional information on differences between IE and other browsers:
    https://www.webcredible.co.uk/user-friendly-resources/css/internet-explorer.shtml

    note item #1 – the differences only seem to apply to border and padding, not margin.

    Thread Starter saane

    (@saane)

    Thanks aznbbj, emailed!

    Hi Saane – I didn’t receive anything. Try using this address:
    aznbbj -at- yahoo -dot- com

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Blog won’t center in Firefox’ is closed to new replies.

Tags