|
| |
|
|
Chimbird
Posts: 11
Joined: 11/27/2006
Status: offline
 |
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!
|
|
|
|
Tailslide
Posts: 5948
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline
|
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).
_____________________________
"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project
| |
|
|
|
Chimbird
Posts: 11
Joined: 11/27/2006
Status: offline
|
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!
| |
|
 New Messages |
 No New Messages |
 Hot Topic w/ New Messages |
 Hot Topic w/o New Messages |
 Locked w/ New Messages |
 Locked w/o New Messages |
|
Post New Thread
Reply to Message
Post New Poll
Submit Vote
Delete My Own Post
Delete My Own Thread
Rate Posts
|
|
|
Printable Version 
I got sidetracked by the original Stu Nicholls code 
