I'm redesigning my website.

[Stormy Eyes]

I'm redesigning my website because my wife says that the blue theme I've been using is making her eyes bleed. That, and I want to make use of the CSS I've had to learn for a project at work.

What I've come up with so far is valid XHTML 1.0 Strict and uses Valid CSS. Take a look at this test page (http://www.starbreaker.net/) and tell me what you think. I know it won't be up to the standards of uber-1337 designers who use Dreamweaver and such, but if it's good enough for W3C, it's good enough for me.

[bored2k]

Just a small comment here. Stormy, you have to warn people about just how hurtful your light-blue theme is. I've slept about 4 hours in the past for days, an clicking on the link half-blinded me for a second.

You definitely need to do something.

[mstlyevil]

Almost anything you do will be an improvement on the light blue. The new page design actually looks very nice and clean. You get my vote of approval. (Now to go rub sand in my eyes to stop the pain)

[Sirin]

I like the design, but the background looks like something you would get from Angelfire, IMO. No offense. ;)

[Stormy Eyes]

Just a small comment here. Stormy, you have to warn people about just how hurtful your light-blue theme is.

*mew* I thought I did provide a warning. If it made my wife's eyes bleed, it'll probably do the same to others.

By the way, the new design works best at resolutions >= 1024x768.

[Stormy Eyes]

I like the design, but the background looks like something you would get from Angelfire, IMO. No offense. ;)

Angelfire? Actually, it was a little brushed metal tile that I GIMPed up a few hours ago.

[rfruth]

The light blue isn't bad IMO but the brushed metal ain't bad either so put me in the 6 of one half dozen of the other category ;)

[Sirin]

*mew* I thought I did provide a warning. If it made my wife's eyes bleed, it'll probably do the same to others.

Is this a figure of speech or did her eyes actually bleed? :o

[Stormy Eyes]

Is this a figure of speech or did her eyes actually bleed? :o

Figure of speech.

[PapaWiskas]

I must have bloodless eyes, because it didnt bother me a bit.

I do like the new one better however.:-D

[bored2k]

Figure of speech.
I have to go the hospital. I'm not so sure I didn't get any internal bleeding from it ;).

[Stormy Eyes]

The light blue isn't bad IMO but the brushed metal ain't bad either so put me in the 6 of one half dozen of the other category ;)

Thanks. I'll work on it some more tomorrow, but the light blue is going the way of apartheid and the USSR: it's history.

[Stormy Eyes]

Thanks, everyone. I'm off to bed now, so I can work harder tomorrow. If anybody can recommend a good web host that gives at least a GB for less than $20/month, I'd appreciate it. My wife's quite the shutterbug, and I hate to tell her that she has to take photos down when she wants to put up new ones.

[alfonz]

I think people fail to realize that its the abundance of white space that kills the eyes not the blue. The blue is fine, however cut down on the overall white space and it will look better and less hurtfull.

my2cents

[Rev. Nathan]

Are you forcing yourself to create your own site by hand? Not to sound cocky, but have you considered a CMS? It looks right up your alley for what you are wanting to do:

http://drupal.org/

[Bandit]

I'm redesigning my website because my wife says that the blue theme I've been using (http://www.starbreaker.net) is making her eyes bleed. That, and I want to make use of the CSS I've had to learn for a project at work.

What I've come up with so far is valid XHTML 1.0 Strict and uses Valid CSS. Take a look at this test page (http://www.starbreaker.net//test.html) and tell me what you think. I know it won't be up to the standards of uber-1337 designers who use Dreamweaver and such, but if it's good enough for W3C, it's good enough for me.
The test page looks good Stormy.. Must easier on the eyes :)

[Malphas]

Good except for the background. Might want to look at this in some different resolutions, on 1280 by 1024 you can clearly spot the background tile (as opposed to it being seemingly seamless) and the default text size is unreadable.

Also, I'm going to hijack this thread somewhat and display the new design for my site which I meant to finish months ago:

http://img.photobucket.com/albums/v113/LoboParamilitary/newlayoutsite.png

The code is still a horrific mess although it should be XHTML 1.1 when I'm done, I also touched it up with Photoshop (yeah on my Windows machine, because I hate the GIMP) because I needed to show the layout to someone and couldn't be bothered/wasn't smart enough to able to fix a few glaring - although probably simple and obvious - errors in time.

[WildTangent]

Looks pretty good. I should learn some more CSS, and XHTML, I still rely on tables :S

-Wild

[alfonz]

Looks pretty good. I should learn some more CSS, and XHTML, I still rely on tables :S

-Wild
me too :(

[Sirin]

Try to blend in some AJAX, too. It makes your pages look nicer. :)

[Stormy Eyes]

Are you forcing yourself to create your own site by hand?

I'm not forcing myself to do it by hand. I chose to do it by hand because I want absolute control over my site.


Not to sound cocky, but have you considered a CMS? It looks right up your alley for what you are wanting to do:

I had used PostNuke a few years ago, but didn't care much for it. I've noticed that CMS like Drupal, Slashcode, etc. are geared towards sites with multiple contributors. I'm the only contributor to starbreaker.net, and if readers want to comment, they can send me email. For my purposes, a CMS would be overkill. Also, I want to display photos, and it would be less complicated to roll my own markup than do bugger about with Drupal.

[Stormy Eyes]

Looks pretty good. I should learn some more CSS, and XHTML, I still rely on tables :S

-Wild

Tables? Eww.

[Iandefor]

The old page looks horrendous. I have a sudden urge to gouge out my eyes with a rusty spoon, just to make the pain end. The new design is much nicer. Build on it. And it sort of reminds me of E17.

[fuscia]

the light blue is ok. it's a little bit apple-esque, but i like it. so far, i don't like the new one. i'm sorry but it looks more like ribbon candy than brushed metal, to me. (my favorite color is black, so take my opinion with a grain of salt.) anyway, good luck with the new setup and my best wishes to your wife for a speedy recovery.

[Stormy Eyes]

'm sorry but it looks more like ribbon candy than brushed metal, to me. (my favorite color is black, so take my opinion with a grain of salt.)

Hey, I like black too, but I don't want my site mistaken for something a teenaged Goth who's OD'ed on The Matrix and albums by the Cure would slap together and host on Geocities. Now, if you can point me to a better brushed metal tile, or a good GIMP tutorial, I'd appreciate it. I'm not a graphics guru, after all.


anyway, good luck with the new setup and my best wishes to your wife for a speedy recovery.

Thanks. She's not really hurt; she was just exaggerating.

[fuscia]

a good GIMP tutorial, I'd appreciate it. I'm not a graphics guru, after all.

http://gimp-savvy.com/BOOK/ it was a book called 'grokking the gimp'.

[Stormy Eyes]

http://gimp-savvy.com/BOOK/ it was a book called 'grokking the gimp'.

Thanks, but I was looking for a good brushed metal tutorial. Besides, that book was published in 2000, which makes it useless to me.

[Stormy Eyes]

I've chucked the background tile and just went with a solid gray. I still have to finish adjusting the fonts and style a few more elements, but I think I'll be done tonight.

[fuscia]

i don't know if this is even remotely unlame enough for you, but i got this look by pasting a sample of metal over a gradient and reducing the opacity on the metal layer.

meh...

http://img492.imageshack.us/img492/2286/brmet4bu.th.jpg (http://img492.imageshack.us/my.php?image=brmet4bu.jpg)

[Lord Illidan]

I like the new look better than the old one, just one thing you need fixing, I think..

Look at my screenshot...

The line:
starbreaker.net
Home Page
...the ravings of an incorrigible romantic...

has an ugly scroll bar, when you load the page only half of it appears.

[Stormy Eyes]

I like the new look better than the old one, just one thing you need fixing, I think..
[snip]
has an ugly scroll bar, when you load the page only half of it appears.

What resolution are you running at, and what font size are you using?

[Stormy Eyes]

i don't know if this is even remotely unlame enough for you, but i got this look by pasting a sample of metal over a gradient and reducing the opacity on the metal layer.

Thanks, but I'll just stick with a solid color.

[Lord Illidan]

What resolution are you running at, and what font size are you using?

Resolution - 1024 * 768 (should be enough : you stated >= 1024*768)
Font size - 16..

At text size 14, problem is solved somewhat but not enough.

At size 12, problem is solved.

[Stormy Eyes]

Font size - 16..

At text size 14, problem is solved somewhat but not enough.

At size 12, problem is solved.

Ah, that explains it. I was testing with a 10pt font. :)

[Lord Illidan]

Ah, that explains it. I was testing with a 10pt font. :)

Perhaps you need to design it for multiple resolutions, etc?
800 * 600 should be supported, I think... as well as multiple font sizes..

[Stormy Eyes]

Perhaps you need to design it for multiple resolutions, etc?
800 * 600 should be supported, I think... as well as multiple font sizes..

I can understand multiple font sizes, but who runs X11 at 800x600? :)

