AJ Putnam wrote:
> I've done them all but still have one tiny problem that i cannot
> figure out. the pages all look fine in Dreamweaver, but in FF and
> safari for mac, the center background graphic has dropped about 1
> pixel. example:
>
> http://ajputnam.com/sky/bio/
Collapsing margins[1] at play. Complex but standardized stuff.
One solution is to add...
#biomiddle {
float: left;
}
...since floats contain the element's children's margins.
> home page is causing me a touch of grief too with side divs not
> showing the right background color and the center section dropping a
> little more than the other pages:
>
> http://ajputnam.com/sky/
Same collapsing margins at play, and the same solution apply.
Another problem with that alignment is that you have kept the 'height:
720px' for the center-container on that page. This means the element
can't expand if/when you add more content.
I advice you to delete that 'height', and instead add...
#homemiddle {
min-height: 720px;
}
...and complete that with a separate rule for IE6...
* html #homemiddle {
height: 720px;
}
...since IE6 and older don't understand/support 'min-height', but
instead treats 'height' as 'min-height'.
----
Note: you have a number of 'top: auto;' left in there. These
properties/values' serve no purpose now that all 'a:p' are gone and
should therefore be deleted to avoid future maintenance confusion.
There are also a few 'vertical-align: top' on divs left from earlier,
and these properties/values seem to serve no purpose either, where they
are now.
----
Your practice of using individual IDs for most containers for each page
when the only major difference between pages is choice of
background-images, is also an "overkill" that makes debugging and
maintenance harder.
A common practice is to use _one_ layout with _one_ set of element-IDs
on all pages, add an _individual_ ID on <body> for each _page_, and then
style in the differences - different background-images, based on the
selector-chain.
Example:
body#home #left {background-image: url(homeleft.jpg);}
body#home #middle {background-image: url(homecenter.jpg);}
body#home #right {background-image: url(homeright.jpg);}
body#disco #left {background-image: url(discoleft.jpg);}
body#disco #middle {background-image: url(discocenter.jpg);}
body#disco #right {background-image: url(discoright.jpg);}
...and so on for each page needing different background-images.
The selectors #left, #middle and #right would then carry all the other
styles on _all_ pages. Such an approach will of course reduce the size
of the stylesheet significantly, and make maintenance much easier.
regards
Georg
[1]http://www.w3.org/TR/CSS21/box.html#collapsing-margins
--
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/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
