CSS - Background Image Not Working (in All Browsers).

I have a problem that I have never seen before. I am using css to set the background properties of the body tag. Works just fine in IE but no background at all shows up in Firefox.

css code for the body tag is:

body { background-color: #0d005e;
background-image: url('images/bgmain.jpg');
background-repeat: repeat-x; }

Any thoughts?

Hey all, the test page is here. Notice when you expand the "view more details" in IE8 to the point where it is supposed to push the page down, it doesn't! But it does in FF/Safari.

HTML

CSS

Potentially relevant CSS:

Code:

body {
	margin: 0;
	padding: 0;
	min-height:0;
}
div.container {
	width:100px;
	
}
div.outerBody {
	width:100%;
	min-height:0;
}
div.innerBody {
	width:100%;
	background-image:url("../../images/artist_center/body_bg.jpg");
	background-repeat:repeat-x;
	min-height:0px;
 	height:auto !important;
	
	background-color:#cedce5;
	text-align:center;
	margin: 0;
	position:absolute;
}

div.tabContent {
	width:945px;
	min-height:596px;
	border:solid 1px #cccccc;
	float:left;
	position:relative;
	margin-left:14px;
	padding-bottom:14px;
	margin-bottom:14px;
	
}

I'm using clearfix to make things work in IE7, but clearly there's some kind of other problem going on.

Thanks for any help!

The state titles are nice and bold on my mac browsers -- however, pc browsers won't make them bold. Here is a link to a windows xp screenshot: http://www.browsercam.com/projects/199027/3899787.jpg

Any ideas?