[Lord Illidan]

I can understand multiple font sizes, but who runs X11 at 800x600? :)

People with old computers/monitors, maybe? Of course, it is not mission critical, then I understand what you are saying..

[Stormy Eyes]

People with old computers/monitors, maybe? Of course, it is not mission critical, then I understand what you are saying..

*mew* You know, I tried to design the page in such a way that it would work at multiple window sizes. Of course, I'm not even thinking about testing for IE. :evil:

[Lord Illidan]

*mew* You know, I tried to design the page in such a way that it would work at multiple window sizes. Of course, I'm not even thinking about testing for IE. :evil:

If IE doesn't work, it is because IE doesn't support these standards...hehe.

[JimmyJazz]

ha ha dreamwever is crap, Quanta is miles ahead.

[Stormy Eyes]

ha ha dreamwever is crap, Quanta is miles ahead.

What are you going on about? I didn't use Dreamweaver. I used Vim in a terminal.

[JimmyJazz]

What are you going on about? I didn't use Dreamweaver. I used Vim in a terminal.

no in your first post you seemed to suggest that Dreamweaver is the ultimate tool for web designers I was just refuting that because I used Dreamweaver for many years and hated it.

[Stormy Eyes]

no in your first post you seemed to suggest that Dreamweaver is the ultimate tool for web designers I was just refuting that because I used Dreamweaver for many years and hated it.

Dreamreaver's the tool I hear about all the time at work. Personally, I think that Vim is the ultimate tool for web designers, but I'm nucking futs.

[Sheinar]

no in your first post you seemed to suggest that Dreamweaver is the ultimate tool for web designers I was just refuting that because I used Dreamweaver for many years and hated it.
I never even questioned my original thought that he was actually joking, taking the **** out of people who use Dreamweaver to create their websites.

[Stormy Eyes]

I never even questioned my original thought that he was actually joking, taking the **** out of people who use Dreamweaver to create their websites.

*gives Sheinar a cigar and then casts Firaga to light it for him*

[Stormy Eyes]

OK, I think I've ironed out all the bugs in my design. Here's a screenshot of how it looks in action. (http://ubuntuforums.org/gallery/showimage.php?i=1998&original=1&c=4)

[WildTangent]

My only real complaint is with the large W3C standards images. I would have opted for smaller ones, perhaps in grayscale to match your site better.

-Wild

[byen]

I have to agree with WildTangent here. Those 3 images are way too big. How about scaling them down and aligning then in one single column in the corner? Just a suggestion. Other than that..looks pretty neat!


So, if you're using IE and and this site doesn't quite look right, then get a real browser
hehe heee.. brutally honest but true!

[Netisan]

Not willing to criticize you, but that frame-type page is a bit out of date. Frames are no welcomed in w3c. The existing one isn't bad at all! If you will to realive it, I'd advise you to look around for some javascripted menus and page-style tools. Or DHTML..

[Malphas]

Javascript? Eugh. I didn't even see any frames anyway.

[WildTangent]

I think he mentioned that he was using CSS to create the layout, not frames. I need to learn how to do that...all I can do with CSS is define how text and backgrounds look for various elements :(

EDIT: I bet I can learn how to do the layout just by reading your stylesheets :) I'll take a look tomorrow.

-Wild

[Netisan]

Javascript? Eugh. I didn't even see any frames anyway.
I don't say it's really in frames. But it looks so. And if you decrease the resolution this becomes terrible. The ideal of webdesigning is to get the same look in all browsers and resolutions. CSS helps for that theoretically.

[Stormy Eyes]

Not willing to criticize you, but that frame-type page is a bit out of date. Frames are no welcomed in w3c. The existing one isn't bad at all! If you will to realive it, I'd advise you to look around for some javascripted menus and page-style tools. Or DHTML..

Frames? If you look at my page source, you'll see that there's not a single frame. Besides, it wouldn't validate as XHTML 1.0 Strict if I was using frames. Besides, I like the new design, and so does my wife.

[Stormy Eyes]

The ideal of webdesigning is to get the same look in all browsers and resolutions. CSS helps for that theoretically.

Dude, I'm using CSS. If you were looking at the old test.html, please take a look at the site as it stands now. I've worked on the font sizes and proportions so that it works at 800x600 with 10pt font and higher resolutions with 10pt, 12pt, or 14pt as a baseline.

[Stormy Eyes]

EDIT: I bet I can learn how to do the layout just by reading your stylesheets :) I'll take a look tomorrow.

Go for it. Mind telling me where you got those little buttons at the bottom of your page?

[Malphas]

Double post.

[Malphas]

I don't say it's really in frames. But it looks so. And if you decrease the resolution this becomes terrible. The ideal of webdesigning is to get the same look in all browsers and resolutions. CSS helps for that theoretically.
No. No, it's not at all, ha ha! Good web design is about allowing the user to view the page they want to, not trying to take control away from the user and dictate how the page should look. And really JavaScript is a complete step backwards, almost everything previously done with JavaScript can now be done with CSS and PHP.

[majikstreet]

Go for it. Mind telling me where you got those little buttons at the bottom of your page?
http://gtmcknight.com/buttons/

[Netisan]

Dude, I'm using CSS. If you were looking at the old test.html, please take a look at the site as it stands now. I've worked on the font sizes and proportions so that it works at 800x600 with 10pt font and higher resolutions with 10pt, 12pt, or 14pt as a baseline.
OK, I see your new page is CSS-defined. However in lower resolutions scrollbars appear, some are inoperable, the top title becomes invisible, etc. Like in a poorly framed page:-k
To Malphas:
No. No, it's not at all, ha ha! Good web design is about allowing the user to view the page they want to, not trying to take control away from the user and dictate how the page should look. And really JavaScript is a complete step backwards, almost everything previously done with JavaScript can now be done with CSS and PHP.

What's exactly what I'm telling. Except js-issue. If CSS does neat menus, it's OK. Let it do! But I can't see this there..

[Stormy Eyes]

OK, I see your new page is CSS-defined. However in lower resolutions scrollbars appear, some are inoperable, the top title becomes invisible, etc. Like in a poorly framed page:-k

Please be specific. What resolution are you using, and what font size do you have set in your browser preferences? As I've said before, I've tested this in a 800x600 window with my browser set for 10pt font. I think this is a reasonable baseline, and you can always disable CSS for my site if you're using Firefox.


If CSS does neat menus, it's OK. Let it do! But I can't see this there..

You can't see it on my site because I don't care to put it on my site. It's not like I have 69 different menu items that have to be organized.

[WildTangent]

Go for it. Mind telling me where you got those little buttons at the bottom of your page?
Sure, here they are. http://www.zwahlendesign.ch/en/node/19

-Wild

[Virogenesis]

I prefer the last design this new one looks like you've reinvented the wheel and made it square I'm afraid to say.


<?xml version="1.0" encoding="UTF-8"?>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />

Declaring a website Xhtml is bad don't ask why......



<div class="HeadLeft">starbreaker.net</div>
Use a <h1> tag as it carries more weight and will be picked up by search engines better.



<div id="MENU1">
<div class="MenuHead">On this site...</div>
<div class="MenuItem">
<a href="/index.html">Home</a>
</div>

<div class="MenuItem">
<a href="/fiction/index.html">Fiction</a>
</div>
<div class="MenuItem">
<a href="/articles/index.html">Articles</a>
</div>
<div class="MenuItem">
<a href="/linux/index.html">Linux</a>

</div>
<div class="MenuItem">
<a href="/gallery/index.html">Gallery</a>
</div>
<div class="MenuItem">
<a href="/news/index.html">News Archive</a>
</div>
</div>

Do this instead.......


<ul>
<li>home</li>
<li>bla bla bla</li>
<li>even more bla bla bla</li>
</ul>

Its cleaner and more flexable this method is better as it uses a unordered list.

Use title on your links aswell

Ajax was mentioned earlier I don't if the user understands ajax or not but ajax is just a techique that uses XMLHttpRequest.
It uses DOM scripting etc.... its not great its just new.... its not needed....

[Virogenesis]

sorry double post :(

[Stormy Eyes]

Sure, here they are. http://www.zwahlendesign.ch/en/node/19

-Wild

Thanks.

[Stormy Eyes]

Declaring a website Xhtml is bad don't ask why......

I don't mean to be rude, but if you're not willing to explain why it's "bad" to declare a page as XHTML, then why should I take the rest of your advice?

[Netisan]

You can't see it on my site because I don't care to put it on my site. It's not like I have 69 different menu items that have to be organized.
Sorry, this reply was not addressed to you but to the guy who stated javascript is basic to CSS. Generally I don't want to disregard your work. I just wanted to point what is important for all sites.

[WildTangent]

Something I just noticed, the captions for the photos in the gallery are going outside their boxes. I'm running Firefox 1.5 @ 1600x1200 with default text size.

-Wild

[Stormy Eyes]

Something I just noticed, the captions for the photos in the gallery are going outside their boxes. I'm running Firefox 1.5 @ 1600x1200 with default text size.

Thanks. I'll add 20 pixels to the height property on thumbnail boxes. That should do the job.

[WildTangent]

I just rewrote my index page to be XHTML transitional compliant. A small step towards a better site :) When I finally make a proper homepage, I want to use CSS to do the layout.

