Chrome CSS Drop Down Menu (v2.4) - blank space

**unclefuzzy** · 08-21-2008, 04:05 AM

1) Script Title: Chrome CSS Drop Down Menu (v2.4)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...rome/index.htm

3) Describe problem: How can I change or eliminate the amount of blank space that appears above and below the menu?

You can see the space between the menu and the rest of the web page at:
http://www.usawildwater.com/index2.htm.

The space is there when I view the page with IE 7, FF 2 and FF 3.

**rangana** · 08-21-2008, 04:33 AM

Could you please grab a screenshot at your end and point what you mean. It's confusing.

Also, please provide a link to the page in question.

**Nile** · 08-21-2008, 04:52 AM

All you would have to do is delete this segment in your css:

Code:

.chromestyle:after{ /*Add margin between menu and rest of content in Firefox*/
content: "."; 
display: block; 
height: 0; 
clear: both; 
visibility: hidden;
}

**unclefuzzy** · 08-21-2008, 02:46 PM

Originally Posted by rangana

Could you please grab a screenshot at your end and point what you mean. It's confusing.

Also, please provide a link to the page in question.

http://www.usawildwater.com/index2.htm

I am talking about the space above and below the menu.

If you look at the link at http://www.usawildwater.com/index.htm you will see the original page with no space below the menu.

**unclefuzzy** · 08-21-2008, 03:44 PM

Originally Posted by Nile

All you would have to do is delete this segment in your css:

Code:

.chromestyle:after{ /*Add margin between menu and rest of content in Firefox*/
content: "."; 
display: block; 
height: 0; 
clear: both; 
visibility: hidden;
}

I tried that and it doesn't change anything.

**rangana** · 08-22-2008, 04:53 AM

Try to have this at the very top of your CSS:

Code:

*{margin:0px;padding:0px;}

Find these points listed useful for your growth:

Never miss a DTD.
See the list of deprecated tags and attributes. You've got good number of them on your page.
And lastly, tables was'nt intended for layouts

Hope that helps.

**ddadmin** · 08-22-2008, 05:14 AM

A few things you should do:

1) Add a valid doctype to the top of your page, such as:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

2) Then, move the HTML for the drop down menus themselves to the very bottom of the page, right above the </body> tag:

Code:

<!--1st drop down menu -->                                                   
<div style="top: 0pt; left: 0pt; clip: rect(0pt, auto, 245.227px, 0pt); visibility: hidden;" id="dropmenu1" class="dropmenudiv">
<a href="http://www.usawildwater.com/welcome.html">Welcome</a>
<a href="http://www.usawildwater.com/CCC-brochure.pdf">Brochure</a>
<a href="http://www.usawildwater.com/onlinesdues.html">Membership</a>
<a href="http://www.usawildwater.com/newsletter.html">Newsletter</a>
<a href="http://www.usawildwater.com/mailing_list.html">Email List (CCClist)</a>
<a href="http://www.usawildwater.com/officers.html">Officers/Staff</a>
<a href="http://www.usawildwater.com/presidents_message.pdf">President's Message</a>
<a href="http://www.usawildwater.com/logosales.pdf">Logo Sales</a>
<a href="http://www.usawildwater.com/bylaws.pdf">Bylaws</a>
<a href="http://www.usawildwater.com/river_courtesy.html">River Courtesy</a>
</div>

<!--2nd drop down menu -->                                                
<div id="dropmenu2" class="dropmenudiv" style="width: 150px; top: 0pt; left: 0pt; clip: rect(0pt, auto, 77.1561px, 0pt); visibility: hidden;">
<a href="http://www.usawildwater.com/races/2008RaceSchedule.pdf">2008 Calendar</a>
<a href="http://www.usawildwater.com/races/2009RaceSchedule.pdf">2009 Calendar</a>
<a href="http://www.usawildwater.com/races/archive.htm">Archives</a>
</div>

<!--3rd drop down menu -->                                                   
<div id="dropmenu3" class="dropmenudiv" style="width: 150px;">
<a href="http://www.usawildwater.com/equipment.htm">Want Ads</a>
<a href="http://www.usawildwater.com/vendors.htm">Vendors</a>
</div>

