help newbie on first css problem

Stav_13 · 14 Aug 2008 at 16:14

hi,

Have been trying to make a drop down menu and have done it

but running into problems with the css side of it! my problem is that I can't seem to change the font size. I can change everything else fine but the font seems to be stuck what ever i put in!

here is the code

body {
font: normal 8px "Courier New", Courier, monospace;
}

ul {
margin: 0;
padding: 0;
list-style: none;
width: 150px; /* Width of Menu Items */
border-bottom: 1px solid #ccc;
}

ul li {
position: relative;
}

li ul {
position: absolute;
left: 149px; /* Set 1px less than menu width */
top: 0;
display: none;
}

ul li a {
display: block;
text-decoration: none;
color: #777;
background: #fff;
padding: 5px;
border: 1px solid #ccc; /* IE6 Bug */
border-bottom: 0;
}

* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }

li:hover ul { display: block; }

Thanks in advance

Stav

Stav_13 · 14 Aug 2008 at 17:43

Hi, Im not quite sure what you mean by that, like i said bit of a newbie! more use to flash. here is the html page im wanting to apply the css to

<html>
<head>
<title>Untitled-1</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript" src="drop_down.js"></script>
<style type="text/css">
@import "framework.css";
<style type="text/css">

</style></head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<table id="Table_01" width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="72">
<img src="images/index_01.png" width="100%" height="72" alt=""></td>
</tr>
<tr>
<td><table width="800" height="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="393" rowspan="2" align="left" valign="top"><ul>
<br>
<li><a href="#">
Home</a></li>
<li><a href="#">About</a>
<ul>
<li><a href="#">History</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Offices</a></li>
</ul>
</li>
<li><a href="#">Services</a>
<ul>
<li><a href="#">Web Design</a></li>
<li><a href="#">Internet
Marketing</a></li>
<li><a href="#">Hosting</a></li>
<li><a href="#">Domain Names</a></li>
<li><a href="#">Broadband</a></li>
</ul>
</li>
<li><a href="#">Contact Us</a>
<ul>
<li><a href="#">United Kingdom</a></li>
<li><a href="#">France</a></li>
<li><a href="#">USA</a></li>
<li><a href="#">Australia</a></li>
</ul>
</li>
</ul>
</td>
<td width="407" height="404"> </td>
</tr>
<tr>
<td height="52" align="right"><img src="images/logo.png" width="59" height="52"></td>
</tr>
</table></td>
</tr>
<tr>
<td height="72">
<img src="images/index_03.png" width="100%" height="72" alt=""></td>
</tr>
</table>

</body>
</html>

Stav

Stav_13 · 17 Aug 2008 at 16:07

ok I solved the problem.

Adamph = I tried what you said but it didnt make any difference

this is new code =

.navbar {

}

ul {
margin: 0;
padding: 0;
list-style: none;
width: 100px; /* Width of Menu Items */
border-bottom: 1px solid #ccc;
}

ul li {
position: relative;
}

li ul {
position: absolute;
left: 99px; /* Set 1px less than menu width */
top: 0;
display: none;
}

/* Styles for Menu Items */
ul li a {
display: block;
font-family: "Courier New", Courier, mono;
font-size: 0.8em;
text-decoration: none;
color: #777;
background: #fff;
padding: 5px;
border: 1px solid #ccc; /* IE6 Bug */
border-bottom: 0;
}

/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */

li:hover ul { display: block; } /* The magic */

so i put it in the ul li a area and all works now. im just wondering if someone could tell me why that happened really as i dont think its meant to be there!

Stav

help newbie on first css problem

Stav_13

Stav_13

Stav_13

Stav_13

Stav_13

Stav_13