CSS - Css Scroller Don't Work In Mozilla !! Why??

I want to show 2 divs, and allow the user to horizontal scroll (in a surrounding div with overflow:hidden and white-space:nowrap) to the next 2 divs. It works fine if I use images with full widths. But...

Issue I'm running into is this, if i use float:left, it wraps the divs to the next line and doesn't expand horizontally past the width of the div. If i use display:inline, i can't set the widths of the divs, and since they are text based, they show up as tiny divs, only the width of the text.

So, what would be a solution here?

CSS
Code:

#wrap {
padding:30px 0 0 0;
width:500px;
height:310px;
border:1px solid black;
white-space:nowrap;
overflow:hidden;
}
#wrap div {
	display:inline;
	width:245px;
}

HTML
Code:

<div id="wrap">
    <div><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="" /></div>
    <div><img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="75" height="75" alt="" /></div>
    <div><img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" width="75" height="75" alt="" /></div>
    <div><img src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" width="75" height="75" alt="" /></div>
    <div><img src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" width="75" height="75" alt="" /></div>
    <div><img src="http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg" width="75" height="75" alt="" /></div>
    <div><img src="http://static.flickr.com/58/199481218_264ce20da0_s.jpg" width="75" height="75" alt="" /></div>
    <div><img src="http://static.flickr.com/69/199481255_fdfe885f87_s.jpg" width="75" height="75" alt="" /></div>
    <div><img src="http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg" width="75" height="75" alt="" /></div>
    <div><img src="http://static.flickr.com/70/229228324_08223b70fa_s.jpg" width="75" height="75" alt="" /></div>
</div>

and obviously the javascript would be included to allow the div to scroll onlick. But I just need the initial setup of this.

Hi,

I am trying to create a combo box with horizontal scroller. i.e. Combo box will have a fixed width, if
any of its options have higher text, then horizontal
scroller should appear automatically.

I also tried placing a <div> around <SELECT>. But not getting how to apply styles on it.

Any suggestions will be helpful.

Thanks

Apologies if this is in the wrong section guys but it's a combo of CSS, JS and HTML.

On my site I want to have a thumbnail (horizontal) scroller, which when clicked on a thumbnail uses the Lightbox style script to open an image.
I'd prefer that over a block of say 20 thumbnails to call upon.

However, I'm totally stumped of how to do this.

Hi,
I'm breaking my head over IE6.0: adjusted this page and it now works at least in IE 5.0, 5.5, Opera, Firefox but in IE6.0 the damn thing doesn't align vertical in a right way and the menu doesn't scroll with the page anymore. Anybody who can tell me what's upsetting IE6.0? I don't have a clue no more.
Cheers,
Ziggy

is there away for me to make css work in mozila? I have this for IE but when i view the site in mozilla/netscape then the tables and etc are all out of place

Code:

.10w {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #FFFFFF;
	font-weight: normal;

}
.10wB {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: bold;
	color: #FFFFFF;
}
.10b {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #000000;
}

does anyone knows how to make it work?

Hello. I can't figure out why Mozilla Firefox won't interpret my CSS correctly. In IE my site works just fine but in Firefox it doesn't work at all. The only part of the css file mozilla is picking up is the body font.

Any ideas?

I am trying to display a banner (image) at the top of my page with a menu under it. In IE the image aligns to the top of the menu, but in Mozilla the menu starts 15 pixels below the image. I've tried setting margin and padding to 0 for all div tags but that does not help. If I set margin=-15px for my #hnav it aligns in Mozilla, but then the menu is pushed up 15 pixels in IE.

I've tried an old IE hack from eric myers, but both IE and Mozilla read the hack code and it did not help.

Code:

<html>
<head>
<style type="text/css">
body {margin:0; padding:0;}
html {margin:0; padding:0; background-color:#646874;
  font-size:11pt; font-family:Verdana, Arial, Helvetica, sans-serif;}
img {display: block;border:none; margin:0;padding:0;}

a:link, a:visited { color: #00F; text-decoration: none; }

#pageContent {margin-left:24px;margin-top:12px;padding-bottom:45px; padding-right:7px; }
.contentImg {width:707px;padding-left: 209px;}
.padRight { padding-right: 15px; }

#banner {
   width:820px;height:149px;
   background-image:url(images/820x150.gif);
   background-repeat:no-repeat;
}
#hnav {width:820px;height:42px;background-image:url(images/navbar.gif);background-repeat:repeat-x;
   margin-top: 0px;}

#hnav ul {list-style:none;padding-left:20px;}
#hnav ul li {float:left;font-size:11px;padding-right:15px;background-image:url(images/divider.gif);
   background-position:right;background-repeat:no-repeat;height:30px;}
#hnav ul li a {padding-right:15px;position:relative;top:9px;text-decoration:none;color:#000;}
#hnav ul li a:hover {color:#777777;}
#hnav .curNavItem {padding-right:15px;position:relative;top:9px;text-decoration:none;color:#000;
   font-weight:bold;}

</style>
</head>

