CSS - Why Doesn't Ff Display Scroll Bar Colors?

Hello.. I've been working on this site for my Daughter using Wordpress, I've mashed about the CSS, Modding a template for the desired look for the site.

I've tied validating it and it brings up a couple of strange comments about the </body> and </html> closing tags, I presume this is why IE7 is having problems displaying the page. Firefox doesn't seem to have an issue at all.

I was hoping somebody could take a look at the source with a fresh set of eyes and let me know what is wrong, I've spent hours working on this and can't see it for the life of me.

I'm sure it's something simple, I know I had an issue one time where a <P> tag wasn't closed and stopped the whole site being displayed...

thanks.

blog.mirana[dot]co[dot]uk

Okay the backgroundimage "content-header" does not display in firefox for the <div id="contentWrapper"> tag. In internet explorer it displays. Not sure what the hell is going on with it.

I hate css

http://www.mgan.net/work/10-06-04/layout1.html

There is the link, I have my styles in the header section of the html file.

This stylesheet was developed by volunteers (local students) who weren't asked to design for cross-browser compatibility.

In FF and Netscape the background CSS 'runs out' before the content does (problematic with black background) and there isn't any space between objects (adjoining columns, text etc.).

Because I need to make the fix asap (and I am not well versed in CSS for layout) my options here are a) pay my ISP web team to make the adjustments, b) redesign site templates using tables (which I can do, but I know is regressing) or c) get some specific feedback from you folks. The code does not validate (re. W3C CSS Validator) but I'm not experienced enough in this to know how to fix it.

In the long-term, I am definitely looking to improve my knowledge in this area and appreciate your patience with me.

I have copied the code below. Many thanks for any feedback, resources, pointers etc. you may be able to provide.



body{
background-color: Black;
background-position: center;
text-align: center;
vertical-align: center;
margin: 2px;
}

h4{
font-family: Arial, Helvetica, sans-serif;
font-size: 9pt;
font-weight: bolder;
color: black;
}

h6{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 7.5pt;
font-weight: normal;
color: black;
}

h1{
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
font-weight: bolder;
color: black;
text-transform: uppercase;
}

h2{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9pt;
font-weight: bold;
color: #8B0000;
}


div#wrapper{
background-position: center;
background-color: #F0F1EB;
width: 762px;
height: 420px;
margin: 0px;
border: 1px solid #black;
padding: 0 px;


}

div#top{
background-position: center;
background-image: url(../images/top.jpg);
width: 760px;
height: 123px;
margin: 0px;
border: 0px;
padding: 0 px;
text-align: right;
vertical-align: top;
text-transform: uppercase;
}

div#toplinks{
background-position: center;
width: 634px;
height: 15px;
margin: 0px;
border: 0px;
padding: 2 px;
float: right;
vertical-align: top;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bolder;
text-align: center;
color: white;

}

div#midlinks{
background-position: center;
background-color: #F0F1EB;
width: 760px;
height: 17px;
margin: 0px;
padding: 0 px;
border-bottom: 1px solid #9E9E9E;;
border-left: 0px;
border-right: 0px;
border-top: 1px solid #9E9E9E;
}


div#midleft{
background-color: white;
width: 126px;
height: 16px;
margin: 0px;
padding: 6 px;
float: left;
border-bottom: 0px;
border-left: 0px;
border-right: 1px solid #9E9E9E;
border-top: 0px;
text-transform: uppercase;
color: red;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bolder;
text-align: right;


}

div#midleft a, div#midleft a:hover, div#midleft a:visited, div#midleft a:active{
text-transform: uppercase;
color: red;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bolder;
text-align: right;
text-decoration: none;
}

div#midright{
width: 631px;
height: 16px;
margin: 0px;
padding: 6 px;
float: right;
border:0px;
font-family: Arial, sans-serif;
font-size: 11px;
font-weight: bolder;
text-align: left;
color: white;
text-transform: uppercase;

}

