Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    May 2004
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    List Cross-Browser Issue, help please

    Hey guys,

    I'm making a site with just divs/css, and the list menu that I made looks excellent on IE, but when it hits Mozilla--it still looks OK but the bullet of the list goes on TOP of the text instead of where it ought to be:

    http://www.rtupaz.com/bugfix/

    I initially thought maybe there wasn't enough room in the div, that it might be wrapping--played with the area text div and the nav div to see, and that didn't seem to help...

    I tried to put the bullets "outside" instead of "inside" but that would break the format that we had it which has the inside indent...

    Any help would be great...there are 2 CSS files this refers to:

    http://www.rtupaz.com/bugfix/nav.css
    http://www.rtupaz.com/bugfix/lfx.css

    I would appreciate any help that you could offer--I'd like to get this cross-browser issue resolved so it looks as it should between the two browsers.

    Thanks.

  • #2
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    The first thing you need to do is work through and correct the (literally) 101 validaton errors your page currently has.

    By contrast, your CSS has only one error, but the presence of any errors still creates the potential for misbehaviour in one or more browsers.

    Making your code valid may not clear the problem by itself, but it certainly cuts down on the number of potential causes which means those offering their help won't be wasting their time looking in the wrong area.
    Consider it a favour to yourself and to others to make sure your code is valid before asking for help ironing out bugs.

  • #3
    New to the CF scene
    Join Date
    May 2004
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks Bill,

    I did the errors that I could--the others were specifying errors that I don't believe to be errors unless I am referring to the wrong doctype (ie styles on a UL)...unfortunately, you're right--these did not help my bug .

  • #4
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    Quote Originally Posted by rbaby
    Thanks Bill,

    I did the errors that I could--the others were specifying errors that I don't believe to be errors unless I am referring to the wrong doctype (ie styles on a UL)...unfortunately, you're right--these did not help my bug .
    You need to pick a doctype, implement the appropriate DTD and then construct (and validate) your markup according to that doctype.

    You (now) have an HTML 4.01 Transitional DTD with markup that uses certain XHTML specifications (e.g. self-closing elements).

    I generally recommend using a Strict doctype as it offers the best x-browser/x-platform consistency for a site's layout.
    Seeing as you appear relatively unfamiliar with things such as doctypes, I would suggest that you use the HTML 4.01 Strict DTD (see below) and then construct your markup according to that specification.


    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">

    Fwiw, the correct way to nest lists is as follows…

    e.g.
    Code:
    <ul>
    	<li>…
    		<ul>
    			<li>option</li>
    			<li>option</li>
    		</ul>
    	</li>
    </ul>
    You have a 'malformed' nesting of lists in your code. This is flagged as an error in the validation report. Fixing it may well solve the issues you're currently experiencing with list item text not lining up with their icons.

  • #5
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    A few things:

    1. The validation may help because I'm almost positive a lot of the wackiness is in the way you're nesting your lists. Bill's on the right track here.

    2. Even when that's working, list-style-image is notoriously wacky cross-browser. It's better to do something like use "list-style: none" and add the image as a background image on the list item:

    Code:
    li {
       list-style: none;
       padding-left: 15px;
       background: url(listmarker.gif) no-repeat left .2em;
    }
    Something like that. You'll obviously have to play around with the padding and background position a bit to get exactly what you want, but this will work much easier as a cross-browser solution.

    Hope this helps...


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •