SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Enthusiast peterkp's Avatar
    Join Date
    Mar 2009
    Location
    Auckland, NZ
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Different browser layouts

    I have a web page that displays differently on IE7 and Firefox.

    The main problem is that line breaks are displaying as I want them in IE, but not on Firefox.

    I have several examples of:
    <p>
    text1 </br>
    text2 </br>
    text3 </br>
    </p>

    Firefox is showing this on 1 line as:
    text1 text2 text3

    I'm lost - would appreciate advice.

  2. #2
    Follow Me On Twitter: @djg gold trophysilver trophybronze trophy Dan Grossman's Avatar
    Join Date
    Aug 2000
    Location
    Philadephia, PA
    Posts
    20,580
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    The tag is <br>

    The self-closing form for XHTML is <br />

    So Firefox is the one displaying the page correctly, as there is no </br> tag

    Running your HTML through the W3C Markup Validator can help you identify mistakes

  3. #3
    SitePoint Enthusiast peterkp's Avatar
    Join Date
    Mar 2009
    Location
    Auckland, NZ
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ahh... thanks for your reply. I seem to have picked up a bad habit.

    I followed your validation link, and I scored 398 errors(!). So there's some work to do, but my main concern was when I read the first 10 or so items, none of them made any sense to me. Got some practical advice for a person who's very new but keen to learn and do it right?

  4. #4
    #titanic {float:none} silver trophy
    molona's Avatar
    Join Date
    Feb 2005
    Location
    from Madrid to Heaven
    Posts
    8,259
    Mentioned
    245 Post(s)
    Tagged
    1 Thread(s)
    Practice!

    If you have 398 errors... that's a lot! (although I've seen them worse, so don't worry)

    Simply go through the list and fix one by one. Chances are that most of them are due to little silly errors like the one before. And since for each <br> element that you have wrong, that would be an error, it is more than possible that making little changes to your code the number will drop dramatically.

  5. #5
    SitePoint Enthusiast peterkp's Avatar
    Join Date
    Mar 2009
    Location
    Auckland, NZ
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your encouragement. And yes, fixing the <br> issue dealt with 150 errors in one go! So I'm getting there steadily.

  6. #6
    SitePoint Wizard
    Join Date
    Jul 2003
    Location
    Kent
    Posts
    1,921
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Occasionally an error at one point makes correct code appear wrong eg failing to close a pair of " " means that what should come after the closing " is considered to be part of it and generates errors, then the next opening " is read as the closing one, and so on.

    you don't have 150 <br> tags on a page do you???
    That sounds like you are doing things the wrong way - do you know what an unordered list is for example? Using <br> to simulate a list is the wrong way to work.

  7. #7
    SitePoint Enthusiast peterkp's Avatar
    Join Date
    Mar 2009
    Location
    Auckland, NZ
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've just counted - I have 96 <br> elements on this page.

    The page is a guitar teaching resource. About half the <br> elements are for a song with lyrics and chords - to get the chord symbol correctly aligned over the correct word. The html and css code was suggested for me in another thread on this site.

    The other half is for the layout of guitar tabs something like this:

    <p class="tab">
    |--3--(4)-----|<br />
    |--0----------|<br />
    |--0----------|<br />
    |--0----------|<br />
    |--2--(2)-----|<br />
    |--3--(3)-----|<br />
    </p>

    and then I set css for the tab class (main consideration is monospace so the numbers and bar markers line up vertically).

    Feel free to critique that if there are issues I don't know about.

  8. #8
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    I might be wrong but perhaps an unordered list may serve the list of tab notes better?

  9. #9
    SitePoint Enthusiast peterkp's Avatar
    Join Date
    Mar 2009
    Location
    Auckland, NZ
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Given Dr John's comments, I expected an answer like that. But I'm not sure why that would be. My layout seems to display correctly using <br> tags. If someone could explain why a list is better...

  10. #10
    #titanic {float:none} silver trophy
    molona's Avatar
    Join Date
    Feb 2005
    Location
    from Madrid to Heaven
    Posts
    8,259
    Mentioned
    245 Post(s)
    Tagged
    1 Thread(s)
    To be honest, I don't know which approach is better for this particular case... We try to use semantical markup, that is, related to the meaning of the content we use... Maybe, because this is a list of chords, it may be more semantical to use lists instead of just a paragraph with br's.

    Semantical markup is, in general, easier to work with and it also improves SEO.

  11. #11
    SitePoint Enthusiast peterkp's Avatar
    Join Date
    Mar 2009
    Location
    Auckland, NZ
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If I understand you, good markup will match content. eg, a list tag should be used (and only used) for content that is a list in real life.

    If so, I think I'll stick with my current markup. This is because I don't think of a guitar tab as 6 lines, but as one tab. You don't read to the end of the first line then back to the start of the second line. You read all six lines as a unit, character by character, left to right. In real life a guitar tab is more like a staff of sheet music which happens to have multiple lines but you read it as one staff, not separate lines.

    I appreciate the continuing feedback and will let you know if there are any further issues.


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
  •