Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 14 of 14
  1. #1
    New to the CF scene
    Join Date
    Aug 2005
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question What's up with this? Anchor style overrides h1?

    Take a look at http://www.thinkdammit.net/. The title of each post is enclosed in h1 tags. The linked part is enclosed in an anchor tag. In my CSS I've styled anchor, then h1 after that. Why is the anchor tag shrinking the text?

    Thanks for your help!

  • #2
    Senior Coder
    Join Date
    Jul 2004
    Location
    New Zealand
    Posts
    1,315
    Thanks
    0
    Thanked 2 Times in 2 Posts
    "A" elements haver their own default style, and in this case the anchor style has priority over the H1 because it is nested inside. You'll need to over-ride the default styles for anchors within your H1 elements.
    Forget style. Code to semantics. Seperate style from structure, and structure from behaviour.
    I code to specs, and test only in Firefox (unless stated otherwise).

  • #3
    New to the CF scene
    Join Date
    Aug 2005
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok. I did get it to work that way, but I thought there must be a better way. I thought I'd have to repeat code, but I just remembered that I can put it on the same line with a comma (never comma'd complex things before). Thanks for your help!

    But I don't understand--why does a nested element override its parent when I haven't specifically defined it?

  • #4
    Senior Coder
    Join Date
    Jul 2004
    Location
    New Zealand
    Posts
    1,315
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Quote Originally Posted by Deicidus
    But I don't understand--why does a nested element override its parent when I haven't specifically defined it?
    Because user-agents (such as web browsers) supply their own stylesheets.
    Forget style. Code to semantics. Seperate style from structure, and structure from behaviour.
    I code to specs, and test only in Firefox (unless stated otherwise).

  • #5
    Regular Coder
    Join Date
    Nov 2004
    Location
    The Netherlands
    Posts
    551
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hyperlink styles are not get from their parent styles.
    CATdude about IE6: "All your box-model are belong to us"

  • #6
    Senior Coder
    Join Date
    Jul 2004
    Location
    New Zealand
    Posts
    1,315
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Quote Originally Posted by mrruben5
    Hyperlink styles are not get from their parent styles.
    Rubbish (I think. That sentence doesn't make sense)
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    	<head>
    		<title>66178</title>
    	</head>
    	<body>
    		<h1>This is <a href="">a test</a></h1>
    	</body>
    </html>
    Forget style. Code to semantics. Seperate style from structure, and structure from behaviour.
    I code to specs, and test only in Firefox (unless stated otherwise).

  • #7
    New to the CF scene
    Join Date
    Aug 2005
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I tested it, you seem to be correct (that is, it works as you'd think it would). Then why was mine acting funny?

    I fixed it by just swapping the anchor and h1 tags, by putting the h1 inside of the anchor.

  • #8
    Senior Coder
    Join Date
    Jul 2004
    Location
    New Zealand
    Posts
    1,315
    Thanks
    0
    Thanked 2 Times in 2 Posts
    I'm not sure, but you shouldn't put a H1 (a block element) inside an A (an inline element). You haven't changed your CSS at all?

    I ran a few tests and I can't replicate the behaviour. A few notes on your markup though - it's a mess. H1 elements should not be used for post headings. You've got no semantics. You've tried to use XHTML but it's not valid and it's not being served as XHTML.

    I think you should focus on your markup before worrying about style.
    Last edited by hemebond; 08-19-2005 at 01:13 AM.
    Forget style. Code to semantics. Seperate style from structure, and structure from behaviour.
    I code to specs, and test only in Firefox (unless stated otherwise).

  • #9
    New to the CF scene
    Join Date
    Aug 2005
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I know it's a mess--it's not mine. I liked the original layout, but the code was so awful that it seemed as if it had been done poorly on purpose--empty tables, incomplete code, half-done structure/style seperation, everything.

    I've been working on cleaning it up, both to preserve the layout I like and to learn more about CSS and WordPress. It'll validate when I'm through with it!

    Why shouldn't I use headings for post titles?

  • #10
    Regular Coder
    Join Date
    Aug 2004
    Location
    The US of A
    Posts
    767
    Thanks
    1
    Thanked 0 Times in 0 Posts
    You shouldn't use a top level heading for a post heading. I'm thinking a thrid level heading would work. Given that you have a second level heading in between the two.

    Here's a quick example of what I mean...

    Code:
    <div id="site">
    <h1><a href="#">Site Title</a></h1>
    <div id="posts>
    <h2><span>Posts</span></h2>
    <h3>Post title</h3>
    <p>Lorem ipsum and what not.</p>
    <h3>Post title</h3>
    <p>More lorem ipsum</h3>
    </div>
    
    <div id="another-section>
    <h2><span>Another Section</span></h2>
    <p>Even more Lorem ipsum</p>
    </div>
    </div>
    Man, I can't what for XHTML 2. Not having to worry about which <h[1-6]> to use.

  • #11
    Senior Coder
    Join Date
    Jul 2004
    Location
    New Zealand
    Posts
    1,315
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Quote Originally Posted by Deicidus
    Why shouldn't I use headings for post titles?
    No no. You shouldn't use H1 elements for every title. H1 should be for the site title (like in the header), H2 for the current page and H3's etc for sections within that page.

    Navigation sections and such probably shouldn't have H# elements at all.
    Forget style. Code to semantics. Seperate style from structure, and structure from behaviour.
    I code to specs, and test only in Firefox (unless stated otherwise).

  • #12
    New to the CF scene
    Join Date
    Aug 2005
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I see. So it's a perfect tree: title (h1), page title (h2), section headings (h3), subheadings (h4), etc. That makes sense.

    I've read you shouldn't skip headings though. On my main page I've got no page title, it gooes straight to the posts. So should I skip h2 so that the structure will match the other pages?
    Last edited by Deicidus; 08-19-2005 at 06:12 AM.

  • #13
    Regular Coder
    Join Date
    Aug 2004
    Location
    The US of A
    Posts
    767
    Thanks
    1
    Thanked 0 Times in 0 Posts
    No. You shouldn't skip headers.

  • #14
    Senior Coder
    Join Date
    Jul 2004
    Location
    New Zealand
    Posts
    1,315
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Quote Originally Posted by Deicidus
    I've read you shouldn't skip headings though. On my main page I've got no page title, it gooes straight to the posts. So should I skip h2 so that the structure will match the other pages?
    You should put a H2 in. Are you not showing the Latest Entries?
    Forget style. Code to semantics. Seperate style from structure, and structure from behaviour.
    I code to specs, and test only in Firefox (unless stated otherwise).


  •  

    Posting Permissions

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