div#midright a, div#midright a:hover, div#midright a:visited, div#midright a:active{
font-family: Arial, sans-serif;
font-size: 11px;
font-weight: bolder;
text-align: left;
color: #990000;
text-transform: uppercase;
text-decoration: none;
}

div#left{
background-position: center;
background-color: #F0F1EB;
width: 125px;
margin: 0px;
padding: 7 px;
float: left;
border-bottom: 0px;
border-left: 0px;
border-right: 0px;
border-top: 0px;
text-transform: uppercase;
color: black;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: 900;
text-align: right;
}

div#left a, div#left a:hover, div#left a:visited, div#left a:active{
text-transform: uppercase;
color: #990000;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: 900;
text-align: right;
text-decoration: none;
}

div#main{
background-position: center;
background-color: White;
width: 635px;
height: 470px;
margin: 0px;
padding: 0 px;
float: right;
border-left: 1px solid #9E9E9E;

}


div#mainl{
background-position: center;
background-color: white;
width: 310px;
height: 289px;
margin: 0px;
border: 0px;
padding: 10 px;
float: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 9pt;
text-align: left;
color: black;
}

div#main2{
background-position: center;
background-color: white;
width: 317px;
height: 450px;
margin: 0px;
padding: 10 px;
float: right;
border-bottom: 0px;
border-left: 1px solid #9E9E9E;
border-right: 0px;
border-top: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 9pt;
text-align: left;
color: black;
}

div#main1col{
background-position: center;
background-color: white;
width: 625px;
height: 289px;
margin: 0px;
padding: 10 px;
border: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 9pt;
font-weight: normal;
text-align: left;
color: black;
}

div#main1col td, div#mainl td, div#main2 td{
font-family: Arial, Helvetica, sans-serif;
font-size: 9pt;
font-weight: normal;
text-align: left;
color: black;
}

div#main1col a, div#main1col a:hover, div#main1col a:active, div#main1col a:visited {
font-family: Arial, Helvetica, sans-serif;
font-size: 9pt;
font-weight: normal;
text-align: left;
color: #8B0000;
text-decoration: underline;
}

div#mainl a, div#mainl a:visited, div#mainl a:hover, div#mainl a:active {
font-family: Arial, Helvetica, sans-serif;
font-size: 9pt;
font-weight: normal;
text-align: left;
color: #8B0000;
text-decoration: underline;
}


div#main2 a, div#main2 a:visited, div#main2 a:hover, div#main2 a:active{
font-family: Arial, Helvetica, sans-serif;
font-size: 9pt;
font-weight: normal;
text-align: left;
color: #8B0000;
text-decoration: underline;
}

.container { position: relative; left: 1px; top: 1px;}

.text {position: absolute; left: 5px; top: 0px;}


.container a, .container a:visited, .container hover, .container a:active {color: #666; text-decoration: none;}
.text a, .text a:visited, .text hover, .text a:active{color: white; text-decoration: none;}

Hi - I've just carefully taught myself to design a site in CSS (as you can tell I'm not an expert - please forgive me this!) It looks great in IE, but the CSS doesn't display at all in Firefox. What have I done wrong?

Hi,
I have a two column CSS layout - the stylesheet and web page that uses it are attached. I tried to put a menu in the left column (technically div) - of this web page. This is a menu that uses JS mouseover and mouseout to set the style of the children menus to block or none - to show or hide the children or submenu items.

onmouseover="document.all.child1.style.display='block'
onmouseout="document.all.child1.style.display='none'

When you mouseover the menu item, children menu items underneath it are supposed to be displayed, but they're not.

Please look at the style sheet - and web page.

Any idea why this menu works outside of the CSS two column layout, but not when I place the code inside this layout??????

Thanks
Vmusic

OK,

So I have put together what I thought was a reasonably basic xhtml page outline. I'm using a Win2k box. I checked it in Opera 7 and IE6 and it looks fine (more or less). I've also validated the xhtml and css codes. However, when I look at the page in Netscape 7.1 or Firefox, the menu kind of hangs a bit in limbo. Otherwise the rest of the page render's fine. I've included my code below. Does anyone have any suggestions since it's likely that if it doesn't work in Netscape/Firefox, it won't work in many other browsers either. Thanks!

