SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot
    Join Date
    Oct 2003
    Location
    Hull, UK
    Posts
    100
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    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:

    Code:
    #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!

  2. #2
    SitePoint Wizard DougBTX's Avatar
    Join Date
    Nov 2001
    Location
    Bath, UK
    Posts
    2,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    Hello World

  3. #3
    SitePoint Wizard megamanXplosion's Avatar
    Join Date
    Jan 2004
    Location
    Kentucky, USA
    Posts
    1,099
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  4. #4
    SitePoint Zealot
    Join Date
    Oct 2003
    Location
    Hull, UK
    Posts
    100
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  5. #5
    SitePoint Zealot
    Join Date
    Oct 2003
    Location
    Hull, UK
    Posts
    100
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Fixed now, another div did the trick, though with much hilarity whipping IE5 and 5.5 into line, as usual!

    Thanks again.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •