[thelist] CSS: rendering problem
Chris W. Parker
cparker at swatgear.com
Mon Nov 18 13:39:01 CST 2002
> -----Original Message-----
> From: Alex Ezell [mailto:taranis at spittingllamas.com]
> Sent: Monday, November 18, 2002 11:27 AM
> To: thelist at lists.evolt.org
> Subject: Re: [thelist] CSS: rendering problem
>
> My first thought is that you might try putting this div after
> all the other
> divs in your code:
>
> <div style="clear:both;"></div>
no luck.
here is the page code.
------------------------------------
<html>
<head>
<title>Aardvark Tactical Employee Homepage</title>
<link rel="stylesheet" type="text/css"
href="lib/top-left-center-right.css">
</head>
<body>
<div id="header">
<h1>Aardvark Tactical Employee Homepage</h1>
</div>
<div id="nav">
<ul>
<li><a href="javascript:;">Home</a></li>
<li><a href="javascript:;">Red Book</a></li>
<li><a href="javascript:;">Employee Directory</a></li>
<li><a href="javascript:;">Sales Forms</a></li>
</ul>
</div>
<div id="content_container">
<!-- NOT NEEDED ON TOP? -->
<div class="spacer">
</div>
<div id="content_GoogleSearch">
<!-- Search Google -->
<form method="GET" action="http://www.google.com/search">
<a href="http://www.google.com/"><img
src="http://www.google.com/logos/powered_by_google_135x35.gif"
border="0"
alt="powered by Google"
align="absmiddle"></a>
<input type="text" name="q" size="19" maxlength="255" value="">
<input type="submit" value="Google Search">
</form>
<!-- Search Google -->
</div>
<div id="content_vendors">
<h4>Vendors</h4>
<ul>
<li><a href="http://www.colt.com/">Colt</a></li>
<li><a href="http://www.eagleindustries.com/">Eagle</a></li>
<li><a href="http://www.eotech-inc.com/">EOTech</a></li>
<li><a href="http://www.hatch-gloves.com/">Hatch</a></li>
<li><a href="http://www.hoppes.com/">Hoppe's</a></li>
<li><a href="http://www.leatherman.com/">Leatherman</a></li>
<li><a href="http://www.policebatons.com/">Monadnock</a></li>
<li><a href="http://www.peerless.net/">Peerless</a></li>
<li><a href="http://www.pelican.com/">Pelican</a></li>
<li><a href="http://www.redmangear.com/">Red Man</a></li>
<li><a href="http://www.safariland.com/">Safariland</a></li>
<li><a href="http://www.streamlight.com/">Streamlight</a></li>
<li><a href="http://www.surefire.com/">SureFire</a></li>
<li><a href="http://www.swatgear.com/">SWATGEAR.com</a></li>
</ul>
</div>
<div id="content_serviceProviders">
<h4>Service Providers</h4>
<ul>
<li><a href="http://www.ups.com/">UPS</a></li>
</ul>
</div>
<div id="content_utilities">
<h4>ATI Utilities</h4>
<ul>
<li><a href="http://ati-ex-01/hatchTrack.asp">Product
Tracking Form</a></li>
</ul>
</div>
<div class="spacer">
</div>
</div>
<div style="clear:both;"></div>
</body>
</html>
--------------------------------------------
and here is the css (it's a little unrefined because i mean, i'm not an
expert or anything.)
--------------------------------------------
body {
font-family: verdana, sans-serif;
font-size: 100%;
background: #44A8E9;
}
/*div {
border: 1px solid #00F;
}*/
#header {
/* position: absolute;
left: 10px;
top: 13px;*/
margin: 2px;
padding: 10px;
border: 5px solid #398CC3;
background: #fff;
height: 50px;
}
#header h1 {
font-family: verdana;
font-size: 1em;
font-weight: bold;
color: #800000;
margin: 0px;
padding: 0px;
}
#nav {
position: absolute;
left: 10px;
margin: 2px;
padding: 10px;
border: 5px solid #398CC3;
background: #fff;
width: 111px;
}
#nav ul {
font-size: 1em;
margin: 0em;
padding: 0em;
}
div.spacer {
clear: both;
}
#content_container {
/*
top right bottom left
*/
margin: 4px 2px 0px 118px;
padding: 10px;
border: 5px solid #398CC3;
background: #fff;
}
#content_googleSearch {
/* float: left;*/
width: 100%;
}
#content_vendors {
float: left;
width: 25%;
}
#content_serviceProviders {
float: left;
width: 25%;
}
#content_utilities {
float: left;
width: 50%;
}
li {
font-size: .8em;
}
p {
font-size: .8em;
}
img {
border: 0px none #000000;
}
label {
font-family: verdana;
font-size: .8em;
}
--------------------------------------
thanks for the help y'all.
chris.
More information about the thelist
mailing list