Shawn

PS I'm not saying there is anything wrong with Firefox/Netscape, but likely my code


URL: http://www.raisetheratesottawa.org/xhtml/

=====
CSS
=====

HTML {
PADDING-RIGHT: 0px;
MARGIN-TOP: 0px;
PADDING-LEFT: 0px;
BACKGROUND-COLOR: #FF99CC;
MARGIN-BOTTOM: 20px;
PADDING-BOTTOM: 0px;
COLOR: #000000;
PADDING-TOP: 0px
}
BODY {
PADDING-RIGHT: 0px;
MARGIN-TOP: 0px;
PADDING-LEFT: 0px;
BACKGROUND-COLOR: #FF99CC;
MARGIN-BOTTOM: 20px;
PADDING-BOTTOM: 0px;
COLOR: #000000;
PADDING-TOP: 0px
}


#upper {
width:700px;
margin:0px auto;
text-align:left;
padding: 0px;
border: 5px solid #FFFFFF;
BACKGROUND-COLOR: #000000;
PADDING-RIGHT: 0px;
MARGIN-TOP: 0px;
PADDING-LEFT: 0px;
MARGIN-BOTTOM: 10px;
PADDING-BOTTOM: 0px;
PADDING-TOP: 0px
}


/* Horizontal nav */

#menu {
width:700px;
margin:0px auto;
padding: 0;
}

#menu ul {
border: 0;
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
clear: left;
}

#menu ul li {
display: block;
float: left;
text-align: center;
padding: 0;
margin: 0;
}

#menu ul li a {
background: #000000;
width: 175px;
/* was 'height: 2em; */
height: 24px;
padding: 0;
/* was 'margin: 0 0 10px 0;
' this affects the margin between upper menus*/
margin: 0 0 0 0;
color: #FF0000;
text-decoration: none;
display: block;
text-align: center;
font-weight: bold;
letter-spacing: 1px;
/* was 'line-height: 2em; */
line-height: 24px;
/* was 'font-size: x-small;
' */
font-size: 10px;
font-size: 10px;
/* was 'FONT: 8px Verdana, Arial, Helvetica, Sans-Serif;*/
}




#menu ul li#one {
width: 46px;
}
#menu ul li#two a {
width: 154px;
}
#menu ul li#three a {
width: 105px;
}
#menu ul li#four a {
width: 85px;
}
#menu ul li#five a {
width: 56px;
}
#menu ul li#six a {
width: 57px;
}
#menu ul li#seven {
width: 147px;
}


#menu ul li a:hover {
color: #000000;
background: #FF0000;
}

#menu a:active {
background: #c60;
color: #fff;
}


#content {
width:700px;
margin:0px auto;
text-align:left;
padding:0px;
border:5px solid #FFFFFF;
background: url(/xhtml/graph/rtr-logo-bk.gif) #FF99CC;
}


======
XHTML
======

<!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>

<title>Test</title>

<link rel="stylesheet" href="graph/rtrcss2.css" type="text/css" />

<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="en-us" />
<meta name="ROBOTS" content="No Index" />
<meta name="Copyright" content="Copyright (c) 2004" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="MSSmartTagsPreventParsing" content="true" />

<meta name="description" content="" />
<meta name="keywords" content="" />

<link rel="help" href="about.php" title="Site info." />

<meta name="Rating" content="General" />
<meta name="revisit-after" content="2 Days" />
<meta name="doc-class" content="Living Document" />


</head>

<body>

<div id="upper">

<div id="header">
<img src="graph/top-right2.jpg" width="700" height="78" alt="" />
</div>