<!--4th drop down menu -->                                                   
<div id="dropmenu4" class="dropmenudiv" style="width: 150px;">
<a href="http://www.usack.org/">USA Canoe/Kayak</a>
<a href="http://www.canoeicf.com/">International Canoe Federation</a>
<a href="http://www.wwcommittee.com/">ICF Wildwater Committee</a>
<a href="http://www.wildwater.org.uk/index.html">Great Britain Wildwater Racing</a>
<a href="http://www.canoe-europe.org/">European Canoe Association</a>
<a href="http://www.rapiddescentracing.blogspot.com/">Australian Wildwater Team</a>
</div>

<!--5th drop down menu -->                                                   
<div id="dropmenu5" class="dropmenudiv" style="width: 150px;">
<a href="http://www.usawildwater.com/contact.htm">USA Wildwater</a>
<a href="http://www.usack.org/">USA Canoe/Kayak</a>
<a href="http://www.usawildwater.com/coaching.htm">Coaches/Mentors</a>
</div>

<script type="text/javascript">
cssdropdown.startchrome("chromemenu")
</script>

</body>

3) Having done this, there is still a gap. However, it looks like there is something with your table immediately following the menu that's the cause. I say this because if you inserted a DIV instead right after the menu, there is no gap between the two:

Code:

<div class="chromestyle" id="chromemenu">
<ul>
<li><a href="http://www.usawildwater.com/index2.htm">Home</a></li>
<li><a href="http://www.usawildwater.com/about.htm">About</a></li>
<li><a class="" href="#" rel="dropmenu1">News <img src="client_files/down.gif" border="0"></a></li>
<li><a class="" href="#" rel="dropmenu2">Calendar <img src="client_files/down.gif" border="0"></a></li>
<li><a href="http://www.usawildwater.com/training/index.htm">Techniques &amp; Training</a></li>	
<li><a href="#" rel="dropmenu3">Equipment <img src="client_files/down.gif" border="0"></a></li>	
<li><a href="#" rel="dropmenu4">Federations <img src="client_files/down.gif" border="0"></a></li>	
<li><a href="#" rel="dropmenu5">Contacts <img src="client_files/down.gif" border="0"></a></li>	
<li><a href="http://www.usawildwater.com/photos/index.htm">Photos/Videos</a></li>	
<li><a href="http://www.usawildwater.com/halloffame/index.htm">Hall of Fame</a></li>	
</ul>
</div>
<div>Some random div</div>

**unclefuzzy** · 08-22-2008, 05:16 AM

That eliminated the space above the menu, but not the space below the menu.

Originally Posted by rangana

Try to have this at the very top of your CSS:

Code:

*{margin:0px;padding:0px;}

Find these points listed useful for your growth:

Never miss a DTD.
See the list of deprecated tags and attributes. You've got good number of them on your page.
And lastly, tables was'nt intended for layouts

Hope that helps.

**rangana** · 08-22-2008, 05:32 AM

I thought it was your intention, but highlighted are the cause:

Code:

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr><td colspan="4" bgcolor="white" height="16"></td>
  <tr><td colspan="4" bgcolor="black" height="2"></td>
  <tr><td colspan="4" bgcolor="red" height="2"></td>
  <tr><td colspan="4" bgcolor="black" height="2"></td>
  <tr> 
     <td width="2" bgcolor="black"></td>
     <td height="62" valign="bottom">
        <img src="images/usckt_logo.gif" width="104" height="60"></td>

Remove it, and also, you haven't closed your <tr> tags.

With that said, I throwed your page on validator and see the good number of errors you have which needs your attention.

Hope that makes sense.

**unclefuzzy** · 08-22-2008, 11:43 PM

Thanks!! I got it now.

Thread: Chrome CSS Drop Down Menu (v2.4) - blank space

Thread Tools

Search Thread

Chrome CSS Drop Down Menu (v2.4) - blank space

Bookmarks

Bookmarks

Posting Permissions