ansaurus

Question

What's causing this background-image to display "incorrectly" in Opera and Firefox?

Answer 1

A:

You'll need to set the parent element of positioned child elements to relative to make the positioning work.

hgroup{
  position: relative;
}

Your h1 needs a width and height, otherwise display: block is a little pointless imho.

These are the two things which jump out at me the most :)

DavidYell 2010-05-12 08:32:11

I removed the css def for the h1 since display:block's the default anyways and it was leftover, did nothing. I re-added it the way it was and tried your first suggestion, did nothing. Removed the h1's css again and checked, still nothing.

Sukasa 2010-05-12 08:39:59

You only need to set the parent element to `position: relative` if you have **absolute** positioned elements in it, that are supposed to be positioned relative to that parent element. Other relative positioned elements don't need that.Also there is absolutely no reason to need to set width and height of a block element.

RoToRa 2010-05-12 08:43:11

Ah fair enough, it was something that I picked up from the CSS validator, perhaps I'm thinking of floated elements needing a width and height

DavidYell 2010-05-12 09:21:27

Answer 2

A:

Just took a look in Chrome and Firefox and they're both displaying the same as your error pic.

Take a look here: HTML5 browser support checklist, seems that Firefox and Opera don't support all HTML5 attribute yet, so invariably there will be some weird problems. The browsers don't know all the default styles of HTML5 elements yet, so more reason for strange errors. Can't think of any other fixes other than DavidYell's answer, eveything seems fine in the CSS.

Kyle Sevenoaks 2010-05-12 08:45:22

When you say they're displaying the same, do you mean the same as their individual reference pictures or both the same as a single "erroneous" picture?

Sukasa 2010-05-12 08:54:22

Sorry, they're messed up in all the browsers, they are not one picture, but chopped up.

Kyle Sevenoaks 2010-05-12 08:59:23

Answer 3

+2 A:

Got it: You need to give hgroup display: block.

EDIT: Keep in mind that most browsers don't know the new HTML5 elements yet thus they are missing all default style.

RoToRa 2010-05-12 08:54:43

This did it, thanks!

Sukasa 2010-05-12 08:58:40

ansaurus

tags:

views:

answers:

What's causing this background-image to display "incorrectly" in Opera and Firefox?

related questions