CSS - Background Image And Color Problem...

Hello,
I can't seem to figure out how to get the body of this page to be white...

you can see the page at: www.brandontutmarc.com/vlr
and the attached CSS is at: www.brandontutmarc.com/vlr/viva.css

Here is what I'd like it to look like: http://www.brandontutmarc.com/vlr/vlr1.jpg

Any help is GREATLY appreciated...

Hi,

My code validates apart from some Mozilla specific stuff at the bottom. Basically, in the socialbes-hover' part towards the end i have the background-color set to #F9F7ED which works fine in Firefox however in IE it always reverts back to the earlier code of a:hover {
color: #F9F7ED; background-color: #006E2E

and i cant seem to get it right whatever it try!

please help me its driving me mad arghh lol

thanks


Code:

.style1  a:active {
	color: #FFCC00;
	font-size: 8px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}
.style1  a:link {
	color: #FFCC00;
	font-size: 8px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}
.style1  a:visited {
	color: #FFCC00;
	font-size: 8px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}
.style1  a:hover {
	color: #FFCC00;
	font-size: 8px;
	font-family: Verdana, Arial, Helvetica, sans-serif;	
	
}
a:link {
	color: #D15600; text-decoration:none
}
a:visited {
	color: #D15600; text-decoration:none
}
a:hover {
	color: #F9F7ED; background-color: #006E2E
}

	
.style1 {color: #D15600}
.style2 {font-family: Verdana, Arial, Helvetica, sans-serif}
.style4 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: smaller; }
.style9 {color: #D15600; font-size: larger; }


/************Main Menu******************/

.menu  a:link {
	color: #36393D; text-decoration:none
}
.menu  a:visited {
	color: #36393D; text-decoration:none
}
.menu  a:hover {
	color: #D15600; background-color: #F9F7ED
}

/************Comments******************/

.comments :link {
	color: #D15600; text-decoration:none
}
.comments  :visited {
	color: #D15600; text-decoration:none; 
}
.comments  :hover {
	color: #36393D; background-color: #F9F7ED

/************Sociables******************/

}

.sociable-hovers {
	opacity: .4;
	-moz-opacity: .4;
	filter: alpha(opacity=40);
	background-color: #F9F7ED;
}	

.sociable-hovers:hover {
	opacity: 1;
	-moz-opacity: 1;
	filter: alpha(opacity=100);
	color: #36393D;
	background-color: #F9F7ED;
}

I have a horizontal ul:

Code:

<ul>
<li>blah</li>
<li>loooooooooooooooooooooong blah blah blah</li>
</ul>

If I set the background color:
Code:

li { background-color: yellow; }

It works fine, but If the long line gets wrapped, the height of the background of that li is higher, and it looks very funny. I want the background to be equally height, independent on the other li:s height.

Is that possible? I don't want to have a fixed value for the height

So I know that tables are a no-no now-a-days, but I am trying to help troubleshoot this problem without having to rebuild the site.

So this problem only occurs in IE, of course!

When you go to this page: http://dysonracing .com/company/news/archive.php?archive_year=2010

The grey box on the left that displays the news/events nav get a bit out of wack. What I mean by that is that the grey background on the table does not totally flow anymore. The left and right edges of the table dislay white at the top, then the grey about 1/2 way down and then black at the bottom, when the whole thing should be grey. It has a repeating background image. Even if I remove the image and just us the #333333 for the background color, issue is not solve.

It is strange because this problem only happens if you are viewing one of the archive links at the bottom of the page. If you just click News+Events from the main nav, it looks fine. But go to an archive link and it get funky.

Any ideas why this is displaying this way...and only in IE?!

I made this administration system in php.. its a site php site with a table with a menu, under it is a iframe..

the code for the iframe =

Code:

<iframe frameborder="0" marginheight="0" marginwidth="0"  scrolling="auto" width="524" height="100%" src="news.php"></iframe>

then the news.php seems to fail when i scroll in firefox, since the bg in the iframe changes from #F4F4F4 to #FFFFFF in the new space thats uncovered when i scroll.. the bgcolor and bgimage is defined by css, heres the code:

Code:

.bodyiframe {
	background-color: #F4F4F4;
	background-image: url(../images/bgiframe.gif);
	background-repeat: repeat-x;
	background-position: top;
	background-attachment: fixed;
	}

It works fine in explorer 7, but firefox 0.8 cant handle it!.. plz help

Nevermind, fixed. Changed Pixels into Percentages.

Delete thread.

hello mates,

for the "footer" of my webpage, i need to have the left part holding a transparent gif image (can be background image or html object, don't care as long as it shows correctly the background image of the page), and the right part to extend to the rest of the containing "footer" div, with a background-color.
But i can't make the two cohabitate peacefully. :'(
i've tried with divs, span and p, no matter what it does not work.

here is the way i first thought it would work:


Code:

<div id="footer" style="clear:both;width:100%">
     <div id="transparentImg" style="width:460px;height:22px;background:url(image.gif) no-repeat"></div>
     <div id="colorstripe" style="width:inherit;height:22px;background-color:red;text-align:right">disclaimer</div>
</div>

any idea how to make this happen ?

This only causes a problem in IE6, not Firefox or Opera.

The page in question is: http://www.kbs.com.au/index2.asp

CSS is at: http://www.kbs.com.au/kbs2.css

The problem is that the 'Business Services' rollover is appearing further down the problem where it shouldn't. If I take the links (<a> tags) from the two <p> tags further down the page, the images disappear, so it's somehow linked to the classes assigned to links, but I can't figure out how or why or how to fix it.
I tried adding a class just for the offending <p> tags which sets background: none, but that didn't work either.

Anyone got any ideas what's going wrong?

Hello,
I'm currently developing a new website for a clan but Internet Explorer isn't displaying the background image of the content area correctly.

It pushes the content area ~4px to the right from where it should be. I've tried reducing the size of the navigation element but that didn't work and in fact had the opposite effect of what I was looking for.

For some reason I can't link to an image, nor to the site itself to show you the error.

This is the code applicable to the content area.
Code:

#content
{
	width:770px;
	background-image:url(images/backgrounds/conbg.png);
	background-repeat:repeat-y;
	font-size:11px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 70px;
	margin-left: 130px;
	margin-right: 0px;
	vertical-align:top;
}

#contentlimit
{
	width:690px;
}

#condiv
{
	width:770px;
	margin-left: 130px;
	margin-right: 0px;
}

And this the Navigation element:
Code:

#nav
{
	width:130px;
	display:block;
	float:left;
	vertical-align:top;
	margin: 0px 0px 0px 0px;
}

.mlink a
{
	display: block;
	color: #666666;
	background-image:url(images/backgrounds/link.jpg);
	width: 130px;
	padding: .0px .0px;
	height:15px;
	text-decoration: none;
	text-indent: 10px;
}

.mlink a:hover
{
	color: #333333;
	text-decoration: none;
	background-image:url(images/backgrounds/linkhov.jpg);
}

At last check, with this current style sheet, the code was valid.

Any help appreciated,
Cold

my page is at http://pageshree.com/index.php .

In the left hand column of the site, u see two titles of "navigation" and "support". the image is 80px and show fine for navigation, but for support it stops and doesnt finish off the image on the right hand side.

CSS is:
Code:

.subheads {
	height:18px;
	width:80px;
	margin:0;
	padding: 0 1em;
	background:#FFF url(images/subhead.gif) no-repeat;
	color:#FFF;
	font-size:12px;
	font-weight:bold;
	text-align:center;
}

HTML:
Code:

<span class="subheads">Navigation</span>

Any help?

Hello,

I'm currently trying to learn css and have run into a problem in IE.

http://www.nggc.net/test/test.html

At the top the background image is extended and I can't figure out why.

If anyone can help me out or help me improve my current code it would be greatly appreciated.

Here's my css file.

Code:

body {
	margin-top: 0px;
	background-color: #000000;
	color: #777777;
	font-size: 11px;
	padding: 0px;
	font-family: verdana,arial,tahoma;
}

#container {
	margin-left: auto;
	margin-right: auto;
	width: 760px;
}

#topbar {
	width: 760px;
	height: 7px;
	background-image: url('http://www.nggc.net/media/images/header_top.gif');
}

#topnav {
	width: 760px;
	height: 9px;
}

