Cross browser display problems

[Ramrod]

Hi all

This is my first post here, but not the last I'm sure. 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 ho I wanted, but in Firefox & IE it looks a little different to how it should. I know this isn't uncommon, but it's a problem I'm not happy with & am unwilling to make live. As I'm pretty new to CSS I'm not too sure on 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. Instead of copying the code into this post I have just provided a link to the test homepage. That way you can view how it's meant to look in Safari or Chrome and see the strange version in Firefox or IE.

http://matramsey.com/test/

Thanks.

[teedoff]

You should validate your code and work through the errors. IE is very picky and quirky with incorrect code, so just that may correct your issues. You can validate here.

[MattF]

Checking the layout with Opera is a good idea too, when coding. It will usually visually slap you in the face for the slightest of output errors and suchlike.

[Ramrod]

Hey

Matt, I just downloaded Operan tried it and the site displays exactly as it does in Safari & Chrome. It seems it's not the temperamental browser today. Cheers your input.

Teedoff, thanks for that. I had thought of that but thought there might have been an obvious mistake in my CSS or HTML that the people here with more knowledge on the subject than I might have picked up on.

Cheers guys. If anyone else can identify the problem I'd love to hear it. I'll hit the validator for now.

[Ramrod]

Both the css and html file are passing validation now. So I really have no idea why there's the discrepancy between the browsers.

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 ideas why in Firefox & IE the text and its background colour appears about 2px left of the images?

[teedoff]

Ok so you may need to be more specific about what exactly is different from browser to browser. I just viewed in IE8 and Safari and they look the same to me.

[SB65]

Firefox is adding a border to the image.

.thumbs img{border:none}

should sort it.

[teedoff]

Originally Posted by SB65

Firefox is adding a border to the image.

.thumbs img{border:none}

should sort it.

Strange I see a border in IE and Firefox...I dont see any difference...but I may be missing it..lol

[teedoff]

One thing I did notice is that when you decrease browser size, your "logo" is positioned fixed and so when the browser shrinks, the links div floats over your thumbnails. Not sure if thats the effect you wanted, but thought I would mention it.

[SB65]

Originally Posted by teedoff

Strange I see a border in IE and Firefox...I dont see any difference...but I may be missing it..lol

No not necessarily, I only looked in FF...

[teedoff]

Any ideas why in Firefox & IE the text and its background colour appears about 2px left of the images?

Ok now I see what you are talking about. Didn't see this in your post above until now. As SB said, Firefox may be adding a border.

[SB65]

Looked in IE7, an indeed IE is also adding a border, but the page is a mess in IE7, I think because it doesn't like inline-block:

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

I'd suggest adding float:left to this - you might need to play with your margins a bit.

[Ramrod]

Hey everyone

Thanks for all your responses.

SB65, you are the winner! I added

img {
border-style: none;
}

and now it's displaying properly. Thank you very much. I will have to test it in IE7 and see what it's doing. Is there an alternative to inline-block for use with IE7?

Teedoff, cheers for your help too. I am aware of the overlaps when using a resolution of around 1024 or under. There are a few measures I will play with to fix it.

I uploaded the amended version and it seems to be displaying fine for me now. Thanks.

[SB65]

Originally Posted by Ramrod

Is there an alternative to inline-block for use with IE7?

Just applying float:left to the ul.thumbs li css should do it. You may need to remove display:inline-block as well.

[Ramrod]

Thanks for your help guys. I have completed the site and it's live for the world to see. Please have a look and let me know what you think
www.matramsey.com