Quick CSS Nuisance
I have a positioning problem with the container I have made. I am trying to get the list of items to not be presented outside the container borders. There is some height restriction I have set which I have been unable to locate. Any help would be greatly appreciated.
HTML:
<!-- Left Column -->
<div id="LColumn">
<!-- Google CSE Search Box Begins -->
<div id="googleserachbox">
<form action="http://" id="searchbox_015928390418043404103:mjqxfp6gb1u">
<input type="hidden" name="cx" value="015928390418043404103:mjqxfp6gb1u" />
<input type="hidden" name="cof" value="FORID:9" />
<input type="text" name="q" size="20" />
<input type="submit" name="sa" value="Search" />
</form>
<script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=searchbox_015928390418043404103%3Amjqxfp6gb1u"></script>
</div>
<!-- Google CSE Search Box Ends -->
<h3>Directory By State</h3>
<ul>
<li><a href="alabama.html">Alabama</a></li>
<li><a href="alaska.html">Alaska</a></li>
<li><a href="arizona.html">Arizona</a></li>
<li><a href="arkansas.html">Arkansas</a></li>
<li><a href="california.html">California</a></li>
<li><a href="colorado.html">Colorado</a></li>
<li><a href="connecticut.html">Connecticut</a></li>
<li><a href="delaware.html">Delaware</a></li>
<li><a href="DC.html">District of Columbia</a></li>
<li><a href="florida.html">Florida</a></li>
<li><a href="georgia.html">Georgia</a></li>
<li><a href="guam.html">Guam</a></li>
<li><a href="hawaii.html">Hawaii</a></li>
<li><a href="idaho.html">Idaho</a></li>
<li><a href="illinois.html">Illinois</a></li>
<li><a href="indiana.html">Indiana</a></li>
<li><a href="iowa.html">Iowa</a></li>
<li><a href="kansas.html">Kansas</a></li>
<li><a href="kentucky.html">Kentucky</a></li>
<li><a href="louisiana.html">Louisiana</a></li>
<li><a href="maine.html">Maine</a></li>
<li><a href="maryland.html">Maryland</a></li>
<li><a href="massachusetts.html">Massachusetts</a></li>
<li><a href="michigan.html">Michigan</a></li>
<li><a href="minnesota.html">Minnesota</a></li>
<li><a href="mississippi.html">Mississippi</a></li>
<li><a href="missouri.html">Missouri</a></li>
<li><a href="montana.html">Montana</a></li>
<li><a href="nebraska.html">Nebraska</a></li>
<li><a href="nevada.html">Nevada</a></li>
<li><a href="newHampshire.html">New Hampshire</a></li>
<li><a href="newJersey.html">New Jersey</a></li>
<li><a href="newMexico.html">New Mexico</a></li>
<li><a href="newYork.html">New York</a></li>
<li><a href="northCarolina.html">North Carolina</a></li>
<li><a href="northDakota.html">North Dakota</a></li>
<li><a href="ohio.html">Ohio</a></li>
<li><a href="oklahoma.html">Oklahoma</a></li>
<li><a href="oregon.html">Oregon</a></li>
<li><a href="pennsylvania.html">Pennsylvania</a></li>
<li><a href="rhodeIsland.html">Rhode Island</a></li>
<li><a href="southCarolina.html">South Carolina</a></li>
<li><a href="southDakota.html">South Dakota</a></li>
<li><a href="tennessee.html">Tennessee</a></li>
<li><a href="texas.html">Texas</a></li>
<li><a href="utah.html">Utah</a></li>
<li><a href="vermont.html">Vermont</a></li>
<li><a href="virginia.html">Virginia </a></li>
<li><a href="virginIslands.html">Virgin Islands </a></li>
<li><a href="washington.html">Washington</a></li>
<li><a href="westVirginia.html">West Virginia</a></li>
<li><a href="wisconsin.html">Wisconsin</a></li>
<li><a href="wyoming.html">Wyoming</a></li>
</ul>
</div>
<!-- End of Left Column -->
CSS:
/* Left Column Style */
#googleserachbox { /* Google Search Box */
Position: absolute; top: 10px; left: 5px;
}
#LColumn {
width: 248px;
position: absolute; top: 200px;
border-style: solid;
border-width: 2px;
border-color: #247FE7;
}
#LColumn h3 {
font-family: Lucida Sans Unicode, Arial, Helvetica, sans-serif;
color: #008ece;
text-align: center;
margin: 0px;
position: absolute; top: 50px;
}
#LColumn ul {
display: block;
list-style: none;
}
#LColumn a {
font-size: 12px;
color: #0066CC;
margin: -20px;
padding: 0px;
position: relative; top: 50px;
}
/* End of Left Column Style */
CSS Codes
Reply With Quote
Bookmarks