Hi,
I've just had a quick look at your page and I notice you are using this technique to centre your page.
Code:
#all {
position:absolute;
left:50%;
width:760px;
margin-left:-380px;
}
While that technique is useful in some circumstances it has the draw back of leeting the left side of the layout disappear off the windows left edge as the screen is resized smaller.
This may seem like a small difference when its usually the right side of the screen that gets cut off, but unlike the right side a scrollbar doesn't appear to let you scroll to the missing content. So anyone on a smaller screen will be unable to access the content on the left side at all, as they normally could using the scrollbar.
The best way to centre is to use margin:auto and text-align:center combination which will center the screen and in IE will let it come to rest at the left edge when resized. For other browers a min-width in the body will work for them.
Code:
body{
text-align:center;/* for ie5,5.5. */
min-width:760px;/* for moz etc */
}
#all {
width:760px;
margin-left:auto;/*centre for compliant browsers*/
margin-right:auto;/*centre*/
text-align:left;/*reset text*/
position:relative;/* stacking context if needed*/
}
I also notice in your code that you have used display:block a lot of times when it is unecessary. Block level elements are display:block by default just as inline elements are display:inline by default. You only need to declare it when you want to change an elements behaviour.
There are a few inconsistency issues that I wouldn't mind addressing as well. For example, a class that I've assigned to make links a different color from the rest of the site links works fine in Firefox, but not IE. I also have a font issue where I've enlarged a piece of copy to 30px. It works in IE, but not Firefox
If you point out exactly where the problems are then someone will take a look unless of course you've already found someone to help you privately
.
Paul
Bookmarks