Site layout issues w/Firefox

organicveggie

organicveggie

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:

!http://www.bealetech.com/obsidian-render-bug-firefox.jpg!

!http://www.bealetech.com/obsidian-render-bug2.jpg!

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

!http://www.bealetech.com/obsidian-render-bug3.jpg!

ryan

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 ..

Thanks,
Ryan

organicveggie

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*

-Sean

organicveggie

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.

-Sean

mysterious_stranger

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.