CSS - Scroll Bars In Firefox

I have a few questions, and hopefully this will set me for the rest of the day, so I don't have to bother you guys, at least untill tomorrow afternoon.

1. I have a question about scroll-bars, how are they implemented to be translucient?

2. How can I make <DIV>'s auto-stretch to whatever is in them?

3. How can I get it so that the text doesnt go to the very edge of the <DIV> so that it doesn't touch the border, (and look like crap)?

4. Is there any way to take an XML RSS feed and input it directly into any web page (just though I'd throw that one in there so I didn't have to start another thread).

Thanks,
-Sam

I've defined three classes in this page but now I can't scroll down to the end of the page. the vertical scroll bars are missing. why is that?

Hey everyone,

I am having a really hard time creating a layout using divs with a sticky footer that is able to resize correctly. In the past I often used tables for my layouts (i know, naughty me) so i was mainly relying on some tutorials to get as far as I have. In general everything looks good at a high enough resolution, however once things are resized the footer starts to act weird, and the page can end up with up to 3 vertical scroll bars. As well the divs start to overlap each other.

If anyone has any ideas as to something i can try it would be greatly appreciated.

the page is www.spacehindu.com/archive.php


and the css for the page is as follows:
Code:

* {
	margin: 0;
}
html, body {
	height: 100%;
	padding:0;
	background-color:#000;
	font-family: Arial, Helvetica, sans-serif;
	text-align: left;   
	font-size: 13px;
	padding: 0;           
	margin: 0; 
	letter-spacing: 0.5px;

	}

.wrapper{
	min-height: 100%;
	height: auto !important;
	height: 100%;
	width:100%;
	margin: 0 auto -30px; 
	}						
			
			

h1{
font-family: calibri, arial, helvetica;
font-size: 22px; letterspacing: 0.5px;
color: #fff;
text-transform: lowercase; 
display: inline; 
padding-bottom: 10px;
}
h2{
display: inline;
font-family: calibri, arial, helvetica;
font-size: 15px; 
letterspacing: 5px;
color: #758a95;
font-weight: lighter; 
}
h3{
display: inline;
text-transform: lowercase; 
font-size: 17px; letterspacing: 1px;
color: #fff;
}
h4{
display: inline;
text-transform: lowercase; 
font-size: 13px; letterspacing: 8px;
color: #758a95;
}

a:link, a:visited {
			font-family: arial, calibri, helvetica;
color: #fff;
text-decoration: none;
}
a:hover {
background-color: #374254;
color: #fff; 
text-decoration: none;
}

p {
letter-spacing: 0.5px;
font: Arial, Helvetica, sans-serif #b6bec6;
}

.nav{
	width:400px;
	height:95%;
	float:left;
	background-color:#000;
	min-height:600px;
}
.navImg{
	position:relative;
	top:30%;
}
.content{
	margin-left:400px;
	height:95%;
	background-color:#000;


}
	.archive{
	position:relative;
	left:50px;
	top:10%;

			}

.footer, .push {
	height: 30px;
	background: #12151f; 
	font-family: calibri, arial; 
	font-size: 12px; 
	color: #8f97a4;
	text-align: center;
	clear: both;
}

#dropdown{
background-color:#374254;
color:#CEDBEA;
border: 0px solid;
}
#dropdown .selected {
background-color: #CEDBEA;
color: #000;
border: #000 1px solid;
}

#dropdown .unselected {
background-color: #000;
color: #374254;
}

.fieldset {background-color:#000;
			border: solid 0;
}
.label{font-family: calibri, arial; font-size: 12px; 
letter-spacing: 0.5px;
}
.textarea {
	background: #374254; 
margin: 5px;
border: solid 0 #fff;
color: #cedbea;
font-family: calibri, arial; font-size: 13px;
width: 200px;
}
.message {background: #374254; 
border: solid 0 #fff;
color: #cedbea;
font-family: calibri, arial; font-size: 13px;
border-radius:  10px;

}
.submit {background: #374254;
border: solid 0; 
color: #cedbea;
}

and if it is any help, this is the tutorial i used as my base layout for the divs http://ryanfait.com/resources/footer-stick-to-bottom-of-page/


