Mike Buettner wrote:
> [...]
> Could you please take another look at it?
>
> Site: http://scottriggs.com/2007/index.html
>
Hi Mike,
For a first timer, it´s hard stuff and you are going not bad for this
not too simple layout! :-)
But I'm afraid there are still some css-hills to climb.
* IE is dropping down the right column. This is a perfect
illustration of the "IE Doubled Float-Margin Bug". ;-)
It is described here in PIE
<http://www.positioniseverything.net/explorer/doubled-margin.html>
The remedy is to add { display: inline; } to the floating #lftColbox.
* You have put the IE-only-styles in the body of the document; they
should go to the head part. Notice: the html-validator doesn't
notice this, because these styles are placed (correctly) in IE
conditional comments, which are just normal comments / unseen by
other browsers and the validator as well (REM: what is inside a CC
is not validated!).
* You have chosen for a fixed width of 800px, probably to serve
800x600px resolution monitors. In 800x600 an horizontal scrollbar
is coming, though. That's due to the needed space to put the
vertical scrollbar aside the page. Making the width about 770px
can help (implicating the header-img has to be smaller too...).
* With a fixed width, much screen space is not used in higher
resolutions. In 1280x1024 there is an area of about 40% unused,
which is rather much. A solution is to give the page a liquid
width in a % of the screen width.
A lot of models are linked from the css-d Wiki page about layouts
<http://css-discuss.incutio.com/?page=CssLayouts>.
* Sometimes you are using a CLASS and an ID with the same name. For
the most elements, I found in the stylesheet only the
ID-references (with the # before the name). For elements with only
the ID-styles the CLASSes in the html can be missed.
* In your page fixed font-sizes are used (in px). This has 2
disadvantages. For IE, which is is not standards compliant here,
the fonts cannot be enlarged in the browser of the visitor. For
some people the pages aren't accessible then, especially if they
are using a screen of 1280x1024px or more (very small letters).
On the other hand, at 800x600 the fonts are biggy, and no
possibility to get them smaller in IE.
In FF, Opera and other browsers, the font-size can be enlarged or
made smaller by the visitor's browser. But then the present layout
is breaking ...
* This breaking of the layout is caused by some fixed heights, for
instance in the navigation bar. Maybe a good idea is to develop
the page from the top elements downwards.
See: some Golden CSS-Rules
<http://home.tiscali.nl/developerscorner/golden-rules-of-css.htm>.
* The 3 small images (car and logos) with associated text at the top
of the right column: this is one of the points where the layout is
breaking at larger font-sizes (because of the fixed 49px height of
the .links class). Can be repaired by deleting this style rule.
Another quick way to get it unbreakable with the text staying
vertically centered, is to apply a css-styled table for them.
See testpage
<http://home.tiscali.nl/developerscorner/css-discuss/test-mike.htm>
(other things still have to be done).
So far,
Greetings and success!
(and don´t hesitate to come back to the list for questions)
francky
PS: excellent name for your site! :-)
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
