CSS for this Dummy Anyone?

[cmgdev]

Greetings! I am trying to create a simple landing page using some css. I have referenced every book I have and cannot find out what I am doing wrong (probably a few things).

Would you please take a quick peek at the landing page at http://www.grabzool.com/breezair in IE and Firefox.

In Firefox, the #content is below a centered nav bar. The nav bar is supposed to be floated to the left with the content to the right (all in the center container). It looks fine in IE but is completely a mess in Firefox. I would appreciate any help you may be able to offer.

If I had any hair left I would pull it out :confused: .

Thank you for your help.

[MidiMagic]

This is a place where the browsers are not the same. The divs are inheriting the center attribute from the outside div in FF, but not IE.

The second div is also too large, since it is wrapping. FF decided to give it maximum width by placing it below the other div. This is part of the fluid nature of div.

Also, you are mixing css with the deprecated align attributes. This can cause unpredictable results.

Since you are already in a table, use the table to place the two parts where you want them. Tables always stick together in the correct order if all of the tags are present.

[cmgdev]

Thank you for the tips. I was able (at least from my perspective browsers) to get everything lined up by adjusting the margins and position attributes.

However, there are more to build so I am going to use your advice for those. I appreciate the help.

[Eilandor]

Cpecification of CSS says that when you use "float" you must specify width of floating block.
You don't need "position:relative" here.
Your main ("center") block should not be floating.
Here is code which work in my FF and IE:

#center {
}

#nav {
float: left;
padding: 15px 15px 15px 10px;
width: 25%;
}

#content {
float: right;
padding: 15px 10px 15px 10px;
margin: auto 25px 0px 0px;
width: 55%;
}

Specification of "width: 75%" for "content" should not work because actual width of "nav" IS NOT 25%. Inside nav there are images with width="197" that is much more than 25% (I think about 45%. That's why 55% for content works correctly). You may tune numbers by yourself.

[Eilandor]

P.S.
Almost forget to say that "clear: both;" forces content to begin from a new line and who knows why it is ignored in IE. (you should not use it in content)

[throbbie]

Hi

I have been getting into CSS recently to re-work a lot of different wordpress themes so I am by no means an expert - in fact I'd say just beginning to become slightly competent, however, I think I can give you some tips on software to help.

Type stylizer into google and get the free download trial version. Open it and select "Stlye a website" then put your url in. This lets you highlight each part of the css and make changes - I suggest that you don't save it, just use the info to amend the live stylesheet. It has firefox and IE options.

You can also get a css toolbar in firefox which offers very similar functionality.

Use the tools and muddle through - it has worked for me.

Good luck

Rob

[MidiMagic]

To avoid trouble with incompatibilities between FF and IE, don't put width or height in the same style as margin, border, or padding.

IE renders them in the opposite nesting order to that used by the standard (and other browsers).

Instead, nest two tags, one with the width or height, and the other with the3 margin, border, and/or padding.