Hi, I'm working on my first standards compliant site, so I'm a bit of a novice with the CSS required. You can view a test page I have set up at:
67.207.72.2/test_styles.htm (forum rules won't let me include this as a url)

The css file for this page is at:
67.207.72.2/css/test_styles.css

My issue is that the right column stops short- I'd like the background color to continue down the length of the page.

To try to do this, I set the wrapping div on this section (#main_content) of the page with the appropriate background-color.

IE displays the page the way I want it to appear, but FF, Safari, and Chrome all do not. I know this means I'm doing it wrong, but I don't know what to change.

I've also tried using an image for a background for the #main_content div, and to set a height: 100% property for the column, but neither of those worked.

Can anyone point me in the right direction? Thanks for your time.

Usually I find anything I need to know if I have the source code of a web site but this time I've lost. Some web sites changes the background color of the browsers address (URL) input field (works only with Gecko type browers I think).

Just one example: https://www.gmx.net (a commercial email service provider in Germany).

How can this be done?

Ciao, Meph

I have a Wordpress site. The layout has some complex elements, but strangely the one thing that doesn't work is the background-color that I am setting using the "body" selector. It works great on Firefox and IE (imagine that!) but not on Safari or Chrome, which are Webkit-based. It is supposed to have a gray background, but those two browsers just show the default white.

The following is the code I'm using in the body selector.. not much places where something could be going wrong.

css Code:
Original - css Code body { margin: 0px; padding: 0px; background-color: #333333; }

  

  


 body {


     margin: 0px;


     padding: 0px;


     background-color: #333333;


 } 

The link to the page is he http://montanlaw.com

I don't understand why things aren't working... it seems to me like background-color should be a very well-supported property that shouldn't have much variance between browsers. Anyone have any tips?

Note: I tried validating the code to see if there was an error there - however, it's all valid except two little (unrelated) things that I could easily fix if I needed to.

Thanks in advance for any help,
chip19

styles.css
Code:

.allRoundedCorners {
border-radius-topleft: 18px; -moz-border-radius-topleft: 18px; -webkit-border-top-left-radius: 18px;
border-radius-topright: 18px; -moz-border-radius-topright: 18px; -webkit-border-top-right-radius: 18px;
border-radius-bottomleft: 18px; -moz-border-radius-bottomleft: 18px; -webkit-border-bottom-left-radius: 18px;
border-radius-bottomright: 18px; -moz-border-radius-bottomright: 18px; -webkit-border-bottom-right-radius: 18px;
}

index.php
Code:

<div class="allRoundedCorners">
my text
</div>

This works ok in Firefox, Google Chrome and Safari.

But fails to work in IE 9, Avant Browser 2012 build 8 and Opera 11.60

Can anyone suggest a possible fix or know how I can code it so the rounded edges of the DIV's have the rounded edge and not a boxed area.

I've been searching this for about 4 hours today, and have yet to come across a good answer.
Right now my site looks fine in Firefox, IE6, IE7, and Opera. However, it does not validate because I'm using the _margin-top and .margin-top tricks to force the bottom line of links in IE.

My site can be viewed at startdesigning.net (not allowed to post link because I new, I guess) and the css in question can be found at startdesigning.net/style.css - again, can't post a link.

If anyone has any suggestions to validate without changing the appearance, I would love to hear them.

Thanks,
Andrea

Is there any way to use multi level drop down menus that work on all browswers(IE 6 and 7, firefox, safari) without using .htc file or javascript included?

This is nice, but the css in too messy.

http://www.bluescopesteel.com

If you have any betterones please tell me.

Cheers

Hello, I'm working on some really simple CSS and it's giving me wildly different results in Firefox and in IE.

Here is the stylesheet:

PHP Code:
 body {
    background-color: #DECFEF;
}

.example
{
    background-image: url("images/example.gif"); 
    border-width: thin;
    border-color: white;
    border-style: solid;
    padding: 35px 35px 35px 35px;
} 





And here is the HTML file:

PHP Code:
<html>
<head>
<title>Chatterbox</title>
<link rel="stylesheet" type="text/css" href="/teststyle.css">
</head>
<body>
<table class='example'><tr><td>
  hello
</td></tr></table>
</body>
</html> 





All of this works (the image in the background, the white border, etc.) except the padding! In IE there is no padding at all, but in Firefox there is 35px padding, as specified in the stylesheet.

You may see this yourself if you go to this URL in the two different browsers: http://www.chatterboxletters.com/test3.html


Any help is greatly appreciated

~j.

I'm currently working on a very basic website, which seems on the edge of finishing. www.meltonbusiness.co.uk

Tiny hiccup remains is that the image RIGHTLY appears on "content area's" top right in Firefox but the same image appears right at the bottom of the Content.

Can anyone help.

My CSS at this stage looks like:

Code:

html, body 
{
	margin:0;
	padding:0;
}

body 
{
	font:75% verdana, arial, sans-serif;
	background:white;
}

p 
{
	margin:0 10px 10px;
	padding:0;
}

h1 
{
	height:100px;
	line-height:100px;
	text-align:center;
	font-family:"lucida calligraphy", verdana, arial, helvetica, sans-serif;
	font-size:36px;
	color:#534;
	margin:0;
}

.spacer 
{
	clear:both;
	background:url(spacer.png) top left;
}

.montage 
{
	background-color:black;
	text-align:center;
	clear:both;
	height:80px;
}

.wrapper 
{
	float:left;
	width:100%;
}

.content 
{
	margin:0 260px 0 100px;
	padding:5px 0 0 10px;
}

.content ul
{
	display:block;
}

.content li
{
	display:block;
	list-style-type:disc;
	padding:5px 0px 5px 0px;
	color:#333;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:14px;
	letter-spacing:0.2px;
	text-align:justify;
}

p 
{
	line-height:1.4;
	color:#333;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:14px;
	letter-spacing:0.2px;
	text-align:justify;
}

h2 
{
	font-size:20px;
	border-bottom:solid thin #666666; 
	color:blue;
	font-family:Georgia, "Times New Roman", Times, serif;
}


.heading 
{
	font-weight:bold;
	text-decoration:underline;
}

.nav 
{
	float:left;
	width:100px;
	margin-left:-100%;
	margin-top:20px;
}

.nav ul
{
	list-style-type:none;
	margin:0;
	padding:0;
}

.nav ul li 
{
	display:block;
	margin-top:0;
	background:url(navbg.png) left repeat-x;
	border-bottom:1px solid #000;
	font-weight:700;
	padding:10px;
}

.nav a
{
	color:white;
	text-decoration:none
}

.nav a:hover
{
	color:yellow;
	text-decoration:none;
}

.nav img 
{
	margin-top:30px;
}

.right_col
{
	background:red;
	float:right;
	width:250px;
	margin-top:20px;
	margin-right: 0px;
	margin-left: -250px;
}

.advert
{
	position:relative;
	float:left;
	left:20px;
	background-color:#CCCCCC;
	width:80%;
	color:#006600;
	padding:20px;
	text-align:center;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:14px;
	text-align:center;
}

.advert a 
{
	text-decoration:none;
	color:red;
}

.advert a:hover 
{
	text-decoration:underline;
}

.footer 
{
	float:none;
	width:100%;
	border:1px solid #322;
	padding:10px;
	background-color:#a54;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:14px;
	letter-spacing:1px;
	color:white;
}

.footer a 
{
	text-decoration:underline;
	color:white;
}

.footer a:hover 
{
	text-decoration:overline;
	color:#F0F8FF;
}

hr 
{
	text-align:left;
	width:100%;
	color:maroon;
	background-color:maroon;
	height:1px;
}

I am trying to get my header image to stretch 100% width in the browsers. Right now it's centered--and too short.

My CSS code:


body {
font-family: Verdana, Arial Black, Trebuchat MS, Arial, Geneva;
background-color: #1c1c1c;
background-repeat:repeat-x;
border-color: #FC3;
border-width: 1px;
padding: 25px;
margin: 30px;
color: #FFC;
}


#header {
height: 200px;
width: 100%;
margin: 0;
background-image:url(images/header.jpg);
background-repeat:no-repeat;
margin-right: 0px;
margin-left: 0px;
border: thin solid #FFF;
border-style:none;
}


#header {
height: 200px;
width: 100%;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;

}


#p {
padding-left:inherit;
padding:inherit;
}






