OutFront Forums
     Home    Register     Search      Help      Login    

Follow Us
On Facebook
On Twitter
RSS
Via Email

Recent Posts
Todays Posts
Most Active posts
Posts since last visit
My Recent Posts
Mark posts read

Sponsors
Shopping Cart Software
Ecommerce software integrated into Frontpage, Dreamweaver and Golive templates. No monthly fees and available in ASP and PHP versions.
Website Templates
We also have a wide selection of Dreamweaver, Expression Web and Frontpage templates as well as webmaster tools and CSS layouts.
Frontpage website templates
Creative Website Templates for FrontPage, Dreamweaver, Flash, SwishMax
 

No background in IE header

 
View related threads: (in this forum | in all forums)

Logged in as: Guest
Users viewing this topic: none
Printable Version 

All Forums >> Web Development >> Cascading Style Sheets and Accessibility >> No background in IE header 		Page: [1]
 
MCD

 

Posts: 758
Joined: 3/19/2002
From: Al USA
Status: offline

  		No background in IE header - 6/11/2009 14:22:28   
I am spending the day trying to improve my CSS skills. In the process I ran into a background color and background image problem in IE. For some reason IE refuses to render the background color and image. The page validates and works fine in Firefox. The page is at www.martinscomputerdesigns.com/sample1

Can any anyone tell me why this is happening?

Also, in IE and Safari I'm getting a tinge of brown at the bottom of the content section. Any thoughts on that?

BTW Tailside - I stole your resets. Sorry.

_____________________________

Author of " How To Build A Website With Duct Tape"
TexasWebDevelopers

 

Posts: 722
Joined: 2/22/2002
From: Dallas, TX
Status: offline

  		RE: No background in IE header - 6/11/2009 15:45:07   
background:#fff; is the shortcut that sets all background properties in one declaration.
background-color:#fff; sets the background color of an element.
For instance in your #wrapper #container you have no color set yet you have a background color--you need to watch for these kinds of cascades.

The reason your footer is tinged is because you've set a background color yet you do not have a color set:

#wrapper #footer {
background-color : #f9f1e1;
border-top : 1px solid #cda98b;
padding : 10px 10px 10px 10px;
font-size : 75%;
}

_____________________________

:)

Follow us on TWITTER

(in reply to MCD)
MCD

 

Posts: 758
Joined: 3/19/2002
From: Al USA
Status: offline

  		RE: No background in IE header - 6/11/2009 16:05:05   
Texas, I'm still a bit confused. How do I not have a color set for my #wrapper #container? Isn't it #f9f1e1? My footer's fine, it's the #container #content that is not stretching the white all the way to the footer. Somewhere I'm getting lost. Also, I still don't understand why the background image in the header does not show. All of this is an IE problem only. Firefox renders everything as it should at this point.

BTW - the background in the header will show IF I assign a background color in the #wrapper. Could you get me a little further up the trail?

< Message edited by MCD -- 6/11/2009 16:58:26 >

_____________________________

Author of " How To Build A Website With Duct Tape"

(in reply to TexasWebDevelopers)
MCD

 

Posts: 758
Joined: 3/19/2002
From: Al USA
Status: offline

  		RE: No background in IE header - 6/11/2009 17:26:17   
Texas, I now understand what you are saying. I'll give it a go in the early morning. It's time to call it a day here.

_____________________________

Author of " How To Build A Website With Duct Tape"

(in reply to MCD)
TexasWebDevelopers

 

Posts: 722
Joined: 2/22/2002
From: Dallas, TX
Status: offline

  		RE: No background in IE header - 6/11/2009 19:14:50   
