Quirks and DOCTYPE modes

SBonfiglio · Oct 8, 2008

Hello Folks.
I'm experiencing a very strange problem
This is the listing of a file that's driving me crazy.
=============================================================================

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "

http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>TEST</title>
<style type="text/css">

</style>
</head>
<body>
<div class="bottonemenu"><a href="Javascript:;">FUNCTION 1</a></div>
<div class="bottonemenu"><a href="Javascript:;">FUNCTION 2</a></div>
<div class="bottonemenu"><a href="Javascript:;">FUNCTION 3</a></div>
<div class="bottonemenu"><a href="Javascript:;">FUNCTION 4</a></div>
<p> </p>
<table border="1" cellspacing="0" cellpadding="0">
<tr>
<td height="30"><div class="bottonemenu" style="height:30"><a href="Javascript:;">FUNCTION 1 BLA BLA BLA</a></div></td>
<td><div class="bottonemenu"><a href="Javascript:;">FUNCTION 2</a></div></td>
<td><div class="bottonemenu"><a href="Javascript:;">FUNCTION 3</a></div></td>
<td><div class="bottonemenu"><a href="Javascript:;">FUNCTION 4</a></div></td>
<td><div class="bottonemenu"><a href="Javascript:;">FUNCTION 5</a></div></td>
</tr>
</table>
<p> </p>
</body>
</html>

===================================================

Well, If I declare some DOCTYPE of any kind at the beginning, IE refuses to format correctly the DIVs especially for the height dimension.
To make it work properly in IE I have to delete the DOCTYPE declaration.

Is it normal ? Is this a common IE 7 behavior ?

Thanks for any help.

audiopro · Oct 8, 2008

First things first - Does the page validate?
Why are your CSS styles commented out?

Keith

http://www.studiosoft.co.uk

traingamer · Oct 8, 2008

It validates.

One problem is the div inside the table. The div padding is defined (but not its default margins), but the table also has default margins and padding which contribute to the perceived 'problem'.

Also the style="height:30" is invalid - 30 what? ([blue]30px[/blue] is ok - [blue]30[/blue] is not).

The problem is also not clearly stated. What do you want/expect it to do?

Greg
People demand freedom of speech as a compensation for the freedom of thought which they seldom use. Kierkegaard

Vragabond · Oct 8, 2008

I would suggest you re-think the whole menu. It looks incredibly convoluted and overly complicated. You should rely more on descendant selectors and use lists instead of divs or tables.

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

SBonfiglio · Oct 9, 2008

The problem is that it does render on Firefox but it doesn't on IE unless I delete the doctype declaration.
This is not a real menu, but only a test, but it doesn't change.
If you to save the document and - ok, the height:30 mus be corrected in 30px - but run it, you will see that in both cases, the divs alone and the divs in the table cells do not render correcly, cutting the div area just up the text.
If you run in in FF, insted, the appearance is correct.
I mean, you should try the file.

Vragabond · Oct 9, 2008

Of course, we could try and fix your design. But then you would end up with a flawed design that is all patched up to appear correctly in various browsers.

Alternatively, you can re-build the whole thing in a much simpler way and have it work in all the browsers (because it will lack the unnecessary complexity of this version.

Start simple. A bunch of anchors will already produce a pretty good result -- then build from there. And remember that with inline elements, you will be better off specifying line-height instead of the height itself.

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

SBonfiglio · Oct 9, 2008

Vragabond,
thanks for your suggestions, but the problem that I asked help for remains open.
I'd like to know if this design is incorrect somewhere and I'd like to understand which is the parameter which makes IE to fail and why it doesen't in FF.
Is there anything wrong in the definitions ?
If I cannot understand where I'm doing wrong I will go ahead writing wrong definitions.
Is that clear ?

Thanks in advance.

traingamer · Oct 9, 2008

Well, If I declare some DOCTYPE of any kind at the beginning, IE refuses to format correctly the DIVs especially for the height dimension.

Yes, because IE has difficulty with your usage of display: inline. Replace it with float: left and see if the results are similar across browsers. (Remember that default padding and margins vary widely in different browsers.)

As Vragabond suggested, using <li> with floats is one widely accepted method of making horizontal menus.

Greg
People demand freedom of speech as a compensation for the freedom of thought which they seldom use. Kierkegaard

SBonfiglio · Oct 9, 2008

Sorry Traingamer,

but it seems not working as well.
Said this I will try to start again fron scratch to guess which is the parameter that fails, adding one by one.
Thanks you all Folks!

Sergio

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Quirks and DOCTYPE modes

SBonfiglio

IS-IT--Management

audiopro

Programmer

traingamer

Programmer

Vragabond

Programmer

SBonfiglio

IS-IT--Management

Vragabond

Programmer

SBonfiglio

IS-IT--Management

traingamer

Programmer

SBonfiglio

IS-IT--Management

Similar threads

Part and Inventory Search

Sponsor