#bottombar {
	width: 760px;
	height: 15px;
	background-image: url('http://www.nggc.net/media/images/header_3.gif');
}

#logo {
	float: left;
	width: 552px;
	height: 68px;
	background-image: url('http://www.nggc.net/media/images/banner.gif');
}

#login {
	float: right;
	width: 208px;
	height: 68px;
	background-image: url('http://www.nggc.net/media/images/login_bg.gif');
}

.clear {
	clear: both;
}

#leftnav {
	float: left;
	padding: 0;
	width: 152px;
	background-image: url('http://www.nggc.net/media/images/nav_bg.gif');
}

div.navcat {
	padding-top: 9px;	
	color:#102434;
	font-size:9px;
	font-family: verdana, tahoma;
	font-weight: bold;
	padding-left: 4px;
	height: 14px;
	background-image: url('http://www.nggc.net/media/images/nav_title.gif');
}

div.navlink {
	color:#102434;
	font-size:9px;
	font-family: verdana, tahoma;
	font-weight: bold;
	padding-left: 16px;
	padding-top: 6px;
	height: 18px;
	background-image: url('http://www.nggc.net/media/images/nav_main.gif');
}

.navlink a:link { color:#7D8488; text-decoration:none; }
.navlink a:visited { color:#7D8488; text-decoration:none; }
.navlink a:hover { color:#A8AFB3; text-decoration:none; }

#header {
	float: left;
	width: 608px;
	height: 23px;
	background-image: url('http://www.nggc.net/media/images/body_1.gif');
}

#content {
	float: left;
	width: 596px;
	padding: 3px 6px 3px 6px;
	background-color: #0F0F0F;
}

#block1 {
	padding: 1px;
	height: 194px;
	border-top: 1px solid #818080;
	border-left: 1px solid #525151;
	border-bottom: 1px solid #525151;
	border-right: 1px solid #393737;
}