-Wild

[Virogenesis]

Well for a start not all browsers can work with application/xhtml+xml.
As you are aware as Ie tries to download the file rather than rendering the page.
Same goes for Dillo that will also choke on application/xhtml+xml.

Xhml isn't needed now it doesn't offer that much more apart from it forces those to make their code clean.
html 4.01 strict is good enough these days.

Most of those making pages in xhtml strict do it for bragging rights many webdesigners shy away from xhtml I do choose to use it myself but I serve it up as text/html

[Stormy Eyes]

Well for a start not all browsers can work with application/xhtml+xml.

I've tested it on IE6 under Windows 2000, Konqueror, Firefox, Epiphany, lynx, links, and w3m.


As you are aware as Ie tries to download the file rather than rendering the page.

I have not observed this, nor have I heard this from my wife's friends, who use IE on Windows XP.


Same goes for Dillo that will also choke on application/xhtml+xml.

Nonsense. Dillo 0.8.5-i18n-misc handles it without any problem.

[briancurtin]

Ajax was mentioned earlier I don't if the user understands ajax or not but ajax is just a techique that uses XMLHttpRequest.
It uses DOM scripting etc.... its not great its just new.... its not needed....
its not new.

[Stormy Eyes]

its not new.

It's not new, and it's not necessary for what I have in mind. Being a writer, the draw of my site is supposed to be the content. Why detract from what little appeal my writing might have with unnecessary flashy ****?

[Virogenesis]

I've tested it on IE6 under Windows 2000, Konqueror, Firefox, Epiphany, lynx, links, and w3m.

Did it go back into quirks mode?
I think you'll find it does when you start dealing with a more complex site you'll notice you'll get problems.

