Displays wrong in Firefox

[JustinStudios]

Guys, I have been working on slicing this sucker up all day. This is by far the most complicated layout I have ever done in CSS but thanks to Karrinne and Ryan I believe I have gotten off to a great start. Unfortunately I have an error where my background will not repeat in firefox in my div id NavBottom, but the dern thing does work in IE. If anyone can help fix this I'd be extremely appreciative.

The other question I have is how do I position the text down a little bit without changing the location of the divs. I have tried margin but that seems to mess up the layout of the image as well as the text.

link: http://www.justudios.com/New

I left the CSS in the document so you can access it all at once, but I do use separate stylesheets.

Thanks,
Justin

[tox0tes]

For moving the text down, you can add this to the Content style:

padding-top: 20px;

I'll try to figure out the background problem...

[JustinStudios]

Hrmm For some odd reason I knew that, but I guess when your looking at code for hours when it usually takes you a matter of minutes you forget things, lol. Thanks for the reminder on how to make my text position correctly. Still looking into that Background thing and I can't see where I am going wrong.

[Aardvarked]

Code: Select all

#NavBottom {
    position: absolute;
    top: 459px;
    width: 164px;
    height: 350px;
    background: url("http://www.webforumz.com/images/TemplateSearch.gif") repeat;}

Can be used as a workaround, for some reason the navbottom div is displaying at the top of the page in firefox, probably a html problem. I'm sure someone else can fix it completely for you but you could use my fix for now, works in IE too.

[Lchad]

try changing the #content width to 550px
I think that div is too wide?????

[Aardvarked]

Looking at the css a bit more, I'd consider re-coding it completely. Start off by making a header div, then add a container div which will hold the whole website, make that a fixed width and then go from there.

[JustinStudios]

Ok, this is fixed. I added a float: left to all 3 elements and it fixed it. I am not sure why this caused firefox to put the nav BG repeating up top but it did. I have also made some adjustments to the size after the fix,but those didn't seem to have any effect on the layout, those were just cosmetic.

Thanks for the help guys!

[Lchad]

Glad you sorted it out and posted the fix! Good job!