pokinski
06 Feb 2007, 05:50 AM
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
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