CSS layout problem in 1E6 and Safari

Hi all, I have put together our own web site, its only small so I
decided after reading up on CSS web design to do the site myself.

The site looks good in IE7 but when you use IE6 the green and red box
buttons on the right shift down to the bottom of the page instead of
being at the right. Also, in Safari the web site appears ro move down
by an inch which results in the horizontal tiled background being out
of place with the rest of the site.

If anyone has any pointers or suggestions I would appreciate it.


http://www.neighbourhoodcomputers.com/

Many thanks for your time

Lee

On 2007-08-08, leebridgewater (AT) gmail (DOT) com <leebridgewater (AT) gmail (DOT) com> wrote:

Hi all, I have put together our own web site, its only small so I
decided after reading up on CSS web design to do the site myself.

The site looks good in IE7 but when you use IE6 the green and red box
buttons on the right shift down to the bottom of the page instead of
being at the right. Also, in Safari the web site appears ro move down
by an inch which results in the horizontal tiled background being out
of place with the rest of the site.

If anyone has any pointers or suggestions I would appreciate it.


http://www.neighbourhoodcomputers.com/

#header h1, #main-image h1 { margin: 0; }

See CSS 2.1 spec re "margin collapsing" (which I've heard IE7 gets
wrong, which might explain why your page "works" in IE7). This should
get things lined up with the background image in Safari.

Thanks both for your commentrs - I will implement those suggestions
and re-test.

Thanks for your time

Lee

On 8 Aug, 16:59, leebridgewa... (AT) gmail (DOT) com wrote:

Hi all, I have put together our own web site, its only small so I
decided after reading up on CSS web design to do the site myself.

HTML's not bad, CSS could be better. Nice to see a site that's valid
HTML.

XHTML adds nothing, but doesn't hurt. More trouble than it's worth,
but so long as you _keep_ the page as well-formed XML, then it won't
be a problem.

Your only CSS uses media=screen. This means that non-screen uses lose
all the CSS! Your page is unprintable!

Don't use media=screen, just let it be the default CSS. Use
media=print, or @media print if you want to enhance things
specifically for printing. Use other media types if you have some
_specific_ needs in mind. Otherwise just let it go with the single
default media type. If any browser has a problem with this, it'll
choose to ignore the CSS as it needs to quite happily on its own.

This could hurt search engine crawling:
#main-image h1, h2, h3 {
visibility:hidden;
}
If you're going to use that technique (and the big overlay image) then
I'd suggest that was a candidate for media=screen on the CSS.
Generally though I wouldn't hide these - I'd just use two <div> and z-
index to place the image _over_ the text, not switch the text off.

The sub-nav menu could use better markup. It's a list o'links, so mark
it up as a list, not just a sequence of them. I'd also recommend
against _ANY_ use of graphics instead of text (not accessible, gives
poor search engine performance). If you want pretty then use a <div>
(or an <li> in this case) with a CSS background image on it, and run
the text itself over the top as text. A title attribute on the link
wouldn't hurt either, especially if there's little other text to
describe it. Image as well as text (as for your main image) isn't so
bad.

CSS

* It shouldn't need to set a font-size on body. If it does seet one,
it should be 1em / 100%. It should _NOT_ be "small".

* Similarly, avoid Verdana

* body should set the background-color too

* I'd replace
<div id="content">
<div id="navigation">
#content #navigation {}

with
<div id="content" class="content" >
<div id="navigation" class="navigation" >
..navigation {}

Using id as a CSS selector has a very high specificity. Although it
works, it's hard to "sub-class" it inside that element.

Also a CSS selector that's too specific (i.e. using two levels of
class or id when one would do) is inflexible for ongoing maintenance
later on.

* There are a lot of big harcoded widths in there, especially that
they use pixels. A few pixels as padding or a margin are OK, but
setting the width of content elements in pixels will tend to hurt
fluid design when font sizes are scaled.

* If you're doing columns, first read up the well-known good example
sites (try alistapart, glish and bluerobot). There are glitches to be
aware of. Best idea is usually to start with some of their example
code and tweak it.

The site looks good in IE7

* One of the worst ideas in web design is to prototype in IE (any
version!). Work in Firefox or something first, worry abbout IE later
(and only _after_ you're valid and good-practice compliant.) IE just
has too much weirdness about it to recomend as your starting point
_even_ if you're "primarily targetting IE users". Get it right first,
then get it right under IE too. It's a lot simpler than first getting
it to work under IE, then trying to make it vaguely work on the
others.

but when you use IE6 the green and red box
buttons on the right shift down to the bottom of the page instead of
being at the right.

#sub-navigation {
width: 160px;
float: left;
}

Hard-coded widths and floats. It can be done, but it's much less
obvious than you'd think. Good tutorial is at http://brainjar.com/css/positioning/