Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts

    sibebar tabs expanding beyond div

    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:

    Code:
    <!--- 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>
    Code:
    <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
    Code:
    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.
    Last edited by teedoff; 08-23-2010 at 08:13 PM.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,854
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Can we have a link to your page?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    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.
    Last edited by teedoff; 08-24-2010 at 03:35 PM.

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,854
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    How about setting a fixed width sidebar, like http://bonrouge.com/2c-hf-fixed.php ?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    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!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •