help newbie on first css problem

Stav_13

Stav_13

Stav_13

Associate
Joined
1 Nov 2004
Posts
139
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
 
What's the HTML you're using this with?

My guess would be that the font specification on the Body tag isn't being inherited by the element you're wanting styled.
 
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">
<!--
body {
background-image: url();
}
-->
</style></head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- ImageReady Slices (Untitled-1) -->
<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">&nbsp;</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>
<!-- End ImageReady Slices -->
</body>
</html>

Stav
 
Make sure you use a doctype in your HTML. Place it above the opening <html> element.

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
 
Code: 
body {
	font-family: "Courier New", Courier, mono;
	font-size: 1em;
}

ul {
    font-size: 0.90em;
}

That should work, always try and specify font in em sizes. i.e:

font-size: 1.10em;
font-size: 0.75em;

etc
 
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
 
just thought i'd say please put any code in the [ code ] [ / code ] tags without the spaces so it is much easier to read, e.g.

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 */
 
You must log in or register to reply here.
Back
Top Bottom