PDA

View Full Version : getting a scrollbar on page in firefox only.


silverglade
06-04-2009, 06:41 PM
hi, im using overflow:auto; on my wrapper div. and im getting a scrollbar in firefox. if anyone can help me out id greatly appreciate it. thank you. derek

here is the page im talking about .

http://derekvanderven.com/computer_ecommerce/index.html


here is the css for the page

@charset "utf-8";
/* CSS Document */

body {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
background-color: #71838A;
}
#wrapper {
overflow: auto;
margin: 0 auto 0 auto;
width: 750px;
background-color: #B0BBBF;
}
#header {
margin: 0 auto 0 auto;
background-image: url(slice_front_images/header.jpg);
background-repeat: no-repeat;
width: 750px;
height: 81px;
}
#left_nav_container{
float: left;
margin: 0 auto 0 21px;
width: 175px;
height: 700px;
border: 1px solid #999999;
background-color: #C0C0C0;
padding-top: 20px;
}

/**********************************left links code************************/
#left_links {
width: 175px;
height: 700px;
margin: 0 auto 0 auto;
}

#left_links ul li a:link, #left_links ul li a:visited {
font-weight:bold;
color:#375B97;
text-decoration:none;
font-size:84%;
display:block;
height:1.8em;
}
#left_links ul li a:hover, #left_links ul li a:active{
color: #000;
text-decoration:none;
}
#left_links ul li {
position:relative;
left:-20px;
list-style-type:none;
}
/*************************************end left links*********************/

#header_image {
float: left;
width: 352px;
height: 188px;
background-image: url(slice_front_images/header_image.jpg);
background-repeat: no-repeat;
border: 2px solid gray;
}
/*****************************front sales*******************************/
#front_sales_container {
float: left;
width: 352px;
height: 525px;
border: 2px solid gray;
background-color: white;
}



and here is the html for the page.

<!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=utf-8" />
<!--[if lt IE 7]>
<link href="iefixes.css" rel="stylesheet" type="text/css" /> <![endif]-->
<link href="computer.css" rel="stylesheet" type="text/css"/>
<title>Computer Ecommerce home</title>
</head>

<body>


<div id="wrapper">
<div id="header"> </div><!--end header-->



<div id="left_nav_container">




<div id="left_links"><ul>
<li><a href="motherboards.html">Motherboards</a></li>
<li><a href="processors.html">Processors</a></li>
<li><a href="memory.html">Memory</a></li>
<li><a href="hard_drives.html">Hard Drives</a></li>
<li><a href="monitors.html">Monitors</a></li>
<li><a href="case.html">Case</a></li>
<li><a href="ups.html">UPS</a></li>
<li><a href="video.html">Video Cards</a></li>
<li><a href="cd.html">CD/CDR</a></li>
<li><a href="data.html">Data Storage</a></li>
<li><a href="devices.html">I/O Devices</a></li>
<li><a href="multimedia.html">Multimedia</a></li>
<li><a href="removable.html">Removable Storage</a></li>
<li><a href="scanners.html">Scanners &amp; Printers</a></li>
<li><a href="hubs.html">Hubs and Routers</a></li>
<li><a href="speakers.html">Speakers</a></li>
<li><a href="software.html">Software</a></li>



</ul>

</div><!--end left links-->



</div> <!--end leftnav container-->

<div id="header_image"></div><!--end header image-->
<div id="front_sales_container"></div><!--end front sales container-->

</div><!--end wrapper-->
</body>
</html>

silverglade
06-04-2009, 07:21 PM
nevermind after a long time of searching i figured out that it was the set height on the left nav container. thanks. derek

silverglade
06-04-2009, 08:18 PM
this is the hardest site ive ever worked on because i dont know how to do ecommerce squares where the product and description go together, and my product boxes float too far right in ie6. if anyone could look at my code and say if i did the boxes the right way (im pretty sure i didnt) and why my boxes float a little to the right in ie6. any help GREATLY appreciated on this one, its very complex for me. thanks. derek.