*EDIT* So i was able to fix the multiple scrollbars by removing "overflow:auto" from a few of the divs. My content div still seems to overlap the footer though. This is especially noticeable if you do a search for "a". a whole bunch of results will appear and the footer will get lost beneath is. Does anyone have any ideas as to how to easily fix this?

I have a website im developing and I wanted to know how i would go about having a graphic element that floats on top of everything but if it goes outside the bounds of the window it wont introduce scroll bars.

Reason: I have an image that i want to make quite long but its not important for the viewer to see the end of the image. I guess its a bit like a background image but on the top

Thanks

I am an art student, and I'm trying to construct my own portfolio site. I am, however, new to CSS, so I dont really know what I'm doing. I'm using Dreamweaver CS3.

I'm using a fixed 2 column template, with header and footer, and the left column as the side bar. Within the right column, I'm trying to make a scrollbar hovering near the top of the div, with clickable thumbnails of my work. Once the thumbnails are clicked on, a larger version of the image takes up the rest of the column.

Does anyone have any idea how to accomplsh this? Even my web design teacher's stumped with this one. I thought about using frames, but thats html...

I think this is more of a css problem than php thats why its here

I can get percentage bars to work without text on them, but not with text, the bar is either pushed below the text, or the text is pushed onto 3-4 lines, depending on how wide the bar is

So far i have:

The php
PHP Code:
 $poke[] = '<div class="percentage">
        <span style="position:relative;">'.$text.' ('.round($per, 2).'%)</span>
        <div class="perc" style="width:'.$per.'%;"></div>
    </div>'."\n"; 





the css
Code:

.percentage {
	background-color:#800000;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border: 1px solid #000;
	height:15px;
	font-size:10px;
	z-index:2;
}

.perc {
	visibility:visible;
	height:15px;
	z-index:3;
	background-color:#000; 
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}

This is how it looks with that code