Here is a little bit about Quirksmode (http://www.quirksmode.org/css/quirksmode.html)




Nonsense. Dillo 0.8.5-i18n-misc handles it without any problem.

So its seems you're right it was a bug which they had fixed.

[Stormy Eyes]

Did it go back into quirks mode?
I think you'll find it does when you start dealing with a more complex site you'll notice you'll get problems.

I guess it had, given that my pages each have a XML prologue: "<?xml version="1.0" encoding="UTF-8"?>" I appreciate the link concerning "Quirks Mode"; I hadn't known about this before. I don't intend to change my design to suit IE, though.

[Virogenesis]

its not new.
Compared to other approaches it is considered new many web devs still haven't toyed around with it.
You have to becareful when using ajax...... About ajax (http://www.webaim.org/techniques/ajax/)

Accessibility plays a big part many corporate companies need to accessible to screen readers.

That applys to both british and american company sites by law.
The americans use section 508 but yeah its not widely done alot of rogue traders exist which is why we have xhtml to get rid of the badly writtern sites.
Someone sued the people behind the sidney olympics got quite a bit.

[briancurtin]

Compared to other approaches it is considered new many web devs still haven't toyed around with it.
You have to becareful when using ajax......
the term "AJAX" is the only new thing about it. just because some people havent messed with it doesnt mean its anything new on the whole.

[dickohead]

Don't want to step on any toes here.... but AJAX is great for doing something that needs it, ie: pageflakes.com, but for anything that's going to be an online 'journal' of sorts, XHTML/CSS and maybe some PHP is all that's needed. Plus the joy of building it yourself definately outweighs the "simplicity" CMS's like drupal and moomba provide.

If you want to learn better 'design' try websites like http://alistapart.com, they contain good examples of using CSS/XHTML and why.

As for Virogenesis stating that HTML4.01 is "good enough"... you're an idiot... I'm sure whoever stated that burning witches for the betterment of mankind being "good enough", eventually got burned as a witch, probably for using the word betterment... Instead of making statements like that, how about you attempt to understand why XHTML/CSS and other technologies are around - to IMPROVE the web, make it more accesible and to ensure that any devices we decide to build in the future can use the web to it's full potential.

As for some example of designing with CSS/XHTML, without blowing my own horn, I have tried to implement as much CSS based layout as possible on my home page and web address: http://miteon.com.au and http://miteon.com.au/~tim

Another thing on using XHTML and CSS, the whole idea is to seperate style from content, so if you view your web pages without the css sheet (get the firefox developer toolbar to disable them, or just delete them temporarily) you get just the content without layout, and the browsers default styling for elements like h1 etc.

[Stormy Eyes]

As for Virogenesis stating that HTML4.01 is "good enough"... you're an idiot...

I don't agree with his "HTML 4.01 is good enough" stance either, but is calling him an idiot really necessary?


As for some example of designing with CSS/XHTML, without blowing my own horn, I have tried to implement as much CSS based layout as possible on my home page and web address: http://miteon.com.au and http://miteon.com.au/~tim

Nice work, even though I don't agree with worrying so much about IE users. Why encourage them to use a bad browser by catering to its defects?


(get the firefox developer toolbar to disable them, or just delete them temporarily)

Actually, if you go to View/Page Style and select "No Style", you can also disable CSS without having to use a toolbar. :)

[briancurtin]

It's not new, and it's not necessary for what I have in mind. Being a writer, the draw of my site is supposed to be the content. Why detract from what little appeal my writing might have with unnecessary flashy ****?
exactly, i agree with you that it takes away from what you are trying to get at. im not a fan of it myself, and its good to see that you arent jumping into using it like everyone else and their mother is.

[Virogenesis]

I personaly prefer like MaxDesign (http://maxdesign.com.au/)
Juicystudio (http://juicystudio.com/) is another useful site.

dickohead yes alistapart now I suggest you go and do a bit more reading before calling an idiot in future.

You have no meta tags, no access keys, no title on links, no tab order.

This page is not Valid XHTML 1.0 Transitional!

You should validate when using valid xhtml buttons.
It failed (http://validator.w3.org/check?uri=http%3A%2F%2Fmiteon.com.au%2F%7Etim%2F&charset=%28detect+automatically%29&doctype=Inline&No200=1)
Here is another validation tool you might like to try out.
Validation check for Accessability (http://webxact.watchfire.com/)

Your site is also set in quirksmode for Ie.
It would of failed WAI validation aswell as Section 508 which would make it Illegal to have as a company website within the UK and America.

Now I've pointed out some problems within your site how about you go fix them?
Please in future no resorting to name calling as it is not needed.

[dickohead]

Calling you an idiot was used to make a burning witches joke, apologies if you took offence.

I'm aware of the flaws of my own web pages, but was using it as an example of how CSS should control layout etc, as well as designing without tables.

And as for being in quirks mode, which page are we talking about? My homepage /~tim or the main site?

One of them has specified invalid css styles for IE (*html), due to the audience viewing the page, the other was built using a "close enough" approach, where as long as it looked good in firefox and opera, and close enough in IE that was where it stayed.

Also, thanks for pointing out that error, will fix it when I get home!

[BarfBag]

Holy crap! No offense, but I just threw up a little in my mouth! You need to purchase a template.

[Stormy Eyes]

Holy crap! No offense, but I just threw up a little in my mouth! You need to purchase a template.

Don't presume to tell others what they need.

[WildTangent]

Well, I finally got round to starting a homepage, and using CSS for the layout. Now, I'll admit, much of it is copied from my blog, but thats because I want them to match. But, all the content that uses the style is written by me. Overall, I think I am learning much about CSS, and this is very helpful.

http://www.w1ldt4ng3nt.net/Justin/home/

Look through the links at the top, they all have the same header navbar :)

By the way, if you change your CSS valid link to "http://jigsaw.w3.org/css-validator/check?uri=referer" it will automatically take you to your sites validation page.

-Wild

[Malphas]

Declaring a website Xhtml is bad don't ask why......
No, it's not.


Most of those making pages in xhtml strict do it for bragging rights many webdesigners shy away from xhtml I do choose to use it myself but I serve it up as text/html
Then you might as well be serving up code soup.

http://www.hixie.ch/advocacy/xhtml

http://www.webstandards.org/learn/askw3c/sep2003.html

[Virogenesis]

No, it's not.
YES IT IS
Heres a paragraph taken from one of the links you gave me.



If you use XHTML, you should deliver it with the application/xhtml+xml
MIME type. If you do not do so, you should use HTML4 instead of XHTML.
The alternative, using XHTML but delivering it as text/html, causes
numerous problems that are outlined below.

Unfortunately, IE6 does not support application/xhtml+xml (in fact, it
does not support XHTML at all).


Now have a look at Xhtml's dirty secret (http://www.xml.com/pub/a/2003/03/19/dive-into-xml.html) &
Ie doesn't handle application/xhtml+xml read about it (http://www.killersites.com/blog/2005/tag-soup-why-using-xhtml-does-make-sense/)



Then you might as well be serving up code soup.

Thats why I said you might aswell use html 4.01 strict thats why I was called a idiot if you read on.

csszengarden.com, alistapart.com, search.msn.com, macromedia.com all use text/html

now you could use php or some kind of server side code to create xhtml/html and outputting the correct mark up but there is a problem with this the js changed in xhtml certain things are done different so now that means you have to serve the pages dynamically in order to use xhtml and it also means you then need two version of js script.

One of the very few designers that is doing things correctly is Eric Myer

[Virogenesis]

Juicystudio was the only site I found with application/xhtml+xml and thats uses Conditional Comments for the js for IE



<!--[if IE]>
<script type="text/javascript" src="/scripts/ie.js"></script>
<![endif]-->
<!--[if !IE]> <-->
<script type="text/javascript" src="/scripts/basic.js"></script>
<!--> <![endif]-->


Now xhtml in its current form is unneeded like I said before the only reason why you might use xhtml is to make it future proof but no doubt you'll want to change the site.

[Malphas]

YES IT IS
Heres a paragraph taken from one of the links you gave me.



If you use XHTML, you should deliver it with the application/xhtml+xml
MIME type. If you do not do so, you should use HTML4 instead of XHTML.
The alternative, using XHTML but delivering it as text/html, causes
numerous problems that are outlined below.

Unfortunately, IE6 does not support application/xhtml+xml (in fact, it
does not support XHTML at all).

But... that supports my point completely. If you're using XHTML you should serve it as such, not as HTML 4.01 because that's not what it is.


have a look at Xhtml's dirty secret (http://www.xml.com/pub/a/2003/03/19/dive-into-xml.html) &
Ie doesn't handle application/xhtml+xml read about it (http://www.killersites.com/blog/2005/tag-soup-why-using-xhtml-does-make-sense/)
Everyone is well aware of this though, IE is behind the times in many respects, that doesn't mean you can't use XHTML though as it's designed to be backward compatible. Serving it as HTML isn't going to change anything other than create disadvantages for those using modern browsers like Firefox, Opera, Konqueror, etc. Those articles are also out of date and exaggerating the extent of the problem anyway. "Most current browsers don't handle the application/xhtml+xml MIME type correctly"? there may have been some truth to that when that article was written (almost three years ago) but it certainly isn't the case now; the only browser I can think of that doesn't support XHTML is IE.


Thats why I said you might aswell use html 4.01 strict thats why I was called a idiot if you read on.

csszengarden.com, alistapart.com, search.msn.com, macromedia.com all use text/html
Yes, I have nothing against using HTML 4.01 Strict. But as Stormy has already made clear, he's not going to disadvantage himself for the sake of IE users so the XHTML/HTML is practically irrelevant anyway.


now you could use php or some kind of server side code to create xhtml/html and outputting the correct mark up but there is a problem with this the js changed in xhtml certain things are done different so now that means you have to serve the pages dynamically in order to use xhtml and it also means you then need two version of js script.
Yeah, you could, but the fact this requires JavaScript would be reason enough alone for me to bother, some people find JavaScript invasive and disable it by default, other times it'll be disabled for security reasons. Plus I don't really think this is that big of an issue, IE will still read pages in XHTML regardless.

[Virogenesis]

But... that supports my point completely. If you're using XHTML you should serve it as such, not as HTML 4.01 because that's not what it is.

I said people shouldn't use xhtml to mark up why disagree with me?
I know you should do it any other way but people do see the sites I mentioned prior to this post.



Everyone is well aware of this though, IE is behind the times in many respects, that doesn't mean you can't use XHTML though as it's designed to be backward compatible. Serving it as HTML isn't going to change anything other than create disadvantages for those using modern browsers like Firefox, Opera, Konqueror, etc. Those articles are also out of date and exaggerating the extent of the problem anyway. "Most current browsers don't handle the application/xhtml+xml MIME type correctly"? there may have been some truth to that when that article was written (almost three years ago) but it certainly isn't the case now; the only browser I can think of that doesn't support XHTML is IE.

According to Jan 2006 Ie 6 had 61.3% of the browser market and FF had 25%.
Sure IE might be the only browser that might does not support XHTML properly but it doesn't change that change the number of users affected.
Why did you point me to a article that is out of date aswell then.



Yes, I have nothing against using HTML 4.01 Strict. But as Stormy has already made clear, he's not going to disadvantage himself for the sake of IE users so the XHTML/HTML is practically irrelevant anyway.

WRONG!!!!!
We moved on from there I think you'll find you claim I was wrong to say xhtml shouldn't be used but fact of the matter is you're saying xhtml is fine to use but this isn't what designers are saying that is why they mark the site up as text/html because of the problems it causes.
I accept the fact Stormy doesn't care about IE users.
Such as:

If you want browsers to treat XHTML as XHTML, you need to set the MIME type to: application/xhtm+xml. The problem is that IE6, IE7 and other browsers, will give you the ‘download this document’ pop-up box instead of displaying the page in the browser window.



Yeah, you could, but the fact this requires JavaScript would be reason enough alone for me to bother, some people find JavaScript invasive and disable it by default, other times it'll be disabled for security reasons. Plus I don't really think this is that big of an issue, IE will still read pages in XHTML regardless.

I might be mistaken but did I not mention SERVER SIDE......
Its simple you use php, ruby what ever lang you wish to wish and change the mime type depending on the user agent but even when you do this you'll still need two different JS files if you do wish to use JS.

JS is fine to use for features such as check all boxes DOM scripting is very useful and you need not see it if its turn off either.
JS should aways be used on forms aswell to provide client side validation to take the strain off of the server.
.........................
" IE will still read pages in XHTML regardless."
Only if it is served as either text/html or if the page is put into quirks mode.

I rest my case XHTML is bad as many of those using do not know what they are doing.

[dickohead]

Holy crap! No offense, but I just threw up a little in my mouth! You need to purchase a template.

What does that mean?

@WildTangent - I like your site dude, very clean and easy to look at.

[Malphas]

I said people shouldn't use xhtml to mark up why disagree with me?
Your exact words were "Declaring a website Xhtml is bad don't ask why......" which I assumed meant that it's OK to use XHTML as long as you declare it as HTML (which is still what you seem to be saying anyway) which I still say is incorrect and poor advice.


According to Jan 2006 Ie 6 had 61.3% of the browser market and FF had 25%.
Sure IE might be the only browser that might does not support XHTML properly but it doesn't change that change the number of users affected.
Why did you point me to a article that is out of date aswell then.
That still doesn't change the fact that the claim that "most browsers don't support XHTML" is at best extremely misleading and poorly worded and at worst simply flat out incorrect. The reason the date of the articles you linked to is relevant is because browsers have come a long way in the past few years and so the advice given then may not hold as much water as it does now.



WRONG!!!!!
We moved on from there I think you'll find you claim I was wrong to say xhtml shouldn't be used but fact of the matter is you're saying xhtml is fine to use but this isn't what designers are saying that is why they mark the site up as text/html because of the problems it causes.
I accept the fact Stormy doesn't care about IE users.
If you accepted the fact that Stormy doesn't care about IE users then you wouldn't have claimed that XHTML shouldn't be used. Regardless I still disagree with your opinion that XHTML shouldn't be used (although previously I was only disagreeing with the idea that XHTML should be declared as HTML) and they are only a small minority of professional web designers that advocate avoiding XHTML entirely and extremely few or none that would suggest declaring XHTML as HTML.


Such as:

If you want browsers to treat XHTML as XHTML, you need to set the MIME type to: application/xhtm+xml. The problem is that IE6, IE7 and other browsers, will give you the ‘download this document’ pop-up box instead of displaying the page in the browser window.
This simply doesn't happen.


I might be mistaken but did I not mention SERVER SIDE......
Unfortuantely you still need JavaScript in order to detect the user's browser. I assumed you were aware of this...


" IE will still read pages in XHTML regardless."
Only if it is served as either text/html or if the page is put into quirks mode.Which it will do (quirks mode), which is why you can view the millions of sites which aren't written to WC3 standards.


I rest my case XHTML is bad as many of those using do not know what they are doing.
I don't think you've proved anything to be honest. It seems more like you've read a few blog articles by some vehemently XHTML-skeptical designer(s) are are taking it as the word of God, when in fact there really isn't a problem.

[Virogenesis]

Your exact words were "Declaring a website Xhtml is bad don't ask why......" which I assumed meant that it's OK to use XHTML as long as you declare it as HTML (which is still what you seem to be saying anyway) which I still say is incorrect and poor advice.

Actually I think you'll find that most sites declare xhtml 1.0 as text/html which is ok to do but isn't ok to do when dealing with xhtml 1.1 but i would advise html 4.01 strict.





That still doesn't change the fact that the claim that "most browsers don't support XHTML" is at best extremely misleading and poorly worded and at worst simply flat out incorrect. The reason the date of the articles you linked to is relevant is because browsers have come a long way in the past few years and so the advice given then may not hold as much water as it does now.

Browsers haven't changed that much over the last couple of years we are still have crap standards for example IE 7.
I also believe AOL still use the IE engine for their browser.
Don't know how phones and pdas render xhtml as I haven't tested that side of things.



If you accepted the fact that Stormy doesn't care about IE users then you wouldn't have claimed that XHTML shouldn't be used. Regardless I still disagree with your opinion that XHTML shouldn't be used (although previously I was only disagreeing with the idea that XHTML should be declared as HTML) and they are only a small minority of professional web designers that advocate avoiding XHTML entirely and extremely few or none that would suggest declaring XHTML as HTML.

Actually when I wrote the post I wasn't aware that he didn't care for IE and if there is a post in this thread about it then I've probally read it and not taken it in due to the amount of times I've crashed XGL and its taken me back to the log in screen.





Unfortuantely you still need JavaScript in order to detect the user's browser. I assumed you were aware of this...

I thought you meant browser sniffing is bad client side and a way to get around that is if the user has javascript disabled parser the page using html 4.01




Which it will do (quirks mode), which is why you can view the millions of sites which aren't written to WC3 standards.

ermmm..... Never create a site with quirks mode as the browser doesn't react like it should.




I don't think you've proved anything to be honest. It seems more like you've read a few blog articles by some vehemently XHTML-skeptical designer(s) are are taking it as the word of God, when in fact there really isn't a problem.
I don't mind xhtml when used properly but there are too many amateurs doing sites and claimig they are great because its xhtml 1.0 strict.

Infact why don't you put your money where you mouth is and lets have a contest.
We can either create a site from scratch with js support...bla bla bla

Or we can create a csszengarden entry?

The sites will have to conform to standards such as section 508, WAI, CSS Valid and either xhtml 1.0 strict or html 4.01 strict.
You decide

[Stormy Eyes]

I said people shouldn't use xhtml to mark up why disagree with me?

Because I think you are wrong. Why encourage Microsoft to continue to make a ****** browser by refusing to force change by using recent standards?


According to Jan 2006 Ie 6 had 61.3% of the browser market and FF had 25%.

And of that 61.3%, how many are going to be interested in bad science fiction written by a long-haired metalhead? Maybe 10%, if that. They can bloody well upgrade. As far as I'm concerned, their right to choose a ****** browser does not outweigh my right to design my site as I deem fit.


I rest my case XHTML is bad as many of those using do not know what they are doing.

I see no reason to limit myself just because others are incompetent.

[Stormy Eyes]

I finally broke down and did a nasty little hack to keep IE from rendering my site with an unnecessarily large font size that makes everything overflow.

[Kerberos]

I finally broke down and did a nasty little hack to keep IE from rendering my site with an unnecessarily large font size that makes everything overflow.
Everything looks 10pt in IE (fine) and 16pt in FF (fking massive) on mine (opposite effect?). As for layout I think the menu on the left would also be much, much nicer if it didn't resize with the rest of the page and the scrollbars on the 'frames' are a bit ugly too - just let the page stretch. I also think you overuse position: absolute; - if the page doesn't fit in the window it should at least be scrollable to read rather than having to scroll about each individual frame - especially in the case of the left menu which has a vertical scrollbar despite the large amount of free space below. You can achieve the same effect with a much better result without position: absolute; by just using floats.

Defining font sizes by px rather than pt is also a bad idea. I always just define it by pt (rather than %) which seems to give the least amount of trouble. I've read that your not meant to but the reasons never seemed that compelling.

If your defining colours you can go for a 3 digit hex code #000 = black, #fff = white, #f00 = red. You can also do margins, borders and paddings in the form - padding: 0 10px 0 10px; (padding: top right bottom left;) for a 10px border either side - helps to shrink the css down to something more reasonable.

Its also not particularly important but I find keeping all the typography css seperate from the layout css helps no ends later on and makes things a bit more manageable if all of it is in its own place.

Its good to see people ditching tables in favour of css (as tables are just nasty) but their is a bit of a learning curve involved!

[Stormy Eyes]

Everything looks 10pt in IE (fine) and 16pt in FF (fking massive) on mine (opposite effect?).

I hard-code the font size for IE, but I didn't bother for Firefox because I know that Firefox users can set their own font size and type, and then tell the browser to use those settings no matter what a site's stylesheet might specify.


As for layout I think the menu on the left would also be much, much nicer if it didn't resize with the rest of the page and the scrollbars on the 'frames' are a bit ugly too - just let the page stretch. I also think you overuse position: absolute; - if the page doesn't fit in the window it should at least be scrollable to read rather than having to scroll about each individual frame - especially in the case of the left menu which has a vertical scrollbar despite the large amount of free space below. You can achieve the same effect with a much better result without position: absolute; by just using floats.

I'll think about it and do some hacking tonight. I used position: absolute; because I had read that it's better to make the heading, menus, and footer fit within the page than to make the user scroll to see them, especially the menu.


Defining font sizes by px rather than pt is also a bad idea. I always just define it by pt (rather than %) which seems to give the least amount of trouble. I've read that your not meant to but the reasons never seemed that compelling.

Wait, I used px instead of pt? Damn, that was stupid of me. That's what I get for rushing and hacking on my CSS while on my lunch break.


If your defining colours you can go for a 3 digit hex code #000 = black, #fff = white, #f00 = red. You can also do margins, borders and paddings in the form - padding: 0 10px 0 10px; (padding: top right bottom left;) for a 10px border either side - helps to shrink the css down to something more reasonable.

I had read that you could use a 3 digit hex code, but I'm used to using six from doing Openbox and GTK themes. :) As for the padding -- you're right about the shorthand form; I should go back and redo that. I think I had done it that way because my wife wanted to see how it all worked.


Its also not particularly important but I find keeping all the typography css seperate from the layout css helps no ends later on and makes things a bit more manageable if all of it is in its own place.

I'll think about that. There's sense in what you're suggesting.


Its good to see people ditching tables in favour of css (as tables are just nasty) but their is a bit of a learning curve involved!

I agree, tables are a pain.

[dickohead]

Who was barfbags aiming this comment at:

Holy crap! No offense, but I just threw up a little in my mouth! You need to purchase a template.
If it's at either myself or stormy I think you can bite your bumb. Doing it yourself is rewarding and enjoyable, getting someone elses work and changing it is never as much fun!

[Stormy Eyes]

OK, I've modified the living hell out of my design based on Kerberos' suggestions. (http://www.starbreaker.net)

[dickohead]

how about getting rid of the massive padding between the objects and applying an outer div with a border of 1px that's solid/dashed/dotted, giving it your grey background and having a little more padding around the edges of the screen.

But the objects are definately easier to look at. The page even looks good with a plain white background.

And as for your menus....

You should have them like this:

<ul>
<li><a href="home">Home</a></li>
<li><a href="fiction">Fiction</a></li>
<li><a href="articles">Articles</a></li>
<li><a href="linux">Linux</a></li>
<li><a href="home">Gallery</a></li>
</ul>

And set some css styles like this:

ul {
list-style-type: none;
padding: 0;
margin: 0;
}

ul li a {
display: block;
}

Which makes your menu much neater and more user friendly. Working example:

XHTML:


<div id="nav">
<ul><!--
--><li><a href="index.php">main</a></li><!--
--><li><a href="about.php">about</a></li><!--
--><li><a href="articles.php">articles</a></li><!--
--><li><a href="images.php">images</a></li><!--
--><li><a href="computers.php">computers</a></li><!--
--><li><a href="downloads.php">downloads</a></li><!--
--></ul>
</div>

All the <!-- and --> are put in to stop the white space problem with IE.

CSS:


#nav ul {
padding : 0;
margin : 0;
list-style-type : none;
line-height : 1.5em;

}

#nav ul li {
padding : 0;
margin : 0;
font-size : 1em;

}

#nav ul li a {
padding : 0 10px;
text-decoration : none;
border-bottom : 0.05em solid #fff;
display : block;
color : #f93;
font-weight : bold;
}

#nav ul li a:hover {
text-decoration : none;
border-bottom : 0.05em solid #000;
color : #fff;
background : #f93;
}

[Stormy Eyes]

how about getting rid of the massive padding between the objects and applying an outer div with a border of 1px that's solid/dashed/dotted, your grey background and giving a little more spacing around the edges of the screen.

No, I think I like it as it is.

[dickohead]

at least make that side menu go 100% of the height. :)