<div id="menu"><ul>
<li id="one">&nbsp;</li>
<li id="two"><a href="link1.php" title="Link 1.">Link 1</a></li>
<li id="three"><a href="link2.php" title="Link 2.">Link 2</a></li>
<li id="four"><a href="link3.php" title="Link 3.">Link 3</a></li>
<li id="five"><a href="link4.php" title="Link 4.">Link 4</a></li>
<li id="six"><a href="link5.php" title="Link 5.">Link 5</a></li>
<li id="seven">&nbsp;</li>
</ul></div>
</div>


<div id="content">
<p>Here is some text</p>
<p>Here is some more text </p>
</div>



</body>
</html>

Hi, all. I'm brand new to CSS and have run into my first speedbump. I've tried searching the forum already, forgive me if I missed a previously posted solution.

Today I put together a page at work and it looked correct in IE8 (which is the only browser we can use at work). When I got home, I discovered that it doesn't display properly in ANY other browser.

I've validated my code, and just can't figure out what the problem is.

(I tried to link to images here of what it should look like versus what it actually looks like, but apparently as a new user I'm not permitted to post URLs. I also don't seem to be able to insert images into this post, so if anyone would like to see the images, I guess I could email them to you.)

Can anyone tell me why the DIVs appear to be too long? Thanks in advance for any help.

Here is the HTML:

<HTML>
<HEAD>
<link rel="stylesheet" type="text/css" href="comp.css" />
</HEAD>
<BODY>

<div id="parent">

<div id="left_top">
</div>

<div class="bigcontainer" id="right_top">
a very<br>special<br>place<br>on the<br>internet
</div>

<div class="container" id="left_mid">
additional reading
</div>

<div class="container" id="right_mid">
tab one | tab two | tab three | tab four | tab five
</div>


<div class="container" id="left_bottom">
first link<br>
second link<br>
third link<br>
fourth link<br>
fifth link<br>
sixth link<br>
seventh link<br>
eighth link<br>
</div>

<div id="right_bottom">
<p>
Lorem ipsum dolor sit amet...
</p>
</div>

</div>

</BODY>
</HTML>


Here is the CSS:

body
{
font-family: sans-serif;
font-size: 10px;
margin: 0;
padding: 0;
background-color: #e5e5e5;
}

div.bigcontainer
{
font-size: 20px;
font-weight: bolder;
vertical-align: middle;
padding: 20px 20px 0px 0px;
text-align: right;
}

div.container
{
font-size: 12px;
font-weight: bolder;
vertical-align: middle;
padding: 10px 20px 5px 0px;
text-align: right;
}

#parent
{
margin: 0px;
padding: 0px;
position:relative;
}

#left_top
{
width: 35%;
height: 190px;
background-color: #7d7d7d;
float: left
}

#right_top
{
width: 65%;
height: 190px;
color: #ffcc00;
background-color: #666666;
float: right;
}

#left_mid
{
width: 35%;
height: 35px;
color: #ffff99;
background-color: #ffd426;
float: left;
}

#right_mid
{
width: 65%;
height: 35px;
color: #666666;
background-color: #ffcc00;
float: right;
}

#left_bottom
{
width: 35%;
height: 100%;
padding: 20px;
color: #999999;
text-align: right;
background-color: #e5e5e5;
float: left;
}

#right_bottom
{
width: 65%;
padding: 20px;
color: #666666;
text-align: right;
background-color: #ffffff;
float: right;
}

Hi

I wonder if anyone can help. I've been trying to tidy up the layout of my home page, and I'm pretty confused by the way that the header is behaving in both Firefox and Safari - the browsers I use on my Mac.

I've got screen shots which show it looking good on most Windows browsers, but for some reason, all the text is bunched up at the top when I look at it on the Mac.

This is a link to the page:

http://www.independentliving.co.uk/index1.shtml

And this is the relevant bit of the stylesheet:

div#header {
background-image: url("header.jpg");
background-repeat: no-repeat;
color: #FFFFFF;
margin-left:auto;
margin-right:auto;
margin-top: 0;
width:780px;
height: 200px;
margin-bottom: 10px;
font-size: 0.8em;

}

