Topic: eeEEkK Mac-icide & CSS

I'm about to go NUTS!

Why does nothing work right on the #@% Mac?! I can have everything looking great in both Netscape and IE on the PC, but on the Mac it does weird things. How CAN you make any money this way?

This is the page I am having so much trouble with. Wheeler Construction

I know it doesn't have the appropriate Meta Tags yet, nor CSS....I'm working on that. But if anyone can figure out why the alignment problems in Mac Netscape it would be great. At this point I'm probably scapping the whole thing and setting it up totally different, 'cause I can't figure it out. You can also check out the rest of the site to tell me what else doesn't work.....I don't think I will ever get this site finished!

NOW FOR CSS STUFF

Is there a basic CSS template that some of you use for a starter that is "guaranteed" to work in Netscape4x and IE 5x on BOTH Mac and PC? (Now that is probably the dumbest question in history!)

At this point I'm ready to commit Mac-icide!

e-maestro has a bloody forhead!

[This message has been edited by e-maestro (edited 02-11-2002).]

[This message has been edited by e-maestro (edited 02-11-2002).]

Do mean it has problems in Mac IE? Because I've never seen a problem in Netscape unique to a platform, they share a common codebase, while IE has a completely separate development team for the Mac.

Also, it looks fine in NS 4.78 on my Mac, but it has that horizontal bar image overlapping some text in IE 5.0

When I get some time I can go through your code to try to debug it on the Mac, but for now I should just mention a few things. First of all, different versions of IE have as many differences as the difference between platforms. When you say you have it working fine on the PC, I hope you have 3 PCs so you can test it in IE 5, 5.5 and 6.0. There are obnoxious differences between seemingly close versions that mostly show up in the CSS formatting.

This leads in to the 2nd part of your problem. A common template. Well, I use CSS only for font appearances and block-level formatting (ie. no positioning attributes). I still use tables for layout. Right off the bat there is an un-reconcileable difference between browsers in the way they handle margins on lists and headings. Namely, Netscape has a tendency to assume base margins that are greater than 0. So if you set the margin-bottom to 0 for a heading tag, it still has a space underneath it in NS, but not IE. With lists it's even hairier because I believe there are more than 2 possible 'assumed' margins and they aren't easy to sort out. Using a javascript to set variable values for these attributes only complicates matters.

The best solution for these problems is to use <div>s for all your blocks. So instead of <h1> you would use <div class="whatever">. And instead of <ul><li></li></ul> you would use <div class="someotherthing"><li></li></div>. This solves many problems because the varying browsers don't make dumb assumptions about base-values for <div>s. Of course this means your entire page needs to be coded using <div>s instead of the standard tags which makes it difficult to use HTML editors.

On my site I have one base stylesheet that is always loaded (thus letting me see its application in Dreamweaver), but depending on the browser, other stylesheets with properties that override the basic stylesheet are loaded. This is all done server side with PHP so that I don't need to change every single documents contents when I discover a new exception I need to add. This system is far too complex for a small website, but it illustrates the difficult decisions and compromises that must be made.

The next revision of my site is a simpler design that is XML based, where a page can be viewed in a number of different formats that are user-based (ie. high-bandwidth, low-bandwidth, various resolutions). I am combining this with an intelligent content-management system that will provide mechanisms for keeping 100s of pages up-to-date by giving them expiration criteria that the system automatically checks, then notifies the appropriate web person when the page needs to be updated. It will also do such tasks as verifying unique titles and meta-tags for each page. Of course, with such an ambitious project, I am also in search of a CSS system that will make my page look good on 99% of browsers. Using <div>s for more consistent margin control will play a big part in this, but ultimately the only answer is to drop the bells and whistles, and define all the possible elements of your design in way that you can create a 'test suite' which can be used to verify the appearance of your website on any browser quickly.

I've learned the hard way, that if you make a design, and debug it for all browsers, it will only take you as far as the current elements take you. In other words, if you find yourself needing to add a new style of heading or table, for example, adding it after the fact may introduce problems that can only be solved with very messy javascript or server side code. Now that I've been working on the same site for 2 years, I feel like I finally have the understanding of the subject to be able to define a set of elements that will encompass everything we need to communicate.

In short, I think often you have to design an entire site just to understand what elements it has, so that you can go back and come up with a cross-browser design that supports all those elements. However, with real world deadlines, sometimes you just have to make sure it works in your client's browser

-jiblet

WOW! THX Jiblet

Problem is I don't think I understood everything you said...though I got most of it. I would like to see your site.

I am just learning CSS and also have avoided trying to do anything besides font definition in it since I only hear horror stories about CSS cross-browser...why add to the list of head aches!

