Sent by Holly Bergevin on 20 December 2004 02:02
From: Erwin Heiser [EMAIL-REMOVED]>
>http://www.pilatesworks.be/redesign
>Only good ol' IE6 gets two things wrong:
>1. The listbullet image I use is right next to the text when there should be
>some space between them.
Hi Erwin,
When you have {list-style-position: inside;} IE/win will snug the bullet/marker right up next to the
text as you have noticed. I can think of a couple of solutins to this, One is to use just use
{list-style-position: outside;}. IE will then add space, but you won't get the indented first line
as you have now. Other solutions require sending different instructions to different browsers and as
such can probably be considered "hacks." I don't think that there is a way to get around this
without at least one....
One way to slove the problem is to add a couple of non-breaking spaces before the text of each LI.
This will move the text over for IE and give you the space you want. Unfortunately, it does the same
in other browsers, and makes the space larger. My suggestion is to add the spaces but wrap them in a
span but then set the span to {display: none;} for browsers other than IE.
The html -
<li><a href=""><span> </span>Pilates Method Alliance: What Is Pilates?</a></li>
The CSS -
html>body ul.linklist li a span {display: none;}
Another (perhaps more complicated) option is to give different browsers different
list-style-position values. Most get the current value, IE/win gets {list-style-position: outside;
text-indent: 1em;} This will also give something similar to what I think you want. You have to
decide if you need to hide this from IE5-Mac -
* html ul.linklist li {list-style-position: outside; text-indent: 1em;}
>2. the main navbar doesn't sit flush to bottom of the main photograph,
>instead there's about 30px of bottom margin added. The blue border should
>sit above the white background of div#main and this is exactly what you get
>in all abovementioned browsers.
Did you fix this? I don't see this behavior. What I do note is that in Moz and Op the blue bottom
border hangs below the main picture whereas in IE it is contained in that section. I couldn't think
of any way around this difference. IE will expand containers to enclose children, and I believe
that's what it's doing here.
You might also consider changing the padding-bottom value in the - ul#navbar li a:hover, ul#navbar
li a.current - selector to 5px so that there's not movement when the current page name is hovered.
hth,
~holly
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
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/