here is the page im talking about, my first ecommerce attempt.

http://derekvanderven.com/computer_ecommerce/index.html


and here is the css for the page (cringe)...

@charset "utf-8";
/* CSS Document */

body {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
background-color: #71838A;
}
#wrapper {
overflow: auto;
margin: 0 auto 0 auto;
width: 750px;
background-color: #B0BBBF;
}
#header {
margin: 0 auto 0 auto;
background-image: url(slice_front_images/header.jpg);
background-repeat: no-repeat;
width: 750px;
height: 81px;
}
#left_nav_container{
float: left;
margin: 0 auto 0 21px;
width: 175px;
border: 1px solid #999999;
background-color: #C0C0C0;
padding-top: 20px;
}

/**********************************left links code************************/
#left_links {
width: 175px;
height: 700px;
margin: 0 auto 0 auto;
}

#left_links ul li a:link, #left_links ul li a:visited {
font-weight:bold;
color:#375B97;
text-decoration:none;
font-size:84%;
display:block;
height:1.8em;
}
#left_links ul li a:hover, #left_links ul li a:active{
color: #000;
text-decoration:none;
}
#left_links ul li {
position:relative;
left:-20px;
list-style-type:none;
}
/*************************************end left links*********************/

#header_image {
float: left;
width: 352px;
height: 188px;
background-image: url(slice_front_images/header_image.jpg);
background-repeat: no-repeat;
border: 2px solid gray;
}
/*****************************front sales*******************************/
#front_sales_container {
float: left;
width: 352px;
height: 525px;
border: 2px solid gray;
background-color: white;
}

.front_sales_divs {
float: left;
width: 130px;
margin-top: 20px;
margin-right: auto;
margin-bottom: 20px;
margin-left: 27px;
border: 1px solid gray;
}


.front_sales_divs img {
float: right;
padding-top: 5px;
padding-right: 5px;

}
.front_sales_text {
float: left;
width: 130px;
padding-top: 5px;
padding-right: 5px;
padding-left: 5px;
padding: bottom: 5px;
font-size:70%;
line-height: 90%;


}



/*******************************footer************* ***********/
#footer {
margin: 0 auto 0 auto;
width: 750px;
color: white;
background-color: gray;
text-align: center;
}

#footer a:link , #footer a:visited {
text-decoration: none;
color: white;
}
#footer a:active, #footer a:hover {
text-decoration: none;
color: blue;
}


and here is the html for the page

<!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=utf-8" />
<!--[if lt IE 7]>
<link href="iefixes.css" rel="stylesheet" type="text/css" /> <![endif]-->
<link href="computer.css" rel="stylesheet" type="text/css"/>
<title>Computer Ecommerce home</title>
</head>

<body>


<div id="wrapper">
<div id="header"> </div><!--end header-->



<div id="left_nav_container">




<div id="left_links"><ul>
<li><a href="motherboards.html">Motherboards</a></li>
<li><a href="processors.html">Processors</a></li>
<li><a href="memory.html">Memory</a></li>
<li><a href="hard_drives.html">Hard Drives</a></li>
<li><a href="monitors.html">Monitors</a></li>
<li><a href="case.html">Case</a></li>
<li><a href="ups.html">UPS</a></li>
<li><a href="video.html">Video Cards</a></li>
<li><a href="cd.html">CD/CDR</a></li>
<li><a href="data.html">Data Storage</a></li>
<li><a href="devices.html">I/O Devices</a></li>
<li><a href="multimedia.html">Multimedia</a></li>
<li><a href="removable.html">Removable Storage</a></li>
<li><a href="scanners.html">Scanners &amp; Printers</a></li>
<li><a href="hubs.html">Hubs and Routers</a></li>
<li><a href="speakers.html">Speakers</a></li>
<li><a href="software.html">Software</a></li>



</ul>

</div><!--end left links-->



</div> <!--end leftnav container-->

<div id="header_image"></div><!--end header image-->

<div id="front_sales_container">

<div class="front_sales_divs">
<img src="slice_front_images/computer.jpg" width="59" height="62">

