Forums

Jeager

It works in Opera, new FF, chrome, and IE. However the background doesn't stretch properly in FF 3.6, and for whatever reason the footer isn't properly being colored and the margin-top isn't working correctly.

As the title says, it is only the start of the site, so only the index is on right now. However, it is working as intended elsewhere.

Site hosted on my college server account:
http://people.ysu.edu/~jtpenezich/#

Edit: Im looking at it using dev tools in chrome, and it isn't using or even showing that I added hsla background below the rgba. Not sure what that's about either.

footer {
	clear:both;
	font-size:1.2em;
	text-align:center;
	line-height:40px;
	width:800px;
	height:40px;
	margin:25px auto 0 auto;
	background:url(../images/60%white_bg.png);
	background:rgba(255,255,255,0.6);
	background:hsla(0, 0%, 100%, 0.6);
	-moz-box-shadow: 2px 3px 4px #666; /* FF3.5+ */
    -webkit-box-shadow: 2px 3px 4px #666; /* Saf3.0+, Chrome */
          box-shadow: 2px 3px 4px #666; /* Opera 10.5, IE9, Chrome 10+ */
}

joshuanhibbert

Other than the footer background it is working fine for me.

A couple of pointers; use either rgba or hsla, not both, and use rgba/hsla on your box shadow. It will look much nicer.

Jeager

Will do. I just figured I should get into the habit of hsla and rgba, for when the time comes when most browsers will support it. But yeah, why isn't the footer working is what I'm after.

And using rgba on box shadow would be how? -moz-box-shadow: 2px 3px 4px #rgba(xxx,xxx,xxx,x.x);?

joshuanhibbert

I was using Adobe BrowserLab, I don't actually have FF 3.6 readily available. You could set a solid fallback color (#eee) for it if you really need to. I wouldn't worry about it too much though.

I prefer using hsla, it's more intuitive. You would write it out like so:

box-shadow: 2px 3px 4px hsla(0,0%,0%,.6);

Jeager

Well, its the same colors as all my other sections of the site, its the only one not working, and only in 3.6 (and dreamweaver). But it does have a fallback background image. So really kinda stumped on it.

Edit: I got it working by making it a div with an id of footer, and just swaped some stuff around. HOWEVER, why wouldn't this work normally? I have the html5shim in place. Which I just realized is for IE lt 9... Anyway to have this for FF 3.6 also? Or will I be needing a display:block in there

Edit2: Sure enough it works with the reset, but I was hoping I could get away with it without one. Seems the shim is pointless if the reset is needed anyway?

joshuanhibbert

As far as I'm aware the shim is for IE lt 9 only. If they aren't supporting FF 3.6 there is probably a good reason for it. I would say most FF users are using 4 or 5 now.

You prob should mark this as solved now.

treehouse : what would you like to learn today?

Forums

[Solved] Start of a new site, not rendering right in older version of FF