HV menu positioning problems with doctype

**kangepoeg** · 04-05-2005, 09:16 PM

Hi,

I am having a problem with the hv menu. I applied the hv menu using relative positioning and inserted the following code into my html document:

<table>
<tr><td>
<div id='MenuPos' style='position:relative; width:20; height:130;'><img src='./seethru.gif' width='20' height='130'></div>
</td></tr>
</table>

Everything looked great in Netscape, firefox, IE, and opera, and the menu was positioned in the place I wanted, and everything was perfect. However, at this time I did not have the doctype inserted to top of the html page. After inserting:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

to the page the menu is no longer alligned properly. In fact it behaves differently in each of the browsers. I have established that this doctype tag is the cause of the problem, but I do not know how to correct it. I am using a external css stylesheet, but do not know if I need to edit the css file, or the code in html document. Can anyone help me on this problem?

thanks, Kangepoeg

**jscheuer1** · 04-05-2005, 10:29 PM

Lose the !DOCTYPE. That should work. Problem is that loose (the doctype you used) is just that, loose - open to interpretation by various browsers. It might fix things if in your css and on page elements you specified px for all measurements not already specified as something else. Like:

Code:

<div id='MenuPos' style='position:relative; width:20px; height:130px;'><img src='./seethru.gif' width='20px' height='130px'></div>

**mwinter** · 04-06-2005, 11:48 AM

Originally Posted by jscheuer1

Lose the !DOCTYPE.

In principle, a document type declaration (DOCTYPE) is required in any HTML document. If inserting a DOCTYPE breaks a page, the page was already broken.

Problem is that loose (the doctype you used) is just that, loose - open to interpretation by various browsers.

Not in the slightest. The DOCTYPE is a document's claim to which elements and attributes it contains. A Strict document won't contain presentational elements and attributes, whereas a Transitional (Loose) document will. Similarly, a Frameset DOCTYPE indicates the use of frames, whereas the other two do not.

Modern user agents always assume that any element will occur in any document as part of their error correction code. However, the DOCTYPE does still have a practical purpose: a correct, recognisable DOCTYPE will switch user agents into "Standards Mode". In this mode, user agents will try to follow the rendering algorithms defined in the CSS specifications (though bugs may prevent total compliance, or you might just be using IE

). Without a DOCTYPE, or with a malformed or incomplete one, user agents will use "Quirks Mode" where they try to emulate old bugs. For example, IE6 will use the severely broken IE5 box model. Clearly, the former is the route to getting similar behaviour across user agents.

The other reason for including a DOCTYPE is for validation purposes. Without a DOCTYPE, a validator couldn't check a document as there's no indication of what should appear, and what shouldn't.

As I said, if introducing a DOCTYPE suddenly breaks a page, it was already broken: you were relying on bug side effects, not the defined algorithms.

Mike

**jscheuer1** · 04-06-2005, 04:18 PM

Originally Posted by kangepoeg

After inserting:

<!DOCTYPE HTML PUBL...

I've had a little more experience with !DOCTYPE since my last post in this thread. How did said doctype declaration get there? Did you load the page into NS Composer or some other 'HTML' editor that just put the doctype in? If so, it probably changed more than just the doctype declaration.

**kangepoeg** · 04-06-2005, 05:15 PM

Thanks for all your comments. I designed the site without the doctype declaration, as I was writing the pages by hand (without the aid of any programs). I was recently advised by a friend to check that the site is bobby compatible, and validate the css and html etc, which I did. I also added the transitional doctype, and the site passed these checks/tests with flying colors (of course after applying the proposed changes

).

I designed and tested the menu on pages that didn't contain the doctype (ie originals before i edited them) and it all worked well. Then I added the menu and related code to the pages where the css had been validated and the doctype declaration added. And this is where the problems were noticed. I guess I should still validate the html?

**jscheuer1** · 04-07-2005, 06:34 AM

Others will disagree and with good reason or at least good intention. I personally strive only to generate what works. I'm even thinking of adding a tagline to all my posts here:

"Works in Quirks"

Which means without any doctype or attempt at validation. The only thing holding me back is that like us all, I occasionally make mistakes. So to say it works would be a conceit in some cases.

Getting back to your situation. The way you describe it, it sounds like the 'valid' css might be the problem vis a vis conflicting with the script's style. Or the valid HTML might be removing contexts that enable the script. Even the Doctype might be rendering some of the script's quirks invalid. I have seen standards compliant editors make mincemeat out of perfectly fine working pages. The trouble with blindly following 'spec' is that 'spec' has no clue what you are doing or trying to do.

