Works in IE but not quite in Firefox - (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets



Message

Chimbird -> Works in IE but not quite in Firefox - (12/14/2006 23:46:07)

I'm testing my new web layout, and when I published today, it works in IE6, but not in Firefox. The box that the catalog thumbnails are in surrounds the thumbnails in IE, but sits at the top in Firefox. Here's the link:

http://www.chimneybird.com/frontpage/christian-t-shirts.html

There are three style sheets linked to it - one for layout, one for style, and one for the catalog layout. Here's the code for the catalog css:

/*Gallery Tutorial from http://www.webreference.com/programming/css_gallery/index.html.
Took out hover features.*/

/* The box containing the catalog in the middle column */
#catalog {
position:relative;
width:450px;
margin: 5px;
border: 1px;
}
/* Removing the list bullets and indentation */
#catalog ul {
padding:0;
margin:0;
list-style-type:none;
}
/* Adding the thumbnail images */

/* Each slide in the .dwt had this: <a class="gallery slideb" href="#nogo">
I removed the href="#nogo" for now */

#catalog a.gallery, #catalog a.gallery:visited {
display:block;
color:#000000;
text-decoration:none;
/*margin:1px 2px 1px 2px;*/
text-align:left;
cursor:default;
border:none;
}
#catalog a.slidea {
height:127px;
width:105px;
margin-right:41px;
margin-bottom:10px;
}
#catalog a.slideb {
height:127px;
width:105px;
margin-right:41px;
margin-bottom:10px;
}
#catalog a.slidec {
height:127px;
width:105px;
margin-right:41px;
margin-bottom:10px;
}
#catalog a.slided {
height:127px;
width:105px;
margin-right:41px;
margin-bottom:10px;
padding-top:13px;
}
#catalog a.slidee {
height:127px;
width:105px;
margin-right:41px;
margin-bottom:10px;
padding-top:13px;
}
#catalog a.slidef {
height:127px;
width:105px;
margin-right:41px;
margin-bottom:10px;
padding-top:13px;
}
#catalog a.slideg {
height:127px;
width:105px;
margin-right:41px;
margin-bottom:10px;
padding-top:13px;
}
#catalog a.slideh {
height:127px;
width:105px;
margin-right:41px;
margin-bottom:10px;
padding-top:13px;
}
#catalog a.slidei {
height:127px;
width:105px;
margin-right:41px;
margin-bottom:10px;
padding-top:13px;
}
#catalog a.slidej {
height:127px;
width:105px;
margin-right:41px;
margin-bottom:10px;
padding-top:13px;
}
#catalog a.slidek {
height:127px;
width:105px;
margin-right:41px;
margin-bottom:10px;
padding-top:13px;
}
#catalog a.slidel {
height:127px;
width:105px;
margin-right:41px;
margin-bottom:10px;
padding-top:13px;
}
#catalog a.slidem {
height:127px;
width:105px;
margin-right:41px;
margin-bottom:10px;
padding-top:13px;
}
#catalog a.sliden {
height:127px;
width:105px;
margin-right:41px;
margin-bottom:10px;
padding-top:13px;
}

#catalog li {
float:left;
}
/* change the thumbnail border color */
/*#catalog a.gallery:hover {
border:1px solid #FF0000;
}*/
/*#catalog a.gallery:hover img {
border:1px solid #fff;
float:left;
margin-right:2px;
}*/

THANKS!



rubyaim -> RE: Works in IE but not quite in Firefox - (12/15/2006 1:29:18)

Hi, if you take a look at the Stu Nicholls tutorial, you will notice that there is a height set on the div for the gallery.

Try adding one to your catalog and see if it makes any difference:

#catalog {
position:relative;
width:450px;
height:820px;
margin:5px;
border: 1px}

If that works, it may be an idea to run your page through the html and css validators, as it's easier to clean up as you go along rather than doing it all at once [:)]



Tailslide -> RE: Works in IE but not quite in Firefox - (12/15/2006 2:37:29)

The easiest way around this, especially if you don't know for sure how many items you'll have in the box is to add "overflow:hidden" to your #catalog rule in your stylesheet.

It's generally not a good idea to specify a height for something like this as if the text size is increased the contents will overflow the div.

What's happening is that IE is incorrectly expanding the catalog div to enclose all the floated contents (which it shouldn't). Firefox is actually doing the "right" thing as floated items are basically removed from the flow of the content of the page. Overflow hidden will expand the div to encompass the floats - but it can occasionally cause you issues. Keep an eye on it, especially in other browsers such as Opera etc. If it causes you any problems then there is another way round the issue - less straightforward. Let us know if you run into any issues with it (you probably won't).



jaybee -> RE: Works in IE but not quite in Firefox - (12/15/2006 7:02:57)

It's probably worth repeating the mantra that you'll find on here and many other forums that deal with CSS.....

Design for Firefox, fix for IE

Firefox gets it right IE doesn't. Microsoft are working on it and IE7 is a heck of a lot better than IE6 and previous versions but I doubt you'll see full support for CSS until IE8.



rubyaim -> RE: Works in IE but not quite in Firefox - (12/15/2006 16:18:27)

quote:

The easiest way around this, especially if you don't know for sure how many items you'll have in the box is to add "overflow:hidden" to your #catalog rule in your stylesheet.


Well darn, that would work too [:D] I got sidetracked by the original Stu Nicholls code [&:]




Chimbird -> RE: Works in IE but not quite in Firefox - (12/15/2006 17:27:38)

I added "overflow: hidden" and that seems to have taken care of the problem. Thanks for the help!



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.078125