7 replies [Last post]
Envinyatar
Offline
Regular
Johannesburg, South Africa
Last seen: 10 years 21 weeks ago
Johannesburg, South Africa
Timezone: GMT+2
Joined: 2004-02-26
Posts: 11
Points: 0

What is the coding to make a horizontal list?

Tags:
Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 day 21 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5076
Points: 2654

Horizontal list coding

Hi Envinyatar,
You code the list as a normal list then to display a list horizontally you can set the CSS display property to inline or float the li's.
Here's a great article on lists http://www.alistapart.com/articles/taminglists/

Hope that helps

Envinyatar
Offline
Regular
Johannesburg, South Africa
Last seen: 10 years 21 weeks ago
Johannesburg, South Africa
Timezone: GMT+2
Joined: 2004-02-26
Posts: 11
Points: 0

Horizontal list coding

This is exactly what I was looking for.

Thanks Tony

Envinyatar
Offline
Regular
Johannesburg, South Africa
Last seen: 10 years 21 weeks ago
Johannesburg, South Africa
Timezone: GMT+2
Joined: 2004-02-26
Posts: 11
Points: 0

Horizontal list coding

Now I have run into another problem.

In the Mozilla browser it displays the list as horizontal, but in IE it still shows it as vertical. Is there something not right here?

td.topnav {
	margin: 0px;
	padding: 0px;
	height: 40px;
	width: 100px;
	text-align: left;
	font-family: Verdana,Arial,Tahoma;
	font-size: 8pt;
	color: #000;
	background-color: #b5cff7;
	}
td.topnav ul { margin-left: 0px; padding-left: 0px; display: inline; }
td.topnav li {
	margin-left: 0px;
	padding: 3px 10px;
	height: 40px;
	width: 100px;
	display: inline;
	}
td.topnav li a {
	display: block;
	display: inline;
	margin: 0px;
	padding: 3px 10px;
	height: 40px;
	width: 100px;
	text-decoration: none;
	color: #000;
	}
td.topnav ul li a:hover { background-color: #ecf5ff; }

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 day 21 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5076
Points: 2654

Horizontal list coding

Hi Envinyatar,
Is the page in quirks mode?

Envinyatar
Offline
Regular
Johannesburg, South Africa
Last seen: 10 years 21 weeks ago
Johannesburg, South Africa
Timezone: GMT+2
Joined: 2004-02-26
Posts: 11
Points: 0

Horizontal list coding

Quirks mode??

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 day 21 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5076
Points: 2654

Horizontal list coding

Hi Envinyatar,
There's been heaps of talk about quirks and standards mode here.
IE renders closer to everything else if it's in standards mode. To be in standards mode it needs a correct doctype.

Can you link to an example page so we can see whats happening.

Envinyatar
Offline
Regular
Johannesburg, South Africa
Last seen: 10 years 21 weeks ago
Johannesburg, South Africa
Timezone: GMT+2
Joined: 2004-02-26
Posts: 11
Points: 0

Horizontal list coding

:oops:

I had set the cell I was working in to a certain width and IE was wrapping the text. That's why it seems as if the list was vertical.

Sorry to bother you Tony.