asked on

What is the proper syntax for adding CSS?

I'm new to CSS and am trying to remove the vertical blank space between a drop down menu. I know that I need to add margin:0px; padding:0px; to my code but don't know where or how it should look in the completed code. Here is the page displaying the desired result and what I have now.

http://www.glowfishtw.com/flagfootball/menu.asp

Here is my page and attached is my style sheet. Could someone please show me how to change my code to make this work? thanks

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

<html>

<head>
      <title>CSS Horizontal Drop-Down Menu</title>



<style type="text/css">@import url("menuh.css");</style>



</head>

<body>

              <table width="667" border="1">
<tr>
<td><img src="images/example.jpg"></td>
<td>


                  <div id="menuh">
                   <ul>
                   <li><a href="#" class="top_parent"><img src="images/register.jpg" border='0'></a>
<ul>
<li><a href="#"><img src="images/winter.jpg" border='0'></a></li>
<li><a href="#"><img src="images/spring.jpg" border='0'></a></li>
<li><a href="#"><img src="images/fall.jpg" border='0'></a></li>
<li><a href="#"><img src="images/summer.jpg" border='0'></a></li>
</ul>
              </li>
              </ul>
                   </div>
                        </td>
<td> </td>
</tr>
</table>
<p>  </p>
</body>
</html>

#menuh
	{
	font-size: small;
	font-family: arial, helvetica, sans-serif;
	width:100%;
	float:left;
	background-image: none;
	margin: 0px;
	}
		
#menuh a
	{
	text-align: center;
	display:block;
	border:0px;
	white-space:nowrap;
	margin:0;
	padding:0px;
	}
	
#menuh a:link, #menuh a:visited, #menuh a:active	/* menu at rest */
	{
	color: white;
	text-decoration:none;
	background-image: none;
	background-repeat: no-repeat;
	background-color: #GGGGGG;
	}
	
#menuh a:hover	/* menu at mouse-over  */
	{
	color: white;
	background-color: #0105A7;
	text-decoration:none;
	}	
	
 
#menuh ul
	{
	list-style:none;
	margin:0;
	padding:0;
	float:left;
	width:84px;     /* width of all menu boxes */
	height:10px;	/* height of all menu boxes */
	}
 
#menuh li
	{
	position:relative;
	min-height: 1px; 			/* Sophie Dennis contribution for IE7 */
	vertical-align: bottom; /* Sophie Dennis contribution for IE7 */
	background-image: none;
	margin:0px; 
	padding:0px;
	}
 
#menuh UL, LI  {margin:0px; padding:0px;}
 
#menuh IMG  { margin:0px; padding:0px; border:0px }
 
#menuh ul ul
	{
	position:absolute;
	z-index:500;
	top:auto;
	display:none;
	padding: 1em;
	margin:-1em 0 0 -1em;
	}
 
#menuh ul ul ul
	{
	top:0;
	left:100%;
	}
 
div#menuh li:hover
	{
	cursor:pointer;
	z-index:100;
	}
 
div#menuh li:hover ul ul,
div#menuh li li:hover ul ul,
div#menuh li li li:hover ul ul,
div#menuh li li li li:hover ul ul
{display:none;}
 
div#menuh li:hover ul,
div#menuh li li:hover ul,
div#menuh li li li:hover ul,
div#menuh li li li li:hover ul
{display:block;}
 
/* End CSS Drop Down Menu */

Open in new window

lpxtech

There are a few methods,

Loading an external stylesheet can be done two ways. See code below.

Option 1:
 
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My Page</title>
<link rel="stylesheet" href="mystylesheet.css" media="all" />
</head>
 
Option 2:
 
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My Page</title>
<style type="text/css">@import("mystylesheet.css");</style>
</head>

Open in new window

ASKER CERTIFIED SOLUTION

scrathcyboy

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial