SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Zealot
    Join Date
    Jan 2002
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Heading Tags And Line Breaks

    I have a nav bar that contains links which use <h2> tags to style their text. After each link is a <br /> tag.

    In Firefox, the navigation shows up fine. One line on each line.

    In IE, the navigation has extra spaces between each link.

    When I remove the <br /> tag after the links, Firefox clumps all of the links onto one line, while IE displays them properly (one on each line)

    Any help would be appreciated. Thanks!

    Code:
    a {
        color: #8ebceb;
        text-decoration: none;
        size: 1.0em;
        font-family: Helvetica, sans-serif;
        font-weight: bold;
    }
    
    h2 {
        font-family: Helvetica, sans-serif;
        font-size: 1.1em;
        text-transform: uppercase;    
        color: #ffcc00;
        margin: 0;
        padding-top: 5px; 
        padding-bottom: 5px; 
    }


  2. #2
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What is the html code for this ?

  3. #3
    SitePoint Zealot
    Join Date
    Jan 2002
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Several lines similar to this:

    Code:
    &nbsp;&nbsp;<a href="http://www.site.com/page.php">Anchor Text</a></h2><br />


  4. #4
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Using
    Code:
    <h2>&nbsp;&nbsp;<a href="http://www.site.com/page.php">Anchor Text</a></h2><br />
    <h2>&nbsp;&nbsp;<a href="http://www.site.com/page.php">Anchor Text</a></h2><br />
    <h2>&nbsp;&nbsp;<a href="http://www.site.com/page.php">Anchor Text</a></h2><br />
    and your css above, I get the same result in FF as IE - an extra space between each one as expected with the <br>s and still stacked vertically without the spaces when the <br>s are removed. There must be something elsewhere in the css affecting this.

  5. #5
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,810
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Why are you using <br> tags where you should be using margins on the <h2>?

    Why are you using &nbsp; where you should be using padding on the <h2>?
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  6. #6
    SitePoint Zealot
    Join Date
    Jan 2002
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the tips felgall. I don't read up on coding practices too much, so I'm out of date.

    I got it working. The code was being generated from a php file, and some of the links were missing the opening <h2> tag!


  7. #7
    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)
    I wouldn't even use the headings. Headings are meant to help identify and group (in other words, establish a relationship between) related sections of content. You should be using an unordered list here.


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
  •