<div class= "front_sales_text">
<strong>Dell Computer</strong> &nbsp;&nbsp;&nbsp;&nbsp;<strong>&nbsp;$999 </strong> <br />
<br />
Maybe better to build<br />
your own.<br />
</div><!--end front sales text-->

</div><!--end front sales divs-->

<div class="front_sales_divs"> <img src="slice_front_images/headphones.jpg" height= "56" />

<div class= "front_sales_text">
<strong>Cool Headphones</strong> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<strong><br />
<br />
&nbsp;$99 </strong> <br />
<br />
Quality headphones!!!<br />
</div><!--end front sales text--></div>

<div class="front_sales_divs"><img src="slice_front_images/video_card.jpg" height= "54"/>

<div class= "front_sales_text">
<strong>Nvidea video card </strong>&nbsp;&nbsp;&nbsp;&nbsp;<strong><br />
<br />
&nbsp;$299 <br />
<br />
</strong> Hottest fastest card!!</div>
<!--end front sales text--></div>

<div class="front_sales_divs"><img src="slice_front_images/monitor.jpg" height="59" / >
<div class= "front_sales_text">
<strong>Awesome Monitor </strong>&nbsp;&nbsp;&nbsp;&nbsp;<strong><br />
<br />
&nbsp;$1299<br />
<br />
</strong> Incredible monitor!!!</div>
<!--end front sales text--></div>

<div class="front_sales_divs"><img src="slice_front_images/dvd_rw.jpg" width="55" height="61" />
<div class= "front_sales_text">
<strong>Uber DVD drive!!! </strong>&nbsp;&nbsp;&nbsp;&nbsp;<strong><br />
<br />
&nbsp;$125.99<br />
<br />
</strong>This one is amazing!</div>
<!--end front sales text--></div>
<div class="front_sales_divs">

<img src="slice_front_images/Seagate_Hard_Disk.jpg"width="74" height="62" />

<div class= "front_sales_text">
<strong>Ultimate uber drive!</strong>&nbsp;&nbsp;&nbsp;<strong><br />
<br />
&nbsp;$9999999,99999.00<br />
<br />
</strong>This one is the best!</div>
</div>

</div>
<!--end front sales container-->

</div><!--end wrapper-->
<div id="footer">&copy; site design by<a href="http://derekvanderven.com"> derekvanderven.com </a></div>
<!--end footer-->
</body>
</html>

DWcourse
06-04-2009, 09:00 PM
Quite honestly, if the boxes are a little off in ONLY IE6 but still usable, I wouldn't worry about it.

silverglade
06-04-2009, 09:03 PM
thank you dwcourse. if you can could you please look at my page in firebug and tell me if i did it right? the text doesnt seem to be right, i tried messing with the line spacing and such, but the text goes too close to the box. basically what i did was, made a floated box class and made 6 of them. then floated an image inside it to the right. then made a separate div for the text inside that, thats basically it. but it seems that my boxes look wrong. did i do it the right way? any more help or advice GREATLY appreciated because this is really the last frontier for me as far as layout goes. thank you. derek:mrgreen:

DWcourse
06-04-2009, 09:14 PM
Basically it's OK, not the most efficient way to do things but it works. A couple things:

1. Using a run of non-braking spaces to position type is a bad idea, it leads to unpredictable line breaks.

2. Try adding some bottom padding to .front_sales_divs (or make the text inside them paragraphs so you get some default padding) and that will keep the bottom line from sitting on the div border.

silverglade
06-04-2009, 09:19 PM
awesome thank you for that padding tip it worked great. also, how do i position type without using the &nbsp; , like if i wanted
" computer (space space space) $999" .any more advice appreciated if you have time thanks. derek

DWcourse
06-05-2009, 02:58 AM
<span class="ftRight">$99</span>Cool Headphones

with this CSS

.ftRight { float: right; }

Although you might not get the results you want if your text is too long for the space.

silverglade
06-05-2009, 04:00 AM
cool thanks dwcourse!:-D