On 12/7/06, Mark Wheeler <[EMAIL PROTECTED]> wrote:
> Hi Devon,
>
> Thanks very much. That got rid of that extra space to the right. But... now
> in IE6 and IE7, the left 5px border and 1px white border-bottom on the inner
> LI elements are slightly off by about 2 pixels. I fixed IE7 by removing the
> width settings and adding the white-space: nowrap to the #nav li ul a
> section, but it really messed up IE6. Looks like and extra carriage return
> was added. (I've removed my little addition and it's now as you've
> suggested) Any other ideas as to why the extra space is there in the inner
> LI elements? I'm still sooooo new to this. Thanks for your help.
>
Here's the fix and how I went about tracking it down:
1) Fire up Programs>Accessories>Accessibility>Magnifier so we can see
what happens
With this I can see that IE6/7 is adding an extra band of color below
the white line between items. This extra color line extends into the
left dark orange border as well.
2) Change colors: First, I changed each instance of background and
border colors to transparent, then assigned them new, distinct colors
one by one. In doing so I found that the extra band of color is the LI
background color and If I set a background color on the anchor it does
*not* replaces the band.
I change colors like this so I can remember the original values:
Before: background: 1px solid #CF7103;
After: background: 1px solid transparent; #CF7103;
or
After: background: 1px solid red; #CF7103;
Like this the CSS is non-validating, but (so far) all the browsers
just ignore the stray #CF7103 without a property name (probably see it
as an id without an accompanying block). Later, I'll come back and
remove the red; to restore the original color.
3) Check for positioning. Positioning the A absolute or relative to LI
could be causing a misalignment. No, the only things positioned are
the #wrapper and the inner UL.
Ok, now from this I know that the LI background is showing up below
the white border, so the white border must be *inside* the LI. The
color band also undercuts the thick left border, so that also must be
*inside* the LI.
Sure enough, the white border (actually #eee) and 5px left border are
set on the anchor.
4) Playing with properties.
The borders were applied to #nav li ul a, so lets move these up 1
level. So they will be applied to #nav li li. That looks better.
5) Restore original colors.
Voila!
dcm
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