[Stormy Eyes]

at least make that side menu go 100% of the height. :)

http://img452.imageshack.us/img452/3292/owlhellno1su.jpg

[dickohead]

subtle, very subtle!!!

[Iandefor]

http://img452.imageshack.us/img452/3292/owlhellno1su.jpg Where in Hades do you keep getting these owl photos?

[BarfBag]

Haha. Sorry guys. The post where I said something about me "throwing up a little" was a joke. Get it? I'm a barf bag? Ha...ha...ha...

It was directed at the first page design that was posted. It's evolved and gotten much better, though. Sorry for the misunderstanding. ;)

[Zeroangel]

Actually I think you'll find that most sites declare xhtml 1.0 as text/html which is ok to do but isn't ok to do when dealing with xhtml 1.1 but i would advise html 4.01 strict.
I agree with this. Back in the days where I was active on web development discussion forums. I saw several people advocate the use of XHTML for the sake of 'standards compliance' but never really understood why and seen it as little more than a 'fad' for someone who wants to be on the bleeding edge of standards, without considering that it doesn't improve the current method.

HTML Strict works just as well as XHTML and IE5.5+/FF will render the pages predictably (ie: there are only a few small differences, which break pixel precise designs, which IMO should be avoided regardless). You can develop excellent user interfaces in HTML 4.0 Strict, you do not need to use the fanciest techniques you can just for the sake of producing a few toys. Usability and content should always be a higher priority over an 3l33t interface.

