Safari / Mozilla

Discussion in 'Web Design and Development' started by jer446, Oct 14, 2008.

  1. jer446 macrumors 6502a

    Joined:
    Dec 28, 2004
    #1
  2. JediMeister macrumors 68040

    Joined:
    Oct 9, 2008
    #2
    A lot of web developers run into this issue. First of all make sure that you are running the latest supported version of whichever web browser you're viewing it with. iWeb sites are most compatible with Safari and other web browsers may not support the same coding conventions or framework as Safari does. As far as I am aware of, there isn't a site published (at least in iWeb) that appears exactly the same regardless of browser.
     
  3. SrWebDeveloper macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #3
    Exactly.

    Here's an example of iWeb code from your site which I consider bloated and cross-platform incompatible:

    HTML:
    <div id="id3" style="height: 187px; left: 532px; position: absolute; top: 277px; width: 138px; z-index: 1; " class="style_SkipStroke_5">
                  <div class="text-content graphic_textbox_layout_style_default_External_138_187" style="padding: 0px; ">
                    <div class="graphic_textbox_layout_style_default">
                      <p style="padding-top: 0pt; " class="Caption">EDSGN 100 Section 12<br /></p>
                      <p class="Caption">Liz Kisenwether<br /></p>
                      <p class="Caption"><br /></p>
                      <p class="Caption">Teammates:<br /></p>
                      <p class="Caption">Jeremy Segermeister<br /></p>
                      <p class="Caption">Jen Healy<br /></p>
                      <p class="Caption">Dana Utembayeva<br /></p>
                      <p class="Caption">Jacob Walker<br /></p>
                    </div>
                  </div>
                </div>
    
    First off, the div has an id, class and style - all of which are perfectly legal but good developers merge into one id. This means presentation layer is 100% in the CSS file, and should not be integrated into the content layer as is here. Then you seeabsolute positioning for the div itself using z-indexing which isn't necessary for the simple layout based on what I saw in the browser. Different browsers apply CSS cascade effects and z-index differently, in a nutshell. Then, because you added in each line of text one at a time, iWeb didn't consolidate all the content into one P tag, for example. Each time another block level P tag is added, instead of simply putting the content in a simple DIV with an ID or class assigned the picture (with it's abolute positioning) will not be part of the document flow. And I guess adding a line break within a P tag is required if the CSS removes the default block level formatting of the P tag, but sure looks odd.

    In short, confusing CSS, misuse of P tag, non-consolidated tags, heavy use of absolute positioning bypassing the document flow.

    Of course everyone develops differently, so this is MY OPINION.

    This is why coding by hand to create the basic layout and understanding how to properly position div's and grid out your design is really the key to making better, if not perfect, cross-platform compatible web sites.

    I dare you to mention even some of this stuff to your teacher - heh.

    -jim
     
  4. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #4
    I believe you missed that this is a iWeb created site so he's not working with the HTML and so cannot separate the content and presentation layers. Though I definitely agree with your comments for a non-iWeb site.
     
  5. SrWebDeveloper macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #5
    Understood, I was commenting on the poor code generated by iWeb via the GUI used by the OP. I was hinting the OP needs to learn HTML and CSS so they can understand why the iWeb code is poor, and that poor code renders badly across browser platforms (which addresses his question). The part at the end was poking fun at the teacher who contributed to this situation by allowing the OP to use iWeb in the first place, heh. I was making an underhanded comment about the state of our school systems today - not all schools/teachers, you know what I mean.

    -jim
     
  6. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #6
    Ah, gotcha, I didn't catch that distinction.
     
  7. jer446 thread starter macrumors 6502a

    Joined:
    Dec 28, 2004
    #7
    I appreciate your help, but for the time being, do you now of any solution to fix it in iweb?
     
  8. SrWebDeveloper macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #8
    Me thinks you don't grasp the problem!

    I don't have a "for the time being" solution - the problem is iWeb itself.

    Learn CSS/HTML and how to create layouts manually. Your page is full of automated code that is, to me, spaghetti code (a real mess) which seems less likely to fix in just a few simple changes. I'm not saying it's impossible, but a rewrite is suggested. Why? Because based on examinaton of all of the iWeb code, I believe spending the time to tweak it all and test in different browsers is probable equal to the time it would take it to start over. Maybe even less time, because once you know how to do div's and CSS properly, it's actually LESS CODE as well.

    Of course someone here might jump in and suggest code fixes anyway, or even do your entire homework for you. I think the former is possible but doesn't really help you as a student, and the latter is simply unethical on our part.

    Believe me, if I saw a simple fix, I'd have suggested it from the outset, so this is not a matter of me being judgemental and holding back advice.

    -jim
     

Share This Page