A:link {color:#FFF; text-decoration:underline; }
A:visited {color:#CCC; text-decoration:underline; }
A:hover {color:#FFC; text-decoration:underline; }
#nav {
height: 35px;
}




I've tried:
width: 100%;

and

width: 100%;
width: auto;



There is nothing useful online that has really touched on this problem. The only solutions are the "width 100%"

Any help would be so great please.

The layout I have going is a bit difficult to explain. Here's a diagram..



The area of importance is the header. The content and main head area are centered. The area to the left and right of the header are a <div>. However, as you can see, the background image on the left is different than the one on the right. I'm having difficulty making this work. the images can be stretched horizontally without a problem, but the two sides must meet in the middle beneath the header.

I hope this makes sense.

What I've got to do, I think, is tell the background image of the underlying <div> to stretch to 100%, and make this image 300px wide or so including both sides of the image and a split. The split would hide behind the header. I can't find a method to stretch the background image, though.

Does anybody know of a better way, or a way to achieve this method at all without getting into completely different layouts?

Thanks in advance for any assistance/suggestions.

In short, I'm trying to get this one image to tile down the page to the bottom, underneath a static background image. Basically, it's a 2pixel high image that's ready to tile vertically, just having a tough time getting it to work.

You can clearly see the problem here, a gap at the bottom:

http://www.groundedgroup.com/clients/NWR/

Here's the relevant css:
http://www.groundedgroup.com/client...WR-GG/style.css

I've googled and subsequently tried out some solutions, but no luck. Got any ideas?

Thanks in advance.

PS - Is there a way to keep the spiders from indexing my links above? The site is on a test server, so I don't want the url indexed.

Hi. Really hoping someone can help me with this... I'll try and explain this as best I can(!)

Basically I've got a page containing a block of 9 images, with each linking to a video clip. At the moment I've got the CSS coded so that whenever the mouse is hovered over the 'infobar' (at the bottom of each image) it goes from having a transparent background with black text to having a grey background with white text.

What I'm trying to achieve is that same effect whenever the mouse is hovered over any part of the image and infobar. The live online link can be found at:
www.markmcm.co.uk/test/test.html

The CSS is as as follows:

Code:

/*
 *  Page Stylesheet 
 */
body {
  font-family: Arial, Helvetica, sans-serif;
  background-color: #eaeaea;
  border:0; margin:0; padding:0;
  height: 100%;
}
a:link {
	text-decoration: none;
}
a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: none;
}
a:active {
	text-decoration: none;
}
#container {
	margin-left: auto;
	margin-right: auto;
   	min-height: 100%;
	width: 936px;
}
* html #container {
	height: 100%;
}
#content {
	float:left;
	position: relative;
	height: 528px;
	width: 936px;
	z-index: 0;
}
.miniscreen1, .miniscreen2, .miniscreen3, .miniscreen4, .miniscreen5, .miniscreen6, .miniscreen7, .miniscreen8, .miniscreen9 {
	position: absolute;
	float: left;
	display: block;
	width: 312px;
	height: 176px;
}
.miniscreen1 {
	top: 0;
	left: 0;
}
.miniscreen2 {
	top:0;
	left: 312px;
}
.miniscreen3 {
	top: 0;
	left: 624px;
}
.miniscreen4 {
	left: 0;
	top:176px;
}
.miniscreen5 {
	left: 312px;
	top:176px;
}
.miniscreen6 {
	left: 624px;
	top:176px;
}
.miniscreen7 {
	left: 0;
	top:352px;
}
.miniscreen8 {
	left: 312px;
	top:352px;
}
.miniscreen9 {
	left: 624px;
	top:352px;
}
.info {
	height: 30px;
	top:3px;
	left: 40px;
	width: 265px;
	float: left;
	position: absolute;
}
.infobar  {
	left:0px;
	position: absolute;
	top: 140px;
	width: 312px;
	height: 36px;
	outline: none;
	color:#000;
	background: url("data/infobar.png") no-repeat 0 0;
	z-index: 650;
}
.infobar:hover  { 
	background-position: 0 -36px;
	outline: none;
	color:#fff;
}
#infobar span {
	display: none;
	outline: none;
}
.clip_title {
	outline: none;
	font-size: 85%;
	font-weight: 700;
	vertical-align: top;
	text-align: left;
}
.clip_sub {
	outline: none;
	height: 13px;
	font-size: 80%;
	line-height: 13px;
	font-weight: 700;
	vertical-align: top;
	text-align: left;
}