It's the cascades that mess me up.
Generally I'll set the body background first:
body { background: #FFF;}
Then give the body the wrapper class
<body class="wrapper">
and then set the container div background:
.wrapper #container {background: #FFF; }
Then for each div nested inside the container I still use background like:
.wrapper #header {background: #FFF; }
.wrapper #mainContent {background: #FFF; }
.wrapper #footer {background: #FFF; }

Then, out of habit, I use the element level assignment for different background colors and color:
.wrapper #footer {
background: #FFF;
background-color:#DDD;
color:#000;
}
It's redundant but you'll get warnings if you don't set the colors on the elements inside the divs:
.wrapper #footer P {
background: #FFF;
background-color:#DDD;
color:#000;
}

The cascade is what seems to be important to the validators. A color, set far down the cascade, can overwrite the more general settings--as it should be. But you'll catch a warning if you set a general setting and not affirm it further down the cascade.

So you'll see verbose warnings in the validators like "You have no background-color set (or background-color is set to transparent) but you have set a color. Make sure that cascading of colors keeps the text reasonably legible." or "Same colors for color and background-color in two contexts .style1 and .style2".

With the large number of browsers to contend with, I tend to be really verbose in my CSS sheets. The overhead (bytes) is really not that much what with high speed connections nowadays.

If I am in error here, tailslide, please correct me. I'm a .NET programmer first and a CSS guy second.

_____________________________

:)

Follow us on TWITTER

(in reply to MCD)
MCD

 

Posts: 758
Joined: 3/19/2002
From: Al USA
Status: offline

  		RE: No background in IE header - 6/13/2009 13:57:05   
This is what is odd, the long version will work

background-image: url(images/couple.jpg);
background-position: right;
background-repeat:no-repeat;
background-color: #cda98b;
color:#2e2d2c;

but the shorthand will not.

cda98b url(images/couple.jpg)no-repeat top right;

Does anyone know why this is an IE?

_____________________________

Author of " How To Build A Website With Duct Tape"

(in reply to TexasWebDevelopers)
Tailslide

 

Posts: 6692
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline

  		RE: No background in IE header - 6/13/2009 14:47:30   
This one ocasionally gets me too actually - I usually use the short-hand version but just sometimes I have to use the long version for IE for no particular reason that I can figure out. If you google this problem you'll probably find something on a CSS forum asking the same question a couple of years ago and I didn't get a good answer then either.

Double check the order of the short-hand rule:

#cda98b url(images/couple.jpg) right top no-repeat; or possibly #cda98b url(images/couple.jpg) no-repeat right top;

certainly the left/right should be before the top/bottom bit - if you see what I mean!!

if I remember rightly the answer was something to do with haslayout but the solutions for that aren't always helpful in all applications so basically just stating the full rule where necessary is easier.

Verbosity isn't always necessary but it can be helpful occasionally and frankly unless your stylesheet is huge (which it shouldn't be really) then as Tex has said the overhead is negligable.

_____________________________

Little Blue Plane Web Design | Land Rover project

:)

(in reply to MCD)
MCD

 

Posts: 758
Joined: 3/19/2002
From: Al USA
Status: offline

  		RE: No background in IE header - 6/13/2009 15:08:08   
I googled this problem to death before posting here but no site had an answer. As you stated, the question showed up on a couple of discussion boards but no real answers were given.

The next problem is why the white in the content doesn't stretch all the way to the footer in IE and Safari like it does in Firefox (I love Firefox). But, that's my problem for Monday.

Creating a site just for practice has turned into a chore. Thanks again Tex and you to Tailslide.

_____________________________

Author of " How To Build A Website With Duct Tape"

(in reply to Tailslide)
Page:   [1]

All Forums >> Web Development >> Cascading Style Sheets and Accessibility >> No background in IE header 		Page: [1]
Jump to: 1





New Messages No New Messages
Hot Topic w/ New Messages Hot Topic w/o New Messages
Locked w/ New Messages Locked w/o New Messages
 Post New Thread
 Reply to Message
 Post New Poll
 Submit Vote
 Delete My Own Post
 Delete My Own Thread
 Rate Posts


Copyright © 2009 Thomas Brunt's OutFront Inc. All Rights Reserved.