Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

Safari / Mozilla

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.
 
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
 
SrWebDeveloper said:
Here's an example of iWeb code from your site which I consider bloated and cross-platform incompatible:
Click to expand...

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.
 
angelwatt said:
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.
Click to expand...

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
 
SrWebDeveloper said:
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
Click to expand...

Ah, gotcha, I didn't catch that distinction.
 
I appreciate your help, but for the time being, do you now of any solution to fix it in iweb?
 
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
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back