SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 31
  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2010
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Layout issues in IE7 - overlapping borders

    Hello

    My site isn't laying out properly in IE7 and earlier.

    Compare
    http://swingoutlondon.co.uk/about
    in firefox or chrome to IE7, (or use http://ipinfo.info/netrenderer/index.php)

    The two panels on the right sit below the panels on the left, but the panels on the left are floated so should sit next to the panels on the right...

    I've tried fiddling with the widths and margins, and using
    Code:
    position:relative;
    left:3px;
    Which worked for the main page (see http://www.sitepoint.com/forums/showthread.php?t=693766), but this feels like something different.

    Please help! I'm at my wits end.

  2. #2
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,099
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You need to make #about_me floating as well! And take the margin-left and right properties out!

    Code CSS:
    #about_me
        border-left: 3px solid #0F0F0F;
         /* margin-left: 503px; Take out */
        padding-left: 50px;
        position: relative;
        /* right: 3px; Take out */
        width: 250px;
        float: left; /* Add this */
    }
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  3. #3
    SitePoint Enthusiast
    Join Date
    Aug 2010
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Donobe

    That solution doesn't work unless I reorder the divs (I would need to change A B C D into a non-semantic ordering of A C B D), but examining it I realised that I needed a clear:left; on the left-hand divs and this fixes it.

    Here is my theory on why:
    First, to clarify, we have the following in the markup:
    DivA
    DivB
    DivC
    DivD

    and I want them to lay out on the page as:
    Fig1:
    Code:
    DivA  DivC
    DivB  DivD
    Where DivA and B are both wider than half of the enclosing container.

    So I float DivA and DivB to the left, and apply a margin-left to DivC and DivD

    However, if I don't apply clear:left; to DivB, then what the browser tries to lay out is:
    Fig 2:
    Code:
    DivA  DivB 
          DivC
          DivD
    But the container is too small to accommodate Div A and B next to each other so we get the bad layout which I had a problem with:

    Fig 3:
    Code:
    DivA
    DivB  DivC
          DivD
    I think Chrome and Firefox recognise that because Div B is moved to below DivA, then the space DivB would have occupied in Fig2 is now free, and DivC can be moved into it.

    On the other hand IE7 doesn't recognise this, so places DivC below the space which DivB would have occupied in Fig2.

    Applying clear:left; to DivB makes Fig 2 into
    Fig 4:
    Code:
    DivA 
    DivB 
          DivC
          DivD
    Which means that DivC and DivD can easily slide up to their proper positions.

  4. #4
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,099
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Why not work with two floating containing divs holding the separate divs?


    Edit: You have #mission_statement float: left. And after that you clear it left as well? I don't see why you can't float #about-us left as well. I.m.h.o. will you get what you want
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  5. #5
    SitePoint Enthusiast
    Join Date
    Aug 2010
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Why introduce non-semantic tag soup when there's a pure CSS solution?

  6. #6
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,099
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    non-semantic tag soup ?

    Never knew floating wasn't a css solution
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  7. #7
    SitePoint Enthusiast
    Join Date
    Aug 2010
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ...seriously?

    HTML is for content.

    CSS is for presentation.

    Adding extra tags to your Html for presentation alone is not only bad practice, it also results in inflexible heavy pages with markup which is more difficult to read.

    Tag soup (or Div soup) refers to markup which contains lots of tags which have no real meaning in relation to the content and are only there for layout or other presentation. Adding in tags for layout is little better than using a table to lay out your website.

    This is pretty basic stuff...

  8. #8
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,099
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by leveretdreaming View Post
    ...seriously?

    HTML is for content.

    CSS is for presentation.

    Adding extra tags to your Html for presentation alone is not only bad practice, it also results in inflexible heavy pages with markup which is more difficult to read.

    Tag soup (or Div soup) refers to markup which contains lots of tags which have no real meaning in relation to the content and are only there for layout or other presentation. Adding in tags for layout is little better than using a table to lay out your website.

    This is pretty basic stuff...
    I don't want to be rude but I find the way you have your markup/css combination now quite a Div soup!
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  9. #9
    SitePoint Enthusiast
    Join Date
    Aug 2010
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's quite all right.

    I believe all my markup is semantic (with one exception: the "page" div - couldn't seem to work around that), but if you think there are elements in there which are non-semantic and only there for presentation, by all means let me know: I'm interested to hear your suggestions.

  10. #10
    Just Blow It bronze trophy
    DaveMaxwell's Avatar
    Join Date
    Nov 1999
    Location
    Mechanicsburg, PA
    Posts
    7,264
    Mentioned
    115 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by leveretdreaming View Post
    That's quite all right.

    I believe all my markup is semantic (with one exception: the "page" div - couldn't seem to work around that), but if you think there are elements in there which are non-semantic and only there for presentation, by all means let me know: I'm interested to hear your suggestions.
    If I had to guess, it's because you've got div containers which seemingly don't have a purpose to them other than for hooks to style.
    1. header could be removed by applying the style to the h1 instead. Though semantically I would move the navigation in there..
    2. You could arguably remove all of these divs: mission_statement, scope, about_me, about_lindy, colophon and development. If you want separators, then give the id to the h2 and apply the style to that h2 instead.
    3. remove the .current spans and apply the class to the list item instead.
    Personally, I would remove all the divs I listed above, add one around what is currently the about_me and about_lindy divs, then move it outside the "content" div (possibly renaming it to something else). I would then float the new about div right and the content div left, which would create balance and consistency.
    Dave Maxwell - Manage Your Site Team Leader
    My favorite YouTube Video! | Star Wars, Dr Suess Style
    Learn how to be ready for The Forums' Move to Discourse

  11. #11
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,099
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by leveretdreaming View Post
    That's quite all right.

    I believe all my markup is semantic (with one exception: the "page" div - couldn't seem to work around that), but if you think there are elements in there which are non-semantic and only there for presentation, by all means let me know: I'm interested to hear your suggestions.
    What I mean to say is that the current markup with margin-left, and left properties in the same rule doesn't make any sense to me. It also doesn't make any sense to use two different divs for about_me and about_lindy. Those two can easy be combined into one div and use pseudo class to target your second <h2> tag.

    Edit:


    Code HTML4Strict:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    html,body,address,blockquote,div,form,fieldset,caption,h1,h2,h3,h4,h5,h6,hr,ul,ol,ul,li,table,tr,td,th,p,img {
    	margin: 0; 
    	padding: 0;
    }
     
    ul, ol, li {
    	list-style-type: none; 	
    }
     
    img,fieldset {
    	border: none;
    }
     
    body {
    	background: url("../images/flock_02_by_ZEBiii.jpg") 0 0;
    	color: #0F0F0F;
    	font-family: Futura,"Tw Cen MT","Trebuchet MS",sans-serif;
    }
     
    #page {
    	width: 900px;
    	margin: 0 auto;
    	overflow: hidden;
    	background: #FEE6B8;
    }
     
    #content {
    	width: 843px;
    	margin: 35px 30px 50px 27px;
    	font-size: .875em;
    }
     
    #mission_statement {
      float: left;
      width: 447px;
    	border-right: 3px solid #0F0F0F;
    }
     
    #mission_statement em {
        display: block;
        font-size: 1.2em;
        font-style: italic;
        margin-top: 0.8em;
        padding-left: 30px;
    }
     
    #mission_statement p {
    	margin: 0 50px 10px 0;
    }
     
    #about_me  {
        width: 343px;
    		float: left;
    }
     
    #about_me p {
    	margin: 0 0 10px 50px;	
    }
     
    #mission_statement h2,
    #about_me h2 {
    	line-height: 1.5;
    	text-transform: uppercase;
    	font-size: 1.4em;
    	text-align: center;
    }
     
    </style>
    </head>
     
    <body>
    <div id="page">
    <div id="content">
     
    <div id="mission_statement">
    <h2>Mission statement</h2>
    <p>This website is born out of my own frustration at trying to find details of Lindy Hop events in London, particularly when I was just starting out. While there are a couple of listings sites around they don't provide the information I need in the way I want it, so I decided to make my own (as you do).</p>
    </div>
     
    <div id="about_me">
    <h2>About Me</h2>
    <p>I live in South London, I've been dancing lindy for less than a year, and I love it.</p>
    <p>Swing Out London is on twitter and I'll tweet information about the site there, but more useful is the twitter list of people tweeting about lindy.</p>
    <p>Please send any comments, corrections or listings to [email]leveretweb@googlemail.com[/email].</p>
     
    <h2 class="lindy">What is the Lindy Hop?</h2>
    </div>
     
    </div>
    </div>
    </body>
    </html>

    I took away the padding from the divs and add those to the content inside those divs instead!
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  12. #12
    SitePoint Enthusiast
    Join Date
    Aug 2010
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    [QUOTE=DaveMaxwell;4777157]
    1. header could be removed by applying the style to the h1 instead. Though semantically I would move the navigation in there..
    2. You could arguably remove all of these divs: mission_statement, scope, about_me, about_lindy, colophon and development. If you want separators, then give the id to the h2 and apply the style to that h2 instead.
    3. remove the .current spans and apply the class to the list item instead.


    Thanks for the input Dave:
    1. I agree: good point
    2. I disagree: these divs have a semantic purpose of grouping together the heading and paragraph tags into sections. These groupings genuinely are independent sections and without those div tags they are just collections of text.
    3. Yes, you're right... Ruby-on-Rails makes it really easy to generate those links:
      Code Ruby:
      # Links for navigation
        def nav_link(name, *args)
          # Render the link...
          link_to_unless_current(name, *args) do 
            # ...but if the page was current, render a span instead
            content_tag :span, name, :class => "current"
          end 
        end
      ...but I guess I can get rid of the span if I just display the text and detect the fact that the nav is current elsewhere...


    Quote Originally Posted by DaveMaxwell View Post
    Personally, I would remove all the divs I listed above, add one around what is currently the about_me and about_lindy divs, then move it outside the "content" div (possibly renaming it to something else). I would then float the new about div right and the content div left, which would create balance and consistency.
    Ok, this I do have a problem with: Those would not be semantic divs (teh acid test is what id's would you give them, other than "leftcol" and "rightcol"?). The implementation you suggest does not group content together into meaningful chunks, which apart from anything else makes the code less readable.

    I'm bemused by your claim that this would "create balance and consistency" - those are words which I would associate with the visual design, not the way that design is implemented. Could you maybe expand on that comment?

  13. #13
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,099
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just one short question! What is the definition of semantic in your opinion
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  14. #14
    Just Blow It bronze trophy
    DaveMaxwell's Avatar
    Join Date
    Nov 1999
    Location
    Mechanicsburg, PA
    Posts
    7,264
    Mentioned
    115 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by leveretdreaming View Post
    1. I agree: good point
    2. I disagree: these divs have a semantic purpose of grouping together the heading and paragraph tags into sections. These groupings genuinely are independent sections and without those div tags they are just collections of text.
    Re:2 - fair enough, though by common standard, the text that follows a heading is related to the heading itself and the relationship is implied. But I see your point.


    Quote Originally Posted by leveretdreaming View Post
    Ok, this I do have a problem with: Those would not be semantic divs (teh acid test is what id's would you give them, other than "leftcol" and "rightcol"?). The implementation you suggest does not group content together into meaningful chunks, which apart from anything else makes the code less readable.

    I'm bemused by your claim that this would "create balance and consistency" - those are words which I would associate with the visual design, not the way that design is implemented. Could you maybe expand on that comment?
    True, but you also need to strike a balance between what is visual and what is semantic.

    Since you brought it to my attention, I'm not sure why the "about's" are placed where they are, and from a structure flow, I'm not sure i understand how it's ordered. I think it's the "About Lindy" that is throwing me off. It's almost like there should be an "Why this Site" and a "What's Lindy" page which more clearly defines both. Your what this site can have the information your about page has on it, with your "About Me" info at the end - at the right just has no logical sense to it.

    Then on your About Lindy page, you can include a definition of the style, some basic movements, perhaps some photos and/or a video or two.

    Oh, and while I'm thinking on it - would "What this site covers" or some variation make more sense than "What we Cover" since it's only you and there is no we? Either that or change the person talking to be less personal and more generic.
    Dave Maxwell - Manage Your Site Team Leader
    My favorite YouTube Video! | Star Wars, Dr Suess Style
    Learn how to be ready for The Forums' Move to Discourse

  15. #15
    Non-Member
    Join Date
    Jun 2010
    Location
    47°27′35″N 26°18′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Interesting. But more like semi-knowledge



    ********************
    Quote Originally Posted by leveretdreaming View Post
    Why introduce non-semantic tag soup when there's a pure CSS solution?
    Tag soup is probably another thing all together, right?

    And div and span are the most unsemantic tags I know?! Putting id's on them doesn't make them semantic! Nor does the lack of id values makes them unsemantic! That's a beginner mistake.

    ********************


    ********************
    Quote Originally Posted by leveretdreaming View Post
    ...seriously?

    HTML is for content.

    CSS is for presentation.

    Adding extra tags to your Html for presentation alone is not only bad practice, it also results in inflexible heavy pages with markup which is more difficult to read.

    Tag soup (or Div soup) refers to markup which contains lots of tags which have no real meaning in relation to the content and are only there for layout or other presentation. Adding in tags for layout is little better than using a table to lay out your website.

    This is pretty basic stuff...
    ...which you seem to interpret in your own way. Tag soup refers to web pages UAs try to interpret the best they can given the invalid markup found inside those web pages.

    The other term is not div soup, it's divitis. And your web page suffers from it. You have a serious problem considering div a semantic element.

    ********************


    ********************
    Quote Originally Posted by leveretdreaming View Post
    That's quite all right.

    I believe all my markup is semantic (with one exception: the "page" div - couldn't seem to work around that), but if you think there are elements in there which are non-semantic and only there for presentation, by all means let me know: I'm interested to hear your suggestions.

    How about this one :
    Code:
    <p class="flash"></p>
    ********************

  16. #16
    SitePoint Enthusiast
    Join Date
    Aug 2010
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by donboe View Post
    What I mean to say is that the current markup with margin-left, and left properties in the same rule doesn't make any sense to me.
    Ok, that's fine, it's difficult to understand, but if you think about it it's necessary to make the layout work correctly:

    Quote Originally Posted by Paul O'B View Post
    The main issue is that your columns are 3px too big and therefore won't fit side by side.
    The full explanation is in this thread: http://www.sitepoint.com/forums/showthread.php?t=693766

    Without this CSS, Chrome and Firefox will still helpfully fudge the layout engine to make things work ok, while other browsers (e.g. IE7) aren't so helpful and stick to the exact specification of how the layout should work (i.e. this is NOT an IE7 bug).

    In any case, this is not an example of your assertion that I am not correctly separating content from presentation: it's just difficult CSS.


    Quote Originally Posted by donboe View Post
    It also doesn't make any sense to use two different divs for about_me and about_lindy. Those two can easy be combined into one div and use pseudo class to target your second <h2> tag.
    ??? This is standard semantic markup: the purpose of those divs is to group content together into independent sections.

    Your divs on the other hand group content into two meaningless columns: you have thrown away the meaning of the markup and instead used an implementation which suits the chosen layout.

    This is not separation of content from presentation, but some sort of misguided "optimisation" of the markup to suit a particular layout.


    Please correct me if I'm wrong, but you seem to be operating under the serious misconception that best practice is to only use tags which are absolutely necessary to achieve the desired layout.

    On the contrary, best practice is not even think about the layout: first mark up the content Meaningfully and THEN think about how you lay it out. This results in readable, maintainable code.

    Of course, content should only be marked up with the bare minimum of code required to make it meaningful (and no more).

  17. #17
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,099
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    noonnope was just ahead of me.

    But I guess that you're mixing things up. In one of your posts you talk about separation of content and presentation? Which has nothing to do with a semantic vs structural approach
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  18. #18
    SitePoint Enthusiast
    Join Date
    Aug 2010
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by DaveMaxwell View Post
    Re:2 - fair enough, though by common standard, the text that follows a heading is related to the heading itself and the relationship is implied. But I see your point.
    Yes, but these are not just different h2s in the same flow of text, they are genuinely separate sections: do you appreciate the distinction?

    Quote Originally Posted by DaveMaxwell View Post
    True, but you also need to strike a balance between what is visual and what is semantic.
    I'm not going to let you get away with explaining one cryptic comment with another one Still no idea what you're getting at.

    Quote Originally Posted by DaveMaxwell View Post
    It's almost like there should be an "Why this Site" and a "What's Lindy" page which more clearly defines both. Your what this site can have the information your about page has on it, with your "About Me" info at the end - at the right just has no logical sense to it.
    Page Bloat! I agree that perhaps this page needs a more coherent flow, but creating new pages is not the answer: this is Bad user experience! Users don't mind scrolling, but they Do mind clicking.

    Quote Originally Posted by DaveMaxwell View Post
    Then on your About Lindy page, you can include a definition of the style, some basic movements, perhaps some photos and/or a video or two.
    Isn't this saying I should let layout drive the content? Surely that's a poor principle to work on?

    Quote Originally Posted by DaveMaxwell View Post
    Oh, and while I'm thinking on it - would "What this site covers" or some variation make more sense than "What we Cover" since it's only you and there is no we? Either that or change the person talking to be less personal and more generic.
    Good point - thanks for that.

  19. #19
    Just Blow It bronze trophy
    DaveMaxwell's Avatar
    Join Date
    Nov 1999
    Location
    Mechanicsburg, PA
    Posts
    7,264
    Mentioned
    115 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by leveretdreaming View Post
    Yes, but these are not just different h2s in the same flow of text, they are genuinely separate sections: do you appreciate the distinction?
    Yes I do, and if you were going to HTML5 validation, perhaps I'd buy into it but you're not.

    Quote Originally Posted by leveretdreaming View Post
    I'm not going to let you get away with explaining one cryptic comment with another one Still no idea what you're getting at.
    My point is you shouldn't sacrifice visual/usability for semantics. It's kind of like database normalization - there are forms past 3NF, but those forms often cause more harm then good, which is why people stop at 3NF (3rd normal form). Breaking up content into sections may make it more "semantic", but it also can also make it harder to use and navigate because there are more pieces to navigate.

    Quote Originally Posted by leveretdreaming View Post
    Page Bloat! I agree that perhaps this page needs a more coherent flow, but creating new pages is not the answer: this is Bad user experience! Users don't mind scrolling, but they Do mind clicking.
    Nope - I'm saying let the content drive the pages. Talking about Lindy and talking about what the site are supposed to do are completely different topics/subjects, not separate sub-sections to a topic. As such, they don't belong together.

    And my experience is people don't mind scrolling - they just don't do it all that much. They'd rather click a well thought-out and clear subject link than to have to scroll for no apparent reason.

    Quote Originally Posted by leveretdreaming View Post
    Isn't this saying I should let layout drive the content? Surely that's a poor principle to work on?
    Nope, I'm saying provide the content which makes for complete topic coverage (see my previous comments). If someone's researching the Lindy and happen on your site, how do they know what you're talking about?

    Kind of like the directional markers on your front page. I had no idea what those meant until I hovered over them with my mouse - that's an important piece of information that I shouldn't have to do extra work to get to - what if I visited your site with my smartphone which doesn't do mouseovers? Oops....a small key somewhere on that page would have been nice.
    Dave Maxwell - Manage Your Site Team Leader
    My favorite YouTube Video! | Star Wars, Dr Suess Style
    Learn how to be ready for The Forums' Move to Discourse

  20. #20
    SitePoint Enthusiast
    Join Date
    Aug 2010
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by noonnope View Post
    And div and span are the most unsemantic tags I know?! Putting id's on them doesn't make them semantic! Nor does the lack of id values makes them unsemantic!
    Um... the exact opposite of what you said.

    The purpose of div and span is to allow content to be grouped together into meaningful chunks. The fact that they do not have meaning in themselves means that they can be assigned any meaning which there isn't already a tag for, by giving them a meaningful class or ID.
    (I'll quietly ignore the "beginner" remark)

    Quote Originally Posted by noonnope View Post
    Tag soup refers to web pages UAs try to interpret the best they can given the invalid markup found inside those web pages.

    The other term is not div soup, it's divitis.
    I'll gracefully admit that I have mis-used the term Tag Soup. However, a quick search on Google for "div soup" shows multiple occurrences of the term, used precisely in the way I intended. Besides which that was an unnecessary cheap shot.

    Quote Originally Posted by noonnope View Post
    And your web page suffers from it. You have a serious problem considering div a semantic element.
    Ok, I can't see us getting any further on this particular point: I Know I'm right on this point, and you presumably Know you're right as well.

    I'll refer you to my comments above, and leave it at that: http://www.sitepoint.com/forums/show...2&postcount=16

    Quote Originally Posted by noonnope View Post
    How about this one :
    Code:
    <p class="flash"></p>
    This is no longer required. It was used to give an ajax call something to populate. If I had needed to keep using it, I suppose the solution would be to insert something into the DOM on the fly (probably easier in Jquery))

  21. #21
    SitePoint Enthusiast
    Join Date
    Aug 2010
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by donboe View Post
    noonnope was just ahead of me.

    But I guess that you're mixing things up. In one of your posts you talk about separation of content and presentation? Which has nothing to do with a semantic vs structural approach
    Ok, I think you're right - I'm tripping over terminology.

    What I said was something like
    '...your implementation is changing the content to suit the presentation...'
    which isn't quite right.

    Instead what I was really trying to get at is something like:
    '...your suggested implementation throws away the semantics of the markup in order to minimise the number of tags used...'

  22. #22
    Non-Member
    Join Date
    Jun 2010
    Location
    47°27′35″N 26°18′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by leveretdreaming View Post
    Um... the exact opposite of what you said.

    The purpose of div and span is to allow content to be grouped together into meaningful chunks. The fact that they do not have meaning in themselves means that they can be assigned any meaning which there isn't already a tag for, by giving them a meaningful class or ID.

    Really??? But I see EXACTLY what you've said:


    Quote Originally Posted by leveretdreaming View Post
    I disagree: these divs have a semantic purpose of grouping together the heading and paragraph tags into sections. These groupings genuinely are independent sections and without those div tags they are just collections of text [...]

    [...]

    Ok, this I do have a problem with: Those would not be semantic divs (teh acid test is what id's would you give them, other than "leftcol" and "rightcol"?). The implementation you suggest does not group content together into meaningful chunks, which apart from anything else makes the code less readable.

    ^ Ahem... beginner showing off... ahem... The content needs not to be grouped, but structured. Big difference. And divs are not the only ones doing the structuring. And divs are NOT semantic. And semantic attribute values is not the same with semantic html element use. And so on and so forth



    *******************************


    Quote Originally Posted by leveretdreaming View Post
    (I'll quietly ignore the "beginner" remark)
    Please don't, I'll stand behind it proudly And you've just committed a paradox. You didn't quietly ignore it



    *******************************



    Quote Originally Posted by leveretdreaming View Post
    Ok, I can't see us getting any further on this particular point: I Know I'm right on this point, and you presumably Know you're right as well.
    Are you the same guy saying:

    Quote Originally Posted by leveretdreaming View Post
    Besides which that was an unnecessary cheap shot.



    *******************************




    Quote Originally Posted by leveretdreaming View Post
    This is no longer required. It was used to give an ajax call something to populate. If I had needed to keep using it, I suppose the solution would be to insert something into the DOM on the fly (probably easier in Jquery))

    I fail to see how this will make it semantic to begin with. A p having a class flash is a semantic nonsense in my book. But hey, only presumably

  23. #23
    SitePoint Enthusiast
    Join Date
    Aug 2010
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dave, all good points and food for thought. Just a couple of comments.

    Quote Originally Posted by DaveMaxwell View Post
    Yes I do, and if you were going to HTML5 validation, perhaps I'd buy into it but you're not.
    I disagree. My aim is to mark up the distinction between:
    (header1 text1 header2 text2)
    ...where header 2 doesn't make sense outside of the context of following header1

    and (header text)(header text)
    where the two sections are independent.

    Quote Originally Posted by DaveMaxwell View Post
    Kind of like the directional markers on your front page. I had no idea what those meant until I hovered over them with my mouse - that's an important piece of information that I shouldn't have to do extra work to get to - what if I visited your site with my smartphone which doesn't do mouseovers? Oops....a small key somewhere on that page would have been nice.
    Yes, totally aware of that (separate) issue and will be addressing it in a future release by replacing the compass point with part of the postal code (which everyone in London knows and recognises.

  24. #24
    SitePoint Enthusiast
    Join Date
    Aug 2010
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    nonnope I don't think you're prepared to engage properly: you seem to be mainly trying to pick holes in my use of language.

    It doesn't seem worth the effort required to respond.

  25. #25
    SitePoint Enthusiast
    Join Date
    Aug 2010
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'll leave you with the following article:
    http://www.thehandcoder.com/markup/t...ctural-markup/
    Not sure exactly who it's agreeing with, but it's interesting in any case.


Tags for this Thread

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
  •