View Full Version : LI inside Tables & CSS

10-29-2002, 04:31 PM
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?
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

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.


Thank you :)

10-30-2002, 06:07 AM
Try adding this to your css...

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...

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

10-30-2002, 09:16 AM
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

10-30-2002, 02:23 PM
Hehe, mmm.. should have seen that 'disk' :o Thanks ronaldb66

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

10-30-2002, 03:07 PM
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 :o ). 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 :D so I had to change those too.

I think if someone made a universal browser, they'd make a lot of money :p

10-31-2002, 10:53 AM
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! :thumbsup:
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.

10-31-2002, 02:08 PM
Hehe, someone that agrees with me! But I am sure there are so-o many others :D 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

10-31-2002, 04:49 PM
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.

Roy Sinclair
10-31-2002, 04:57 PM
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.

<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>

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

11-01-2002, 08:21 AM
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... :o