SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    321
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    @font-face Chrome vs. IE 8 AND best practices for 2 Column Layout With CSS

    I'm using @font-face with fonts from Font Squirrel. (Kewl site)

    They display very well in IE 8 but do not render in Chrome.

    Uh . . . . is this because of bananas . . . or is there something else going on?

    Code:
    @font-face {	font-family: 'gabrielle';
        		 src: url('../css/fonts/gabrielle-webfont.eot');
    		  src: local("☺"),
        		   src: url('../css/fonts/gabrielle-webfont.eot?#iefix') format('embedded-opentype'),
    		   url('../css/fonts/gabrielle-webfont.woff') format('woff'),
    		 url('../css/fonts/gabrielle-webfont.ttf') format('truetype'),
    		url('../css/fonts/gabrielle-webfont.svg#gabrielleRegular') format('svg');
        		font-weight: normal;
        		font-style: normal;
    }
    Also, I'm designing a two column layout with CSS.

    Most of the CSS Site Forum members know this already as I've driven them nuts for the past six month.

    I wish to have a 320px left and a 880px right content window.

    This is what I have . . .

    Code:
    html, body {	margin:0; padding:0
    }
    
    body 		{ 	background-color: #0A1794;
    			background:  url(images/blkpyramids1.jpg) fixed; /*newbkground.png)*/								
    			max-width: 1200px;
    			min-width: 400px;
    			font-family: Verdana, Geneva, sans-serif;  
    			font-size:16px;							
    			color:#fff;
        		  	line-height:106%;
    			margin-top:10px;
    }
    
    #maincontent{	        float:right;
    			width:880px;
    			position:relative;
    			margin-left: 26.26%; 
    }

    I did read Pauls Frequently Asked Questions in the CSS forum talking about this and almost understood all of it.

    the example was . . .

    #leftmenu {
    width: 139px;
    height: auto;
    margin: 0px 10px 0px 0px;
    border-right: 1px solid #C8C8C8;
    background-color: #f2f2f2;
    display: inline;
    float: left;
    position:relative;
    left:-450px
    }

    #content {
    width: 450px;
    background: #fffccc;
    text-align: left;
    color: #000;
    float:left;
    position:relative;
    left:150px;
    }


    I'd love to hear your comments on this.


    Thanks . . . Rick

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,207
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by R Schreiber View Post
    I'm using @font-face with fonts from Font Squirrel. They display very well in IE 8 but do not render in Chrome.
    Could you post a link to this? It's easier to see what's going on that way.


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
  •