#featuredgame {
	float: left;
	width: 387px;
	height: 192px;
	
}

#latestnews {
	float: right;
	width: 201px;
	height: 17px;
	border: 1px solid #6F6E6E;
}

#newsblock {
	float: right;
	width: 197px;
	border: 1px solid #6F6E6E;
	border-top: 0px;
	padding: 2px 2px;
}

div.newstitle {
	text-align: center;
	color:#5BA920;
	font-size:11px;
	font-family: verdana, tahoma;
	font-weight: bold;
	background-color: #404040;
	width: 194px;
	height: 14px;
	padding: 1px;
	border: 1px solid #000000;
	border-bottom: 0px;
}

#newstext {
	text-align: center;
	width: 194px;
	background-color: #222222;
	padding: 1px;
	border: 1px solid #000000;
}

and here's the html file
Code:

<!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" />
<meta name="description" content="NGGC - Gaming News, Reviews, Ladders, Tournaments, Forums, and More!" />
<meta name="keywords" content="games, video games, playstation, psp, xbox, socom, ladders, wars, clans, generation, next, gaming, community" />
<title>Test</title>
<link rel="stylesheet" href="http://www.nggc.net/test/main2.css" type="text/css" />
<script type="text/javascript" src="{#url#}/tooltip.js"></script>
<script type="text/javascript" src="{#url#}/global.js"></script>
<script type="text/javascript" src="{#url#}/slider.js"></script>
</head>
<body>
<div id="container">
<div id="topbar"></div>
<div id="topnav"><img src="http://www.nggc.net/media/images/header_1.gif" alt="" /><a href="http://www.nggc.net/"><img src="http://www.nggc.net/media/images/header_home.gif" border="0" alt="" /></a><img src="http://www.nggc.net/media/images/header_spacer.gif" alt="" /><a href="http://www.nggc.net/"><img src="http://www.nggc.net/media/images/header_pc.gif" border="0" alt="" /></a><img src="http://www.nggc.net/media/images/header_spacer.gif" alt="" /><a href="http://www.nggc.net/"><img src="http://www.nggc.net/media/images/header_ps2.gif" border="0" alt="" /></a><img src="http://www.nggc.net/media/images/header_spacer.gif" alt="" /><a href="http://www.nggc.net/"><img src="http://www.nggc.net/media/images/header_ps3.gif" border="0" alt="" /></a><img src="http://www.nggc.net/media/images/header_spacer.gif" alt="" /><a href="http://www.nggc.net/"><img src="http://www.nggc.net/media/images/header_psp.gif" border="0" alt="" /></a><img src="http://www.nggc.net/media/images/header_spacer.gif" alt="" /><a href="http://www.nggc.net/"><img src="http://www.nggc.net/media/images/header_rev.gif" border="0" alt="" /></a><img src="http://www.nggc.net/media/images/header_spacer.gif" alt="" /><a href="http://www.nggc.net/"><img src="http://www.nggc.net/media/images/header_xbox.gif" border="0" alt="" /></a><img src="http://www.nggc.net/media/images/header_spacer.gif" alt="" /><a href="http://www.nggc.net/"><img src="http://www.nggc.net/media/images/header_x360.gif" border="0" alt="" /></a><img src="http://www.nggc.net/media/images/header_spacer.gif" alt="" /><a href="http://www.nggc.net/"><img src="http://www.nggc.net/media/images/header_ladders.gif" border="0" alt="" /></a><img src="http://www.nggc.net/media/images/header_spacer.gif" alt="" /><a href="http://www.nggc.net/"><img src="http://www.nggc.net/media/images/header_tournaments.gif" border="0" alt="" /></a><img src="http://www.nggc.net/media/images/header_spacer.gif" alt="" /><a href="http://www.nggc.net/"><img src="http://www.nggc.net/media/images/header_forums.gif" border="0" alt="" /></a><img src="http://www.nggc.net/media/images/header_2.gif" alt="" /></div>
<div id="bottombar"></div>
<div id="logo"></div>
<div id="login"></div>