I've seen the link that Kravitz has linked to http://www.dynamicsitesolutions.com...mage_switching/ and while helpful, I think I'm becoming more confused. Part of the problem is that in those examples (and even there I'm getting confused over which example is supposed to be the one to use) the images are assumed to be the same width, so the property is set for 120px. But my images are different widths. Now I can make the rollovers work by for example:

Code:

.item1 a {
background-image : url(menuoffa.jpg);
float:left;
height:28px;
width:103px;
}

.item1 a:hover {
background-image : url(menuona.jpg);
float:left;
height:28px;
width:103px;
}

and then using html in the following way:
Code:

<div class="item1"><a href="pagelink.htm"></a></div>

My problem is that I can't center the items relative to the page If I were going to use 'tables' to do this, then I'd put all the items in one centered cell, but the whole point is not to use tables so what am I doing wrong?!?! Probably more like, what am I doing right, but anyway... And I've tried reading up on going the horizontal unordered list way http://www.webreference.com/program...ists/index.html but I'm using images instead of text so same problems still

OMG I'm going insane

hello. i am having some trouble, my page has a scroll bar at the bottom but there is nothing there to scroll. It is only a centimeter or so but still aint good!! It is just background...yet i have not idea why, can anyone please help...

I have pasted two stylesheets that im using there is also a text one but i doubt that is the prob!!

Code:

body {
	margin:0px;
	padding:0px;
	font-family: Georgia;
	color:#333;
	background-color:#FFFFD2;
	}
h1 {
	margin:0px 0px 15px 0px;
	padding:0px;
	font-size:28px;
	line-height:28px;
	font-weight:900;
		color:#ccc;
	}
p {
	font:11px/20px Georgia;
	margin:0px 0px 16px 0px;
	padding:0px;
	}
#Content>p {margin:0px;}
#Content>p+p {text-indent:30px;}

a {
	color:#ffffd2;
	font-size:13px;
	text-decoration:none;
	/*font-weight:600;*/
	font: Georgia;
	}
a:link {color:#ffffd2;}
a:visited {color:#ffffd2;}
a:hover {background-color:#A4AA54;}

a.blue {
	color:#0000CC;
	font-size:11px;
	text-decoration:none;
	font-weight:600;
	font: Georgia;
	}
a.blue:link {color:#0000CC;}
a.blue:visited {color:#0000FF;}
a.blue:hover {background-color:#eee;}
#logodiv {
	position:absolute;
	top:6px;
	left:14px;
	width:91px;
	height:126px;
	background-image: url(../images/logo/gglogoweb.gif);
	background-position: 1% 2px;
	background-repeat:no-repeat;
	visibility: visible;
	z-index:1;
}
#slogandiv {
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:137px;
	background-color:#A4AA54;
	visibility: visible;
	z-index:0;

/* This is a fix for IE% */
	voice-family: "\"}\"";
	voice-family:inherit;
	height:137px;
	width:100%; /* the correct height */
	}
/* "be nice to Opera 5" */
body>#slogandiv {height:137px; width:100%;}

#MenuBar {
	position:absolute;
	top: 136px;
	left:0px;
	width:100%;
	height:32px;
	padding-bottom:2px;
	background-color:#667138;
	border-bottom:0px solid #A4AA54;
	line-height:17px;
	z-index:1;
	/* Again, the ugly brilliant hack. */
	voice-family: "\"}\"";
	voice-family:inherit;
	height:32px;
	}
/* Again, "be nice to Opera 5". */
body>#MenuBar {width:100%; height:32px;}

#Content {
	position:absolute;
	top: 175px;
	left: 185px;
	width: 81%;
	padding:15px;
	border: 0px solid #000000;
	background-color:#ffffd2;
	z-index:0;
	}
body>#Content {width:81%;}
	
		
#Menu {
	position:absolute;
	top: 166px;
	left:0px;
	width:150px;
	padding:10px;
	background-color:#667138;
	border-right:2px solid #A4AA54;
	border-top:0px solid #A4AA54;
	line-height:17px;
	/* Again, the ugly brilliant hack. */
	voice-family: "\"}\"";
	voice-family:inherit;
	width:150px;
	}
/* Again, "be nice to Opera 5". */
body>#Menu {width:150px;}

and the other
Code:

/* CoolMenus 4 - default styles - do not edit */
.clCMAbs{position:absolute; visibility:hidden; left:0; top:0}
/* CoolMenus 4 - default styles - end */
  
/*Style for the background-bar
.clBar{position:absolute;  width:10; padding-right:10; height:10; background-color:#667138; layer-background-color:yellow; visibility:hidden}

/*Styles for level 0*/
.clLevel0,.clLevel0over{position:absolute; padding-top:3px; font-family:georgia; font-size:12px; font-weight:bold; text-align:center; }
.clLevel0{background-color:#667138; layer-background-color:#667138; color:#ffffd2;}
.clLevel0over{background-color:#A4AA54; layer-background-color:#A4AA54; color:#ffffd2;; cursor:pointer; cursor:hand; }
.clLevel0border{position:absolute; visibility:hidden; background-color:#667138; layer-background-color:#667138}

/*Styles for level 1*/
.clLevel1, .clLevel1over{position:absolute; padding:2px; font-family:georgia; font-size:11px; text-align:center;}
.clLevel1{background-color:#667138; layer-background-color:#667138; color:#ffffd2;}
.clLevel1over{background-color:#A4AA43; layer-background-color:#A4AA54; color:#ffffd2; cursor:pointer; cursor:hand; }
.clLevel1border{position:absolute; visibility:hidden; background-color:#A4AA54; layer-background-color:#A4AA54}

/*Styles for level 2*/
.clLevel2, .clLevel2over{position:absolute; padding:2px; font-family:tahoma,arial,helvetica; font-size:10px; font-weight:bold; text-align:center;}
.clLevel2{background-color:Navy; layer-background-color:Navy; color:white;}
.clLevel2over{background-color:#0099cc; layer-background-color:#0099cc; color:#667138; cursor:pointer; cursor:hand; }
.clLevel2border{position:absolute; visibility:hidden; background-color:#006699; layer-background-color:#006699}/* CSS Document */

i can paste the php file too if needed but it iwll have to be in another post because im running out of spce in this one!!

If anyone can help that would be really appreciated!

Thanks very much

RF

I am desperate. I think I found a bug in Firefox, and I'm not sure how to work around it.

The following code works in everything (IE 8, Chrome, Safari, Opera) except Firefox (version 3.6.3). Am I doing something wrong, or is this a bug in Firefox?

You can look what happens to the drop-down menu's on Menu 2 and 3 live by going to my site (deenfoxx dot com slash firefox-bug dot html).

css Code:
Original - css Code #main-nav { background-color: black; height: 40px; } #nav { position: relative; margin: 0; padding: 0; } #nav li { position: relative; float: left; display: table; width: 99px; height: 40px; border-right: 1px solid white; text-align: center; font-size: 10px; } #nav li:hover { background-color: darkred; } #nav a { display: table-cell; vertical-align: middle; line-height: 11px; font-weight: bold; text-decoration: none; color: #fff; } #nav li ul { position: absolute; padding: 0; background-color: gray; top: 40px; left: 0px; } #nav li ul li { width: 98px; border: 0; border-top: 1px solid white; }

  

 #main-nav


 {


     background-color: black;


     height: 40px;


 }


 #nav


 {


     position: relative;


     margin: 0;


     padding: 0;


 }


 #nav li


 {


     position: relative;


     float: left;


     display: table;


     width: 99px;


     height: 40px;


     border-right: 1px solid white;


     text-align: center;


     font-size: 10px;


 }


 #nav li:hover


 {


     background-color: darkred;


 }


 #nav a


 {


     display: table-cell;


     vertical-align: middle;


     line-height: 11px;


     font-weight: bold;


     text-decoration: none;


     color: #fff;


 }


 #nav li ul


 {


     position: absolute;


     padding: 0;


     background-color: gray;


     top: 40px;


     left: 0px;


 }


 #nav li ul li


 {


     width: 98px;


     border: 0;


     border-top: 1px solid white;


 } 

html4strict Code:
Original - html4strict Code <div id="main-nav"> <ul id="nav"> <li id="m1"><a href="#1">Main Menu 1</a></li> <li> <a href="#2">Main Menu 2</a> <ul> <li><a href="#2a">Sub-Category 1</a></li> <li><a href="#2b">Sub-Category<br/>with multiple lines</a></li> </ul> </li> <li> <a href="#3">Main Menu 3 with multiple lines</a> <ul> <li><a href="#3a">Sub-Category 2</a></li> </ul> </li> <li><a href="#4">Main Menu item which has a really long name on it</a></li> </ul> </div>

  

 <div id="main-nav">


     <ul id="nav">


         <li id="m1"><a href="#1">Main Menu 1</a></li>


         <li>


             <a href="#2">Main Menu 2</a>


             <ul>


                 <li><a href="#2a">Sub-Category 1</a></li>


                 <li><a href="#2b">Sub-Category<br/>with multiple lines</a></li>


             </ul>


         </li>


         <li>


             <a href="#3">Main Menu 3 with multiple lines</a>


             <ul>


                 <li><a href="#3a">Sub-Category 2</a></li>


             </ul>


         </li>


         <li><a href="#4">Main Menu item which has a really long name on it</a></li>


     </ul>


 </div> 

The problem appears to be that "#nav li" happens to have position:relative; and a display:table; and "#nav li ul" is position:absolute;. Normally, absolute positioning requires its parent or ancestor position to be set, but when used with the table display, it doesn't work normally on Firefox--but it does on other browsers.

Can someone help me with a workaround that does not involve altering the HTML? If I must, I will accept a workaround that requires changing the HTML, but I'll have to do some heavy duty recoding of Magento's core menu generation. Anyone that knows Magento knows I want to avoid that like the plague--my example is a very simplified version of the problem.

Hi Guys i want to add a scroll bar to my User Tab so that i scroll for more users ,This is the code for the User Tab of the script i am using

Top User Code
<div id="an_box_topmember">
<div class="an_btm_header"><span><strong>Top User</strong></span></div>
<div class="an_btm_content">
<ul>

Scroll Bar Code
<div style="width: 190px; height: 190px; overflow: auto; padding: 5px">
</div>


Where will i add the scroll bar code,Thanks all comments are welcome

seems to work in IE but not firefox... how do i get around this and make it work for both?

well ive used this code snippet in a lot of pages and its worked. but this page is giving me trouble.

my problem is the colors on the scroll bar itself not changing to what i tell it to. instead its, 'stock'

heres the site, go to the rumors sections:

www.mikeberlucchi.com

heres the code:

Code:

<td align="right">
			   <DIV 
            style=' 
            color: #000000; 
            background-color: #867878; 
            border: solid 0px black; 
            width: 300px; 
            height: 250px; 
            overflow: auto; 
            scrollbar-face-color: #C3D6DA;
            scrollbar-shadow-color: #3D5054;
            scrollbar-highlight-color: #C3D6DA;
            scrollbar-3dlight-color: #3D5054;
            scrollbar-darkshadow-color: #85989C;
            scrollbar-track-color: #95A6AA;
            scrollbar-arrow-color: #FFD6DA;
            '>

any input would be awesome, thanks

If you look at this web site
http://www.mobilvox.com/

you can see when the screen is smaller than what they designed for the scrollbars come into the window and it scrolls.

I've been using the code below, and I can't seem to get the same behavoir.

Code:

 <style type="text/css">
  /*<![CDATA[*/



  html, body {
    margin: 0;
    padding: 0;
	background-color:#000033;
	
    }
    
  body {
    font: 100%/1.25 verdana, arial, sans-serif;
    color: black;
    background-color: #eef;
	overflow: auto;
    }
    
  p {
    font-size: 1em;
    margin-bottom: 0;
    }
    
  p + p {
    text-indent: 1em;
    margin-top: 0;
    }
       
#header {
    color: #000000;
    background-color: #fff;
    overflow: auto; /*encloses float children
                      see http://garyblue.port5.com/webdev/floatdemo.html
                      */
    text-align: center;
    }

#header ul {
    list-style: none;
    margin: 0;
    padding: 0;
    }
    
#headermenu1 {
    float: left;
    text-align: right;
    margin-left: 2px;
    display: inline;  /*this is a fix for IE's doubled
                        float margin bug*/
    }
    
#headermenu2 {
    float: right;
    text-align: left;
    margin-right: 100px;
    display: inline; /*same as above*/
    }

#global {
	margin:0 auto;
	width:500px;
	text-align: left;
}

can someone point out the problem.

- Thanks -

Kris

Thanks for taking the time to read my question.

I FF v.2 and IE v.7

In FF I don't get a horizontal scroll bar, which is what I want, but in IE I do. I can't figure out why. The horizontal scroll bar happens here [id="ListOfItemTitles"].

HTML:
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>For Sale</title>
<link href="Matt.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="Matt.js"></script>	
</head>
<body onload="createArray();createArrayDVD()">
<div class="LeftNavMainOut">
	<div class="LeftNavMainIn">
		<div class="LeftNavContentTitle">
			Select category below to view available inventory
		</div>
		<div class="LeftNavContentHolder">
			<div class="LeftNavContent">
				<!--<a class="Nav" href="#" onClick="ChangeTitle('CD \'s','CD')">CD's</a>-->
				<a class="Nav" href="#" onClick="ChangeTitle('CD \'s','CD')">CD's</a>
			</div>
			<div class="LeftNavContent">
				<a class="Nav" href="#" onClick="ChangeTitle('DVD \'s','DVD')">DVD's</a>
			</div>							  
		</div>
	</div>
</div>

<div class="ItemListMain">
	<div class="ItemListTitle" id="ListOfItemTitles"></div>
	<div class="roundtop"><img class="corner" src="TopLeft3.png" alt="" style="display: none" /></div>
		<div class="ItemListContent" id="ListOfStuff"></div>
	<div class="roundbottom"><img class="corner" src="BottomLeft3.png" alt="" style="display: none" /></div>
</div>
<div>
	<iframe src="CD.txt" id="CDIFrame" style="height:0px;width:0px;border:0;overflow:hidden;"></iframe>
	<iframe src="DVD.txt" id="DVDIFrame" style="height:0px;width:0px;border:0;overflow:hidden;"></iframe>
</div>
<div class="InfoContainer">
	<div class="CoverPicMain"><img id="PicutreID" class="CoverPictures" src="Covers/NoCover.png" /></div>
	<div id="InformationID" class="ItemDetails">CD and DVD Information</div>
</div>
</body>
</html>

CSS:
Code:

html, body {
height: 100%; 
width: 100%;
margin: 0px;
padding: 0px;
background-image: url(background.jpg); 
background-repeat: no-repeat;
background-position: center center;
background-color: #000000;

}

.LeftNavMainOut {
/*background-color: red;*/
float: left;
display: inline;
/*height: 600px;*/
height: 100%;
width: 170px;
margin-right: 100px;
margin-left: 80px;
padding-left:19px; 
background-image: url(LeftNavBorder.png);
background-repeat: repeat-y; 
background-position: top left;
}

.LeftNavMainIn {
/*background-color: pink;*/
float: left;
height: 100%;	
width: 100%;  
background-image: url(LeftNavBorder.png);
background-repeat: repeat-y; 
background-position: top right;
}
 
.LeftNavContentTitle {
text-align: center;
font-size: 20px;
color: white;
width: 150px;
border-bottom: 4px double blue;
margin-top: 10px;
} 
 
.LeftNavContentHolder {
margin-top: 100px;
padding-left: 2px;
}

.LeftNavContent {
background-color: aqua;
width: 140px;
float: left;
border: 2px solid CCCCCC;
text-align: center;
font-size: 20px;
margin-bottom: 10px;
}					  
   
.ItemListTitle{
font-size: 25px;
text-align: center;
width: 100%;
height: 25px;
margin-bottom: 5px;
}

.ItemListMain {
/*background-color: #99FF33;*/
margin-top: 100px;
float: left; 
width: 180px;
}

.ItemListContent {
background-color: #0033CC;
padding-left: 8px;
padding-right: 8px;
height: 300px;
overflow: auto;
display:block;
}

.InfoContainer {
width: 265px;
float: right;
/*background-color: green;*/
margin-right: 100px;
margin-top: 130px; /*100px like ItemListMain, 25px like ItemListTitle, 5px like ItemListTitle*/
padding: 0px;
overflow: hidden;

}

.CoverPicMain {
/*background-color: gray;*/
width: 150px;
height: 150px;
float: right;
margin-right: 45px;
}					  

.CoverPictures {
width: 150px;
height: 150px;
}

.ItemDetails {
/*background-color: orange;*/
width: 260px;
height: 146px;
float: right;
margin: auto;
padding: 2px 2px 2px 3px;
overflow: hidden;
color: white;
}	 

.ItemDetailsArtist {
float: left;
width: 100%;

}

.ItemDetailsTitle {
float: left;
width: 100%;

}			

.ItemDetailsType {
float: left;
width: 100%;

}

.ItemDetailsCost {
float: left;
width: 100%;

}

.ItemDetailsWidescreen {
float: left;
width: 100%;

}			

.ItemDetailsActors {
float: left;
width: 100%;

}

.ItemDetailsRating {
float: left;
width: 100%;

}


img.corner {
height: 20px;
width: 160px;
border: none;
display: block !important;
}	

.roundtop { 
background: url('TopRight.png') no-repeat top right;
/*background-color: #0033CC;*/
}

.roundbottom {
background: url('BottomRight.png') no-repeat top right; 
/*background-color: #0033CC;*/
} 

.Nav {
display: block;
width: 100%;
}
 
.ListStuff {
display: block;
width: 100%;
border-bottom: 1px solid #CCCCCC;
}

a.Nav:link {
    color: #000000;
	text-decoration: none;
}
a.Nav:visited {
    color: #000000;
	text-decoration: none;
}
a.Nav:hover {
    color: #000000;
	text-decoration: underline;
	background-color: #0066FF;
}
a.Nav:active {
    color: #000000;
	text-decoration: none;
}
 
 
a.ListStuff:link {
    color: #ffffff;
	text-decoration: none;
}
a.ListStuff:visited {
    color: #ffffff;
	text-decoration: none;
}
a.ListStuff:hover {
    color: #ffffff;
	text-decoration: underline;
	background-color:#0066FF;
}
a.ListStuff:active {
    color: #ffffff;
	text-decoration: none;
}

JS:
Code:

var TheCDTitles=new Array();
var TheDVDTitles=new Array();
function ChangeTitle(WhichDesc, FrameName) {
	TheCDTitles=''
	TheDVDTitles=''
	document.getElementById("ListOfItemTitles").innerHTML = "<strong><font color=#ffffff>" + WhichDesc + "</font></strong>";
	if (FrameName=='CD') {
		for (x in itemsArray)
		{
			TheCDTitles = TheCDTitles + '<a href="#" class="ListStuff" id="CD" + i + onmouseover="ShowInfoAndPic(' + x + ',' + x + ')">' + itemsArray[x].Artist + '</a>';
		}  
	document.getElementById("ListOfStuff").innerHTML = TheCDTitles;
	}
	if (FrameName=='DVD') {
		for (x in itemsArrayDVD)
		{	
			TheDVDTitles = TheDVDTitles + '<a href="#" class="ListStuff" id="DVD" + i + onmouseover="ShowInfoAndPicDVD(' + x + ',' + x + ')">' + itemsArrayDVD[x].Title + '</a>';
		}  
	document.getElementById("ListOfStuff").innerHTML = TheDVDTitles;
	}
}	   

//*******************CD******************************

var itemsArray=new Array();
var x
function createArray()
{
	x=0
	var data=getCDContents();
	var items=data.split('\n'); //splits the data in retreived from getContents() by line
	var stats;
	for (var i=0; i<items.length; i++)
	{
	x++
		stats=items[i].split(','); //This is the line that determines what separates values in a line
		itemsArray[i]={Artist:stats[0], Title:stats[1], Type:stats[2], Cost:stats[3], Pictu stats[4]}; //This is the line that gives a description to each value in a line. The values in the text file need to be in this order
	}
}

function getCDContents()
{
// gets data from the iFrame which is hidden (height= 0px, width=0px) in PictureScan.html
	var iFrame=document.getElementById('CDIFrame');
	var INdata="";
	if (iFrame.contentDocument) INdata=iFrame.contentDocument.defaultView.document.body.innerHTML;
	if (iFrame.contentWindow) INdata=iFrame.contentWindow.document.body.innerHTML;
	INdata=INdata.replace('<pre>','').replace('</pre>','').replace('<PRE>','').replace('</PRE>','');
	return(INdata);
} 


function ShowInfoAndPic(PicID,InfoID){
var Test
Test = null
document.getElementById("InformationID").innerHTML = '<div class="ItemDetailsArtist">Artist: ' + itemsArray[InfoID].Artist + '</div>' + '<div class="ItemDetailsTitle">Title: ' + itemsArray[InfoID].Title + '</div>' + '<div class="ItemDetailsType">Type: ' + itemsArray[InfoID].Type + '</div>' + '<div class="ItemDetailsCost">Cost: ' + itemsArray[InfoID].Cost + '</div>';
if (Test == itemsArray[PicID].Picture){
document.getElementById('PicutreID').src = 'Covers/NoCover.png';
}
else {
document.getElementById('PicutreID').src = 'Covers/' + itemsArray[PicID].Picture;
}
}

//*******************DVD******************************

var itemsArrayDVD=new Array();
function createArrayDVD()
{
	var dataDVD=getCDContentsDVD();
	var itemsDVD=dataDVD.split('\n'); //splits the data in retreived from getContents() by line
	var statsDVD;
	for (var iDVD=0; iDVD<itemsDVD.length; iDVD++)
	{
		statsDVD=itemsDVD[iDVD].split(','); //This is the line that determines what separates values in a line
		itemsArrayDVD[iDVD]={Title:statsDVD[0], Widescreen:statsDVD[1], Actors:statsDVD[2], Type:statsDVD[3], Rating:statsDVD[4], Cost:statsDVD[5], Pictu statsDVD[6]}; //This is the line that gives a description to each value in a line. The values in the text file need to be in this order
	}
}

function getCDContentsDVD()
{
// gets data from the iFrame which is hidden (height= 0px, width=0px) in PictureScan.html
	var iFrameDVD=document.getElementById('DVDIFrame');
	var INdataDVD="";
	if (iFrameDVD.contentDocument) INdataDVD=iFrameDVD.contentDocument.defaultView.document.body.innerHTML;
	if (iFrameDVD.contentWindow) INdataDVD=iFrameDVD.contentWindow.document.body.innerHTML;
	INdataDVD=INdataDVD.replace('<pre>','').replace('</pre>','').replace('<PRE>','').replace('</PRE>','');
	return(INdataDVD);
} 


function ShowInfoAndPicDVD(PicIDDVD,InfoIDDVD){
var TestDVD
TestDVD = null	
document.getElementById("InformationID").innerHTML = '<div class="ItemDetailsArtist">Title: ' + itemsArrayDVD[InfoIDDVD].Title + '</div>' + '<div class="ItemDetailsWidescreen">Widescreen (x=Yes): ' + itemsArrayDVD[InfoIDDVD].Widescreen + '</div>' + '<div class="ItemDetailsActors">Actors: ' + itemsArrayDVD[InfoIDDVD].Actors + '</div>' + '<div class="ItemDetailsType">Type: ' + itemsArrayDVD[InfoIDDVD].Type + '</div>' + '<div class="ItemDetailsRating">Rating: ' + itemsArrayDVD[InfoIDDVD].Rating + '</div>' + '<div class="ItemDetailsCost">Cost: ' + itemsArrayDVD[InfoIDDVD].Cost + '</div>';
if (TestDVD == itemsArrayDVD[PicIDDVD].Picture){
document.getElementById('PicutreID').src = 'Covers/NoCover.png';
}
else{
document.getElementById('PicutreID').src = 'Covers/' + itemsArrayDVD[PicIDDVD].Picture;	
}
}

text doc for the CD iFrame Save this as CD.txt in the local folder
Quote:
3 Doors Down,Away From The Sun,Rock,$5.00
3 Doors Down,The Better Life,Rock,$5.00
Adema,Insomniac's Dream,Rock,$5.00
Aerosmith,Get A Grip,Rock,$5.00
AFI,Sing The Sorrow,Rock,$5.00
Alice In Chains,self titled,Rock,$5.00
Alice In Chains,Dirt,Rock,$5.00
Alien Ant Farm,ANThology,Rock,$5.00


Thanks so much.

Brad

I'm trying to ensure the absence of the horizontal scroll bar within a div for all browsers. Is there a solution?

overflow: -moz-scrollbars-vertical !important; only works in FF, but this is the effect I want.
overflow-x and overflow-y only work in IE6 and below (right?), so does anyone know what to do for ie7 and safari and opera?

i have a layout that I am trying to get to work that I need some help with. I am getting records from a database and then displaying them side by side such as:

header record1 record2 record3 record4
column1 column1 column1 column1 column1
column2 column2 column2 column2 column2
column3 column3 column3 column3 column3
column4 column4 column4 column4 column4

what I want is for the page to have to scroll to the right when lots of records are present, what happens now is that say record4 starts a new line and will be under the rest of the records not are their side. I can get it if I set the div container's width to something like 10000px but that wont work as sometimes they may be longer or shorter and I dont want a lot of white space to the right side. I want this accomplised dynamically so no matter how wide it is, it will show them all. I tried overflow: scroll but that didn't seem to work.

Here is the code, its in php but its not big or too hard to figure out.

PHP Code:
echo '<div id="tableheader">';
for ($i=0; $i<count($info); $i++) {
    echo '<p>'.$info[$i][name].'</p>';
}
echo '</div>';

for ($i=0; $i<count($data); $i++) {
    if (!($i & 1)) {
        echo '<div class="even">';
    } else {
        echo '<div class="odd">';
    }
    for ($j=0; $j<count($data[$i]); $j++) {
        if ($j == 0) {
            echo '<p><a href="homedata.php?record='.$data[$i][$j].'">'.$data[$i][$j].'</a></p>';
        } else {
            echo '<p>&nbsp;'.$data[$i][$j].'&nbsp;</p>';    
        }
    }
    echo '</div>';
}
echo '</div>';
?>
</div> 





and my css is:
Code:

#tableData {padding: 0; margin: 0; border: 0; width: 10000px;}
  
#tableheader {background-color: #ACACAC;position: relative; float: left;}
.odd {background-color:#C0D8E1; position: relative; float: left;} 
.even {position: relative; float: left;}

#tableData p {padding: 0 3px; margin: 0; border-right: 1px solid black;  border-bottom: 1px solid black;display: block;}

Any ideas?

Thanks