Results 1 to 2 of 2

Thread: css background image alignment only works for IE

  1. #1
    Join Date
    Feb 2007
    Posts
    2

    css background image alignment only works for IE

    Hi,

    I encounter the following problem with css, and went through the 'validator' without success.

    I'm creating my portfolio page with dreamweaver, which simply is one html page with a table of 3 colums and 2 lines. In the middle cell of the top line I have a flash movie that contains all my menus. This flash cell has absolute pixle sizes 800 x 800, all other colums are percentages, ensuring that on whatever screen resolution the page will be viewed, the flash movie is centered.

    Now the problem: The cells to the left, right and the 3 cells below the flash movie contain a tile able image, defined as a background image in css (aligned right, fixed and repeated for the image left of the flash movie and so on) and a seethrough gif called 'platz' to keep them from going below a certain width. Hence, the css style sheet only contains information about the alignment of the background image in each cell next to the flash movie.

    When I view my page with IE everything appears find, and the tiles align up perfectly with the flash movie in the middle. However when viewed on any other browser (firefox, safari, netscape etc.) the tiles don’t align, are scrolling etc. hence the css file has obviously not been loaded.

    Unfortunately, I don’t have my page online at the moment, so I've implemented the code of it. However, the page is really simple, so I though maybe one of you smart guys/ladies could still help me out, and tell me how to adjust my code.

    The page’s code is:

    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <link href="flash/background.css" rel="stylesheet" type="text/css">
    </head>

    <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
    <table width="100%" border="0" cellspacing="0" cellpadding="0">

    <tr>
    <td width="49%" class="backgroundtile"><img src="materials/platz.gif" width="150" height="132"></td>
    <td width="800" height="800"><object classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="800" height="800" hspace="0" vspace="0">
    <param name="movie" value="flash/pok07.swf">
    <param name="quality" value="high"><param name="BGCOLOR" value="#999999">
    <embed src="flash/pok07.swf" width="800" height="800" hspace="0" vspace="0" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" bgcolor="#999999"></embed></object></td>
    <td width="49%" class="backgleftbound"><img src="materials/platz.gif" width="150" height="132"></td>
    </tr>
    <tr>
    <td class="backgoundlefttop"><img src="materials/platz.gif" width="150" height="132"></td>
    <td class="backgoundlefttop"><img src="materials/platz.gif" width="150" height="132"></td>
    <td class="righttop"><img src="materials/platz.gif" width="150" height="132"></td>
    </tr>
    </table>
    </body>
    </html>

    My style sheet file ‘background.css’ looks like this:

    .backgroundtile {
    background-image: url(../rendersequence/tile%20wall.jpg);
    background-repeat: repeat;
    background-position: right bottom;
    background-attachment: fixed;

    }
    .backgleftbound {
    background-attachment: fixed;
    background-image: url(../rendersequence/tile%20wall.jpg);
    background-repeat: repeat;
    background-position: left top;
    }
    .backgoundlefttop {
    background-attachment: fixed;
    background-image: url(../rendersequence/tile%20wall.jpg);
    background-repeat: repeat;
    background-position: right top;
    }
    .righttop {
    background-attachment: fixed;
    background-image: url(../rendersequence/tile%20wall.jpg);
    background-repeat: repeat;
    background-position: left top;
    }

    Any help would be really great!!!
    Greetings
    Pok

  2. #2
    Join Date
    Feb 2007
    Posts
    2
    Please ignore my '10 mile long' thread...

    I just found out that I just had to remove the terms 'background-attachment: fixed;' from my style sheet. Stupid really of me... but then again, why did it show up differently in IE???

    Anyway... the page works fine now on all of the browsers.

    Greetings

Similar Threads

  1. Using opaque image as background
    By sumacbob in forum Web Design, HTML Reference and CSS
    Replies: 0
    Last Post: 20 Apr 2006, 09:21 PM
  2. how to set a background image with CSS
    By webguy_dave in forum Web Design, HTML Reference and CSS
    Replies: 1
    Last Post: 17 Dec 2005, 02:05 PM

Posting Permissions

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