Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 15 of 15
  1. #1
    New to the CF scene
    Join Date
    Oct 2010
    Location
    Australia
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Cross browser display problems

    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.

  • #2
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    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.

  • #3
    Senior Coder
    Join Date
    Jul 2009
    Location
    South Yorkshire, England
    Posts
    2,318
    Thanks
    6
    Thanked 304 Times in 303 Posts
    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.

  • #4
    New to the CF scene
    Join Date
    Oct 2010
    Location
    Australia
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #5
    New to the CF scene
    Join Date
    Oct 2010
    Location
    Australia
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?

  • #6
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    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.

  • #7
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    Firefox is adding a border to the image.

    Code:
    .thumbs img{border:none}
    should sort it.

  • #8
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Quote Originally Posted by SB65 View Post
    Firefox is adding a border to the image.

    Code:
    .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

  • #9
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    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.

  • #10
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    Quote Originally Posted by teedoff View Post
    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...

  • #11
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    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.

  • #12
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    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:

    Code:
    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.

  • #13
    New to the CF scene
    Join Date
    Oct 2010
    Location
    Australia
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up

    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.
    Last edited by Ramrod; 10-28-2010 at 10:30 PM. Reason: Mixed up names in original post.

  • #14
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    Quote Originally Posted by Ramrod View Post
    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.

  • #15
    New to the CF scene
    Join Date
    Oct 2010
    Location
    Australia
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •