sibebar tabs expanding beyond div [Archive]

teedoff

08-23-2010, 06:55 PM

Hi new here. I have a sidebar that has a vertical tab menu that has been styled. Everything looked great until I started debugging in different browser resolutions. I went back into my style sheet and made sure all widths and sizes were styled with percentages, but every screen resolution now displays the tabs menu differently. When I set it to look perfect on my laptop screen, it looks off on my desktop screen. Here is my html for my page and my sidebar, which is in a cfinclude:


<cfquery name="rsBulbs" datasource="rlbulbs">
SELECT item
FROM rlbbulbs /*are you sure this is the right template???*/
ORDER BY item ASC
</cfquery>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Replacement Light Bulb Advanced Search</title>
<link href="rlb.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<cfinclude template="header.cfm">
<div id="main">
<div id="sidebar">
<cfinclude template="sidebar.cfm">
</div>
<div id="content">
<h2>Advanced Bulb Search</h2>
<p>Please enter data in one or more of the
fields below and
click the Search button. The more fields you can fill out, the more refined your search will be.</p>
<form action="results.cfm" method="post">
<table border="0" cellpadding="2" cellspacing="0">
<tr>
<th width="197" nowrap="nowrap">Item Number:</th>
<td width="210"><input type="text" name="item" size="35" /></td>
<td width="295" nowrap="nowrap" align="left">Ex. 75K19</td>
</tr>
<tr>
<th>Brand Name:</th>
<td><input type="text" name="brandName" size="35" /></td>
<td nowrap="nowrap" align="left">Ex. Philips</td>
</tr>
<tr>
<th>Base Type:</th>
<td><input type="text" name="base" size="35" /></td>
<td nowrap="nowrap" align="left"><a href="#"><img src="images/screwBase.gif" alt="Base Type" width="30" height="25" /></a></td>
</tr>
<tr>
<th>Glass Type:</th>
<td><input type="text" name="glass" size="35" /></td>
<td><a href="#"><img src="images/classic.gif" width="30" height="35" alt="Glass Type" /></a></td>
</tr>
<tr>
<th>Wattage:</th>
<td><input type="text" name="wattage" size="35" /></td>
</tr>
<tr>
<th>Voltage:</th>
<td><input type="text" name="voltage" size="35" /></td>
</tr>
<tr>
<td align="center" colspan="3"><input type="submit" value="Search" />
<input type="reset" value="Reset" name="reset" /></td>
</tr>
</table>
</form>
</div>
</div>
<cfinclude template="footer.cfm">
</div>
</body>
</html>

<ul>
<li><a href="index.cfm">Home</a></li>
<li><a href="faqs.cfm">FAQS</a></li>
<li><a href="http://www.replacementlightbulbs.com/lampscrossreference.html">Cross References</a></li>
<li><a href="shipping.cfm">Shipping</a></li>
<li><a href="http://www.replacementlightbulbs.com/policy.html">Policies</a></li>
<li><a href="terms.cfm">Definitions</a></li>
<li><a href="contactUs.cfm">Contact Us</a></li>
</ul><br />

<p><strong>Order Line:</strong><br />
</p>
<p><strong>Technical Support Line:</strong><br />
</p>
<p><strong>Fax Line:</strong><br />
</p>

CSS
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: small;
margin: 0px;
padding: 0px;
background-color: #999;
}

#wrapper {
padding: 0px;
width: 80%;
border: thin solid #ccc;
margin-top: 5px;
margin-right: auto;
margin-bottom: 5px;
margin-left: auto;
background-color: #FFF;
}
#wrapper #main #sidebar p {
font-size: xx-small;
}

#main {
margin: 0px;
padding: 0px;
clear: both;
width: 100%;
}
#content {
width: 80%;
border-left-width: thin;
border-left-style: solid;
border-left-color: #ccc;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0;
margin-left: 16%;
padding-top: 0;
padding-right: 1%;
padding-bottom: 0;
padding-left: 1%;
}
#content table {
margin: 0px;
padding: 0px;
width: 95%;
}

hr {
text-align: center;
width: 80%;
margin-left:auto;
margin-right:auto;
}

th {
background-color: #eaeaea;
}

#sidebar {
float: left;
width: 15%;
padding: 0px;
margin-top: 0px;
margin-right: 1%;
margin-bottom: 0px;
margin-left: 1%;
}
#sidebar ul {
padding: 0;
width: 100%;
list-style-type: none;
background-color: #CCC;
margin: 0;
}
#sidebar li {
margin: 0;
padding-right: 5;
list-style-type: none;
font-size: 100%;
}
#sidebar li a {
margin: 0px;
padding: 0.5em 0 0.5em 2em;
border-width: 1px;
border-color: #ffe #aaab9c #ccc #fff;
border-style: solid;
color: #777;
display:block;
width: 80%;
text-decoration:none;
}
#sidebar li a:link, #sidebar li a:visited {
color: #777;
}

#sidebar li a:hover, #sidebar li a:active {
color: #09F;
background: transparent;
border-color: #aaab9c #fff #fff #ccc;
}

I want the tabs width, the rollover width, everything to be the same in any screen resolution. Thanks for any help, it will be greatly appreciated.