morraine
11-09-2006, 07:31 PM
Hello All.
im having trouble coding the css properly to display a resizerble horizontal menu which evenly sizez to what ever size of browser from 800 X 600 up.
I have successfully done it on IE without a doctype here (http://www.intense.uk.com/footer3.html)
but when i put the doctype in or in firefox (with or without doctype) i just bunches together in the middle like this here (http://www.intense.uk.com/footer4.html)
Can anyone please tell me were im going wrong.??? i down loaded this menu form the css libary on dynamic drive and made some edits to work for my site, but i hust cant make it space evenly??!?!?!??!:confused:
your input on this will be very gratefull
thank you
this is the code for the page
<!doctype HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
<title>footerart2</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */
#chromemenu {
width : 100%;
font-family : Arial;
font-weight : normal;
font-size : 70%;
}
#chromemenu:after {
content : ".";
display : block;
width : 100%;
height : 0;
clear : both;
visibility : hidden;
}
#chromemenu ul {
border : 0 solid #bbb;
width : 100%;
background : url('images/chromebg9.gif') repeat-x center;
margin : 0;
text-align : center;
padding-left : 0;
padding-right : 0;
padding-top : 2px;
padding-bottom : 2px;
}
#chromemenu ul li {
display : inline;
}
#chromemenu ul li a {
color : #ffffff;
padding : 1px;
margin : 0;
width : 16%;
text-decoration : underline;
border-right : 1px solid #dadada;
}
#chromemenu ul li a:hover {
background : url('images/chromebg10.gif') repeat-x center;
}
</style>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" rightmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- ImageReady Slices (footerart2.png) -->
<table id="Table_10" width="100%" height="101" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img src="images/footerart2_01.gif" width="4" height="26" alt=""/></td>
<td colspan="6" background="images/footerart2_01.gif" width="100%"></td>
<td><img src="images/spacer.gif" width="1" height="26" alt=""/></td>
</tr>
<tr>
<td colspan="5"><img src="images/footerart2_03.gif" width="401" height="14" alt=""/></td>
<td rowspan="3" background="images/footerart2_04.gif" width="100%"></td>
<td rowspan="3"><img src="images/footerart2_05X.gif" width="367" height="47" alt="Copyright © 2006 Intense Cosmetics Ltd"/></td>
<td><img src="images/spacer.gif" width="1" height="14" alt=""/></td>
</tr>
<tr>
<td colspan="2" rowspan="5"><img src="images/footerart2_06.gif" width="5" height="60" alt=""/></td>
<td><img src="images/footerart2_07.gif" width="278" height="15" alt=""/></td>
<td colspan="2"><img src="images/footerart2_08.gif" width="118" height="15" alt=""/></td>
<td><img src="images/spacer.gif" width="1" height="15" alt=""/></td>
</tr>
<tr>
<td colspan="2" rowspan="2"><a href="#" onclick="javascript:window.open('https://www.paypal.com/uk/cgi-bin/webscr?cmd=xpt/popup/OLCWhatIsPayPal-outside','olcwhatispaypal','toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=yes, width=400, height=350');">
<img src="images/footerart2_09.gif" width="337" height="36" alt="Paypal, Secure Online Payments. Click for more info." border="0"/></a></td>
<td rowspan="4"><img src="images/footerart2_10x5.gif" width="59" height="45" alt=""/></td>
<td><img src="images/spacer.gif" width="1" height="18" alt=""/></td>
</tr>
<tr>
<td colspan="2" rowspan="2" width="100%">
<div id="chromemenu">
<ul>
<li><a href="http://www.intense.uk.com/footer4.html">Home</a></li>
<li><a href="http://www.intense.uk.com/footer4.html">About Us</a></li>
<li><a href="http://www.intense.uk.com/footer4.html">Privacy</a></li>
<li><a href="http://www.intense.uk.com/footer4.html">Terms</a></li>
<li><a href="http://www.intense.uk.com/footer4.html">Returns</a></li>
<li><a href="http://www.intense.uk.com/footer4.html">Site Map</a></li>
</ul>
</div>
</td>
<td><img src="images/spacer.gif" width="1" height="18" alt=""/></td>
</tr>
<tr>
<td colspan="2" rowspan="2"><img src="images/footerart2_12.gif" width="337" height="9" alt=""/></td>
<td><img src="images/spacer.gif" width="1" height="3" alt=""/></td>
</tr>
<tr>
<td colspan="2" background="images/footer3_09.gif" width="100%"><img border="0" src="images/footer3_09.gif" width="5" height="6"/></td>
<td><img src="images/spacer.gif" width="1" height="6" alt=""/></td>
</tr>
<tr>
<td><img src="images/spacer.gif" width="4" height="1" alt=""/></td>
<td><img src="images/spacer.gif" width="1" height="1" alt=""/></td>
<td><img src="images/spacer.gif" width="278" height="1" alt=""/></td>
<td><img src="images/spacer.gif" width="59" height="1" alt=""/></td>
<td><img src="images/spacer.gif" width="59" height="1" alt=""/></td>
<td><img src="images/spacer.gif" width="4" height="1" alt=""/></td>
<td><img src="images/spacer.gif" width="367" height="1" alt=""/></td>
<td/>
</tr>
</table>
<!-- End ImageReady Slices -->
</body>
</html>
im having trouble coding the css properly to display a resizerble horizontal menu which evenly sizez to what ever size of browser from 800 X 600 up.
I have successfully done it on IE without a doctype here (http://www.intense.uk.com/footer3.html)
but when i put the doctype in or in firefox (with or without doctype) i just bunches together in the middle like this here (http://www.intense.uk.com/footer4.html)
Can anyone please tell me were im going wrong.??? i down loaded this menu form the css libary on dynamic drive and made some edits to work for my site, but i hust cant make it space evenly??!?!?!??!:confused:
your input on this will be very gratefull
thank you
this is the code for the page
<!doctype HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
<title>footerart2</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */
#chromemenu {
width : 100%;
font-family : Arial;
font-weight : normal;
font-size : 70%;
}
#chromemenu:after {
content : ".";
display : block;
width : 100%;
height : 0;
clear : both;
visibility : hidden;
}
#chromemenu ul {
border : 0 solid #bbb;
width : 100%;
background : url('images/chromebg9.gif') repeat-x center;
margin : 0;
text-align : center;
padding-left : 0;
padding-right : 0;
padding-top : 2px;
padding-bottom : 2px;
}
#chromemenu ul li {
display : inline;
}
#chromemenu ul li a {
color : #ffffff;
padding : 1px;
margin : 0;
width : 16%;
text-decoration : underline;
border-right : 1px solid #dadada;
}
#chromemenu ul li a:hover {
background : url('images/chromebg10.gif') repeat-x center;
}
</style>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" rightmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- ImageReady Slices (footerart2.png) -->
<table id="Table_10" width="100%" height="101" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img src="images/footerart2_01.gif" width="4" height="26" alt=""/></td>
<td colspan="6" background="images/footerart2_01.gif" width="100%"></td>
<td><img src="images/spacer.gif" width="1" height="26" alt=""/></td>
</tr>
<tr>
<td colspan="5"><img src="images/footerart2_03.gif" width="401" height="14" alt=""/></td>
<td rowspan="3" background="images/footerart2_04.gif" width="100%"></td>
<td rowspan="3"><img src="images/footerart2_05X.gif" width="367" height="47" alt="Copyright © 2006 Intense Cosmetics Ltd"/></td>
<td><img src="images/spacer.gif" width="1" height="14" alt=""/></td>
</tr>
<tr>
<td colspan="2" rowspan="5"><img src="images/footerart2_06.gif" width="5" height="60" alt=""/></td>
<td><img src="images/footerart2_07.gif" width="278" height="15" alt=""/></td>
<td colspan="2"><img src="images/footerart2_08.gif" width="118" height="15" alt=""/></td>
<td><img src="images/spacer.gif" width="1" height="15" alt=""/></td>
</tr>
<tr>
<td colspan="2" rowspan="2"><a href="#" onclick="javascript:window.open('https://www.paypal.com/uk/cgi-bin/webscr?cmd=xpt/popup/OLCWhatIsPayPal-outside','olcwhatispaypal','toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=yes, width=400, height=350');">
<img src="images/footerart2_09.gif" width="337" height="36" alt="Paypal, Secure Online Payments. Click for more info." border="0"/></a></td>
<td rowspan="4"><img src="images/footerart2_10x5.gif" width="59" height="45" alt=""/></td>
<td><img src="images/spacer.gif" width="1" height="18" alt=""/></td>
</tr>
<tr>
<td colspan="2" rowspan="2" width="100%">
<div id="chromemenu">
<ul>
<li><a href="http://www.intense.uk.com/footer4.html">Home</a></li>
<li><a href="http://www.intense.uk.com/footer4.html">About Us</a></li>
<li><a href="http://www.intense.uk.com/footer4.html">Privacy</a></li>
<li><a href="http://www.intense.uk.com/footer4.html">Terms</a></li>
<li><a href="http://www.intense.uk.com/footer4.html">Returns</a></li>
<li><a href="http://www.intense.uk.com/footer4.html">Site Map</a></li>
</ul>
</div>
</td>
<td><img src="images/spacer.gif" width="1" height="18" alt=""/></td>
</tr>
<tr>
<td colspan="2" rowspan="2"><img src="images/footerart2_12.gif" width="337" height="9" alt=""/></td>
<td><img src="images/spacer.gif" width="1" height="3" alt=""/></td>
</tr>
<tr>
<td colspan="2" background="images/footer3_09.gif" width="100%"><img border="0" src="images/footer3_09.gif" width="5" height="6"/></td>
<td><img src="images/spacer.gif" width="1" height="6" alt=""/></td>
</tr>
<tr>
<td><img src="images/spacer.gif" width="4" height="1" alt=""/></td>
<td><img src="images/spacer.gif" width="1" height="1" alt=""/></td>
<td><img src="images/spacer.gif" width="278" height="1" alt=""/></td>
<td><img src="images/spacer.gif" width="59" height="1" alt=""/></td>
<td><img src="images/spacer.gif" width="59" height="1" alt=""/></td>
<td><img src="images/spacer.gif" width="4" height="1" alt=""/></td>
<td><img src="images/spacer.gif" width="367" height="1" alt=""/></td>
<td/>
</tr>
</table>
<!-- End ImageReady Slices -->
</body>
</html>