Site layout issues w/Firefox

edited April 2009 in Bug Reports


  • organicveggie
    Posts: 11
    I'm seeing a weird rendering issue with Firefox 3.0.6 on Ubuntu 8.10. The sidebar that should sit on the right-hand side is not flush with the right-edge and the top banner overlaps it. In some extreme cases, this causes the main content to get pushed way down the page.

    Here are some example screenshots:



    And here's an example of it getting pushed down:

  • ryan
    Posts: 126
    Man you are pointing out all kinds of bugs..

    Weird that FireFox renders so differently on Ubuntu. I'll have to fire up my Ubuntu box and check it out ..

  • organicveggie
    Posts: 11
    Heh. :) Sorry 'bout the bug reports.

    I'm actually a software developer at my day job... but I seem to have a knack for breaking things. *grin*

    I'll try to poke around a bit and see if I can see anything obvious that might cause the layout problems. I can't think of why Firefox on Ubuntu would be any different though. *sigh*

  • organicveggie
    Posts: 11
    It's definitely related to the spacing of the top header bar and the positioning of the _search form_. The search form is set to _float right_, but doesn't fit on the header line in my browser for some reason. As a result, it gets pushed down one section, which has the cascading effect of preventing the sidebar from being flush with the right hand edge.

    I found that by increasing the width of the *#wrapper* element to from 990px to 1018px, I can get everything to fit horizontally in the header block. So I went through and added up all the expected widths of the elements inside the _#header_ :

    bq. *element* | *width*
    logo | 194px
    campaigns | 110px
    characters | 120px
    items | 89px
    map | 78px
    forums | 96px
    help | 64px
    dice | ?
    search |173px

    Not including the dice, the other navigation elements require 557px. Since the sum of the widths of the _#header_ elements has to be less than the width of the _#wrapper_, the dice need 66px. That means the total width of the _#navigation# element should be 623px.

    So I tried specifying the _width_ in the CSS for the _#navigation_ element - the search form fits, but unfortunately, the dice element wrapped onto the next line. With a little more digging, I found the problem: it's the padding specified for @#navigation ul li a@.

    #navigation ul li a {
    background-repeat: no-repeat;
    border: none;
    color: #fff;
    float: left;
    font-size: 1.2em;
    height: 47px;
    line-height: 47px;
    margin: 0;
    padding: 0 15px;
    text-decoration: none;

    Bottom line: If you reduce the amount of padding to @9px@, everything fits. That's all that's needed to fix the layout issue in Firefox under Ubuntu. Of course, I have no idea how that renders in IE or Firefox under Windows or Mac. :)

    Hope that helps.

  • mysterious_stranger
    Posts: 7
    I had this exact same issue on Firefox on one of my Macs. I ended up finding that if I went into Preferences, picked the Content tab and changed the default font and the issue went away. Oddly, I was then able to do the Command-+ to increase the font size while viewing the page to make it more readable to my tired old eyes and it worked fine. There was something about the default font, probably mixed with the spacing issue. My default font is now Times 16 and it all works flawlessly...

    May or may not be the same thing, or it may just be indicative of another problem, but that's what i found worked for me.
Sign In or Register to comment.

June 2024
The Planewalker’s Guild

Read the feature post on the blog
Return to Obsidian Portal

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!