Floating Issue. Arrgh!

[tlcook]

Hey, I'm designing something new and fresh for a change, and I was fine until I added in something new at the top of the page.

Now the layout has totally messed up and I can't find the problem

I want the title and logo as they are. But the text underneath should be underneath the title and the links under the logo.

Also, the links should be the same width, defined in the CSS file with 'width:75px;', but they aren't Why?

The page so far: http://www.tlcook.com/tlc
The CSS file: http://www.tlcook.com/tlc/style.css

For the problem I am talking about, view the page in Firefox only. Because I have different stylesheets for different browsers (that fixed a different problem).

EDIT: Layout fixed.

[mlseim]

I want to add that it's a bad idea to have different style
sheets for different browsers (in my opinion anyhow).

You will forever by fighting revision problems now that
you're rendering your pages based on browsers.

Design your site with one CSS style sheet for FireFox and
then make it work for IE.

Yes, more people use IE, but FireFox more closely follows the standards.

[Shadowfiend]

If nothing else, use one stylesheet for Firefox and for IE, and then maybe include an additional stylesheet to apply IE hacks, included via a conditional IE include.

Remember, one of the best principles to follow in the world of programming is DRY -- Don't Repeat Yourself.

[Steax]

True. One of the main ideas of CSS is that updating becomes really easy - one change and your site changes entirely to everyone. Having multiple stylesheets defeats this purpose. If you want, make one for "correct" browsers (Firefox, opera etc), and apply the CSS IE hacks in the same file. I'm sure your original problem was one on the box model - well, there are hacks on that everywhere.

[tlcook]

Thanks for your ideas. I know having different stylesheets for different browsers isn't good practice, but it solved my problem for the time being. I am too new to CSS to get it right first time :P

I am confused as to why things look better in IE than Firefox and Opera! The navigation links on the right should have a fixed width, but it only shows that in IE. Any ideas on that?

[raspberryh]

If you're not getting your fixed width for your nav links, try using display: block for them. I don't see any display property in your stylesheet for the nav.