SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Guru
    Join Date
    Aug 2004
    Location
    Taunton, UK
    Posts
    787
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    My div is not expanding to display static text

    I have just started developing a new website and thought I would have a go at using a "reset" set of styles to start off with a clean slate so to speak. I have immediately run into problems with just a simple test file where a div containing some text is not expanding to include the text content. Any help on why this happening is much appreciated.

    Here is the CSS I am using:

    Code:
    /*****************************  
    RESET STYLES
    *****************************/ 
    
    
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed, 
    figure, figcaption, footer, header, hgroup, 
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video {
    	margin: 0;
    	padding: 0;
    	border: 0;
    	font-size: 100%;
    	font: inherit;
    	vertical-align: baseline;
    }
    /* HTML5 display-role reset for older browsers */
    article, aside, details, figcaption, figure, 
    footer, header, hgroup, menu, nav, section {
    	display: block;
    }
    body {
    	
    }
    ol, ul {
    	list-style: none;
    }
    blockquote, q {
    	quotes: none;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
    	content: '';
    	content: none;
    }
    table {
    	border-collapse: collapse;
    	border-spacing: 0;
    }
    
    
    /****************************
    SITE STYLES
    ****************************/
    
    
    body {
    	font:12px/18px arial;
    	background:#d0d2d8;
    	color:#444444;
    } 
    
    div {
    	border: 1px solid black;
    }
    
    
    div.oswald {
    
    		 font-family: 'Oswald', sans-serif;
    		 font-size:60px;
    		 
    		
    }

    And the HTML is as follows:

    Code:
    <html>
      <head>
        <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
        <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
    
       <link rel="stylesheet" href="/css/styles.css" type="text/css" charset="utf-8">
    
        <style>
          body {
           
           
          }
    
    	div.oswald {
    
    		 font-family: 'Oswald', sans-serif;
    	}
    
    
    
        </style>
      </head>
      <body>
    
    	
        	<div class="oswald">
    		Oswald
    	</div>
    
    
    
      </body>
    </html>
    Mediakitchen Limited
    App Development | Website Design & Development | Flash Game Development
    Somerset, UK
    http://www.mediakitchen.co.uk

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You set the body line-height to 18px and yet you set the font to 60px. A font that doesn't fit in the line-height will just stick out as is happening with your layout.

    As a rule of thumb set your line height in either ems or a unitless line-height so that it grows with the font size of the element it contains.

    e.g.
    Code:
    body {
    	font:12px/1.5 arial;
    	background:#d0d2d8;
    	color:#444444;
    }
    div { border: 1px solid black; }
    div.oswald {
    font-family: 'Oswald', sans-serif;
    font-size:60px;
    }
    Preferably use percent for the default font-size anyway and not px .
    Last edited by Paul O'B; Oct 2, 2013 at 06:05.

  3. #3
    SitePoint Guru
    Join Date
    Aug 2004
    Location
    Taunton, UK
    Posts
    787
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you Paul and sorry for the delay in replying due to the notification going into my SPAM folder.

    Doh that line height must have been copied in from the template I was given with the reset css code and I had not noticed it. Next time I should spend more time checking my code before reaching out for help.

    Anyway all working now - thanks.

    And thanks for the tip on using ems
    Mediakitchen Limited
    App Development | Website Design & Development | Flash Game Development
    Somerset, UK
    http://www.mediakitchen.co.uk


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
  •