mark wrote:
> Hello Sara,
>> I have been unable to figure out why there is a horizontal gap in my page
>> that allows the background to show through. It appears below the main nav at
>> the top of the page (top of the burgundy area). Here is the URL:
>> http://quiglitzin.com/index.php. I already tried setting the top margin to 0
>> on the ul as someone suggested but that didn't help. The #nav ul margin and
>> padding was already set to 0. I will leave this page a alone for a while to
>> give everyone who wants to enough time to take a look. Thanks!
>>
>> - Sara
>
> Wow, this is a good one. At first I thought it was an
> improper nesting of divs, but that's cleaned up and the gap
> remains.
[...]
> -- good luck,
>
> Mark
This gap is from the <ul> for the photos container.
#photonav ul {
list-style: none;
list-style-image: none;
margin-top:0; /* Add to stop collapsing margins */
}
The default margin-top collapses through div#photonav and
div#photonavbox thus pushing div#photonavbox down from div#braid.
The collapsed margin-top is 10px and comes from the browser reset.
ul { margin: 10px 0 0 10px; }
There are 3 ways to stop collapsing margins.
a. Zero out the vertical margin that is collapsing.
b. Give the container a border.
c. Give the container some padding.
For further information on collapsing vertical margins please see.
<http://www.w3.org/TR/CSS21/box.html#x26>
--
Alan http://css-class.com/
Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo
______________________________________________________________________
css-discuss [cs...@lists.css-discuss.org]
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/