#header .welcome {
text-align: left;
width: 700px;
padding-top: 90px;
padding-left: 20px;
padding-right: 20px;
color: #003366;
font-size: 0.8em;
}

p.welcome {
text-align: left;
width: 700px;
padding-top: 90px;
padding-left: 20px;
padding-right: 20px;
color: #003366;
font-size: 0.8em;
}

#header .slogan {
text-align: left;
width: 700px;
padding-left: 20px;
padding-right: 20px;
color: #003366;
font-size: 0.8em;
}

p.slogan {
text-align: left;
width: 700px
padding-left: 20px;
padding-right: 20px;
color: #003366;
}

If anyone has any ideas, I'd be really grateful. I know Mac is a minority platform, but as it's the one I use, I'm pretty keen to get it working!

Thanks

Frances

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?

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

Exactly that question. I got this menu from a website.

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" xml:lang="en" lang="en">
<head>
<link rel="stylesheet" media="all" type="text/css" href="http://www.cssplay.co.uk/css/menus.css" />
<title>Godly Menus</title>
<style type="text/css">
#menu {list-style-type:none; padding:0; margin:0; width:150px; z-index:100; float:left; height:360px; background:#000;}
#menu ul {list-style-type:none; padding:0; margin:0;}
#menu li {float:left; background:#fff url(http://www.cssplay.co.uk/menus/slide_fly/slide/slide_0.gif) no-repeat;}

#menu li.sub {background:#fff url(http://www.cssplay.co.uk/menus/slide_fly/slide/slide_0.gif) no-repeat;}

#menu li, #menu li a {display:block; color:#fff; font-family:arial, sans-serif; font-size:11px; line-height:30px; width:150px; 

text-decoration:none; cursor:pointer; font-weight:bold; text-align:center;}

#menu table {border-collapse:collapse; padding:0; margin:0 -1px -1px;}

#menu ul,
#menu :hover ul ul,
#menu :hover ul :hover ul ul {position:absolute; left:-9999px; width:150px;}

#menu :hover {color:#ff0; background:#fff url(http://www.cssplay.co.uk/menus/slide_fly/slide/slide_1.gif) no-repeat; 

z-index:500; white-space:nowrap;}

#menu :hover > a {color:#ff0; background:#fff url(http://www.cssplay.co.uk/menus/slide_fly/slide/slide_1.gif) no-repeat; 

z-index:500; white-space:nowrap;}

#menu :hover ul {position:static; height:180px; margin-top:-1px; background:#383838;}
#menu :hover ul :hover ul, 
#menu :hover ul :hover ul :hover ul {display:block; position:absolute; left:130px; top:0; height:auto; z-index:500; border:1px 

solid #fff;}

#menu :hover ul li, #menu :hover ul li a {background:#383838; text-align:left; text-indent:10px; }
#menu :hover ul li.fly a {background: #383838 url(http://www.cssplay.co.uk/menus/slide_fly/slide/arrow.gif) no-repeat 120px 

center;}
#menu :hover ul :hover {background:#255fa3; position:relative; z-index:100;}
#menu a:hover ul li.fly a:hover {background:#255fa3 url(http://www.cssplay.co.uk/menus/slide_fly/slide/arrow.gif) no-repeat 

120px center; color:#ff0;}
#menu :hover ul li.fly:hover > a {background:#255fa3 url(http://www.cssplay.co.uk/menus/slide_fly/slide/arrow.gif) no-repeat 

120px center; color:#ff0;}

#menu :hover ul :hover ul li, 
#menu :hover ul :hover ul li a
{background:#666;}
#menu :hover ul :hover ul :hover ul li {background:#666; z-index:500;}

#menu :hover ul :hover ul li.fly a {background: #626262 url(http://www.cssplay.co.uk/menus/slide_fly/slide/arrow.gif) 

no-repeat 120px center;}
#menu :hover ul :hover ul :hover {z-index:500; background:#0d72c0; color:#ff0;}
#menu a:hover ul a:hover ul li.fly a:hover {background:#0d72c0 url(http://www.cssplay.co.uk/menus/slide_fly/slide/arrow.gif) 