<div id="leftnav">
<div class="navcat">NGGC</div>
<div class="navlink"><a href="#">Home</a></div>
<div class="navlink"><a href="#">News</a></div>
<div class="navlink"><a href="#">Ladders</a></div>
<div class="navcat">Channels</div>
<div class="navlink"><a href="#">PC</a></div>
<div class="navlink"><a href="#">Playstation 2</a></div>
<div class="navlink"><a href="#">Playstation 3</a></div>
<div class="navlink"><a href="#">Sony PSP</a></div>
<div class="navlink"><a href="#">Nintendo Wii</a></div>
<div class="navlink"><a href="#">Xbox</a></div>
<div class="navlink"><a href="#">Xbox 360</a></div>
</div>

<div id="header"></div>

<div id="content">
<div id="block1">
<div id="featuredgame"><img src="http://www.nggc.net/media/images/featured.gif" alt="" /></div>
<div id="latestnews"><img src="http://www.nggc.net/media/images/latestnews.gif" alt="" /></div>
<div id="newsblock">
<div class="newstitle">Testing 123</div>
<div class="newstext" style="border-bottom: 0px;">NGGC plans on opening Mid-April Stay Tuned NGGC plans on opening Mid-April Stay Tuned NGGC plans on opening Mid-April Stay Tuned</div>
<div class="newstitle">Testing 123</div>
<div class="newstext">NGGC plans on opening Mid-April Stay Tuned NGGC plans on opening Mid-April Stay Tuned NGGC plans on opening Mid-April Stay Tuned</div>
</div>
</div>
</div>

</div>
</body>
</html>

Thanks.

I don't know if this has been adressed or not but I am having a problem using the background:url(images/stuff.jpg); and the background-image: .... I been trying to set an elements background but I get nothing for the background it will not apper even if I do a simple code like this

this is just an example :
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

CSS Code:

 div#top p {

 background:url('image/logo.gif');
 }
 

I would do something like this and it will not show the bg image I mean this is just a simple code I have done it in the past but I don't know why I am not able to see the bg image is there a rule I missed somewhere if so which one


well hope you can help me

Hey all. I've been putting together a website for my friend, and my css chops are admittedly pretty old and not that great anyway.
I'm wondering if anyone could give me some advice. I can't get a background-image in a <div> to load at all in a firefox browser, though it loads in safari. I've highlighted the particular image tag. Does anything look wrong?
_____________________________________
a:link { text-decoration: none;}
a:visited { text-decoration: none;}
a:hover { text-decoration: underline;}
a:active { text-decoration: none;}

body {
background-image: url("images/backcolor.jpg");
}

#site {
position: absolute;
top: 0px;
left: 0px;
width: 864px;
height: 576px;
background-image: url("images/backdrop.jpg");
overflow: auto;
}
____________________________
(snippet from html)
<body>
<div id="site">
<div id="nav">
<a href="about.html"><img src="images/about.jpg" border="0"></a>
<a href="resume.html"><img src="images/resume.jpg" border="0"></a>
<a href="portfolio.html"><img src="images/portfolio.jpg" border="0"></a>
<a href="links.html"><img src="images/links.jpg" border="0"></a>
</div>
<div id="image">
</div>
<div id="text">
<span class="main">
<span class="title">There is music in everything.</span><br>

<span class="link">In the very core of the emotions we emit as human beings there is sonic substance. Much like music, sound contains rhythm, texture, timbre and tone. It has the incredible capability of evoking and opening all of our senses: sight, taste, touch and smell. When a sound design is successful it is an art, a piece that is honored individually for its strength and intelligence, rather than its ability to support a production.</span> <br><br>

<span class="link">These are the qualities I strive for in my designs, to create sensory events that evoke emotional responses and aesthetic meaning. Sound can have great presence in a performance. It should always be welcomed. </span> <br><br>

<span class="link">Anthony Mattana is a junior sound design major at Carnegie Mellon University's School of Drama. Please feel free to contact at any time.</span>
</span>
</span>
<br><br><br>
<span class="main2">
<a href="mailto:anthmattana@gmail.com"><img src="images/sig.jpg" border="0"></a>
</span>
</div>
</div>
</body>
</html>

I have a problem with my CSS in IE6 (surprise, surprise).

If you look at www.bluehatmedia.co.uk

you will notice that the left hand menu is for some reason on the far right (needing to scroll).
But if you look in FireFox, Netscape, Opera, Safari they all work fine.

But if you mouse over a link then the menu goes back to the left had side where it should be.

and when i remove the following from my CSS:

background-image:url(images/picture.gif);
background-repeat: repeat-y;
background-position: right top;

the background image doesnt display (obviously) and then menu goes back to the left.

Any ideas much appreciated

Tom