SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Sep 2005
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    .className h2 doesn't work but #idName h2 does

    Hi all,

    this is happening to me both in firefox and explorer, and that makes me think I'm doing something wrong. But it's strange. I have this code:

    HTML Code:
    <div id="comments" class="section">
      <h2>A Title</h2>
      
      <p>Text here.</p>
    </div>
    The following CSS puts the h2 near the top of the div, as I intend.

    Code:
    #comments {
      border-top: 5px solid #ec9206;
    }
    
    #comments h2 {
      margin: 0.1em 0 0.5em;
    }
    However, since there are more places where I want to do this, I decided to create a new class (section):

    Code:
    div.section {
      border-top: 5px solid #ec9206;
    }
    
    div.section h2 {
      margin: 0.1em 0 0.5em;
    }
    The margin-top setting does not work here (the other ones do). I could achieve what I want by setting line-height to 0, but this is an ugly, ugly hack.

    CSS and HTML validate in both cases.

    Any ideas about what I am doing wrong?

    Cheers,

    David

  2. #2
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi David, and welcome to Sitepoint. Any chance you can provide the full HTML and CSS code? I think I know of a way to do this without the need for the class declaration, but I want to make sure it'll work with your setup first before I recommend it.

  3. #3
    SitePoint Member
    Join Date
    Sep 2005
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    I am an idiot

    Sorry for the post guys, I discovered the problem: An id selector is more specific than a class selector, and I had h2 overriden using the id of a parent div.

    Code:
    #main h2 {
      margin-top: 0.5em
    }
    Stupid me.

    Cheers,

    David

  4. #4
    SitePoint Member
    Join Date
    Sep 2005
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dan, thanks for your reply. You can see the site at http://www.marketing-otaku.com (it's portuguese).

    Cheers,

    David


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
  •