no-repeat 120px center; color:#ff0;}
#menu :hover ul :hover ul li.fly:hover > a {background:#0d72c0 url(http://www.cssplay.co.uk/menus/slide_fly/slide/arrow.gif) 

no-repeat 120px center; color:#ff0;}

#menu :hover ul :hover ul :hover ul li, 
#menu :hover ul :hover ul :hover ul li a {background:#888;}

#menu :hover ul :hover ul :hover ul :hover {background:#5184b8; color:#ff0;}
#menu :hover ul :hover ul :hover ul :hover a {color:#ff0;}

.menu_text {float:left; width:500px; font: 11px verdana, arial, sans-serif; border:1px solid #000; height:358px;}
.menu_text img  {display:block;}
.menu_text p {margin:0; padding:5px 10px; line-height:15px;}
</style>
</head>
<body>
<div id="info">
<ul id="menu">
<li><a href="#nogo">Home</a></li>
<li><a href="#nogo">Privacy Policy</a></li>
<li class="sub"><a href="#nogo">Types<!--[if gte IE 7]><!--></a><!--<![endif]-->
 <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo">European</a></li>
<li><a href="#nogo">Indian</a></li>
<li><a href="#nogo">North Africa</a></li>
<li class="fly"><a href="#nogo">American<!--[if gte IE 7]><!--></a><!--<![endif]-->
 <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo">South American</a></li>
<li class="fly"><a href="#nogo">North American<!--[if gte IE 

7]><!--></a><!--<![endif]-->
 <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo">Grey tree frog</a></li>
<li><a href="#nogo">Green tree frog</a></li>
<li><a href="#nogo">Spring peeper</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li><a href="#nogo">Japanese</a></li>
<li><a href="#nogo">Chinese</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="sub"><a href="#nogo">Classifications<!--[if gte IE 7]><!--></a><!--<![endif]-->
 <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li class="fly"><a href="#nogo">Pelodryadinae<!--[if gte IE 7]><!--></a><!--<![endif]-->
 <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo">Cyclorana</a></li>
<li><a href="#nogo">Litoria</a></li>
<li><a href="#nogo">Nyctimystes</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="fly"><a href="#nogo7">Phyllomedusinae<!--[if gte IE 7]><!--></a><!--<![endif]-->
 <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo">Agalychnis</a></li>
<li><a href="#nogo">Cruziohyla</a></li>
<li><a href="#nogo">Hylomantis</a></li>
<li><a href="#nogo">Pachymedusa</a></li>
<li><a href="#nogo">Phasmahyla</a></li>
<li><a href="#nogo">Phrynomedusa</a></li>
<li><a href="#nogo">Phyllomedusa</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="fly"><a href="#nogo">Hemiphractinae<!--[if gte IE 7]><!--></a><!--<![endif]-->
 <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo">Cryptobatrachus</a></li>
<li><a href="#nogo">Flectonotus</a></li>
<li><a href="#nogo">Gastrotheca</a></li>
<li><a href="#nogo">Hemiphractus</a></li>
<li><a href="#nogo">Stefania</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="fly"><a href="#nogo">Hylinae<!--[if gte IE 7]><!--></a><!--<![endif]-->
 <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo">Acris</a></li>
<li><a href="#nogo">Anotheca</a></li>
<li><a href="#nogo">Bokermannohyla</a></li>
<li><a href="#nogo">Corythomantis</a></li>
<li><a href="#nogo">Ecnomiohyla</a></li>
<li><a href="#nogo">Hyloscirtus</a></li>
<li><a href="#nogo">Megastomatohyla</a></li>
<li><a href="#nogo">Osteocephalus</a></li>
<li><a href="#nogo">Pseudacris</a></li>
<li><a href="#nogo">Sphaenorhynchus</a></li>
<li><a href="#nogo">Trachycephalus</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="fly"><a href="#nogo9">Rhacophorinae<!--[if gte IE 7]><!--></a><!--<![endif]-->
 <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo">Boophis</a></li>
<li><a href="#nogo">Callixalus</a></li>
<li><a href="#nogo">Chiromantis</a></li>
<li><a href="#nogo">Cryptothylax</a></li>
<li><a href="#nogo">Mantidactylus</a></li>
<li><a href="#nogo">Rhacophorus</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="fly"><a href="#nogo">Buergeriinae<!--[if gte IE 7]><!--></a><!--<![endif]-->
 <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo">Buergeria</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="sub"><a href="#nogo">References<!--[if gte IE 7]><!--></a><!--<![endif]-->
 <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="http://en.wikipedia.org/wiki/Tree_frog">Wikipedia</a></li>
<li><a href="#nogo11">Encyclopedia</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="sub"><a href="#nogo">Links<!--[if gte IE 7]><!--></a><!--<![endif]-->
 <!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#nogo">Complete treefrog</a></li>
<li><a href="#nogo">Old World treefrogs</a></li>
<li><a href="#nogo">Amphibian Species</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
</ul>
<div class="menu_text"><img src="http://www.cssplay.co.uk/menus/slide_fly/slide/frog.jpg" alt="tree frog" title="" />
<p>Tree frogs are frogs of the families Hylidae and Rhacophoridae.</p>
<p>There is large variation among tree frog species. Many species are not actually arboreal (do not live in trees), but 

terrestrial or aquatic (live on the ground or in the water).</p>
<p>Many arboreal frogs are green, while terrestrial and aquatic species are duller.</p>
<p>They mostly feed on insects and other invertebrates, but some larger species can feed on small vertebrates. The species 

within the genus Cyclorana are burrowing frogs, sometimes spending many years underground.</p>
</div>
</div>
</body>
</html>

Any anyway, if I take out the <link> it dissapears!! The CSS in it has nothing to do with the image. Here is the CSS in the <link> tag.

Code:

#showcase {background:#6f9c6f;}
dl.menus_list dt {background:#6f9c6f; font-size:1.5em; margin:3px 0;}
#foot {background:#8fbc8f;}
dl.menus_list dd.nil {padding:0; margin:0;}

I hate to say it but I'm baffled! Goal: Get all the CSS into the same file as the rest of my code.

Edit: Gah kravvitz I've been watching your move through your profile and you signed off!! Gay. Well I hope someone else here can help me solve this issue I'm having...

I am using a table bg mouseover CSS effect. In FireFox and my dreamweaver workspace, the page looks fine. However in IE, the section where I used the CSS effect has a slightly different color.



What could be the cause of this?

Thanks.

wait, i just figured out that its the image that is a different color...

so my new question is, why?

Hey everyone. I posted this in another forum, but we were unable to get the issue resolved, so I thought I would try posting here.

I am having trouble getting some colors to work on my pages with CSS. I went through and made an index.html, in which I setup all my layout, graphics, colors, etc. I then took that and turned it into header.php and footer.php, with a new index.php file.

My problem is that now when I upload up index.php to the server and go to view it, all the text formatting and layout of the page works fine, but the background, heading, link, etc. colors are just showing up as the defaults. The colors that I am working with are not from the websafe pallet, but I think that they are supported by most browsers (519A00, 5B4C34, 33435A, E5EDF9). Now that I think about it, it cant be browser support because it all works just fine in the index.html file.

The link to the previous forum post is here There was a rather long discussion on possible causes there, but we never found a solution. I would really appreciate any help you may be able to offer.

Thanks in advance,

-Jonathan

Hi,

Using CSS how can I set an individual bit of text to have a different link color then the rest of the links on my website?

Thanks

Excuse me but i am a little thick on this one: How do I create different colored link style for say a:

1. navigation bar
2. footer bar
3. main body

Does making classes make sense in this situation

doug