~~~~~~~~~~~~~~
That said, lets look once again at your code:


<div class="MenuHead">On this site...</div>
<div class="MenuItem"><a title="/index.html" href="/index.html">Home</a></div>
<div class="MenuItem"><a title="/fiction/index.html" href="/fiction/index.html">Fiction</a></div>
<div class="MenuItem"><a title="/articles/index.html" href="/articles/index.html">Articles</a></div>

<div class="MenuItem"><a title="/linux/index.html" href="/linux/index.html">Linux</a></div>
<div class="MenuItem"><a title="/gallery/index.html" href="/gallery/index.html">Gallery</a></div>
<div class="MenuItem"><a title="/news/index.html" href="/news/index.html">News Archive</a></div>
<!--<div class="MenuHead">On this page...</div>-->
</div>
Where it says <div class="MenuItem">, you should know that it is redundant to define a class for each line. Consider instead, using ｢Contextual Selectors｣ instead. For example:

.menuhead div { attribute: property; }The space between .menuhead and div, tells the browser to apply this formatting to all divs that are inside of the "menuhead" object.
<div class="menuhead">
<div>On this site...</div>
<div><a href="/index.html">Home</a></div>
<div><a href="/fiction/index.html">Fiction</a></div>
<div><a href="/articles/index.html">Articles</a></div>
<div><a href="/linux/index.html">Linux</a></div>
<div><a href="/gallery/index.html">Gallery</a></div>
<div><a href="/news/index.html">News Archive</a></div>
</div>Simplifying Further:
You can simplify that even further if you wanted to, by making the <a> a 'block' element. Unlike inline elements (ie: span, bold, italic, a), block elements (ie: table, div) get their own line. You can do that simply by using the following code.
.menuhead a { display: block; }
<div class="menuhead">
<a href="/index.html">Home</a>
<a href="/fiction/index.html">Fiction</a>
<a href="/articles/index.html">Articles</a>
<a href="/linux/index.html">Linux</a>
<a href="/gallery/index.html">Gallery</a>
<a href="/news/index.html">News Archive</a>
</div>Other ways of grouping effects
You can also reuse CSS classes. For example:

.stuff { border: solid 1px #000; padding: 5px; }
.itema { color: #008 }
.itemb { color: #800 }

<div class="stuff itema">This text will display in Dark Blue,
with a 1 pixel black border.</div>
<div class="stuff itemb">This text will display in Dark Red,
with a 1 pixel black border</div>
Good luck with your website.

[Zeroangel]

For the sake of not pulling your own hair out trying to guess the capitalization of each class, I suggest that you always use lowercase; unless you can already have a system of capitalization set up in your head.

Oh yeah, and use Bluefish or Quanta instead. These are specially designed as web editors, so they will highlight your syntax for you making it easier to develop and read.

[Kerberos]

Btw: using single quotes ' in url('image.gif'); causes it to break on IE Mac and a few other platforms. I'd suggest double quotes, or none at all.

[Zeroangel]

That is quite an interesting view on quotes. I've always been told to use single quotes in for CSS backgrounds because double quotes are parsed oddly by some browsers (or some other reason that I really forget about, it's been a long time since I was last active in webdesign).

I do not believe one can design for every single user without forgoing a lot of nice formatting, using dozens of lines of CSS hacks (which I hate, partially out of laziness), or breaking compatability elsewhere (for example, IE 5.0, a browser with terribly hacky CSS support, is the default on early editions of Windows 2000). What is your estimate on the % of Mac users to use IE? I've never even considered those demographics before.

[Deaf_Head]

Is this a figure of speech or did her eyes actually bleed? :o

Dude, i was at a crazy hardcore show once and this guy came outa the pit with a tear of blood leading down his face from his eye. It was awesome ... sucks for him though.

[Kerberos]

That is quite an interesting view on quotes. I've always been told to use single quotes in for CSS backgrounds because double quotes are parsed oddly by some browsers (or some other reason that I really forget about, it's been a long time since I was last active in webdesign).

I do not believe one can design for every single user without forgoing a lot of effects or breaking compatability elsewhere (for example, IE 5.0, a browser with terrible CSS support, is the default on even Windows 2000). What is your estimate on the % of Mac users to use IE? I've never even considered those demographics before.
I generally support IE 5.0/5.5/6 on Windows, with Firefox being my main development platform. I try to make sure things work on IE Mac, but its not always possible and I dont really care all that much anymore due to Safari (and I rely on other peoples feedback as I dont have a Mac (that works)). Once you've got these browsers covered and it parses it'll generally work in everything. I dont bother checking in Opera but I've never had any problems.

The single quote thing had me stumped for ages - a client was wondering why they were getting no images at all (IE Mac) - I now dont use any quotes, just url(filename.gif); which is perfectly valid and seems the most trouble free. I'm not sure what the IE Mac numbers are now, but they can't be that high anymore.

[Stormy Eyes]

Where in Hades do you keep getting these owl photos?

From a fellow FARKer (http://users.adelphia.net/~steven_kawski/owls.html).

[Stormy Eyes]

Btw: using single quotes ' in url('image.gif'); causes it to break on IE Mac and a few other platforms. I'd suggest double quotes, or none at all.

OK. I'll fix that tonight. I was using the single quotes because that's what I saw in the examples at w3schools.com (http://www.w3schools.com/css/). I'm too cheap to buy a friggin' manual. :)

[WildTangent]

I just use single quotes, because I couldn't care less about IE Mac users...or IE users in general, though my site does work fine for them.

-Wild

[Zeroangel]

Any IE user? Ouch. You had better hope that all of the people who visit the websites you design are of the more computer literate crowd. Every clueless PC user that i've ever met uses IE because its 'there'. Maybe you can argue they deserve what they get, but that is a poor way to run a business.

[Stormy Eyes]

Maybe you can argue they deserve what they get, but that is a poor way to run a business.

I'd be a little more willing to cater to users of a defective browser if I was running a business. However, this is a personal site, and IE users can take what they're given.

[Stormy Eyes]

Haha. Sorry guys. The post where I said something about me "throwing up a little" was a joke. Get it? I'm a barf bag? Ha...ha...ha...

On FARK (http://www.totalfark.com), saying that you "threw up a little in your mouth" isn't a joke, but an expression of distaste.


It was directed at the first page design that was posted. It's evolved and gotten much better, though. Sorry for the misunderstanding. ;)

Thanks.

[Stormy Eyes]

For the sake of not pulling your own hair out trying to guess the capitalization of each class, I suggest that you always use lowercase; unless you can already have a system of capitalization set up in your head.

Thanks, but I do have a system. Major div IDs (HEAD, CONTAINER, etc.) are capitalized. Everything else is lower-case.


Oh yeah, and use Bluefish or Quanta instead. These are specially designed as web editors, so they will highlight your syntax for you making it easier to develop and read.

I get syntax highlighting with Vim, and I'm already comfortable with it after years of use. What would I gain from using Bluefish or Quanta that would outweigh the time needed to learn another editor?

[Stormy Eyes]

I saw several people advocate the use of XHTML for the sake of 'standards compliance' but never really understood why and seen it as little more than a 'fad' for someone who wants to be on the bleeding edge of standards, without considering that it doesn't improve the current method.

I chose to use XHTML and take care to make sure that each page validates as a matter of personal discipline. I don't mind putting rough code out, but publishing sloppy "tag soup" code would dent my pride.


You can simplify that even further if you wanted to, by making the <a> a 'block' element. Unlike inline elements (ie: span, bold, italic, a), block elements (ie: table, div) get their own line. You can do that simply by using the following code.
.menuhead a { display: block; }

Damn it, I wish w3schools.com mentioned that. That would definitely make things easier for me. That, and I can probably do the main menu, footer, and the CSS declares as PHP includes. Looks like I've got tonight's project planned.


Good luck with your website.

Thanks.

[Virogenesis]

Zeroangel your way about the links is a better way than what Stormy is currently using but there might be a problem with it I ain't too sure never loooked at your way before for over two years I've used the taming list method.
I know its accessible how does your method work when dealing with screen readers as I'm not sure I think its a bad way as it looks like it provides no form of seperation from other links.



Dude, i was at a crazy hardcore show once and this guy came outa the pit with a tear of blood leading down his face from his eye. It was awesome ... sucks for him though.


Haha nah sounds like a fun show I remember one hardcore pit were I ended up getting punched in the ear as the pit was rough as was fantasic I woke up next day and found dried blood behind my ear.

[Stormy Eyes]

I know its accessible how does your method work when dealing with screen readers as I'm not sure I think its a bad way as it looks like it provides no form of seperation from other links.

I'll find out tonight, I'm sure. If it looks like crap in w3m and links, then it'll probably sound like crap in a screen reader.

[Zeroangel]

Oh, so you're gonna use PHP templates? That's awesome. It will cut tedious website maintainance tasks by a *lot*.


Zeroangel your way about the links is a better way than what Stormy is currently using but there might be a problem with it I ain't too sure never loooked at your way before for over two years I've used the taming list method.
I know its accessible how does your method work when dealing with screen readers as I'm not sure I think its a bad way as it looks like it provides no form of seperation from other links.
I understand that other web designers mentioned a problem with that method *somewhere* (I know for a fact that Lynx, a console/text-only browser, doesnt understand that attribute), it just never turned up in my IE and Firefox tests.

[Stormy Eyes]

Oh, so you're gonna use PHP templates? That's awesome. It will cut tedious website maintainance tasks by a *lot*.

Yeah, I might as well. I'm sure I can do some limited templating without doing a full-throttle PHP/MySQL db-driven site (which would probably be like using a sledgehammer as a flyswatter). If I don't, I'm going to end up yanking and pasting between 69 different buffers before long. My poor wife will think that I care more about my website than I do about her.


I understand there was a problem with that method *somewhere* (I know for a fact that Lynx, a text-only browser, doesnt understand that attribute), it just never turned up in my IE and Firefox tests.

Crap. What if I added "clear: both;" to the attributes for "#MENU a {}"?

[Zeroangel]

She probably already does! :p

Nah, you won't really need MySQL to do the templating setup on your site. That would be like using a bazooka to kill a house fly. But, hey if you are going to use it as a chance to learn MySQL, then I say go for it. It would be a good learning experience.

[Stormy Eyes]

She probably already does! :p

Well, then, I'll just have to prove otherwise in a very NSFW manner.


But, hey if you are going to use it as a chance to learn MySQL, then I say go for it. It would be a good learning experience.

Maybe I'll save that for "starbreaker.net version 6.9". :)

[Kerberos]

Well, then, I'll just have to prove otherwise in a very NSFW manner.

Maybe I'll save that for "starbreaker.net version 6.9". :)
Paysite? ;)

Looking good so far though. You could even offer up different styles depending on user preference (and show off why stylesheets are leet :)).

I am pretty sure someones mentioned it before, but http://www.csszengarden.com is the ultimate proof of why CSS is the way forwards. My entry (http://csszengarden.com/?cssfile=http://ukdotcafe.com/zengarden/001.css) (its meant to be crap :D)

[Stormy Eyes]

Paysite? ;)

Nah. Just being cheeky. The development version will be 6.66. :)


