Sunday, June 25, 2006
« CSLA .NET 2.0.2 available | Main | CSLA is "it" »
Web design woes

I've never pretended to be a UI expert - especially not for the web. (I am very good at designing heads-down data entry screens that minimize keystrokes and avoid the use of the mouse - but that's far from being good at making things pretty)

So I'm trying to create an updated version of www.lhotka.net. To do this I'm using ASP.NET 2.0 master pages, and avoiding all use of tables - only div statements are allowed. This way I can use ASP.NET 2.0 theme/skin support to get the appearance (working with the div layout in the master page). And it looks pretty good in IE too. After a lot of time figuring out how css works - and how it cascades settings from one level down to the next - it finally looks pretty decent.

So then I open it in Firefox. Apparently FF doesn't follow the same rules at all. Settings don't cascade from one div to a lower div. Settings like height: 100% apparently are ignored entirely. And my content area refuses to sit beside the nav area, and when I manage to get them sitting side-by-side the width is different from the header - since the width apparently didn't cascade from the top-level div tag's style.

No wonder web development is so damn expensive. Doing something simple like laying out a standard page with header/nav/body is apparently radically different between IE and FF. Worse yet, FF must use a totally different mental model... Where Bill Clinton wanted to know the meaning of "is", it appears that FF needs to know the meaning of "cascade"...

Sunday, June 25, 2006 12:52:10 PM (Central Standard Time, UTC-06:00)  #    Disclaimer  |  Comments [14]  | 
Sunday, June 25, 2006 1:55:49 PM (Central Standard Time, UTC-06:00)
Try this to help with your CSS woes. And, BTW, it usually IE that sucks with standards, not firefox.
http://jigsaw.w3.org/css-validator/validator-uri.html
DM
Sunday, June 25, 2006 1:59:02 PM (Central Standard Time, UTC-06:00)
Rocky,
Typically, web designers start with Firefox and then tweak it to work in IE. This usually works better because Firefox follows the W3C standards better than IE. This allows the designer to build a base that works across more browsers in one shot and then tweak it for specific browsers.
y0mbo
Sunday, June 25, 2006 2:08:30 PM (Central Standard Time, UTC-06:00)
Hi Rocky,

One thing that might be catching you out in FF, and is actually easy to change:

In both FF and IE the Height: 100% and Width: 100% are calculated based on the containing element. However, in FF they use EVERY containing element. This includes the HTML, Body, and any Form elements. So, you need to give them heights and widths - typically 100% as that what IE treats them as. Try adding the following to the top of your stylesheet and see how that affects things for you:

HTML
{
Height: 100%;
Width: 100%;
}

Body
{
Height: 100%;
Width: 100%;
}

Form
{
Height: 100%;
Width: 100%;
}

Also, take a minute to read a bit about DocTypes. Choosing (and declaring) the right one is pretty important in getting the desired results between the various browsers.
--Josh
Sunday, June 25, 2006 2:31:01 PM (Central Standard Time, UTC-06:00)
The way pages are put together is potentially complex and thus difficult.

It is possible to distill pages (XHTML, CSS...) into a few simple parts. (Eliminate much of the complexity.)

