#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2013
    Posts
    16
    Rep Power
    0

    [SOLVED] Same class, but applying it to h1 instead of p looks very different


    Turns out the h1-h6 tags have some default formatting. I normalized it all and all the problems were solved.

    Hi there. Thanks for reading. I can't for the life of me understand why something so simple is being so drastic.

    This is the code that I have. The way it is, it displays exactly how it should...

    PHP Code:
    <section class="chocolate">
                    <
    header>
                        <
    p>Thank You</p>
                    </
    header>
                    <
    div id="not_important"></div>
                </
    section
    With this CSS:
    PHP Code:
    .chocolate {
        
    float:left;
        
    width:231px;
        
    height:270px;
    }

    .
    chocolate header {
        
    margin-bottom:20px;
        
    padding:34px 0px 0px 11px;
        
    width:220px;
        
    height:30px;
        
    border-bottom:1px solid #cccccc;
    }

    .
    chocolate p {
        
    font-family:os-regular;
        
    font-size:13px;
        
    color:#999999;

    But to make it more semantic, I've changed the <p> tag to an <h1> tag like so...
    PHP Code:
    <section class="chocolate">
                    <
    header>
                        <
    h1>Thank You</h1>
                    </
    header>
                    <
    div id="not_important"></div>
                </
    section
    ...and also changed the css accordingly...
    PHP Code:
    .chocolate {
        
    float:left;
        
    width:231px;
        
    height:270px;
    }

    .
    chocolate header {
        
    margin-bottom:20px;
        
    padding:34px 0px 0px 11px;
        
    width:220px;
        
    height:30px;
        
    border-bottom:1px solid #cccccc;
    }

    .
    chocolate h1 {
        
    font-family:os-regular;
        
    font-size:13px;
        
    color:#999999;

    Yet the text in the h1 tag is now a larger gray bold. I can't figure out why. The positioning and everything else is still perfect.

    If I use h2 instead its the same thing. I also tried h4, since I definitely have not used h4 anywhere else and there certainly could not be some kind of a previously styled conflict specific to h4.

    If I change it back to p it displays perfect again.

    Help is greatly appreciated. Thanks!

    -Ji
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,122
    Rep Power
    4258
    Welcome to DevShed Forums, Jiketsu.

    Congratulations on figuring out the cause of your problem and the solution. Thanks for posting it.

    As you found out many HTML elements have some default styles.

    Here are some good related articles that you might find helpful:
    http://blog.teamtreehouse.com/settin...efault-styling
    http://www.lifeathighroad.com/web-de...s-default-css/
    http://css-class.com/test/css/defaul...t-defaults.htm
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).

IMN logo majestic logo threadwatch logo seochat tools logo