DTP


 
Lively discussions on the graphic arts and publishing — in print or on the web


Go Back   Desktop Publishing Forum > General Discussions > Web Site Building & Maintenance

Reply
 
Thread Tools Display Modes
Old 03-14-2006, 07:31 AM   #1
dthomsen8
Member
 
dthomsen8's Avatar
 
Join Date: Aug 2005
Location: Philadelphia, PA 19130
Posts: 2,158
Default Rewriting a web site

Rather than getting into particular details or exact code, I am explaining what I am doing overall. I am rewriting an existing, older web site (over 5 years old) using Dreamweaver MX 2004 and CSS, instead of FrontPage 2003 with extensions.

Perhaps I might retain some of the graphical concepts from the FP version, but if I use CSS, changing them should be easy. I expect to use only HTML and CSS, and no JavaScript, ASP, or the like. I might use PHP if there is a really good reason, but otherwise not.

I want the effects made possible by the anchor pseudo-classes for menus and navigation, and I want a two-column design with a fixed left navigation column and a fluid right content column, with a consistent header for all pages. There may or may not be a footer image.

Here are two images to show the overall layout. The first image shows the existing web page, and the second image shows an attempt at the menu using CSS techniques.
Attached Thumbnails
Click image for larger version

Name:	redo01.jpg
Views:	89
Size:	62.2 KB
ID:	440   Click image for larger version

Name:	redo02.jpg
Views:	82
Size:	9.6 KB
ID:	441  
dthomsen8 is offline   Reply With Quote
Old 03-14-2006, 11:00 AM   #2
ktinkel
Founding Sysop
 
ktinkel's Avatar
 
Join Date: Oct 2004
Location: In Connecticut, on the Housatonic River near its mouth at Long Island Sound.
Posts: 11,189
Default

Quote:
Originally Posted by dthomsen8
I am rewriting an existing, older web site (over 5 years old) using Dreamweaver MX 2004 and CSS, instead of FrontPage 2003 with extensions.
That should be fun — and how great to have a real site to master CSS on!

I look forward to seeing your progress.

   
__________________
[SIZE=2][COLOR=LemonChiffon]::[/COLOR][/SIZE]
[SIGPIC][/SIGPIC]
ktinkel is offline   Reply With Quote
Old 03-14-2006, 11:01 AM   #3
iamback
Member
 
iamback's Avatar
 
Join Date: Oct 2005
Location: Amsterdam, NL
Posts: 4,894
Default

Quote:
Originally Posted by dthomsen8
Here are two images to show the overall layout. The first image shows the existing web page, and the second image shows an attempt at the menu using CSS techniques.
OK - any problems? Or care to show us what code you used for the menu?

From a screen shot it's hard to see how it behaves, BTW - or how you want it to behave.

   
__________________
Marjolein Katsma
Look through my eyes on Cultural Surfaces (soon!), My ArtFlakes shop and Flickr.
Occasionally I am also connecting online dots... and sometimes you can follow me on Marjolein's Travel Blog
iamback is offline   Reply With Quote
Old 03-14-2006, 05:09 PM   #4
dthomsen8
Member
 
dthomsen8's Avatar
 
Join Date: Aug 2005
Location: Philadelphia, PA 19130
Posts: 2,158
Default First issue, two columns in Firefox

Quote:
Originally Posted by ktinkel
That should be fun — and how great to have a real site to master CSS on!

I look forward to seeing your progress.
Here are two image captures, showing the correct layout with IE6, and an incorrect layout with Firefox 1.5. I want to solve the technical problem here, and not get into the graphics or the color choices. One of the beauties of using CSS is that those are easily changed for the entire site, but the basic layout using CSS must be correct, or at least display acceptably if somewhat degraded in various modern browsers. I am not particularly concerned about NS4. The bad result in Firefox is also apparent in Opera and Netscape.

http://www.19130.com/first.htm provides the HTML, with the imported vert.css the other part of the design. Somewhere in the CSS there has to be a change.
Attached Thumbnails
Click image for larger version

Name:	redo2iex.jpg
Views:	87
Size:	64.3 KB
ID:	444   Click image for larger version

Name:	redo2fox.jpg
Views:	86
Size:	61.3 KB
ID:	445  
dthomsen8 is offline   Reply With Quote
Old 03-15-2006, 12:12 AM   #5
iamback
Member
 