And the HTML is:

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">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Test Page</title>
		<meta name="description" content=" " />
		<meta name="keywords" content=" " />
		<meta name="generator" content=" " />
		<link rel="stylesheet" type="text/css" href="page.css" media="screen" />
	</head>
<body>

<div id="container">

	<div id="content">
		<span class="miniscreen1">			
		<a href="#"> <img src="img/clip1.jpg" width="312" height="176" border="0">
		<span class="infobar"><span class="info clip_title">Test Clip 1<br><span class="clip_sub">123 Productions</span></span></span></a>
		</span></span>
					
		<span class="miniscreen2">
		<a href="#"><img src="img/clip2.jpg" width="312" height="176" border="0">
		<span class="infobar"><span class="info clip_title">Test Clip 2<br><span class="clip_sub">123 Productions</span></span></span></a>
		</span></span>
		
		<span class="miniscreen3">
		<a href="#"><img src="img/clip3.jpg" width="312" height="176" border="0">
		<span class="infobar"><span class="info clip_title">Test Clip 3<br><span class="clip_sub">123 Productions</span></span></span></a>
		</span></span>
			
		<span class="miniscreen4">
		<a href="#"><img src="img/clip4.jpg" width="312" height="176" border="0">
		<span class="infobar"><span class="info clip_title">Test Clip 4<br><span class="clip_sub">123 Productions</span></span></span></a>
		</span></span>
	
		<span class="miniscreen5">
		<a href="#"><img src="img/clip5.jpg" width="312" height="176" border="0">
		<span class="infobar"><span class="info clip_title">Test Clip 5<br><span class="clip_sub">123 Productions</span></span></span></a>
		</span></span>
	
		<span class="miniscreen6">
		<a href="#"><img src="img/clip6.jpg" width="312" height="176" border="0">
		<span class="infobar"><span class="info clip_title">Test Clip 6<br><span class="clip_sub">123 Productions</span></span></span></a>
		</span></span>
	
		<span class="miniscreen7">
		<a href="#"><img src="img/clip7.jpg" width="312" height="176" border="0">
		<span class="infobar"><span class="info clip_title">Test Clip 7<br><span class="clip_sub">123 Productions</span></span></span></a>
		</span></span>
	
		<span class="miniscreen8">
		<a href="#"><img src="img/clip8.jpg" width="312" height="176" border="0">
		<span class="infobar"><span class="info clip_title">Test Clip 8<br><span class="clip_sub">123 Productions</span></span></span></a>
		</span></span>
	
		<span class="miniscreen9">
		<a href="#"><img src="img/clip9.jpg" width="312" height="176" border="0">
		<span class="infobar"><span class="info clip_title">Test Clip 9<br><span class="clip_sub">123 Productions</span></span></span></a>
		</span></span>
				
	</div>
</div>
	
</body>
</html>

There must be a better (and easier?) way to do this. Any help would be very-much appreciated - and save an old bloke from tearing too much of his hair out(!)