...

View Full Version : sibebar tabs expanding beyond div



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:



<!--- Get bulbs for Select List --->
<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.

abduraooft
08-24-2010, 08:07 AM
Can we have a link to your page?

teedoff
08-24-2010, 02:09 PM
Absolutely. www.michael-sexton.com/rlb/index.cfm

If you view the page in different resolutions, you will see what I am talking about. In fact if you just minimize the page I think it will changes. The sidebar background width is the issue I think, but no matter what percentage width I set it to, it changes for each resolutions. It's like it doesnt change the same demension as the foreground of the tabs. Thanks for any help! I have been trying to correct this for several days, so I'm really lost and frustrated! lol

You may also notice I am having the same issue with the link thats about a third of the way down the main content of the page. When I minimize the browser window, it's the only line of "text" that extendes beyond the page wrapper. The rest of the paragraphs narrow to match the width of the browser.

abduraooft
08-24-2010, 07:05 PM
How about setting a fixed width sidebar, like http://bonrouge.com/2c-hf-fixed.php ?

teedoff
08-24-2010, 07:22 PM
How about setting a fixed width sidebar

I had everything set at fixed widths before. I went back and set sidebar to 140px and content to 600px. That fixes the sidebar issues, however the text or dynamic table in the content div now expands to the right beyond the content div when viewed at lower screen resolutions, which was the original problem I had. Maybe I went about it the wrong way when I started playing around with the sidebar dimensions. So now what would your approach be to keep everything in the content div from bsuting out of it's div? I uploaded the files which show the fixed width properties now, so you should be able to see my issue now. Thanks again for the help!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum