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 10 of 10
  1. #1
    New Coder
    Join Date
    Oct 2002
    Location
    || Canada ||
    Posts
    70
    Thanks
    0
    Thanked 0 Times in 0 Posts

    LI inside Tables & CSS

    I have a table on my page. There is an UL list inside that table.

    Everything on the page is basically planned out in an attached CSS file.

    The list and any words with it will be disc and there is a font defined and a colour.

    In explorer, everything looks wonderful, but when I try it in netscape, everything looks great except this list.

    I don't know CSS that well but is there any way to make sure that the list inside the table looks the same as it does in explorer?
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

    BODY {
    background : #FFFFFF;
    margin-top : 0%;
    margin-bottom : 3%;
    margin-right : 0%;
    margin-left : 0%;
    line-height : 1.3;
    font-weight : normal;
    color : #330000;
    }


    P {
    font-size : 10pt;
    font-family : helvetica,univers,arial,sans-serif;
    color : #330000;
    }


    TD {
    font-size : 10pt;
    font-family : helvetica,univers,arial,sans-serif;
    color : #330000;
    }


    UL {
    list-style : disk;
    font-size : 10pt;
    font-family : helvetica,univers,arial,sans-serif;
    color : #330000;
    }


    LI {
    font-size : 10pt;
    font-family : helvetica,univers,arial,sans-serif;
    color : #330000;
    }

    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

    That's only some of it, but the basics is here.

    Help?

    Thank you
    Last edited by undyingfires; 10-30-2002 at 01:21 PM.

  • #2
    Regular Coder
    Join Date
    Jun 2002
    Location
    Canada
    Posts
    254
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Try adding this to your css...

    TABLE TR TD UL LI {
    font-size : 10pt;
    font-family : helvetica,univers,arial,sans-serif;
    color : #330000;
    }

    It basically states... when it comes across an LI inside a UL inside a TD inside a TR which is inside a TABLE area... then do this effect. Its a bit overkill, but it may work. A shortened version may work also...

    TD UL LI {
    font-size : 10pt;
    font-family : helvetica,univers,arial,sans-serif;
    color : #330000;
    }

  • #3
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,253
    Thanks
    0
    Thanked 0 Times in 0 Posts
    list-style is only supported by NN 6.0 and up; on top of that, it's short-hand for list-style-type, -position and -image and therefore should state three values. Better use list-style-type; supported by NN 4.0 and up! Oh, and and it's disc.

    Source: W3Schools.com
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #4
    New Coder
    Join Date
    Oct 2002
    Location
    || Canada ||
    Posts
    70
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hehe, mmm.. should have seen that 'disk' Thanks ronaldb66


    I'll giver-er a try and see what happens

  • #5
    New Coder
    Join Date
    Oct 2002
    Location
    || Canada ||
    Posts
    70
    Thanks
    0
    Thanked 0 Times in 0 Posts

    :(

    Well here's what happened,
    I used the first section pb&j and it didn't work,
    Then I tired the second section and that didn't work.

    I tried your suggestion as well ronaldb66 and it didn't work either. I left all three changes in the css file and still no success. I view the page with netscape 4, 7, explorer 6 and opera 6.
    ns 4, nothing
    ns7, great
    ie 6, great
    opera, great (slight difference but good)
    And I am sure as stated that versions will affect what one sees.

    Then someone suggested to insert a <p> just after the <li> on my pages and of course everything worked even in ns 4 but only because ns was now reading the list as the body.

    Any more ideas would be great (using great a lot ). In the meantime, I'll have to use the <p> tag to make sure the colour comes through. Does <li> have a colour attribute?

    Thanks

    I also noticed that other css files I had, had the 'disk' problem so I had to change those too.


    I think if someone made a universal browser, they'd make a lot of money
    Last edited by undyingfires; 10-30-2002 at 02:11 PM.

  • #6
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,253
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Hmmm...

    I think if someone made a universal browser, they'd make a lot of money
    You are sooooooo right!!! Not to mention, a whole bunch of happy site builders!
    Well, NN 4.x is well (?!!) known for its sketchy support of CSS when it comes to tables; you could try assigning a specific class to your list, or, as suggested, slap an enveloping element around the list; however, i would prefer a DIV for that since it is more appropriate when it comes to structure, and slightly more neutral in its behaviour.
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #7
    New Coder
    Join Date
    Oct 2002
    Location
    || Canada ||
    Posts
    70
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hehe, someone that agrees with me! But I am sure there are so-o many others regarding this universal browser. Heck, if I knew programing and enough about everything, I'd give it a shot!

    Universal-ness is the Future for Internet Browser. Hear that you big companies, get the hint!!

    I'll try your suggestion Ronald, Thanks


    Heh, it's too bad these smiles didn't work in the signature

  • #8
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,253
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Typos?

    Something i thought of just now: sure there isn't an inconspicuous typo somewhere? I for one have sweated regularly one those, wondering why the font-family i specified just wouldn't show.
    A small selection:

    font-familiy: verdana,sans-serif (notice the extra "i")

    clas="foo" (an "s" to few)

    border-style solid (left out the ":")

    Seperated they are obvious, but in a jumble of styles they can easily be missed.
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #9
    Senior Coder
    Join Date
    Jun 2002
    Location
    Wichita
    Posts
    3,880
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The answer to "jumbled styles" is the same answer to jumbled web pages. The proper use of white space on a web page can make it a whole lot more readable, likewise the proper use of whitespace in coding can make the coding a lot more readable.

    Consider the following two pages which render exactly the same in the browser but one of them is a lot easier to read and maintain.

    Code:
    <html><head><title>Example page</title><style type="text/ccc">.aClass{font-family: Arial Helvetica sans-serif;font-size: 150%;color: #FF00FF;}</style></head><body><h1>Example page</h1><p class="aClass">Some content</p></body></html>
    Code:
    <html>
    	<head>
    		<title>Example page</title>
    		<style type="text/ccc">
    			.aClass
    				{
    				font-family: Arial Helvetica sans-serif;
    				font-size: 150%;
    				color: #FF00FF;
    				}
    		</style>
    	</head>
    	<body>
    		<h1>Example page</h1>
    		<p class="aClass">
    			Some content
    		</p>
    	</body>
    </html>

  • #10
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,253
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I know, but while trying to figure out styles for a new design clarity and correct indentation often take the back seat to experimentation; i usually start with an inline mess, to end up with a nicely laid out, well indented external style sheet. But, somewhere along the way, things aren't always that pretty...
    Regards,
    Ronald.
    ronaldvanderwijden.com


  •  

    Posting Permissions

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