Looking good so far though. You could even offer up different styles depending on user preference (and show off why stylesheets are leet :)).

By giving them a dropdown menu and storing their preference in a cookie, right? I've looked at CSS Zen Garden a couple of times; it's shiny.

I did notice that mixing absolute and relative values in my margin settings seems to be confusing IE. I'll have to fix that, and reorganize my CSS files.

[Stormy Eyes]

Hmmm... I wonder if I should just use PHP to detect the browser type, then refuse to send CSS to users browsing with IE, since that piece of **** won't render correctly.

[Kerberos]

Hmmm... I wonder if I should just use PHP to detect the browser type, then refuse to send CSS to users browsing with IE, since that piece of **** won't render correctly.
I think a few browsers fake being IE (Opera does it, or did it) due to loads of alleged web designers making IE only sites in the bad old days so it may not work that well. It still may be worth it, or present a splash screen with the option of CSS/No CSS if IE is detected as I dont see you as the sort of person willing to accomodate the massive amount of IE glitches (6 is bad enough, I so wish I could drop 5.5 + 5.0 support).

Another option is to get a 2/3 col CSS layout from the web that is fairly compatible and just tweak it to fit - there are quite a few good basic ones out there with plenty of room for improvement but it may be more hassle - I've never used them myself.

[Stormy Eyes]

It still may be worth it, or present a splash screen with the option of CSS/No CSS if IE is detected as I dont see you as the sort of person willing to accomodate the massive amount of IE glitches (6 is bad enough, I so wish I could drop 5.5 + 5.0 support).

Maybe I can do a minimal stylesheet that kicks in if I detect an IE user-agent and present a slightly jazzier version of what you'd see in Lynx. I'm really not willing to accomodate any of IE's defects, to be perfectly honest, since this is a personal project and not a client's site.

I'm more forgiving when there's money involved. :)

[Zeroangel]

Or you insert the following code into your php template

<?php if $ie {
virus();
} else {
itsallgood();
} ?>
However, I leave the most challenging tasks of writing those functions up to you. :p

-----------------------
My own PHP template files contain several echo's, so creating a PHP page is super-easy. For example a document would look like this:

<?php $pgtitle = "Gallery";
$pgdesc = "Photos of our community and important events";
$cssparams = ".pic { float: right; }
.pic div.caption { font-weight: bold; }";
include("template.php");
heading(); ?>

<p>Content goes here</p>

<?php footer(); ?>
This allows me to change the layout entirely (including the formatting of the page title) without worrying too much about whether my fonts and colors will still work if the site undergoes a drastic color or template change.

Actually, I could probably write out an entire article on more advanced development shortcuts, but this forum really isn't appropriate for that.

[Kerberos]

Hopefully this wont be spam, but the script I use for browser detect is...

In the index.php...



<?php
require_once('scripts/sniffer.php');
$br = new Browser;
if ( $br->Name == 'MSIE' ) {
echo '<style> #container2 { float: left; } /* Ask the IE team */ </style>';
}
?>


