[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">
  &nbsp;
 </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">
  &nbsp;
 </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