I am gradually rescuing a site from table-based code and am replacing the
menu with css I developed for another site (see www.mobiledatasys.com) but
have since improved re font size in the ul. I found great positioning advice
at webmasterworld: in the ul, the top and left margin gave me the desired
position in IE, while display:list-item in the li removed the default bullet
in Firefox. The default position in Firefox was perfect and line height
appeared the same across browsers. (Otherwise, the forum said that padding
in the ul would control position in Firefox.) However, the default bullet
flashes when I change pages in IE 6 and 5.5.
CSS:
#column1 ul{
padding:0;
margin:10px 0 0 40px;
font-variant:small-caps;
font-size:70%;
font-weight:bold;}
#column1 li{
list-style-image: url(images/menubullet.gif);
display:list-item;}
HTML:
<ul>
<li><a href="contactus.htm">CONTACT US</a></li>
<li><a href="international.htm">INTERNATIONAL</a></li>
<li><a href="whitepaper.htm">WHITE PAPERS</a></li>
<li><a href="sitemap.htm">SITE MAP</a></li>
<li><a href="policies.htm">POLICIES</a></li>
<li><a href="privacy.htm">PRIVACY</a></li>
</ul>
To resolve this, I am following advice from Zoe Gillenwater
(http://archivist.incutio.com/viewlist/css-discuss/49025): " I'd try getting
rid of all list markers (list-style: none) and using a background image on
the <li>s instead to simulate a bullet." To do this, I am following
instructions from http://css.maxdesign.com.au/listutorial/01.htm, referred
to in the same post.
I get to this point (http://css.maxdesign.com.au/listutorial/06.htm) but
then cannot get consistent bullet position in the three browsers. As is,
it's clipped and way too low relative to text in Firefox; too low in the
IEs.
#column1 li{
background-image: url(images/menubullet.gif);
background-repeat:no-repeat;
background-position:0 *top position should be here*;}
The next step (http://css.maxdesign.com.au/listutorial/07.htm) gave me
proper distance between bullet and text:
#column1 li{
background-image: url(images/menubullet.gif);
background-repeat:no-repeat;
background-position:0 *top position should be here*;
padding-left:.8em;}
Using this step (http://css.maxdesign.com.au/listutorial/10.htm) to add
space around list items works, but the horizontal alignment problem remains.
Modifying padding in the ul now creates severe problems in list position in
Firefox.
At this point, the default bullet does not flash in the IEs, but the flash
remains.
I have tried making careful modifications to various values, but no joy. Can
anyone offer an approach that will resolve this? Thanks in advance. I have
been teaching myself CSS for about nine months, and information from your
list and other favorite sites has been invaluable. So my thanks are also
retroactive. I know there's lots of room for improvement, but the pages in
my first site, which just went live, actually validate! Now I am working on
my company's original site to eliminate inline styles that are rarely used,
link to an external style sheet, and eventually eradicate unbelievable
depths of tables. Already pages are half their original size.
Carolyn Asmussen
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
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/