Tables can be enough of a night mare. I ended up trashing my "right floating" tables of the images on the page and just put every thing in 3 cell tables. The text can't flow around the image, but it is not worth the trouble. How the exact same code can do different things on the same page I cannot understand. Here is my solution.

Yes, the problem only seemed to appear in Netscape in the Mac. Seemed fine on the PC.

About <DIV>s, I guess I need to understand them better. They have seemed like nothing but a pain to me, so have always ended up deleting them.

CSS...would there be any chance of seeing your "base stylesheet"? All the server side stuff sounds cool, but I'm not there yet. That's the stuff I would have no idea how to do. Oh well, maybe someday.

I understand about just making stuff look good for your client. Well, in this case, he has a Mac! Need I say more! JA

Again THX for the help. And if you don't mind sending me links to your site and also sharing that style sheet. Instead of a list of all the stuff that doesn't work accross browsers, I would like to see a list of stuff that does, even if it is very abreviated. I don't see what the point of doing stuff that you know will have problems.

e-maestros head is healing.

e-maestro: A few recent tests of new CSS over at the GN have shown (thanks to Steve's ever useful testing on the Mac) that there are problems with working cross platform beyond the IE/Win and IE/Mac issues that are common knowledge (I had always assumed that if you get it to look OK in the Big Three and NS4.x you'd be fine cross platform but clearly not). I don't yet have any clear answers to where the problem is so I can't be much help, however it has 'intrigued' me enough to have a real go at the problem with some test pages (and some nice Mac owner to do the testing!!) I just don't have the spare time at the moment but it is on my 'To Do' list.

Most people use the examples given by Glish:
http://glish.com/css

as a starting point for CSS-only layouts.

Emps

AFTER 9 MONTHS MY DSL IS FINALLY BACK ON!!!!!!!!!!!!!!!!!

Okay, now that I got that out of the way. My sites are:
http://www.coffman.umn.edu/
& http://www.spsc.umn.edu/

The main stylesheet is:
http://www.coffman.umn.edu/coffman.css

Then there are 2 other stylesheets that get loaded dynamically depending on the browser:
http://www.coffman.umn.edu/coffman2.css http://www.coffman.umn.edu/coffmanns6.css

My stylesheets are a mess, because they weren't clearly designed from the beginning. A couple points of interest though:

Always use px for font sizes and you will get the same sizes across platforms.

Notice that <ul> is defined with margin-left : -20px in the first stylesheet, 20px in the 2nd, and -20px again in the last one. The default stylesheet is designed for NS4, with standard changes for all standards-compliant browsers in coffman2.css. For some reason though, Netscape 6 (mozilla) uses the old left margin default like NS4 even though for most purposes it is the same as IE5 Mac.

These stylesheets don't yet incorporate PC-specific modifications for header margins. One of the ugliest things about my sites are that the spaces under <h1>s - <h6>s vary widely from computer to computer. My site is basically optimized for IE 5 Mac and Mozilla, anything else will probably not be up to my standards.


-jiblet

THX Jiblet for the links to your style sheets, I'm taking a look at them. Also the sites, some interesting graphics you have there.

One thing I can't figure out is how you did those long "pipe" borders on the coffman.umn site. I looked at the image list and don't see anything. I don't see a link anywhere to a background image either. Maybe I am missing something basic, but I really don't understand how you did it. Do those dynamically resize with the varying page lengths?

Emps....

Have you ever tried the glish.com site in NS4.7? What a disaster. I just don't see the point. I think there are still a heck of a lot of people using NS4.x . . . I wish there weren't, but I don't know at what point we say "to hell with NS 4.x" and don't worry about it anymore. It is nothing but a pain. I don't know what the stats say but I don't think it is dead yet. I've seen it on plenty of computers around here.

I can see using CSS for text formating, but not for a whole lot more at this point. Maybe I will see the point more as I get into it.

e-maestro

Yes, the extendable pipes on the side were basically a test of my own table design ingenuity. In retrospect it is a cool idea for a small site, but when maintaining a large site where dissemination of large quantities of information is the goal, that 76 pixels of real estate could be better used by a simpler design.

The code you are looking for is this:

<td width="76" background="images/marginbg.jpg" valign="top"><img src="images/marginbreak.jpg" width="76" height="44"></td>


As far as Netscape 4 is concerned, yes, it holds you back from 90% of the cool things you could do that would work in IE5+ and Netscape 6. Not to mention all the crazy fixes you have to add to get it to format things the same way. My philosophy is that you shouldn't worry if things don't look great in NS4, but the content should be readable. A good example would be my sitemap:
http://www.tcsu.umn.edu/sitemap.php

Pardon the weird dynamic style highlighting crap. I was trying to show which pages are related to other pages, but I know it's too abstract for people to understand. When I get a chance I plan on scrapping it and replacing it with pop-up descriptions of the pages.

-jiblet