This is Interesting: Free Magazines for Graphics designers and webmasters
Home > Archive > Site Ratings & Reviews > April 2005 > Critique please
You are viewing an archived Text-only version of the thread.
To view this thread in it's original format and/or if you want to reply to
this thread please [click here]
|
|
|
| http://www.doonshorehouse.com/
It validates for html and css, but Firefox renders it a little
differently than IE because of an issue with background images. Does FF
normally show background images??
Thank you!
| |
|
|
| kchayka 2005-04-25, 10:01 pm |
| abby wrote:
> http://www.doonshorehouse.com/
> It validates for html and css,
There must be something wrong with the CSS validator because it did not
pick up the invalid '-->' at the end of your stylesheet. HTML comments
are not allowed. At least you don't have '<!--' at the beginning. :-\
BTW, validation only means you have no (detected) syntax errors.
Validation cannot check that you have used any of the elements,
attributes or properties appropriately.
> but Firefox renders it a little
> differently than IE because of an issue with background images. Does FF
> normally show background images??
WinIE shows the background image(s) differently because IE's broken. Per
the specs, background-attachment:fixed means fixed relative to the
viewport, not the element where it is set. It looks like you don't need
this property at all, so you should remove it.
As for the rest...
You have bad mix of HTML and CSS styling.
Get rid of all those nasty <font> tags and all inline styles. You have
an external stylesheet. Use it.
Get rid of all those empty paragraphs and non-breaking spaces that are
(presumably) used to position or align elements. Use CSS instead.
Get rid of the absolute (and puny, to me) font-sizes. Don't set font
sizes in px (or pt) units, use % per published accessiblity guidelines.
If you don't know what % units are or why px are bad, search the google
groups archives. The subject comes up regularly.
Get rid of the fixed width. There's no reason why I should need to
scroll horizontally in a 700px-wide window. Set a max-width on
paragraphs (~40em) if you want to avoid long lines of text. If you don't
know what em units are, search google or just read with W3C specs. See also:
<URL:http://www.allmyfaqs.com/faq.pl?AnySizeDesign>
Get rid of the nested layout tables. Nesting 3-4 levels deep is quite
unnecessary for a layout as simple as this. Seriously consider getting
rid of the layout tables altogether and use CSS instead. There are many
template and sample sites around, such as
<URL:http://webhost.bridgew.edu/etribou/layouts/>
<URL:http://www.allmyfaqs.com/faq.pl?Tableless_layouts>
The background images in the navbar are superfluous. Use the CSS border
property for a line across the top or bottom of an element, and
background-color for a solid background. BTW, with image-loading
disabled, your navbar is blue text on darker blue background, which is
pretty darned unreadable.
You are using the same colors for visited and unvisited links. This is
not good for usability. It is useful to the visitor to know which pages
have already been viewed.
Use better markup in general. You took the trouble of using list markup
for the navigation menu, but the rest is all just paragraphs or
unstructured, non-semantic table cell content. You don't have a single
heading on the whole site!
Here's an example, the 'SPORT' heading on the Amenities page:
<table style="border-top-width:0px; border-right-width:0;
border-bottom-width:0px; border-left-width:0; border-style:none;"
align="center" border="0" cellpadding="6" cellspacing="0" width="80%">
<tr>
<td width="100%" bgcolor="#E6EDFA" align="center" valign="middle">
<p align="center"><b>SPORT</b></p>
</td>
</tr>
</table>
This ought to be heading markup, level 2 by the looks of it ("Amenities"
at the top of the page should be <h1> ) using normal mixed-case text. It
can easily be styled to look just like the tag-soup version.
HTML:
<h2>Sport</h2> (that's it!)
CSS:
h2 {
margin: 1em 10%; /* width equates to 80% */
padding: 6px; /* = cellpadding */
background-color: #E6EDFA;
color: #000;
font-size: 100%;
text-align: center;
text-transform: uppercase; /* all caps */
}
Now, every <h2> will automatically be styled likewise. And if you decide
to change the color or something, you only have to do it in one place.
Isn't that way easier than marking up each one individually with all
that other crud?
--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.
| |
| sunny 2005-04-25, 10:02 pm |
| Thank You.
|
|
|
| | Copyright 2003 - 2008 forum4designers.com Software forum Computer Hardware reviews |
|