SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2009
    Location
    Colorado, USA
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    a question about browsers

    Hi all,

    I am a beginning web designer. Recently I built a site to promote a book I wrote (unrelated to anything technological). I built it on a Mac, and it looks fine through Safari and Firefox.

    Went to the local library to view it on a PC. It looks okay on Mozilla/Firefox there (although on one of its pages, video windows won't load). But my big concern is that when I look at it through IE (v. 7), five of the site's nine pages are broken. I can't figure out why.

    Anyone willing to take a look and offer an opinion? I am new to this forum and don't think I can post URLs yet, so I'll have to be sneaky about it. The URL is something like this:

    home dot comcast dot net slash tilde johnkelin slash praise dot html.

    No, I never bothered with getting my own domain name.

    There is a horizontal menu bar. The "About the Author" page is a good example of something horribly wrong viewed through IE v. 7 (and probably other versions, too!). The menu item labeled "Movie Trailer" had the video windows that wouldn't load.

    Thank you,

    John Kelin

  2. #2
    Follow Me On Twitter: @djg gold trophysilver trophybronze trophy Dan Grossman's Avatar
    Join Date
    Aug 2000
    Location
    Philadephia, PA
    Posts
    20,578
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    The HTML's too wrong to start diagnosing the CSS: your </div>'s don't match up with your <div>'s which results in some wonky inheritance. Your entire body is still part of #header and #left_column, for example.

    HTML Code:
     		</div><!-- end of tagline div -->
    ^ actually closes <div id="navbar2">, not tagline

    HTML Code:
    </div><!-- end of header div -->
    ^ actually closes <div id="tagline">, not header

    HTML Code:
    </p
    
    </div><! -- end of navigation div -->
    ^ Closes nothing due to the malformed </p>, would close <div id="left_column"> and not #navbar2 anyway.

  3. #3
    SitePoint Addict ChiefLee's Avatar
    Join Date
    Apr 2009
    Location
    Lawrence KS
    Posts
    264
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is as good of time to remind people to test, test, test. And when you're done, test some more. We test on Windows, Macs and Linux machines. And pretty much all standard browser types. We start by programming for basic W3C standards, then adapt from there.
    Add your logo to Pocket Folders.

  4. #4
    SitePoint Enthusiast
    Join Date
    May 2009
    Location
    Colorado, USA
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    Thank you very much for taking the time to look at the markup and note what I guess are glaringly obvious errors.

    I certainly defer to your expertise, and I am going to fix the problems you pointed out. But would some of these mistakes make that much difference in viewing through different browsers?

    What I mean is, some of these mistakes are within comments, which might confuse ME in going through the markup somewhere down the road. But wouldn't a browser recognize first that a </div> closes out a <div>, even if I'm mis-identifying it in a comment?

    I know the problems are greater than that, but I"m wondering.

    Thanks again.

    John Kelin

    Quote Originally Posted by Dan Grossman View Post
    The HTML's too wrong to start diagnosing the CSS: your </div>'s don't match up with your <div>'s which results in some wonky inheritance. Your entire body is still part of #header and #left_column, for example.

    HTML Code:
     		</div><!-- end of tagline div -->
    ^ actually closes <div id="navbar2">, not tagline

    HTML Code:
    </div><!-- end of header div -->
    ^ actually closes <div id="tagline">, not header

    HTML Code:
    </p
    
    </div><! -- end of navigation div -->
    ^ Closes nothing due to the malformed </p>, would close <div id="left_column"> and not #navbar2 anyway.

  5. #5
    #titanic {float:none} silver trophy
    molona's Avatar
    Join Date
    Feb 2005
    Location
    from Madrid to Heaven
    Posts
    8,271
    Mentioned
    252 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by johnkelin View Post
    I certainly defer to your expertise, and I am going to fix the problems you pointed out. But would some of these mistakes make that much difference in viewing through different browsers?
    In summary: yes

    A simple tag that's not been closed properly can make the whole difference. Some browser will make their own interpretation and guess right, others with more strict standards may decide that guessing is not part of the job and display it the way they wish.

  6. #6
    SitePoint Enthusiast
    Join Date
    May 2009
    Location
    Colorado, USA
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    Thanks for the quick reply. I absolutely see what you are saying, in particular the not-properly-closed "</p" tag that was pointed out previously. I have corrected those, and will check back through the library PC/IE later today to see if that's what had the thing collapsing like a house of cards. (I suspect it isn't quite that simple, though.)

    However, in my previous post I was specifically asking about the erroneous comments in the markup, which were pointed out. Would THOSE make a difference? I should think not, because the </div> was correct, even if the comment wasn't (although I may have had, and may still have, an extraneous <div> or </div>).

    Needless to say, I could be completely off the mark.

    Thanks again for the help, and thanks for the patience.

    Quote Originally Posted by molona View Post
    In summary: yes

    A simple tag that's not been closed properly can make the whole difference. Some browser will make their own interpretation and guess right, others with more strict standards may decide that guessing is not part of the job and display it the way they wish.

  7. #7
    #titanic {float:none} silver trophy
    molona's Avatar
    Join Date
    Feb 2005
    Location
    from Madrid to Heaven
    Posts
    8,271
    Mentioned
    252 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by johnkelin View Post
    However, in my previous post I was specifically asking about the erroneous comments in the markup, which were pointed out. Would THOSE make a difference? I should think not, because the </div> was correct, even if the comment wasn't (although I may have had, and may still have, an extraneous <div> or </div>).
    And the answer is, again, yes

    Let me give you a couple of examples

    Code:
    <body>
    <div id="header>
    
       <img src="whatever.jpg" alt="whatever" title="whatever2>
      <p>Some text here</p>
    
    <div id="content>
      <h1>Title</h1>
      <p>some text</p>
    
    <div id="something">
    
    <p>more text</p>
    </div>
    </div>
    </body>
    Here I have 3 divs, but I forgot to close one of them, the one related to the header, which should go before the content starts. Because the first </div> is supposed to close the latest div opened, the browser will asume that the first </div> closes the <div id="something"> and that the second </div> closes the <div id="content">.

    Because I forgot to close the <div id="header">, the browser will assume that the header will close just before the </body>, and that it is the container for all the elements created after opening the header div which is not true.

    Only because I forgot a </div> just before I opened the <div id="content">, I changed the whole flow of the document, and the dimension and sizes of the boxes.

    Another example

    Code:
    <!--div header-->
    
    <div id="header>
    
       <img src="whatever.jpg" alt="whatever" title="whatever2>
      <p>Some text here</p>
    </div><!-- end of header
    
    <div id="content>
      <h1>Title</h1>
      <p>some text</p>
    
    <div id="something">
    
    <p>more text</p>
    </div>
    </div>
    </body>
    In this case, I closed the header div when I should, but I forgot to close the comment, a simple note to myself to remind me that the header content ended at that point.

    The browser can assume that, because my comment has not been closed, it is a multiline comment and treat the rest of the code as part of the comment itself, even when it is real code.

    I hope that this makes it clear.

    Quote Originally Posted by johnkelin View Post
    Thanks again for the help, and thanks for the patience.
    That's what we're here for

  8. #8
    SitePoint Enthusiast
    Join Date
    May 2009
    Location
    Colorado, USA
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks again!

    Dang, this stuff can be tricky.

    Quote Originally Posted by molona View Post
    And the answer is, again, yes

    Let me give you a couple of examples

    Code:
    <body>
    <div id="header>
    
       <img src="whatever.jpg" alt="whatever" title="whatever2>
      <p>Some text here</p>
    
    <div id="content>
      <h1>Title</h1>
      <p>some text</p>
    
    <div id="something">
    
    <p>more text</p>
    </div>
    </div>
    </body>
    Here I have 3 divs, but I forgot to close one of them, the one related to the header, which should go before the content starts. Because the first </div> is supposed to close the latest div opened, the browser will asume that the first </div> closes the <div id="something"> and that the second </div> closes the <div id="content">.

    Because I forgot to close the <div id="header">, the browser will assume that the header will close just before the </body>, and that it is the container for all the elements created after opening the header div which is not true.

    Only because I forgot a </div> just before I opened the <div id="content">, I changed the whole flow of the document, and the dimension and sizes of the boxes.

    Another example

    Code:
    <!--div header-->
    
    <div id="header>
    
       <img src="whatever.jpg" alt="whatever" title="whatever2>
      <p>Some text here</p>
    </div><!-- end of header
    
    <div id="content>
      <h1>Title</h1>
      <p>some text</p>
    
    <div id="something">
    
    <p>more text</p>
    </div>
    </div>
    </body>
    In this case, I closed the header div when I should, but I forgot to close the comment, a simple note to myself to remind me that the header content ended at that point.

    The browser can assume that, because my comment has not been closed, it is a multiline comment and treat the rest of the code as part of the comment itself, even when it is real code.

    I hope that this makes it clear.


    That's what we're here for

  9. #9
    SitePoint Enthusiast
    Join Date
    May 2009
    Location
    Colorado, USA
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I wanted to thank those who took the time to answer my questions about a problem I was having viewing my web site through Internet Explorer.

    It appears the problem is resolved! The issues I was having when I looked through it yesterday have been corrected, now that I have addressed the errors that were pointed out by those of you responding to my SOS.

    There is still one curiosity -- which is that several videos I have on the page marked "Movie Trailer" won't load. This is only a problem viewing through a PC at the library, in both IE and Mozilla Firefox (I'm on a Mac at home). It's curious because the page is just a handful of links to stuff posted on YouTube; I'm wondering whether the library might have blocked some of this stuff. But that is beyond the range of this site!

    The web site I designed is to promote a book I wrote. But if you are able to overlook these commercial intentions, I would invite you to take a look at the site and comment, if you wish -- although I will acknowledge right here it is a very humble design that will NOT knock your socks off!

    I don't think I"m able to post URLs here yet -- haven't hit that magic number of ten posts -- so follow this...

    home dot comcast dot net slash tilde johnkelin slash praise dot html

    Whether anyone looks or not -- thanks again!

    John Kelin

  10. #10
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Here's the link:

    http://home.comcast.net/~johnkelin/praise.html

    It's actually quite nice, congratulations (though I'm not fond of that green...). Validating it finds 100 errors (!), though I imagine most of those are cascading errors. But if you want your site critiqued, there's the Website Reviews thread. You'll need to post this in there. You'll also need to do three reviews before you can put your site up for critiquing.

  11. #11
    Follow Me On Twitter: @djg gold trophysilver trophybronze trophy Dan Grossman's Avatar
    Join Date
    Aug 2000
    Location
    Philadephia, PA
    Posts
    20,578
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Black Max is correct, please don't try to turn this thread into a review of your site. If you need help fixing the HTML further feel free to ask about that.

  12. #12
    SitePoint Enthusiast
    Join Date
    May 2009
    Location
    Colorado, USA
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry! My mistake. Won't happen again.

    What are "cascading errors"?


    Quote Originally Posted by Black Max View Post
    Here's the link:

    http://home.comcast.net/~johnkelin/praise.html

    It's actually quite nice, congratulations (though I'm not fond of that green...). Validating it finds 100 errors (!), though I imagine most of those are cascading errors. But if you want your site critiqued, there's the Website Reviews thread. You'll need to post this in there. You'll also need to do three reviews before you can put your site up for critiquing.

  13. #13
    Follow Me On Twitter: @djg gold trophysilver trophybronze trophy Dan Grossman's Avatar
    Join Date
    Aug 2000
    Location
    Philadephia, PA
    Posts
    20,578
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by johnkelin View Post
    What are "cascading errors"?
    Where one error results in making a lot of the markup after the error wrong even though it'd otherwise be correct.

    Like if </p </div> resulted in the <div> and </div> count not matching up for the whole rest of the document because of the </p.

    So fixing one error may fix many that the validator reports.

  14. #14
    SitePoint Enthusiast
    Join Date
    May 2009
    Location
    Colorado, USA
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks. That was my guess, some sort of domino effect from one error. Which is what I did earlier.

    Quote Originally Posted by Dan Grossman View Post
    Where one error results in making a lot of the markup after the error wrong even though it'd otherwise be correct.

    Like if </p </div> resulted in the <div> and </div> count not matching up for the whole rest of the document because of the </p.

    So fixing one error may fix many that the validator reports.

  15. #15
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by johnkelin View Post
    Sorry! My mistake. Won't happen again.
    You didn't know. No worries.

    Quote Originally Posted by johnkelin View Post
    What are "cascading errors"?
    It's not any sort of official term, it just works for me.


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
  •