My webpage displaying abnormally in Firefox & IE

[Mat]

Hi all

I have been dormant on here for a while, but I'm back with a dilemma. I know the community is primarily a Mac resource, but I'm hoping soe of you are wed designers and dabblers too.

I have recently taken an interest in HTML & CSS and have completed a site for my graphic design portfolio. When I tested it in Safari or Chrome it looked exactly how I wanted, but in Firefox & IE it looks a different to how it should; the text beneath my images appears a few pixels left of where it should. I know that pages displaying differently in different browsers isn't uncommon, but it's a problem I'm not happy with & am unwilling to make the site live until I've resoled it. My dilemma is I'm pretty new to CSS and am not sure what I need to change to fix it. Any help would be greatly appreciated.

I have uploaded the homepage in a test folder. The whole site will go live once I have fixed this problem. I have checked both the HTML and CSS, and they both validate perfectly at W3C. I have provided the link so you can view how it's meant to look in Safari or Chrome and see it display strangely in Firefox or IE.

http://matramsey.com/test/

Here is the HTML that is displaying incorrectly:

<div id="gallery">
<ul class="thumbs">
<li><a href="DoHAredesign.html">
<img src="images/health.jpg" alt="Department of Health and Ageing website redesign" /><br />Department of Health and Ageing website redesign</a></li>
<li><a href="CIDredesign.html">
<img src="images/chronic.jpg" alt="Chronic Indigenous Disease website redesign" /><br />Chronic Indigenous Disease website redesign</a></li>
<li><a href="nationaldrugscampaign.html">
<img src="images/drugs.jpg" alt="National Drugs Campaign website redesign" /><br />National Drugs Campaign website redesign</a></li>
<li><a href="drconnect.html">
<img src="images/drconnect.jpg" alt="Doctor Connect website redesign" /><br />DoctorConnect website<br />redesign concept</a></li>
<li><a href="ctrlaltdelete.html">
<img src="images/ctrlaltdel.jpg" alt="Ctrl Alt Delete music festival" /><br />Ctrl Alt Delete Music Festival university project</a></li>
<li><a href="psfflyer.html">
<img src="images/psfflyer.jpg" alt="Packaging Stewardship Forum promotional flyer" /><br />Packaging Stewardship Forum promotional pamphlet</a></li>
<li><a href="thesound.html">
<img src="images/thesound.jpg" alt="The Sound music magazine" /><br />‘The Sound’ magazine<br />university project</a></li>
<li><a href="manukasmiles.html">
<img src="images/manuka.jpg" alt="Manuka Smiles stationery suite" /><br />Manuka Smiles<br />corporate suite</a></li>
<li><a href="personalprojects.html">
<img src="images/personal.jpg" alt="Personal Projects" /><br />Personal projects</a></li>
<li><a href="logos.html">
<img src="images/logos.jpg" alt="Logos" /><br />Logos</a></li>
<li><a href="adverts.html">
<img src="images/adverts.jpg" alt="Advertisements" /><br />Advertisements</a></li>
<li><a href="miscellaneous.html">
<img src="images/misc.jpg" alt="Miscellaneous" /><br />Miscellaneous</a></li>
</ul>
</div>

and here's the associated CSS:


ul.thumbs {
width: 812px;
margin: 0;
padding: 0;
text-align:center;
float: right;
}

ul.thumbs li {
width:190px;
display:inline-block;
margin:10px 5px 5px 5px;
padding: 0 0 5px 0;
background-color: white;
}

Any help would be greatly appreciated. Thanks.

[ElDiabloConCaca]

Some browsers put default stylings (like borders, rollover borders, etc.) on img tags. Do you have any CSS to "reset" the margins and paddings of img tags?

Maybe try inserting some CSS to modify the img tags: no padding, no margins, no borders, no "hover" modifications.

I don't think the text is appearing 3 pixels to the left of where they should be; rather, I believe the images are appearing 3 pixels to the right of where they should be.

img {
   border-style: none;
}

...and maybe some "padding" and "margin" declarations, too.

Also, if you haven't already, install the "Web Developer" toolbar plug-in in Firefox. You can outline elements, identify portions of the page, finagle the CSS, verify CSS/HTML/XHTML/JavaScript, among a whole slew of other things that may help in debugging web pages as you develop.

[Mat]

ElDiablo, you sir, are a genius!

I added

img {
border-style: none;
}

and now it's displaying consistently in Firefox too. I don't have IE on my Mac & I don't own a PC so I'm hoping it's displaying properly in IE too. I have uploaded the amended version. Thanks so much mate.

[ElDiabloConCaca]

Looks good in IE 8 from here!

[Mat]

Fantastic! Thanks a lot for that.
Now my next hurdle is (and I'm not sure whether I will do it) making sure that when viewers are using a resolution of 1024 or under, that the menu on the left doesn't overlap the images on the right.

Thanks again.

[ElDiabloConCaca]

It doesn't seem to overlap on my system here at work (Windows XP, Firefox) when I resize the window horizontally... the menu slides as far left as it will go, the images do as well, then I get scroll bars indicating that there are more images off the right-hand side of the screen.

Screen resolutions can get tricky, because you probably have to use JavaScript to detect what the viewport size of the user's browser is... it's not difficult, just a little messy sometimes.

You may want to play around with CSS's min-width and max-width properties to prevent items from ever becoming smaller than a certain pixel size. For example, you can have a big div in the middle of the screen, and have it proportionally resize to fit the browser window size BUT never go under a certain width, and never go over a certain width.

Might be useful.

[Mat]

Hey ElDiablo, thanks a lot for your help. I have finished the site and it's now live. Please have a look and let me know what you think. www.matramsey.com

Cheers mate.

[ElDiabloConCaca]

Looks good -- I especially dig the "Mat" in the logo... did you create that, or is that a font?

The favicon.ico is also pretty slick.

Also, looks like there's no picture for the "Advertisements" section -- intentional, or not?