Divs in IE and Firefox

[Slimane]

Hello,

We have a classic problem concerning DIV positioning in Firefox.

We had a tool's UI designed with DIV elements inside a table. It looks OK in IE but completely out of whack in Firefox.

You can see it here and compare the rendering by the 2 browsers (the tool is in the blue table on the right):
http://www.sweetartsdesign.com.ws026.alentus.com/200WebSite/indexb.html

This is what we are trying to do - we need to keep the same table's total height but:
1) Make the 3rd area (name area) look better when minimized. There's a light blue gap at the bottom but we'd like only a 1 pixel thick line, as the ones that separate the other areas above (letter and design areas)
2) Have the whole tool's UI in Firefox match the one in IE

Do you have any tips?

Thanks!

[booneyHill]

Your link (http://www.sweetartsdesign.com.ws026.alentus.com/200WebSite/indexb.html) doesn't work.

[Slimane]

Your link (http://www.sweetartsdesign.com.ws026.alentus.com/200WebSite/indexb.html) doesn't work.

Oops.

http://www.sweetartsdesign.com.ws026.alentus.com/2007WebSite/indexb.html

[drhowarddrfine]

We have a classic problem concerning DIV positioning in Firefox.

We had a tool's UI designed with DIV elements inside a table. It looks OK in IE but completely out of whack in Firefox.

Then the problem is IE not Firefox.
Neither link you provide works.

Do you have any tips?

Thanks!

Never, ever use IE as a reference browser. It is nine years behind web standards and buggy. Always, always use a modern browser as your test/reference, such as Firefox or Opera. The hacks to make modern code work in IE are known and available. Until you give us a working link, however, we will be unable to help.

[booneyHill]

I'm assuming you're using IE 7. The select fields look wrong in Firefox because Firefox correctly followed the rules in your CSS.

If you want to change the height of a select field use the size attribute instead. For instance:

[HTML]
<select size="3">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
[/HTML]

This will typically give you better results across browsers than using either pixels or ems.

[drhowarddrfine]

The second link works now. You have a classic problem concerning DIV positioning in IE. You have no doctype which puts IE into 'quirks mode' and it uses its broken 'box model'. To try and get IE to pretend it's a modern browser like Firefox, add a 'transitional' doctype as mentioned in the article about doctypes under Articles at the top of this page. You need the 'transitional' doctype because your markup is made of many deprecated elements.

Validate your code for your list of 36 html errors that need fixing. I did not check for CSS errors so you should validate for that list, too.

Then do any adjustments while testing in a modern browser like Firefox or Opera or Safari. Then look at IE so you can hack it for its many quirks and bugs. IE6/7 is nine years behind web standards but its bugs are known as well as the fixes.

After all that, if you need help fixing IE, please feel free to ask more questions.

[Slimane]

Thanks, booneyHill and drhowarddrfine

[tommurray]

Just a tip if you have problems fixing issues in IE you can do a conditional if statement that only IE understands like below:

This applys to all IE browsers.

 
<!--[if IE]>
 <link href="/css/ieonly.css" rel="stylesheet" type="text/css" />
<![endif]-->
 
<!--[if IE 5]>
<p>This message is only displayed in IE5.</p>
<![endif]-->
 
<!--[if !IE 5]>
<p>This message is only displayed in browsers other than IE5.</p>
<![endif]-->
 
<!--[if lt IE 7]>
<p>This message is only displayed in browsers earlier than IE7.</p>
<![endif]-->
 
<!--[if gte IE 6]>
<p>This message is only displayed in IE6 and greater.</p>
<![endif]-->
 
 

I think its a far better approach than using Hacks, but thats my personal point of view but some people may differ.

Tom