Help! Firefox hates me and my website

HTML & CSS
1

Ok so I am working on my grandmas website. My coding skills are pretty basic as I use a combination of Dreamweaver shortcuts and hand coding.

I have worked extensively to link the shopping page to PayPal. Everything was going “smoothly” in that it all previewed well in Firefox, IE, chrome, and safari. However, once published, the shop page of the website appears very distorted in Firefox. Upon refresh, the page will display normally. All other browsers look fine. Very bizarre because it is distorted differently each time.

I realize that my code is far from valid, however I have never been lied to by the preview in browser function this bad… On top of my shotty coding, I noticed that a lot of the script that Spry and PayPal provide will not validate either…

I am using a few unorthodox techniques like css tooltips and image rollovers that i suspect Firefox doesn’t appreciate.

Here is the URL - http://maryloucorn.com/shop.htm

I thought it might have something to do with the spry tabbed panels I was using, so I deconstruction it here.

http://maryloucorn.com/tabs2.html

this is the css I’m using for the rollover effect:

#navlist{
font: 12px Tahoma, Verdana, Geneva, sans-serif;
list-style:none;
padding:0px;
margin:0px;
border:0px;
width:425px;
display: inline-block;
float:left;
height:inherit;
visibility:visible;

}

#navlist a{
display: inline-block;
margin:0px;
border:0px;
font: 12px Tahoma, Verdana, Geneva, sans-serif;
width: 425px;
background:url(images/tip.gif);
height:21px;
text-decoration:none;
padding-top:4px;
max-height:25px;
visibility:visible;

}

#navlist a:hover{

height:21px;
display: inline-block;
font: 12px Tahoma, Verdana, Geneva, sans-serif;
padding-top:4px;
max-height:25px;
width: 425px;
cursor:default;
background:url(images/tipover.png);
visibility:visible;

}

I have been tearing my hair out trying to figure this out with stuff like Fire Bug, Clearfix, and other methods on the web… I am just too much of a novice

If anyone can help me out, maybe I can hook up a free print from the website!

Thanks

2

Shows the same for me in IE and FF?

3

Unfortunately, I can’t reproduce the problem. The site looks same in both Firefox and Google Chrome, and neither look like your tab2.html version.

Even the rollover images seem to work fine. Color me baffled.

4

I realize that my code is far from valid, however I have never been lied to by the preview in browser function this bad… On top of my shotty coding, I noticed that a lot of the script that Spry and PayPal provide will not validate either…

I am using a few unorthodox techniques like css tooltips and image rollovers that i suspect Firefox doesn’t appreciate.

Hi,
That’s probably your main problem. You are nesting block level divs inside your tooltip anchors. As you noted, it is invalid code, you need to be nesting spans (or other inline elements) inside your anchors.

What you are doing is known as “Disjointed Rollovers” and the nested element is normally absolute positioned to remove it from the page flow.

Here is a simple example.

5

For me, the site displays properly in Firefox once out of every 5-10 times I view it…

It looks like Firefox is adding extra <a> tags in between the ones that are supposed to be there, creating blank rollover spaces and breaking up the layout…

6

Alright so I finally got it to play nice with Firefox. I restructured the layout to be slightly more “valid” and still maintain the css effects. In the process, I was able to simplify my code and knock off 10kb of jibrish.

Thanks for the help guys!

7

Glad you got it sorted :slight_smile:

8

Hi,

Whether or not it has anything to do with your problem or not is another matter but this code is invalid and not allowed.


 <a class="tooltip">
                            <div style="width:250px; height:25px;  padding-left:15px; float:left">Zinnia Kaleidoscope</div>
                            <div style="width:80px; height:25px;  float:left;"> 24 x 24</div>
                            <div style="width:80px; height:25px; float:left;">$300</div>
                            <span style="font-size:0px"><img src="images/tips/still/ZinniaKaleidoscopetool.jpg" width="250" height="250" /></span></a>

You can’t wrap an anchor around block level elements and may indeed cause the browser problems. The divs inside the anchor would need to be spans and as they are floated it should work just as well.

I also notice that #navlist a is set to display:inline-block and inline-block is prone to whitespace bugs. I don’t think you need inline-block anyway so just change it to display:block instead.

There are also a couple of images that don’t have their height and width attributes in the html and on slow loading pages Firefox will miscalculate their dimensions until refreshed so always add the attributes in the html and then the space is preserved.

Whether or not it has anything to do with the problem remains to be seen but the first steps should be to use valid code and thus narrow the issue down slightly. :slight_smile:

Edit:

I was too slow…