What is causing this background image to display "incorrectly" in Opera and Firefox?
I know this is what I'm probably wrong, so please don't burn me for the topic title.
I am trying to put together a small personal website using HTML 5 / CSS3. I checked with the w3c validator and the site file and CSS matched exactly according to the validator (however the validator has an attached warning that it may not be perfect).
I'm not sure how to explain this without a picture, so here's a Chrome / Opera / Firefox comparison:
So you can see how in Chrome the background image is in one non-repeating part, whereas in Opera / Firefox the image, oddly enough, was split and placed in a slightly different way.
I'm sure this is due to a bug on my part, but I have no luck finding out why the image is distorted in Opera and Firefox.
Here's the CSS relevant to this issue:
/* Content Pane */
.content
{ position: absolute;
left: 220px;
width: 800px;
top: 80px;
min-height: 550px;
background-color: rgba(8,12,42,0.85);
}
/* Headers */
.content hgroup
{
background: url("Header_Flat.png") no-repeat left top;
min-height: 38px;
padding-left: 28px;
text-shadow: 0 0 8px #FFA9FF;
color: Black;
text-decoration: none;
}
.content hgroup h1
{
display: block;
}
.content hgroup h3
{
display: inline;
position: relative;
top: -12px;
left: 20px;
text-shadow: 0 0 6px #AFF9FF;
}
.content hgroup h4
{
display: inline;
position: relative;
top: -12px;
left: 20px;
font-size: xx-small;
text-shadow: 0 0 6px #AFF9FF;
}
And HTML:
<hgroup>
<h1>New Site!</h1>
<h3>Now with Bloom!</h3>
<h4> - Posted Tuesday, May 11th 2010</h4>
</hgroup>
Can anyone see what I am doing wrong?
EDIT
I tweaked the CSS a bit and it halfway-corrected the image (I don't understand why) and the bad alignments (I haven't noticed it yet).
The modified CSS defs look like this:
/* Headers */
.content hgroup
{
background: url("Header_Flat.png") no-repeat left top;
min-height: 38px;
position: relative;
text-shadow: 0 0 8px #FFA9FF;
color: Black;
text-decoration: none;
}
.content hgroup h1
{
position: relative;
left: 28px;
}
.content hgroup h3
{
display: inline;
position: relative;
top: -12px;
left: 48px;
text-shadow: 0 0 6px #AFF9FF;
}
.content hgroup h4
{
display: inline;
position: relative;
top: -12px;
left: 48px;
font-size: xx-small;
text-shadow: 0 0 6px #AFF9FF;
}
a source to share
You need to set the parent of the positioned children to in relative
order to make the positioning work.
hgroup{
position: relative;
}
Yours h1
needs width and height, otherwise it display: block
will be a little pointless imho.
These are the two things that come to me the most :)
a source to share
Just took a look in Chrome and Firefox and both display the same as your error.
Take a look here: HTML5 Browser Support List , it seems that Firefox and Opera don't yet support all HTML5 attributes, so there will invariably be some weird problems there. Browsers don't know all the default HTML5 styles yet, so there are more reasons for strange errors. Can't think of any fixes other than DavidYell's answer, everything seems to be good in CSS.
a source to share
The CSS background image orientation is not ready in all browsers. As if you only had:
.content hgroup
{
background: url("Header_Flat.png") no-repeat;
etc.
Since it hgroup
has no fixed size, your background image will float around when you use different browsers at different scales.
If you can set the size hgroup
, you can create your .png hgroup size, transparent and with blue stripes aligned at the top left.
I also look forward to full CSS3 support across all browsers.
There are so many effects in some browsers that look so cool and then just look mutilated in others. I personally prefer 1) Firefox 2) Safari
a source to share