Firefox jumbling style but Fine in IE7
Posted: 14 June 2007 02:21 PM   [ Ignore ]
Newbie
Rank
Total Posts:  3
Joined  2007-06-14

Hi all I’m having problems with keeping the items inside their respective containers in FF. The page won’t keep it’s shape for some reason.

the url to see is http://www.szabos.com/nyk/scripts/shop.php#

I have added the sections which I think are being effected b/c it won’t let me add the whole thing.


Any and ALL help is appreciated.

/* items-specific styles */
    #listing {
        
width:33%;
        
float:left;
        
background:#FFDCB9;
        
padding-bottom:10px;
        
height250px;
        
font-size:10px;
        
font-family:ArialHelveticasans-serif;
        
}
    
#listing a {
     
color=#d00d00;
    
}
    
.pricing {
     font
-family:ArialHelveticasans-serif;
     
font-weight:bold;
     
font-size:10px;
     
color:#000000;
    
}
    table
.pricing{
    float
:right;
    
margin-right:150px;
    
margin-top:25px;
    
}
    
.title {
     height
11px;
     
width:100%;
     
font-familyArialHelveticasans-serif;
     
font-size:12px;
     
background-color:#666666;
     
}
     
     
.desc {
     background
-attachment:fixed;
     
padding-top:30px;
     
font-family:ArialHelveticasans-serif;
     
font-size:10px;
     
max-width200px;
}

/* items container */
.items {
    text
-aligncenter;    /* centers inline paragraphs */
    
margin-bottom1em 5%;
    
background-color#ffffff;
    
border1px solid #999;
    
padding.2em;
    
width:90%;
    
}
.items a {
    text
-decorationnone;
}
.items a img {
    border
-width1px;
    
vertical-aligntop;
}
/*.items table{
 z-index:9;
 margin-left:150px;
 margin-top:-70px;
 font-family: Arial, Helvetica, sans-serif;
*/
}
.msrp td{
background
-color:grey;
display:table-cell;
}
.items h3{
display
:block;
background-image:url(http://www.chiromattress.com/images/btn_add_to_cart_white.gif);
background-repeatno-repeat;
text-align:center;


}

/* outer container for each image/caption pair */
.items p {
    display
inline;
    
/* width: 300px; */
    
}

/* For the <a> container, the best default display value is inline-table, but browser support isn't very good. Opera versions 6 and earlier totally mangle anything except display:table-cell, so that is set by default and the preferred display values are at the end of this stylesheet, within hacks that hide them from those Opera versions. No other browsers tested seemed to have any trouble with setting the different display values within a single rule. */

/* inner container for each image/caption pair */
.items a {
    display
table-cell;   /* default, for gecko & Opera6- 
    margin: .5em;
    padding-left: .5em;
    padding-top: 6px;*/
    /* padding: 6px; */
    
vertical-alignbottom;   /* aligns the img/caption container */
    /*width: 200px;             adjusts with text size */
    /*min-width: 200px;       not always honored, but that's OK */
    
border1px solid #0099cc;
    
text-alignleft;
    
height:300px;
}


/* image container, sets height so image can be vertically centered and the caption starts in the same vertical position regardless of image height, except WinIE does not apply line-height to images. oh well, most other browsers do... */
.items span {
    
/*display: block;         fill container width, force a line break */
    /* width: 300px; */
    
height300px;         /* a bit larger than highest img */
    
line-height110px;    /same value as height */
    
text-aligncenter;

}

/* caption container, sets height (for 2 lines) so each outlined image/caption pair is the same height (except in WinIE) */
.items i {
    display
table-row;
        
/* makes each box a consistent height */
    
padding5px 5px 0 5px;
    
text-aligncenter;
    
font-stylenormal;
    
line-height100%;     /* standard spacing */

}

.items b{ 
  display
table-cell;
  
text-alignright;
  
height1em;
  
}



/* Owen hack, hides from WinIE, Opera versions 6- & some KHTML */
head:first-child+body .items a {
    display
table-cell;   /* gecko & Opera6- */
    
displayinline-table/* Safari & some other browsers */
    
displayinline-block/* WinIE & some other browsers */
}

/* star-html hack to show <a> rule(s) just to IE (Win and Mac) */
html .items a {
    display
table-cell;   /* gecko & Opera6- */
    
displayinline-table/* Safari & some other browsers */
    
displayinline-block/* WinIE & some other browsers */
}
/* image is not clickable in WinIE with display:block :( \*/
html .items span {
    display
inline;
}
html .items a:hover i {
    cursor
hand/* otherwise cursor doesn't change over block <i> */
/* end WinIE hacks */

/* end hacks */
table.listing {
display
inline;
/* margin-top:15px; */
margin-right10px;
text-align:left;

}
 
.title {
 background
-color:grey;
 
color:#FFFBF0;
}

td
.desc {
 background
-color:#FFFFFF;
 
color:#000000;
 
font-size:1em;
}

td
.msrp {
 background
-color:blue;
 
font-size10px;
 
font-family:"Ar"Couriermono;
 
/*width:150px;*/
Profile
 
 
Posted: 14 June 2007 02:28 PM   [ Ignore ]   [ # 1 ]
Newbie
Rank
Total Posts:  3
Joined  2007-06-14

Here’s something else crazy, if you click on one of the boxes in FF, all the sudden it appears correct ??

Profile