Opera 7 (6 too??) and missing background image

[lithiumdave]

Hi all,

I've read a few snippets here and there about Opera having a bug related to not showing background images. The site I'm working on now appears to look fine in IE5. 5.5 and 6, as well as Mozilla variants, but suffers from a missing background image in Opera. I'd be really grateful if anyone could give me a helping hand!

Firstly, here's the mock-up of the finished page:

http://www.definitiondesign.com/clie...chno/index.htm

And here's the coded page so far:

http://www.definitiondesign.com/clie...hno/layout.htm

The main content box (#content) has 2 columns within it, #left and #middle (I know I should label them by meaning, will change this soon...)

#left is absolutely positioned, while the #middle div has a fixed width and a huge left grey border so that both left and middle columns will always appear to have same length columns. I tried floating the left column, as I'd usually do, but ran into more cross browser problems than I cared to fix.

The #middle div has a small, square, white gif background image repeated vertically like so:

#middle {
		position: relative;
		background: #E3E3E4 url(images/whitebg.gif) left repeat-y;
		border-left: 204px solid #E3E3E4;
		margin: 0;
		padding: 10px 40px 20px 30px;
		width: 354px; 
		}

to give the appearance of a 10px white border between the left and middle columns, which was the only way I could achieve this effect.

All conforming browsers but Opera (v.7.23 in this case) show the white background border graphic. Does anyone know how I can make it appear?

Thanks ever so much in advance!

[DougBTX]

Seems to be a conflict between background-position: left and the border-width-left.

Easy option is to put the bg image inside a div inside the #middle div, and if you're doing that you might as well use a border-left instead of the image anyway.

Or, you could send Opera a bg image pushed over to the right.

Personally, I wouldn't use the big border down the left. I would just use a background image, 1px tall, and wide enough to take in the left column and the "border". Then just add padding to #middle to get it right.

Hmm.
Buy a browser with a div, or,
Buy a browser with a background image.

Decisions decisions decisions!

Later,
Douglas

[megamanXplosion]

I would run your CSS through the validator.

Also, the page appears exactly the same in Opera 7.5 Preview 4 as Mozilla FireFox 0.8.

[lithiumdave]

Thanks for that Douglas, I was trying to avoid yet another div but I'm sure it'll work, I'll give that a go.

I ran both XHTML and CSS through the validator when I first had the problem and both passed - thanks for the info re. Opera 7.5 and Firefox. As Firefox gets it right then hopefully newer versions of Opera will too. I know there's a background image bug in some versions of Opera but getting to the nitty gritty of why and how is a bit tricky!

Cheers guys and thanks again!

Dave

[lithiumdave]

Fixed now, another div did the trick, though with much hilarity whipping IE5 and 5.5 into line, as usual!

Thanks again.