ba**********@gmail.com wrote:
Hi all.
Any advice appreciated - I'm floating an image right and the text to
the left of the image is being forced down about 5px from the top of
the containing area. You can see the issue here: http://www.cbcgroup.com.au/drupal.
No issues in ie7 or Firefox - can someone tell me what I'm doing
wrong?
You have a "Collapsing Margins" occurrence, causing the extra white
space, below the horizontal red line.
It may be possible to locate the cause, but it's not worthwhile. The
reason is embedded somewhere among the numerous and superfluous divs you
use to create vertical space. Many, many, in fact most of the divs
should be removed from your markup, the page simplified and in other
words completely redone, IMHO.
I will give you an instance of the image of a man wrapped in a div which
is not necessary. Simply use the image and float it left and the
subsequent text <h1and <pwill all flow around the image. (Wrap the
whole thing in a single div wrapper.)
The second instance is that of the patio image floated to the right this
time and the <h1>, <h2and the following text will all flow around this
image as well. Also lose the <ulwhich you use simply to create
vertical space. (Again, wrap this complete section in another Div wrapper.)
On the right side your "Latest News & Events" should have only a div
wrapper without the other divs and again a <ulfor vertical spacing.
On the bottom right side you don't need a div - at most a div wrapper
(if at all necessary).
The bottom line is to use the KISS principle and use a 2-column method, eh?
--
Gus
