Remy Merriex wrote:
> [http://www.pdsxp.com/bov/wow.html
Had a look at your page, and fixed a copy to pixel-perfection for
IE/win. However, I'm not satisfied with the solution, because I haven't
pinned down the exact cause for the offset-problem.
---
However, your stylesheet needs a bit of cleaning...
'z-index: 1;' serves no purpose on most cases, and won't have any effect
unless there's a 'position: relative;' defined on the element. Delete
all those 'z-index' and keep only those 2 - 3 instances where they do
serve a purpose.
The same with 'margin: 0 auto;' all over the place. I only found 2
instances where that was needed, so the rest should be deleted.
I think I deleted around 50% of your stylesheet without affecting the
layout in any way in any browser, so try to avoid 'noise' in the
stylesheet that may make future debugging and maintenance difficult.
---
HTML source isn't quite there yet either...
You have some ' ' in the page to space out elements. All those
should be deleted, and replaced by defined 'height' and/or suitable
'padding' on the right elements.
This line of <br /><br /><br /><br /><br /> isn't good either, and
should rather be replaced by something like:
#content1 {padding-bottom: 5em;}
...which will have the same effect.
HTMLTidy reports about lack of "alt" attributes on images. The validator
will find the same errors. Should be fixed.
Inline-styles on images should be replaced with a few reusable classes
in the stylesheet.
---
That's the short list.
All in all not bad for a start, but the same layout can be created with
less code, styles and background-images if you reduce the number of
nested divs and base it on the usual model:
'centered wrapper'
'header'
'content'
'footer'
Some div-nesting still needed to hold backgrounds, but probably less
than half of what you've got since this is a fixed-width and centered
layout that doesn't have to simulate background-scaling with all those
details.
Keep this example as a test-version, and try to create another, more
efficient and compact, one.
Also, test pages with 'images off' in a browser - and set some
appropriate background-colors so written content stay visible.
#content { background: #fff url(light2.jpg); }
...made all the difference :-)
regards
Georg
--
http://www.gunlaug.no
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