In my experience cutting out automated CMS (content management) tools is one road to effectiveness and easy use. (I see no point in getting agitated about standards versus "what IE actually does". That's all pretty pointless if what you want is something that actually works.)

If you like I'll spend a few minutes on a private channel (email) should you send me a URL. I'll make some specific suggestions. (I'll send a separate email.)
Mike Gale
Monday, June 26, 2006 5:14:23 AM (Central Standard Time, UTC-06:00)
Dont forget Opera and Macs ( Both IE and the new one) , they are significant as well ( together as important as firefox) and render completely different.

I normally have better luck with Firefox when using non Microsoft products and IE is better with Microsoft... who would have guessed ;-)

Anyway i preffer form and am keanly awaiting WPF or was that .NET 3.0 .

Regards,

Ben

Ben Kloosterman
Monday, June 26, 2006 7:31:41 AM (Central Standard Time, UTC-06:00)
Your comment about using DIVs instead of tables has my interest. Why is using DIVs so much better? Is it about positioning, style sheets, or something else?
Mark Bonafe
Monday, June 26, 2006 7:33:19 AM (Central Standard Time, UTC-06:00)
I've experienced a problem very similar to this and came across a post that involved making an addition to the machine.config file for the web server.

From what I found, the machine.config be default treats non-IE browsers as simple browsers and does not allow certain elements, such as width to perform the same. Try this link: http://slingfive.com/pages/code/browserCaps/web_config.aspx
mike
Monday, June 26, 2006 10:30:52 AM (Central Standard Time, UTC-06:00)
Is height 100% standard? I never use it and I don't think you need to use it when using css.

Firefox follows the standards better than IE. What I do is when I design a complex webpage, I design it first in Dreamweaver and test as I go by *both* IE and FF. DW has very good support for CSS visually. Once I am satisfied, I bring in the layout in Visual Studio. IN DW, I have placeholders for the asp.net components which I know I will need later.

Building a whole page for one browser and fixing it later for the other brower is time consuming and not very productive. Test as you're designing. It's the same like debugging/testing as you code.

There are several books available to teach webpage design without using tables. Use keywords 'css' tables' at Amazon.com and you'll get a listing.

abdu
Abdu
Tuesday, June 27, 2006 1:33:40 AM (Central Standard Time, UTC-06:00)
This book

http://www.amazon.co.uk/exec/obidos/ASIN/0957921888/qid=1151392697/sr=1-1/ref=sr_1_2_1/202-1203328-5494247

is absolutley brilliant at explaining how to do stuff with CSS and it also explains all the things that IE won't do and workarounds for them.

ChrisD
ChrisD
Tuesday, June 27, 2006 6:22:07 AM (Central Standard Time, UTC-06:00)
This is why I'm still using tables. Yes it's outdated. Yes it's unfriendly to screen readers. But you know what? It's virtually guaranteed to look the way I want it to on any web browser worthy of the name.

I'd like to live off CSS, but the browsers aren't on the same page yet. It's like living in the early days of plain ASP when client requirements specified that I had to be compatible with Netscape 2.0. It was a pain, and I was glad when we finally got to the point where I could write things only once. Now it's starting all over again.
Mel Grubb II
Tuesday, June 27, 2006 7:42:35 AM (Central Standard Time, UTC-06:00)
I'm supprised noone else has mentioned this....

http://www.positioniseverything.net/

this site is by far the best resource you can find on CSS. Also - any book on CSS by Eric Meyer is worth buying.

However, the biggest, easiest, most important thing you can do to ensure that your site renders correctly in IE and FireFox and browserX, is to set the DocType to standards mode:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


more info:
http://gutfeldt.ch/matthias/articles/doctypeswitch.html

http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/objects/doctype.asp
Derick Bailey
Wednesday, June 28, 2006 8:59:21 PM (Central Standard Time, UTC-06:00)
Thanks for the resource pointers - I appreciate it.

I am actually using simple text editing of tags - in VS 2005 - but still all hand-editing. I realize I could find/buy tools that might help, but I figured that if I was going to do this I should actually try to get a clue about it.

I'm not going to buy a Mac just to test that platform. I don't make any money off my web site, so spending a lot of money to buy a computer I wouldn't use seems somewhat silly. If I actually _made_ thousands of dollars a year off my web site there might be cost justification. Of course if THAT was the case, I could hire a graphic designer to do the site too :)
Rockford Lhotka
Wednesday, July 05, 2006 6:32:42 PM (Central Standard Time, UTC-06:00)
Hi there,

Yes, CSS is a good thing.
No, today's browsers do not render CSS very well.
So, yes, I'll continue using tables.

But hey, don't we asp.net 2.0 programmers have the option to dynamically load a different CSS file according to the user's browser?

-Ron
Ron Klein
Monday, July 10, 2006 11:39:23 AM (Central Standard Time, UTC-06:00)
CSS is a not only good thing. css is the best and only system for nice sites
קולנוע
Comments are closed.