DHTML Drop Down Menu Issues

Forum Moderators: open

Message Too Old, No Replies

DHTML Drop Down Menu Issues

zxk105

2:26 am on Jul 29, 2004 (gmt 0)

Hi,

Alright I am trying to create a drop down menu for my site. I am still working on it and long way from being done. And I need some help. Here is the test menu link:

<Sorry, no personal URLs. See TOS [webmasterworld.com]>

1. I don't know why there is a gap when I open the page in IE.
2. How can I change the color of my link when the mouse is moving over that cell?
3. Any idea why the menu is not aligned the same as it is in Netscape?

Thanks beforehand

[edited by: tedster at 3:06 am (utc) on July 29, 2004]

tedster

5:20 am on Jul 29, 2004 (gmt 0)

Welcome to the forum zxk105. A couple comments that may help out.

First thing I always make sure of before I work to debug cross-browser issues is that I have valid markup - both HTML [validator.w3.org] and CSS [jigsaw.w3.org].

Once I know that, I check into Quirks Mode vs. Standards Mode [webmasterworld.com] issues.

And finally, check out this cross browser DHTML menu system [webmasterworld.com] written and refined by our own BlobFisk. It comes with a nice tutorial that may give you some ideas - and the mark-up is about as efficient and cross browser compatible as I've ever seen.

zxk105

10:11 pm on Jul 29, 2004 (gmt 0)

Alright, I am going to go step by step here. First lets get the buttons in the right places. Then I will do the drop down menu. Here is the code that I have and I still have a gap when I use IE. Why?

------------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Website Title</title>

function status_bar()
{
window.status = statusbarmessage;
}
-->
</script>

<script language="JavaScript" type="text/javascript">
<!--
menu1on = new Image();
menu1on.src = "images/home_on.gif";

menu2on = new Image();
menu2on.src = "images/history_on.gif";

menu3on = new Image();
menu3on.src = "images/about_us_on.gif";

menu4on = new Image();
menu4on.src = "images/links_on.gif";

menu5on = new Image();
menu5on.src = "images/pictures_on.gif";

menu6on = new Image();
menu6on.src = "images/join_on.gif";

menu7on = new Image();
menu7on.src = "images/contact_us_on.gif";

//-->
</script>

</head>

<br>

<br>
<br>
<font color=black size="1">Copyright � 2003-2004, All Rights Reserved.</font>
<br>
</font>
</center>
</body>
</html>

[edited by: tedster at 11:29 pm (utc) on July 29, 2004]
[edit reason] remove specifics [/edit]

tedster

11:40 pm on Jul 29, 2004 (gmt 0)

Please go through the steps I listed above. This HTML is not valid - you have double </td> tags, which the validator would definitely catch.

There's lots of help freely available from the large membership here - but please help us first. Boil down your problem to a specific section of code that is the minimum needed to reproduce the problem. See Posting Code [webmasterworld.com] for more information.

zxk105

2:33 am on Jul 30, 2004 (gmt 0)

Sorry about that. As soon as I posted the message I realized how bad/long it looked. It won't happen again. Anyhoo, here is the code for the table. I just don't understand why there is extra space showing when I specifically write 0 for spacing and padding. Would the issue be solved if i cut the line into 15 pieces and placed them underneath? Can you help me out?

------------------

tedster

3:55 am on Jul 30, 2004 (gmt 0)

I'm not sure whether you are seeing extra horizontal gaps or vertical gaps. It might be either or both, but here are a couple obervations:

1. You have set the table to 800px wide

2. The code you posted does not have width or height for images - so I can't tell for sure, but do those widths add up to exactly 800 px? If not, there must be some side gaps in order that the table actually take up 800px in width.

3. You are using a full DTD, so modern browsers will be rendering in standards mode, not quirks mode. This as implications for how images should be displayed, and its especially noticable inside a table cell.

See Quirks Mode vs. Standards Mode [webmasterworld.com] for details, but know that an image is displayed as INLINE element item by default, not a block element. So the standards say the image should align with the text baseline - and that leaves a gap so that there is space for the descenders in any text.

Even if there is no text in the cell, modern browsers in standards mode leave space for that possibility. Quirks mode never acted this way, so it can be startling.

Do a quick experiment on your test page and change your DTD to this, by removing the URL for the W3C:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">

Reflect

1:38 pm on Jul 30, 2004 (gmt 0)

You are using a full DTD, so modern browsers will be rendering in standards mode, not quirks mode. This as implications for how images should be displayed, and its especially noticable inside a table cell.

I thought though that quirk mode should be avoided or should it? Won't that cause a possible "break" in the design for other browsers?

Just curious.

Take care,

Brian

zxk105

4:04 pm on Jul 30, 2004 (gmt 0)

Still nothing. I removed the line and there are still gaps. I made it so there are vertical gaps between the buttons. I want that. But there is a horizontal gap between the buttons and the bottom line. I need to get rid of that. It all adds up to 800px. 7 buttons of 100px is 700px, 6 spaces in between of 5px is 30px, and two spaces of 35px on each side. This is why I don't understand why it just does not align without the gap between the two tables. I will read the info on Quirks Mode........thanks for now......

tedster

5:35 pm on Jul 30, 2004 (gmt 0)

I thought though that quirk mode should be avoided or should it?

Layout that is based on quirks mode rendering needs to be addressed if, through your DTD, you ask the modern browsers to render in standards mode. It's an awkward transitional moment that will last at least a few more years. In some cases, you may want to ensure quirks mode rather than avoid it.

But most of all, if you are authoring web documents you need to learn what the standards are and use them wisely so your mark-up loooks good on older browsers AND modern browsers. Right now, the easiest path is to ENSURE quirks mode - but IMO that's not the wisest. Web authoring is an area where your education needs to continue almost daily and standards mode rendering is a current area that needs attention.

Noisehag

5:49 pm on Jul 30, 2004 (gmt 0)

Hey zxk105, here is your problem:

Your content in each cell of the tables needs to butt up against the starting td and ending td. So this:

<td width=100 align=center onMouseOver="myImg2.src=menu2on.src;" onMouseOut="myImg2.src='images/history_off.gif';">
<a href="history.html"><img name="myImg2" src="images/history_off.gif" border="0"></a>
</td>

needs to be this:

<td width=100 align=center onMouseOver="myImg2.src=menu2on.src;" onMouseOut="myImg2.src='images/history_off.gif';"><a href="history.html"><img name="myImg2" src="images/history_off.gif" border="0"></a></td>

I just tried it out and the bottom image went flush againts the top row of images. Good luck. :)

tedster

6:00 pm on Jul 30, 2004 (gmt 0)

Thanks, Noisehag. When the quirks mode test didn't fix it, I had a suspicion it was that old "line break in the mark-up" issue. But hadn't made the time to test zxk105's mark-up yet to be sure.

So it's not Quirks/Standards at all, in this case. But please, don't let that stop you from learning about it!

Reflect

6:18 pm on Jul 30, 2004 (gmt 0)

Thanks for the reply Tedster (as always), it does make sense.

Take care,

Brian

zxk105

6:44 pm on Jul 30, 2004 (gmt 0)

I just redid it all in Dreamweaver where <td> was automatically placed right after the content. When I looked at the page in both IE and Netscape it looked fine! Go figure eh. I still included the CSS code for dealing with images in my *.css file. Just in case. Thanks for the help. I'll be back if I need more help with my drop down navigation bar. Do you have any suggestions as to what code to use? Out of my 7 buttons I only have 3 that are drop down. I want to use AcmeMenu v2.5 drop down menu. You can find it easily online. Or should I use a different technique? Thanks again....