PDA

View Full Version : 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/dynamicindex1/chrome/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:


.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
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
All you would have to do is delete this segment in your css:


.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:


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


Find these points listed useful for your growth:

Never miss a DTD (http://alistapart.com/articles/doctype).
See the list of deprecated tags and attributes (http://www.codehelp.co.uk/html/deprecated.html). You've got good number of them on your page.
And lastly, tables was'nt intended for layouts (http://hotdesign.com/seybold)


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:


<!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:


<!--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:


<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.


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


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


Find these points listed useful for your growth:

Never miss a DTD (http://alistapart.com/articles/doctype).
See the list of deprecated tags and attributes (http://www.codehelp.co.uk/html/deprecated.html). You've got good number of them on your page.
And lastly, tables was'nt intended for layouts (http://hotdesign.com/seybold)


Hope that helps.

rangana
08-22-2008, 05:32 AM
I thought it was your intention, but highlighted are the cause:


<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 (http://validator.w3.org/check?uri=http%3A%2F%2Fwww.usawildwater.com%2Findex2.htm&charset=(detect+automatically)&doctype=Inline&group=0).

Hope that makes sense.

unclefuzzy
08-22-2008, 11:43 PM
Thanks!! I got it now.