iamback's Avatar
 
Join Date: Oct 2005
Location: Amsterdam, NL
Posts: 4,894
Default

Quote:
Originally Posted by dthomsen8
Here are two image captures, showing the correct layout with IE6, and an incorrect layout with Firefox 1.5. (...) The bad result in Firefox is also apparent in Opera and Netscape.
OK, now get used to this: what you see in Firefox/Mozilla/Netscape is the correct result for your code. If IE shows something different, then that's the "bad result". Your first aim is to get it working as you want it to in a standards-compliant browser. That's not IE, and at this stage you should forget about IE completely!

Quote:
Originally Posted by dthomsen8
http://www.19130.com/first.htm provides the HTML, with the imported vert.css the other part of the design. Somewhere in the CSS there has to be a change.
OK - start by removing all hacks and conditional comments, and make sure you have both valid HTML (it's not now!) and valid CSS (it isn't now) - lowercase, remember? if you have 'body' in your HTML, 'BODY' as a selector in CSS does not really refer to anything at all. (And even though you use HTML 4.01 (why?) it's best to use all lowercase for all tags - that makes it easier to write a matching stylesheet, and to move to XHTML. But you really should be using the current standard anyway, not the previous one.)

You should also be aware that both the HTML and the CSS validator at the W3C are actually fairly forgiving - more than browsers may be. The validators don't tend to complain about case issues - so just be strict with yourself, and wroite consistent code. It's just easier in the end.

Also, get yourself the developer toolbar for Firefox or Mozilla if you don't already have it - and use it. Before trying to debug any layout problems you need to be sure of valid, standard code - and no hacks or conditional comments either.

(Hacks may be necessary to make IE "behave" the same as a standards-compatible browser - not the other way round. But you have not yet reached the stage where you have determined that necessity since you do not have valid code working as you want it in a standards-compatible browser. And that is your first priority.)

   
__________________
Marjolein Katsma
Look through my eyes on Cultural Surfaces (soon!), My ArtFlakes shop and Flickr.
Occasionally I am also connecting online dots... and sometimes you can follow me on Marjolein's Travel Blog
iamback is offline   Reply With Quote
Old 03-15-2006, 03:15 AM   #6
dthomsen8
Member
 
dthomsen8's Avatar
 
Join Date: Aug 2005
Location: Philadelphia, PA 19130
Posts: 2,158
Default Case may be the problem

Quote:
Originally Posted by iamback
OK, now get used to this: what you see in Firefox/Mozilla/Netscape is the correct result for your code. If IE shows something different, then that's the "bad result". Your first aim is to get it working as you want it to in a standards-compliant browser. That's not IE, and at this stage you should forget about IE completely!

OK - start by removing all hacks and conditional comments, and make sure you have both valid HTML (it's not now!) and valid CSS (it isn't now) - lowercase, remember? if you have 'body' in your HTML, 'BODY' as a selector in CSS does not really refer to anything at all. (And even though you use HTML 4.01 (why?) it's best to use all lowercase for all tags - that makes it easier to write a matching stylesheet, and to move to XHTML. But you really should be using the current standard anyway, not the previous one.)

You should also be aware that both the HTML and the CSS validator at the W3C are actually fairly forgiving - more than browsers may be. The validators don't tend to complain about case issues - so just be strict with yourself, and wroite consistent code. It's just easier in the end.

Also, get yourself the developer toolbar for Firefox or Mozilla if you don't already have it - and use it. Before trying to debug any layout problems you need to be sure of valid, standard code - and no hacks or conditional comments either.

(Hacks may be necessary to make IE "behave" the same as a standards-compatible browser - not the other way round. But you have not yet reached the stage where you have determined that necessity since you do not have valid code working as you want it in a standards-compatible browser. And that is your first priority.)
I have gone ahead and tried this code with lower case CSS, and the result changes a great deal, in both Firefox and IE. You have given me the hint I need, check out the case differences and see if that fixes the problem.
dthomsen8 is offline   Reply With Quote
Old 03-15-2006, 04:04 AM   #7
Kelvyn
Staff
 
Kelvyn's Avatar
 
Join Date: Feb 2005
Location: In the Heart of the English Lake District
Posts: 1,381
Default

David, I just checked the page with IE7 Beta2 - for sites without IE css kludges this browser usually displays almost identically to FireFox. Here it gives a broken page.
Attached Thumbnails
Click image for larger version

Name:	10130.png
Views:	67
Size:	66.0 KB
ID:	447  

   
__________________
Kelvyn

Web site design, hosting and marketing, Keswick in the UK Lake District

If you are planning a visit to Keswick then try Keswick Tourist Information website

Kelvyn is offline   Reply With Quote
Old 03-15-2006, 03:10 PM   #8
dthomsen8
Member
 
dthomsen8's Avatar
 
Join Date: Aug 2005
Location: Philadelphia, PA 19130
Posts: 2,158
Default Thank you. CSS case idea?

Quote:
Originally Posted by Kelvyn
David, I just checked the page with IE7 Beta2 - for sites without IE css kludges this browser usually displays almost identically to FireFox. Here it gives a broken page.
Thank you for the screen capture. The results are much different when I make all the CSS into lower case.

What I am looking for now is some idea about what changing the case in CSS can cause a further breakdown in the results in any browser. What can be case sensitive in CSS? Not the ID names, and not the capitalization or lack of it for HTML tags, either in the CSS or the HTML. Certainly not in CSS specifications like BACKGROUND-COLOR becoming background-color. There is something I don't know, but what is more and more a mystery to me.
dthomsen8 is offline   Reply With Quote
Old 03-15-2006, 11:25 PM   #9
iamback
Member
 
iamback's Avatar
 
Join Date: Oct 2005
Location: Amsterdam, NL
Posts: 4,894
Default

Quote:
Originally Posted by dthomsen8
What I am looking for now is some idea about what changing the case in CSS can cause a further breakdown in the results in any browser. What can be case sensitive in CSS? Not the ID names, and not the capitalization or lack of it for HTML tags, either in the CSS or the HTML. Certainly not in CSS specifications like BACKGROUND-COLOR becoming background-color. There is something I don't know, but what is more and more a mystery to me.
What you don't know is the standard.

4.1.3 Characters and case

So forget about all the myths being spread that CSS is not case-sensitive. The standard says it is (except in things that are not under the control of CSS) - so it is.

Get used to writing standard XHTML (element names and attribute names in lowercase only) and writing CSS in lower case (except things like font names and correctly-spelled URLs); and remember that that case of a selector in CSS should match the case of the corresponding item in your HTML (or it won't select). Then you'll do fine.

In XHTML you can use uppercase or mixed case in many attribute values (except those that accept only a prescribed list of possible values!); just make sure that if you use those in a selector in CSS the case should match. See this blog entry for a nice illustration!

Here's another interesting link, with references to the HTML standard as well: Case sensitivity of class and id.

   
__________________
Marjolein Katsma
Look through my eyes on Cultural Surfaces (soon!), My ArtFlakes shop and Flickr.
Occasionally I am also connecting online dots... and sometimes you can follow me on Marjolein's Travel Blog

Last edited by iamback; 03-15-2006 at 11:39 PM. Reason: added link
iamback is offline   Reply With Quote
Old 03-19-2006, 03:38 AM   #10
dthomsen8
Member
 
dthomsen8's Avatar
 
Join Date: Aug 2005
Location: Philadelphia, PA 19130
Posts: 2,158
Default Example w/ pseudo-classes

Quote:
Originally Posted by dthomsen8
I want the effects made possible by the anchor pseudo-classes for menus and navigation, and I want a two-column design with a fixed left navigation column and a fluid right content column, with a consistent header for all pages. There may or may not be a footer image.
Here is an example, still under development, with pseudo-classes and a two column design:

http://www.19121.com/index.htm

Go ahead and try the mouseover effects and the links, but the other pages are pretty much the same as the home page.

I would especially like someone to try this on a Mac, and if at all possible, on Netscape 4, where the navigation should degrade into ordered lists.
dthomsen8 is offline   Reply With Quote
Reply

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Is my site better now? zofiaphoto Web Design 19 08-24-2006 04:12 AM
WWW Site Down? HTMLAlan Web Site Building & Maintenance 13 07-23-2006 01:38 PM
Yet another CSS help site annc Web Site Building & Maintenance 4 10-07-2005 09:46 PM


All times are GMT -8. The time now is 01:07 AM.


Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Contents copyright 2004–2014 Desktop Publishing Forum and its members.