the file 'scripts/sniffer.php' (I didn't write it but its pretty comprehensive)...



<?php
/************************************************** ***************

File name: browser.php
Author: Gary White
Last modified: November 10, 2003

************************************************** ************

Copyright (C) 2003 Gary White

This program is free software; you can redistribute it and/or
modify it under the terms of the GNU General Public License
as published by the Free Software Foundation; either version 2
of the License, or (at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details at:
http://www.gnu.org/copyleft/gpl.html

************************************************** ************

Browser class

Identifies the user's Operating system, browser and version
by parsing the HTTP_USER_AGENT string sent to the server

Typical Usage:

require_once($_SERVER['DOCUMENT_ROOT'].'/include/browser.php');
$br = new Browser;
echo "$br->Platform, $br->Name version $br->Version";

For operating systems, it will correctly identify:
Microsoft Windows
MacIntosh
Linux

Anything not determined to be one of the above is considered to by Unix
because most Unix based browsers seem to not report the operating system.
The only known problem here is that, if a HTTP_USER_AGENT string does not
contain the operating system, it will be identified as Unix. For unknown
browsers, this may not be correct.

For browsers, it should correctly identify all versions of:
Amaya
Galeon
iCab
Internet Explorer
For AOL versions it will identify as Internet Explorer (AOL) and the version
will be the AOL version instead of the IE version.
Konqueror
Lynx
Mozilla
Netscape Navigator/Communicator
OmniWeb
Opera
Pocket Internet Explorer for handhelds
Safari
WebTV
************************************************** ***************/

class browser{

var $Name = "Unknown";
var $Version = "Unknown";
var $Platform = "Unknown";
var $UserAgent = "Not reported";
var $AOL = false;

function browser(){
$agent = $_SERVER['HTTP_USER_AGENT'];

// initialize properties
$bd['platform'] = "Unknown";
$bd['browser'] = "Unknown";
$bd['version'] = "Unknown";
$this->UserAgent = $agent;

// find operating system
if (eregi("win", $agent))
$bd['platform'] = "Windows";
elseif (eregi("mac", $agent))
$bd['platform'] = "MacIntosh";
elseif (eregi("linux", $agent))
$bd['platform'] = "Linux";
elseif (eregi("OS/2", $agent))
$bd['platform'] = "OS/2";
elseif (eregi("BeOS", $agent))
$bd['platform'] = "BeOS";

// test for Opera
if (eregi("opera",$agent)){
$val = stristr($agent, "opera");
if (eregi("/", $val)){
$val = explode("/",$val);
$bd['browser'] = $val[0];
$val = explode(" ",$val[1]);
$bd['version'] = $val[0];
}else{
$val = explode(" ",stristr($val,"opera"));
$bd['browser'] = $val[0];
$bd['version'] = $val[1];
}

// test for WebTV
}elseif(eregi("webtv",$agent)){
$val = explode("/",stristr($agent,"webtv"));
$bd['browser'] = $val[0];
$bd['version'] = $val[1];

// test for MS Internet Explorer version 1
}elseif(eregi("microsoft internet explorer", $agent)){
$bd['browser'] = "MSIE";
$bd['version'] = "1.0";
$var = stristr($agent, "/");
if (ereg("308|425|426|474|0b1", $var)){
$bd['version'] = "1.5";
}

// test for NetPositive
}elseif(eregi("NetPositive", $agent)){
$val = explode("/",stristr($agent,"NetPositive"));
$bd['platform'] = "BeOS";
$bd['browser'] = $val[0];
$bd['version'] = $val[1];

// test for MS Internet Explorer
}elseif(eregi("msie",$agent) && !eregi("opera",$agent)){
$val = explode(" ",stristr($agent,"msie"));
$bd['browser'] = $val[0];
$bd['version'] = $val[1];

// test for MS Pocket Internet Explorer
}elseif(eregi("mspie",$agent) || eregi('pocket', $agent)){
$val = explode(" ",stristr($agent,"mspie"));
$bd['browser'] = "MSPIE";
$bd['platform'] = "WindowsCE";
if (eregi("mspie", $agent))
$bd['version'] = $val[1];
else {
$val = explode("/",$agent);
$bd['version'] = $val[1];
}

// test for Galeon
}elseif(eregi("galeon",$agent)){
$val = explode(" ",stristr($agent,"galeon"));
$val = explode("/",$val[0]);
$bd['browser'] = $val[0];
$bd['version'] = $val[1];

// test for Konqueror
}elseif(eregi("Konqueror",$agent)){
$val = explode(" ",stristr($agent,"Konqueror"));
$val = explode("/",$val[0]);
$bd['browser'] = $val[0];
$bd['version'] = $val[1];

// test for iCab
}elseif(eregi("icab",$agent)){
$val = explode(" ",stristr($agent,"icab"));
$bd['browser'] = $val[0];
$bd['version'] = $val[1];

// test for OmniWeb
}elseif(eregi("omniweb",$agent)){
$val = explode("/",stristr($agent,"omniweb"));
$bd['browser'] = $val[0];
$bd['version'] = $val[1];

// test for Phoenix
}elseif(eregi("Phoenix", $agent)){
$bd['browser'] = "Phoenix";
$val = explode("/", stristr($agent,"Phoenix/"));
$bd['version'] = $val[1];

// test for Firebird
}elseif(eregi("firebird", $agent)){
$bd['browser']="Firebird";
$val = stristr($agent, "Firebird");
$val = explode("/",$val);
$bd['version'] = $val[1];

// test for Firefox
}elseif(eregi("Firefox", $agent)){
$bd['browser']="Firefox";
$val = stristr($agent, "Firefox");
$val = explode("/",$val);
$bd['version'] = $val[1];

// test for Mozilla Alpha/Beta Versions
}elseif(eregi("mozilla",$agent) &&
eregi("rv:[0-9].[0-9][a-b]",$agent) && !eregi("netscape",$agent)){
$bd['browser'] = "Mozilla";
$val = explode(" ",stristr($agent,"rv:"));
eregi("rv:[0-9].[0-9][a-b]",$agent,$val);
$bd['version'] = str_replace("rv:","",$val[0]);

// test for Mozilla Stable Versions
}elseif(eregi("mozilla",$agent) &&
eregi("rv:[0-9]\.[0-9]",$agent) && !eregi("netscape",$agent)){
$bd['browser'] = "Mozilla";
$val = explode(" ",stristr($agent,"rv:"));
eregi("rv:[0-9]\.[0-9]\.[0-9]",$agent,$val);
$bd['version'] = str_replace("rv:","",$val[0]);

// test for Lynx & Amaya
}elseif(eregi("libwww", $agent)){
if (eregi("amaya", $agent)){
$val = explode("/",stristr($agent,"amaya"));
$bd['browser'] = "Amaya";
$val = explode(" ", $val[1]);
$bd['version'] = $val[0];
} else {
$val = explode("/",$agent);
$bd['browser'] = "Lynx";
$bd['version'] = $val[1];
}

// test for Safari
}elseif(eregi("safari", $agent)){
$bd['browser'] = "Safari";
$bd['version'] = "";

// remaining two tests are for Netscape
}elseif(eregi("netscape",$agent)){
$val = explode(" ",stristr($agent,"netscape"));
$val = explode("/",$val[0]);
$bd['browser'] = $val[0];
$bd['version'] = $val[1];
}elseif(eregi("mozilla",$agent) && !eregi("rv:[0-9]\.[0-9]\.[0-9]",$agent)){
$val = explode(" ",stristr($agent,"mozilla"));
$val = explode("/",$val[0]);
$bd['browser'] = "Netscape";
$bd['version'] = $val[1];
}

// clean up extraneous garbage that may be in the name
$bd['browser'] = ereg_replace("[^a-z,A-Z]", "", $bd['browser']);
// clean up extraneous garbage that may be in the version
$bd['version'] = ereg_replace("[^0-9,.,a-z,A-Z]", "", $bd['version']);

// check for AOL
if (eregi("AOL", $agent)){
$var = stristr($agent, "AOL");
$var = explode(" ", $var);
$bd['aol'] = ereg_replace("[^0-9,.,a-z,A-Z]", "", $var[1]);
}

// finally assign our properties
$this->Name = $bd['browser'];
$this->Version = $bd['version'];
$this->Platform = $bd['platform'];
$this->AOL = $bd['aol'];
}
}
?>


The script is a bit old but I've yet to have any problems with it.

[Stormy Eyes]

Hopefully this wont be spam, but the script I use for browser detect is...

Thank you! Now I won't have to waste time writing my own script to detect browsers that should be riding the short bus. :)

[Stormy Eyes]

OK, I took some advice from those who offered it concerning my stylesheets, and reworked my pages to take advantage of PHP and templates. I've still got to add content, but if you want to take a look, go to starbreaker.net (http://www.starbreaker.net/index.php). If you want to download the code and poke at it, there's a download link in the "About" page.

[Sutekh]

OK, I took some advice from those who offered it concerning my stylesheets, and reworked my pages to take advantage of PHP and templates. I've still got to add content, but if you want to take a look, go to starbreaker.net (http://www.starbreaker.net/index.php). If you want to download the code and poke at it, there's a download link in the "About" page.I'm getting 404 Not Found from that link Stormy Eyes.

[Stormy Eyes]

I'm getting 404 Not Found from that link Stormy Eyes.

Try again in 5 minutes, please? Upload's taking longer than I expected. Eventually I'll find a way to make it a midnight cron job. :)

[Sutekh]

Oops sorry! Not wanting to push or anything :)

I'll check later.

[Stormy Eyes]

OK. Upload's done. My apologies to anybody who got a 403 while I was dumping onto the server.

[Stormy Eyes]

Oops sorry! Not wanting to push or anything :)

Don't worry about it. I just underestimated the time required to upload everything. It's OK now.

[Stormy Eyes]

Some pages will throw an "Internal Server Error" when you try to load them. Since they work correctly on my private server, I've emailed my host's support staff to find out WTF is going on.

[Stormy Eyes]

Today's tip of the day: When uploading files to your website, make sure to set chmod 755 any subdirectories you may have created, unless you want the http daemon to barf when trying to serve pages within those subdirectories. You don't want to end up like me, do you?

[Zeroangel]

Please dont make us end up like you.

;)

[Sutekh]

Yay it works. I think its easier on the eyes.

It actually looks ok in IE, just a bit squished. You can decide if thats a good thing or a bad thing. I was kinda hoping it would look way crap in IE.
6500
(Firefox is the left, IE the right on my work PC)

[Stormy Eyes]

Please dont make us end up like you.

I don't make people do anything. I always respect your right to choose for yourself. :evil:

[Stormy Eyes]

Yay it works. I think its easier on the eyes.

Thanks. I'm not a graphics guru, so I've embraced a minimalism of sorts. :)


It actually looks ok in IE, just a bit squished. You can decide if thats a good thing or a bad thing. I was kinda hoping it would look way crap in IE.

Yep, I'm definitely going to have to do a set of stylesheets for browsers that ride the short bus. Oh, well.

[Stormy Eyes]

OK, I've uploaded a second set of stylesheets. starbreaker.net will automatically detect your browser type and give you a special set of stylesheets if you're using IE, IE Pocket Edition, or AOL. Either way, you shouldn't get any more "squished" boxes.