"98.675% Works in Quirks" - as a string

**mwinter** · 04-08-2005, 11:41 AM

Originally Posted by jscheuer1

Others will disagree and with good reason or at least good intention. I personally strive only to generate what works.

There is nothing wrong with creating Quirks mode documents, provided you have a reason that goes beyond, "I can't be bothered to write valid mark-up."

Personally, I abhore tag soup or anything like it. The inability to do something as simple as write well-formed mark-up has led to the horrible state in which the Web now finds itself. User agents allowing this to happen has just accentuated the problem.

I have seen standards compliant editors make mincemeat out of perfectly fine working pages.

Any editor that tries to be smart (and fails) will make mincemeat out of mark-up, standard-compliant or not.

The trouble with blindly following 'spec' is that 'spec' has no clue what you are doing or trying to do.

Who said anything about blindly following specifications? In any case, you must realise that the various Web-related specifications are there to try and make life easier for everyone: users, content authors, user agent vendors, etc. They define what should happen, and what shouldn't, in various situations so that you can depend upon that defined behaviour. The problem is that the Web is such a mess, due to the bad influences of both Web and user agent developers, that the defined behaviours aren't always implemented. This isn't a reason to bash the specifications - it's not of their making. Yes, you have to be practical, but practicality doesn't rule out doing things properly.

Still, the general trend of all user agents is towards standards-compliance (though Microsoft is moving slower than most). You're going to be on the losing side, especially if you move to XHTML (if that becomes viable).

To the OP: out of interest, did you add units to the CSS declarations (but not the img attributes) as jscheuer suggested? Units are required for all non-zero length values.

I'm afraid I'm not going to wade through the swamp that is HV Menu to find out if it does work properly when a document is rendered in Standards mode (though the script description does say it should). This might be one of those occasions when you'd have a good enough reason to use Quirks mode rendering.

Mike

**kangepoeg** · 04-14-2005, 09:45 AM

Well, after all the information I set about validating the css and html against the chosen doctype. I noticed that I had many problems which I corrected so that the pages passed on all accounts. However, while this cleared up all of the validation problems, the menu allignment problems still remained.

To answer one last question yes I did use units in my css declarations but not in my image width/height declarations. However, I tested this and it did not seem to make much difference.

Through much effort I finally managed to position the HV menu in all browsers, by removing the <table>, <td> and <tr>tags from the insert below (note I originally placed this table in another table):

<table>
<tr><td>
<div id='MenuPos' style='position:relative; width:20; height:130;'><img src='./seethru.gif' width='20' height='130'></div>
</td></tr>
</table>

so that the end result was placed in the <td> and <tr>tags of the original table (I also added a background image to this menu):

<td width="150" align="left" valign="top" style="background-image: url('./pics/left_bar.gif'); background-repeat: no-repeat">
<div id='MenuPos' style='position:relative; width:130; height:20;'><img src='./pics/seethru.gif' alt="see through image to aid positioning" width='130' height='20'></div>
</td>

After this the menu worked like a dream...until I tested on my brother's computer (and my cousin reported the same problem on his computer) with resolution 800*600 and windows 98 to see that the HV menu is positioned half way down the page. On my computer where resolution was set at 1280*1024 using windows xp the menu is positioned correctly in the top left hand corner. I have changed all the resolution settings on both computers so that they are the same etc but on mine it always is displayed as I want it , but NOT on my brothers.

Anyone encountered this before? thanks again.

**jscheuer1** · 04-14-2005, 10:21 AM

As long as we are going 'valid':

Code:

<td width="150" align="left" valign="top" style="background-image: url('./pics/left_bar.gif'); background-repeat: no-repeat">
<div id="MenuPos" style="position:relative; width:130px; height:20px;"><img src="./pics/seethru.gif" alt="see through image to aid positioning" width="130" height="20"></div> 
</td>

Highlighted red for units and consistent quoting. You said you tried this, but did you in this particular instance?

**kangepoeg** · 04-14-2005, 12:14 PM

OK! I did as you instructed. I replaced the single quotes with 'quirks' and added the px to the places you identified.

Now the positioning works as I want on both computers

Thanks for the advice and help!!!!!!

Thread: HV menu positioning problems with doctype

Thread Tools

Search Thread

HV menu positioning problems with doctype

description of problem

Bookmarks

Bookmarks

Posting Permissions