Firefox bug...? What am I doing wrong?

jamesb75 · #1 Feb 5th, 2007, 17:04

Can anyone help?

Have designed for years in tables now trying to build everything in CSS.

My first site is my project site, miles mx. When I view in IE it has 3 columns, looks ok. When I view in Firefox It has 2 columns and the third is at the bottom...

Where am I going wrong?...if some one could point me in the right direction...

css file is here
main page is here

Thanks in advance, James.

ukgeoff · #2 Feb 5th, 2007, 21:28

Before we look any deeper, I would like you to validate your code and correct all the problems.

It could be one of these that is the root cause of the different renderings.

jamesb75 · #3 Feb 5th, 2007, 22:21

Geoff thanks for the reply.

I have managed to rack up 38 different errors...i'll go through these and see if it helps....

Large learning curve!!

pokinski · #4 Feb 6th, 2007, 09:40

Hi,

I encounter a similar 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 attached a draft 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

jamesb75 · #5 Feb 6th, 2007, 12:07

Geoff,

Cleared all 38 of the errors and it fixed the prob. Thanks for pointing me in the right direction, it saved a huge amount of time. I can keep plugging away with confidence at CSS.

Cheers

James

pokinski · #6 Feb 6th, 2007, 13:15

Please ignore my '10 mile long' thread from above...

I just found out what fixed my problems. I just had to remove the following terms form my css style sheet:

'background-attachment: fixed;'

Still don't know why it showed up differently in IE, but that doesn't matter now.

Greetings

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
please tell me what is wrong with this ??	saltedm8	Graphics and 3D	12	Jun 30th, 2007 09:10
Displays wrong in Firefox	JustinStudios	Web Page Design	7	Jun 28th, 2007 19:56
Paragraph & menu showing wrong in FireFox	cbrams9	Web Page Design	9	Oct 25th, 2006 14:19
CSS menu displaying wrong in Firefox (fine in IE)	camcc	Web Page Design	10	Oct 21st, 2006 02:05
something wrong (ONLY IN FIREFOX)	baseballer2150	Web Page Design	3	Jun 27th, 2005 01:21

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Firefox bug...? What am I doing wrong?