FireFox Issues

[csa]

My site passes validation and seems to work in IE and at different resolutions (unless someone tells me otherwise!!). However I have some FireFox issues.

Could someone please tell me how I should correctly get my list of items currently laid out as - link one, - link two etc to line correctly in FF? Any adjustments I make just means it doesn't look right in IE.

The same goes for the the pet gallery. It looks spot on in IE but in Firefox the images align over to the left.

I get this issue alot and would love to have a solution to the problem so I can avoid it in future.

Thanks
http://www.bubblepeople.co.uk/testing/test1.html

CSS

Code: Select all

/* CSS Document */
body {margin:0px; padding:0px; font: 0.7em verdana, arial, sans-serif;
text-align:left; background-color:#FFFFFF; color:#000066;
}
/* Main Wrap */
div#mainwrap{
width: 1000px;
padding-top: 0px;
text-align:left; 
background-color:#FFFFFF;
}
*{
margin:0;
padding:0;
}
.clearfix:after{
content:".";
display:block;
height: 0;
clear:both;
visibility:hidden;
}
.clearfix {display:inline-block;
}
*html.clearfix{
height: 1%
}
.clearfix {
display:block;
}
/* Top Header */
div#topheader{
background-color:#FFFFFF;
}
/* Body Columns */
div#right{
width: 230px;
background-color:#FFFFFF;
float:right;
}
div#middle{
width: 564px;
background-color:#FFFFFF;
float:right;
}
div#left{
width: 206px;
background-color:#FFFFFF;
float:left;
}
/*footer*/
div#footer{
width: 999px;
background-color:#99CCFF;
padding-top: 10px;
padding-bottom: 10px;
height: 18px;
clear:both;
}
/*footer navigation*/
div#footerlist ul {margin:0 0 0 70px;/* indent from left */
}
div#footerlist li {
list-style-type:none; 
float:left; /*align horizontally*/
}
div#footerlist a {
 padding:30px 6px; /*creates space each side of menu item's text */
 color:#2E74A9;
 font-size: 0.9em;
 }
/*footer navigation end*/
/*left column links*/
.leftheaders{
font-size: 0.9em;
font-weight:bold;
color:#269697;
text-indent: 7px;
margin:0 0 5px 0;
}
div#sidemenu{
width: 205px;
font-size: 0.9em;
font-weight:bold;
}
div#sidemenu ul{
color:#FF0000;
}
div#sidemenu li{
color:#5A5959;
list-style-image:url(images/bullet.gif);
list-style-position:inside;
}
div#sidemenu a:hover{
color:#999999;
}
.catheader{
font-size: 0.9em;
font-weight:bold;
color:#269697;
text-indent: 7px;
margin:6px 0 5px 0;
}
.newside {
 color: #5A5959;
 text-decoration: none;
}
.newside a:link {
 color: #5A5959;
 text-decoration: none;
}
.newside a:visited {
 color: #5A5959;
 text-decoration: none;
}
.newside a:active {
 color: #5A5959;
 text-decoration: none;
}
.newside a:hover {
 color:#CCCCCC;
 text-decoration:underline;
}
div#topmenu{
background-color:#6600CC;
}
div#toptext{
width: 550px;
padding-top: 10px;
background-color:#FFFFFF;
}
/*Middle Offers*/
div#bodyoffers{
width: 510px;
padding-left: 25px;
padding-top: 15px;
background-color:#FFFFFF;
}
div#rightoffer{
width: 170px;
height: 180px;
background-image:url(images/offer1.jpg);
background-color:#660099;
float:right;
}
div#rightoffertext{
width: 154px;
text-align:center;
padding:110px 10px 0 5px;
}
div#middleoffer{
width: 170px;
height: 180px;
background-image:url(images/offer1.jpg);
background-color:#CC66CC;
float:right;
}
div#middleoffertext{
width: 154px;
text-align:center;
padding:110px 10px 0 5px;
}
div#leftoffer{
width: 170px;
height: 180px;
background-image:url(images/offer1.jpg);
background-color:#FF9933;
float:right;
}
div#leftoffertext{
width: 154px;
text-align:center;
padding:110px 10px 0 5px;
}
.specialheaders{
font-size:12px;
font-weight:bold;
}
h4{
font-size:9px;
}
h5{
font-size:0.9em;
font-weight:normal;
}
h3{
font-size:1.0em;
font-weight:bold;
}
div#bottominfo{
width: 564px;
background-color:#FFFFFF;
}
div#galleryinfo{
width: 335px;
height: 123px;
background-image:url(images/petbackground.gif);
background-color:#FFFFFF;
float:right;
text-align:center;
padding-top: 8px;
}
div#gallerypicture{
width: 289px;
height: 80px;
padding-top: 5px;
margin:0 5px 0 5px;
}
div#greyhound{
width: 229px;
background-color:#FFFFFF;
float:left;
}
div#grehoundlink{
width: 179px;
padding-top: 5px;
}
p{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 0.9em;
}
/* Left side menu*/
div#curvetop{
width: 210px;
background-image:url(images/curvemiddle.gif);
}
div#curvemiddle{
width: 210px;
background-image:url(images/curvemiddle.gif);
}
div#curvebottom{
width: 210px;
}
div#whatsnew{
width: 220px;
padding-top: 35px;
padding-left: 5px;
}
div#whatsnewlist{
width: 200px;
}
div#whatsnewlist ul{
color:#FF0000;
margin:0 0 0 10px;
}
div#whatsnewlist li{
color:#5A5959;
list-style-type:none;
}

[crazyluv]

You say it passes validation but I saw a list with out <ul></ul> so I check and it does have some error nothing much but it does. Oddly enough (well not really) the list in question is the one your having problems with.

So place the <ul></ul> around it and if you don't want the bullets then add this style: list-style-type: none; to it and they both look the same in IE and FF.

As for the image the problem is with text-align: center; which centers the div that contains the image along with the text in IE but not in FF since the div is not text. You need to center the div for FF. That is simple enough just add margin-left: auto; and margin-right: auto; to div#gallerypicture and well you might want to eliminate margin:0 5px 0 5px;.

That should do it.

Future advice: I find testing in FF then verifing in IE alot better then the reverse since IE doesn't follow the rules as strictly as other browser which is one of the main reasons things like this happen.

[csa]

Thanks for your help that's working now.

[moojoo]

Just to clarify text-align:center; will only center the contents of that div, as for auto centering (Which IE 5.x does not support) margin: 0 auto; will work fine. To center say the container div in IE 5.x you need text-align:center; on the body {} and then rejustify your text in the containing div with text-align:left;. Crazyluv was right but I thought it should be explained a bit more.

Also as stated I would build with Firefox or similar then trouble shoot IE last.