SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    You want what? By when?? Milamber's Avatar
    Join Date
    Jan 2001
    Location
    California
    Posts
    342
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    a(Anchor) tag seems to break css layout

    http://63.247.86.169/

    What I see (in firebird, but not in IE) is that after the link in the first article, the layout breaks. (Notice how the padding for the rest of the text is now less AND even more importantly, the link is put on a new line, which makes no sense.) However, this link (a tag) breaking doesn't occure in any of the other articles, despite them being cast from the same mold ( unordered lists ).


    I am willing to bet I missed something in my style sheet - any ideas? Or could this possibly be a bug?

    Thanks!
    -Jeff Minard | jrm.cc - Battlefield 2 Stats

  2. #2
    Your Lord and Master, Foamy gold trophy Hierophant's Avatar
    Join Date
    Aug 1999
    Location
    Lancaster, Ca. USA
    Posts
    12,305
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Only thing I can see is that in your header, you are assigning <a> to be a block level element. This implies a line break at the very least.

    Why use unordered lists when you want to display the information in paragraph style? Improper semantic use of the tags in my opinion.

    Also should the class 'c' be in context with "#content" or ".journal"?
    Wayne Luke
    ------------


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

    No its not a bug its an error in your code i'm afraid.

    You have this:
    Code:
    <a name="content"  />
    And it should be this:
    Code:
    <a name="content" ></a>
    Now everything works

    But you don't need this anyway:
    Code:
    <a name="content" ></a>
    Because you have this right next to it which will do the same job.
    Code:
    <div id="content">
    Hope that helps.

    Paul

  4. #4
    SitePoint Guru bronze trophy blufive's Avatar
    Join Date
    Mar 2002
    Location
    Manchester, UK
    Posts
    853
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    [ah, too slow, other people spotted it first. Still, I've written all this now, so here goes...

    Notice that it's only the FIRST link that gets borked.
    Code:
     <a name="content" />
     <div id="content">
     <ul class="journal">
      <li class="h">inline href is breaking layout</li>
      <li class="c">crap. <br />
     <br /><br />
     for some reason, right after a link <a href="la la la">
     like this</a>
    I think it's the empty anchor at the top of this snippet. Viewing the generated Document tree in Mozilla's DOM inspector, it looks like Gecko thinks that the div, ul, li are all inside the "<a name=..."

    From the XHTML1.0 spec (http://www.w3.org/TR/xhtml1/#h-4.3)
    All elements other than those declared in the DTD as EMPTY must have an end tag. Elements that are declared in the DTD as EMPTY can have an end tag or can use empty element shorthand
    I'm afraid <a...> is not declared empty, so it must have an end tag. I'm puzzled as to why the W3C validator thinks your page is valid anyway... [oh, I see, it's because you fixed it...]

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    BTW, your page isn't centred in IE6 because you are working in quirks mode. The xml prologue causes IE^ to run in quirks mode and the margin:auto will not center the element.

    Take the xml prologue out (<?xml version="1.0" encoding="iso-8859-1"?>) and IE6 will be very happy.

    However IE5 will still not centre so add text-align:center to your body style and then add text-align:left to your #pagebody style to counteract it. (This is a bug in IE5, 5.5 and IE6 quirks mode that centres the nested element as well as the text.)

    Hope that helps.

    Paul

  6. #6
    You want what? By when?? Milamber's Avatar
    Join Date
    Jan 2001
    Location
    California
    Posts
    342
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You guys are F*ing awesome. So, what i did:

    - Changed the articles lists to <div> and <p>'s.
    - got rid of that opening <a> tag.
    - Added the css centering bug fix.

    Thanks mucho!
    -Jeff Minard | jrm.cc - Battlefield 2 Stats

  7. #7
    You want what? By when?? Milamber's Avatar
    Join Date
    Jan 2001
    Location
    California
    Posts
    342
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    One last question for ya'll.

    on this page: http://63.247.86.169/web.html with the same basic structure and style sheet, the #pagebody background and borders don't go from top to bottom of the browser window.

    I'd like them too.

    I tired setting the height: auto; but that just made it the hight of the viewport, and when you scrolled it was gone, which wasn't right.

    Fixes?
    -Jeff Minard | jrm.cc - Battlefield 2 Stats

  8. #8
    gingham dress, army boots... silver trophy redux's Avatar
    Join Date
    Apr 2002
    Location
    Salford / Manchester / UK
    Posts
    4,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Milamber
    Fixes?
    search the css forum for the countless threads on getting a height of 100%...
    re·dux (adj.): brought back; returned. used postpositively
    [latin : re-, re- + dux, leader; see duke.]
    WaSP Accessibility Task Force Member
    splintered.co.uk | photographia.co.uk | redux.deviantart.com


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
  •