[macvillage.net]

Ok, I am working on having a page work perfectly with every big or sort of big browser (Netscape 4.x, Mozilla, IE, OmniWeb, Opera, and maybe iCab) That's right, I am attempting to target them all equally, but so far not much sucess.

I am hoping some HTML guru can figure out the missing links making this happen.

The current problems (to be read like a radio announcer)

Our first problem today ladies and gentlemen comes to us from a browser known as Internet Explorer.

Exibit A: http://media.accettura.com/rja/ie5.jpg

Notice how the blue box is extra tall, and how the gray area extends to far down. I know the text in the blue box is too big, and that needs to be brought down, but by how much?


Our second problem today comes to us from the pits of heck (iCab) My least favorite browser if you can't tell. http://media.accettura.com/rja/icab.jpg

Notice the gray space. There was a fix implemented involving removing the <P> tags from that table, but the result was messy in Mozilla... thus it was removed.

Netscape 4.x, OmniWeb, and Mozilla are all fine... so is Opera.


So my problem is really just getting these pages to look good for all you iCab and IE users.

Any ideas?

http://www.macvillage.net/news/

[ 03-28-2002: Message edited by: macvillage.net ]

[Simon Mundy]

What's the URL? It'd help if we could see the source code.

[macvillage.net]

(can't believe I forgot that)
http://macvillage.net/news/

[infiniti]

Well, this probably isn't what you want to hear, but my suggestion would be to get the site looking great in the most commonly used browsers, and then use a scripting language of some kind to fix the flaws with the rest of the browsers. If you have access to PHP (the langauge I'm most familiar with) or some other dynamic scripting language (I noticed you're using SHTML), you can usually determine the browser used by the end user, and modify the HTML code sent to the user. In the worst case scenario, if you don't have access to server-side scripting, you can always use JavaScript. By doing some creative things with the "navigator" object, you can determine the browser name and version, and add code based on that information.

For instance, the following code displays the name and version of the web browser being used.
<BLOCKQUOTE><font size="1"face="Geneva, Verdana, Arial">code:</font><HR><pre><font size=1 face=courier>
<script langauge=<font color = red>"JavaScript"</font> type=<font color = red>"text/javascript"</font>>
document.write(window.navigator.appName);
document.write(<font color = red>"<br>"</font> );
document.write(window.navigator.appVersion);
</script>
</font></pre><HR></BLOCKQUOTE>

I hope this helps you to accomplish your goal of a (nearly) perfect looking page in every browser. In my opintion, it would be an impossible task without some kind of scripting to make up for the many different browser rendering techniques.

Best of luck,
Steve

[EDIT]If you need any more help with this, please private message/email me using the buttons at the top of this message. My post may have been a bit vague about what I was talking about.[/EDIT]

[ 03-29-2002: Message edited by: infiniti ]

[Simon Mundy]

Originally posted by macvillage.net:
<STRONG>(can't believe I forgot that)
http://macvillage.net/news/</STRONG>

I'm a little stretched for time (and I'm not too thrilled to be working through a long weekend) but just having a quick glance at your code, it would seem there's too many redundant &lt;p&gt; tags being used. Don't use &lt;p&gt; tags to enclose a table - it will be ignored anyway, and it's bad practice. Don't use empty &lt;p&gt; tags inside a &lt;td&gt; - paragraphs can introduce unwanted spacing in some browsers. Use a 1x1 spacer gif instead.

And don't insert an &lt;img&gt; within a &lt;p&gt; unless you really want that image to be inline within some copy. Netscape can really screw around with your line spacing unless you set the alignment of your image to either 'left' or 'right'

You don't need a server-side script to achieve full compatibility if you're only using low-level browser support. It's when you're using DHTML that it really helps.

Cheers

[macvillage.net]

Good points all around.

Here is my priority list as of right now (posted this last night in another forum with a debate over what to build for)

Here is what I build to:

Mozilla
IE 5/6
OmniWeb
Netscape 4.x
Opera


Reasoning for each and their order:

Mozilla is very standards compliant. If it works good in Mozilla, odds are it's pretty good in the other browsers. So I code for it first. So far that theory hasn't failed me.

IE 5/6 simply because it is popular

OmniWeb is a popular Mac OS X browser, and isn't really that hard to design for until you use some crazy CSS... then it gets a bit crazy. JS support is now from Mozila, so that is easy. It typically renders similar to IE 5/Mac, just with Antialiased text.

Netscape 4.x is still deployed in a large sense in businesses as well as in educational institutions due to easy deployment. It's can be a pain to code for, but what I found is that if you aren't using too much CSS, it normally comes out OK.

Opera my second least favorite to code for. It's stuborn, and just doesn't comply with standards that well from what I have seen. I try to make pages usable, but don't take to much effort to remove all little errors.


iCab, the Mac OS browser for those who lost their mind. I hate it, and no longer make any efforts towards it. It's terrible with rendering. Unless you code specifically for it, forget it. If you want to see a site that works good with it, use the way back machine and load Google from a few years back: http://web.archive.org/web/199812022...ww.google.com/

That is about as fancy as you can get.

For any site I would code for:
Mozilla
IE 5/6
Netscape 4.x

in that order.


For a little more effort you can have:
Mozilla
IE 5/6
OmniWeb
Netscape 4.x
Opera

Which is what I recommend.

[reader50]

iCab is my primary browser.

Try removing the matching P tags on line 148 and 277 (HTML code listing). I'm not sure what you meant by removing the P tags from the table messed up Mozilla's rendering, perhaps you removed additional P tags inside the table? I tried the modded page in Mozilla, and it looked fine.

My page editing is done in BBEdit Lite, so I can't speak for GUI editors. After seeing how they butchered my source code, I've sworn off them. BBEdit may take a little longer, but the code stays clean. And only the tags I want to edit get changed.

[macvillage.net]

Originally posted by reader50:
<STRONG>iCab is my primary browser.

Try removing the matching P tags on line 148 and 277 (HTML code listing). I'm not sure what you meant by removing the P tags from the table messed up Mozilla's rendering, perhaps you removed additional P tags inside the table? I tried the modded page in Mozilla, and it looked fine.

My page editing is done in BBEdit Lite, so I can't speak for GUI editors. After seeing how they butchered my source code, I've sworn off them. BBEdit may take a little longer, but the code stays clean. And only the tags I want to edit get changed.</STRONG>

Yep, that seems to make a difference. In an update in a week or so, I hope to make the change site wide. It takes some time for me to review and test throughly, then I like to wait until I have a few mods before I actually implement the change. Thanks for bringing the site back to iCab a bit.