SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2008
    Location
    Melbourne, Australia
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    images not displaying in Firefox correctly

    I'm going nuts!! The site so far looks good in Safari, Opera and Chrome, but the images look like stepping stones in Firefox. What am I missing? Any help would be greatly appreciated. The site is Vicki's Personal Pages

    Thanks,
    Vicki

    Code:
    Code CSS:
    body {
    	width: 100%;
    	background-color: #ecebef;
    }
     
    @font-face {
    	font-family: "sorbet";
    	src: url("fonts/sorbetltd-webfont.eot"); /* for IE8 and below */
    }
     
    @font-face {
    	font-family: "sorbet";
    	src: url("fonts/sorbetltd-webfont.svg") format("svg"); 
    }
     
    @font-face {
    	font-family: "sorbet";
    	src: url("fonts/sorbetltd-webfont.ttf") format("truetype");
    }
     
    @font-face {
    	font-family: "sorbet";
    	src: url("fonts/sorbetltd-webfont.woff") format("woff"); 
    }
     
    h1 {
    	font-family: "sorbet";
    	font-size: 40px;
    	text-align: center;
    } 
     
    h3 {
    	font-family: "sorbet";
    	font-size: 14px;
    	text-align: center;
    } 
     
    h2 {
    	font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
    	color: #F60;
    	font-size: 16px;
    }
     
    p {
    	font-family: "sorbet";
    	font-size: 14px;
    }
     
    #display {
    	width: 85%;
    	height: 100%;
    	background-color:#FFF;
    	margin: 0 auto;
    	-webkit-border-radius: 1em;
    	-moz-border-radius: 1em;
    	-o-border-radius: 1em;
    	border-radius: 1em;
    	-webkit-box-shadow: 2px 2px 3px black;
    	-moz-box-shadow: 2px 2px 3px black;
    	-o-box-shadow: 2px 2px 3px black;
    }
     
    #travel, #zen, #favourites, #pirates, #frosty {
    	margin-left: 20px;
    	height: 122px;
    }
     
    #travellink {
    	display: block;
    	height: 122px;
    	width: 156px; 
    	padding-right: 5px;
    	background-image: url(images/travel.png);
    	background-repeat: no-repeat;
    	float: left;
    }
     
    #zenlink {
    	display: block;
    	height: 118px;
    	width: 156px;
    	padding-right: 5px;
    	background-image: url(images/zen.png);
    	background-repeat: no-repeat;
    	float: left;
    }
     
    #favlink {
    	display: block;
    	height: 98px;
    	width: 156px;
    	padding-right: 5px;
    	background-image: url(images/favourites.png);
    	background-repeat: no-repeat;
    	float: left;
    }
     
    #piratelink {
    	display: block;
    	height: 122px;
    	width: 156px;
    	padding-right: 5px;
    	background-image: url(images/pirates.png);
    	background-repeat: no-repeat;
    	float: left;
    }
     
    #frostylink {
    	display: block;
    	height: 116px;
    	width: 156px;
    	padding-right: 5px;
    	background-image: url(images/frosty.png);
    	background-repeat: no-repeat;
    	float: left;
    }

  2. #2
    SitePoint Addict EarlyOut's Avatar
    Join Date
    Mar 2011
    Location
    Sector R
    Posts
    280
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That page displays exactly the same for me in Firefox, Chrome, and IE9. Can you give us a screenshot of what you're seeing in Firefox? And what version of Firefox? (Though that usually doesn't matter - FF is pretty consistent.)

  3. #3
    SitePoint Member
    Join Date
    Nov 2010
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Add display:block; to the article tag, <article> should be a block level element but older browsers that support the article tag render them as an inline element.

  4. #4
    SitePoint Enthusiast
    Join Date
    Jul 2008
    Location
    Melbourne, Australia
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, I added the display block to the article and works fine.

    Vicki


Bookmarks

Posting Permissions

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