<body>
<div id="centerPage">
  <div id="mastHead">
    <div id="banner"></div>
    <div id="hnav">
      <ul>
        <li><span class="curNavItem">Home</span></li>
        <li><a href="gold.html">Gold</a></li>
        <li><a href="silver.html">Silver</a></li>
        <li><a href="ssteel.html">Stainless Steel</a></li>
        <li><a href="glass.html">Glass</a></li>
        <li><a href="gemstones.html">Gemstones</a></li>
        <li><a href="custom.html">Custom</a></li>
        <li><a href="plating.html">Plating</a></li>
        <li><a href="events.html">Events</a></li>
        <li><a href="contactus.html">Contact Us</a></li>
      </ul>
    </div>
  </div>
</div>

</body>
</html>

Code:

<style>
a.ClassA{
background-color:#000000;
color:#ffffff;
width:200px;
height:50px;
}

a.ClassA:hover{
background-color:Red;
}
</style>

Code:

<a href=# class=ClassA>Sample</a>

IE
http://img156.echo.cx/img156/604/ie9ay.png

Mozilla
http://img156.echo.cx/img156/7571/moz6ed.png

The result I want is the same with IE

why is it different in Mozilla ?

HELP!

this is the deal. My CSS/html looks great in IE.....BUT, when i open it in Mozilla, its like Mozilla isn't even registering the external css...only the html. Any ideas on how to make it work in both ie and mozilla?!?

Im new to CSS and have a problem. IE displays my webpages without problem but when testing in Mozilla only a small number of CSS borders are visible.

Here's an example. This works OK

.right {
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: none;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: none;
border-top-color: #666666;
border-right-color: #666666;
border-bottom-color: #666666;
border-left-color: #666666;
}

But this one does not display?

.3pxspacernobackborder3 {
padding: 8px;
font-family: Verdana, Arial, Helvetica, sans-serif, "Book Antiqua";
font-size: 12px;
color: #000066;
border-top: 1px solid #666666;
border-right: 1px solid #666666;
border-bottom: 1px none #666666;
border-left: 1px none #666666;

}

This is probably somethign simple but be gentle please guys.

Hi,
I am facing a terrible problem where in
the following css code(setting of height) is working for Mozilla 3.0 but is not working for IE 6

in Css

.fsSearchIE{

height:5px !important;
background: red!important;
border: 1em solid green;
margin: 0 auto !important;

}


In html
<fieldset class="fsSearchIE" >
my code
</fieldset>

Would be thankful

Sandeep

My work wasn't allowing us to have Mozilla on our computers so when I began my website I had to code for IE. Well now that we have clearance for FireFox, I've tested it and it appears that my CSS isn't even there when opening the page in Mozilla. It just looks like straight HTML.

I know that due to my work being crazy I'm doing this a bit backwards (should always code for Mozilla and debug in IE), but this is what I have to work with and I need your help.

Here is the CSS reference:

Code:

<link href="D:\Play\PersonalWebsite\WebContent\CSS\Style.css"
	rel="stylesheet" type="text/css" media="screen" />

Here is the CSS:

Code:

body {
	background-color:#666633;
	background-image:url(http://i444.photobucket.com/albums/qq161/JadieGlitch/bg.jpg);
	background-repeat: repeat-y;
	margin: 0;
	padding: 0;
	font-family: "Trebuchet MS",Tahoma,Lucida Sans,Arial,Verdana,Helvetica,sans-serif;
}

@media screen {
	div#lockedLeftContainer, div#lockedTopContainer {
		position: fixed;
	}

div#lockedTopContainer{
	background-color: #191916;
	height: 204px;
	width: 1500px;
	background: url() no-repeat;
	left: 0;
	} 

a img {
	border:none;
}

div#linkList h3 {
	display: none;
}

div#lockedLeftContainer, div#lockedLeftContainer a {
	left: 0;
	top: 270px;
	width: 185px;
	height: 100%;
	font-size: 12px;
	padding: 5px;
	padding-right: 10px;
	font-weight: bold;
	color: #FFF;
}

div#lockedLeftContainer a:hover {
	color: #191916;
}

div#News {
	margin-left: 445px;
	padding: 10px;
	padding-left: 20px;
	padding-bottom: 0;
	height: 100%;
}

div#supportingText{
	height: 100%;
}

.clr {
	clear:both;
} 

div#News h3, div#supportingText h3 {
	display: block;
	background: url(http://i444.photobucket.com/albums/qq161/JadieGlitch/hatching.gif) left top repeat #191916;
	margin: 0;
	padding: 0;
	padding-left: 20px;
	color: #FFF;
	font-size: 24px;
	line-height: 50px;
	text-transform: lowercase;
	width: 100%;
}

div#News h4, div#supportingText h4 {
	display: block;
	background: url(http://i444.photobucket.com/albums/qq161/JadieGlitch/hatching.gif) left top repeat #191916;
	margin: 0;
	padding: 0;
	padding-left: 20px;
	color: #FFF;
	font-size: 24px;
	line-height: 50px;
	width: 100%;
}

div#News p, div#supportingText p {
	font-size: 14px;
	color: #191916;
	line-height: 1.5em;
	padding-left: 10px;
}

div#clear {
	clear:both;
}	

div#News a, div#supportingText a {
	color: #191916;
}

div#News a:hover, div#supportingText a:hover {
	color: #FFF;
}

div#News abbr, div#News acronym, div#supportingText abbr, div#supportingText acronym {
	border-bottom: 1px dotted #191916;
}

div#footer {
	display: block;
	height: 20px;
	background: url(http://i444.photobucket.com/albums/qq161/JadieGlitch/hatching.gif) left top repeat #191916;
	padding: 3px;
	font-size: 12px;
	line-height: 20px;
	text-align: center;
	margin-bottom: 10px;
}

div#footer a {
	color: #fff;
	font-weight: bold;
}

div#footer a:hover {
	color: #000;
}

div#linkList {
	position: fixed;
	left: 210px;
	top: 310px;
	width: 240px;
	font-family: Baskerville,Georgia,Garamond,"Times New Roman",serif;
}

div#linkList ul {
	list-style: none;
	padding: 0;
	margin: 0;
	height: 100%;
}

div#linkList ul {
	list-style: none;
}

div#linkList ul li {
	border-bottom: 1px solid #630;
}

div#linkList ul li a {
	display: block;
	padding: 5px;
	font-weight: bold;
	font-size: 12px;
	color: #663;
	text-transform: uppercase;
	text-decoration: none;
	height: 100%;
}

div#linkList ul li a:hover {
	border: 1px solid #000
}

div#linkList div#lselect ul li, div#lStore ul li {
	padding: 5px;
	padding-left: 20px;
	padding-right: 20px;
	height: 100%;
}

div#linkList div#lselect ul li a:hover, div#lStore ul li a:hover {
	color: #000;
}

div#linkList div#lselect ul li a.c, div#lStore ul li a.c {
	display: inline;
	text-transform: none;
	font-size: 10px;
	color: #191916;
}

div#lStore ul li a.c:hover {
	text-decoration: underline;
}

div#linkList div#lselect, div#linkList div#lStore, div#linkList div#lresources {
	margin-top: 10px;
}

div#linkList div#lselect h3, div#linkList div#lStore h3, div#linkList div#lresources h3 {
	display: block;
	height: 35px;
	margin: 0;
	padding: 0;
}

div#rotate_ad {
	display: block;
	height: 150px;
	margin: 0;
	padding: 0;
}

div#linkList div#lselect h3 span, div#linkList div#lStore h3 span, div#linkList div#lresources h3 span {
	display: none;
}

div#linkList div#lselect h3 {
	background: url(http://i444.photobucket.com/albums/qq161/JadieGlitch/PhotoGallery.gif) center top no-repeat;
}

div#linkList div#lresources h3 {
	background: url(http://i444.photobucket.com/albums/qq161/JadieGlitch/Resources.gif) center top no-repeat;
}

div#contactInfo {
	position: absolute;
	left: 210px;
	top: 400px;
}

div#newsimage {
	position: relative;
	left: 25px;
	top: 25px;
}

Hello --

The CSS file is being ignored by Mozilla Foxfire (IE recognizes it). When viewed locally in Foxfire, it's OK, but not when uploaded.

<!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>
<title>Karen Homepage</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="karen.css" rel="stylesheet" type="text/css" />
</head>

Any clues/help would be greatly appreciated.

Thanks -- JillC

I am trying a technique at this site, http://www.anncompton.com/test. The format works in IE but not Mozilla. It seems to be the div's with a repeat-y that are failing. Below is a subset of the code - somewhere in this is the problem.

<!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>Untitled Document</title>
<link rel="stylesheet" type="text/css" media="screen" href="test.css" />
</head>
<body>

<div id="page"> <div id="pagea"> <div id="pageb"> <div id="pagec">
<div id="header"><img src="images/Banner2.gif" alt="Ann Compton" name="logo" id="logo" /></div>
<div id="sidebar">
<h5>Cell: 910-699-6919<br />
Res: 910-699-4441 </h5>
<a href="mailto:ann@mindspring.com">ann@mindspring.com</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

<!--body {
background:#e5f6f4 url(images/huntbkg.gif);
margin:10px 0;
padding:0px 5px 15px 10px;
font:small/1.6em Verdana, Arial, Helvetica, sans-serif;
text-align:center;
color:#333;
}


#page {
background:#B8BFD8 url(images/pg_topright.gif) no-repeat right top;
margin:0 auto;
padding-top:0px;
width:995px;
text-align:left;
}


#pagea {
background:url(images/pg_right.gif) repeat-y right top;
width:995px;
}

#pageb {
background:url(images/pg_bot.gif) no-repeat right bottom;
padding:0 0px 20px 0px;
width:995px;
}

#pagec {
background: url(images/grnbar.gif) repeat-y top left;
width:990px;
}

-->