HTML - Problem With Ordered List

Hey Everyone,
Has anyone else had this problem? I create an ordered list, and set the type="1". The numbers appear in Firefox, but do not appear in IE7 even though there is a margin there for the number. Help is appreciated.

Hi folks,

I would really like to create a list that looks like this:

A1) Item 1
A2) Item 2
A3) Item 3
...

The A ties in to a "type A" something, and another list with B1, B2, B3, etc. items will be tied into a "type B" something, and so on.

So far I haven't been able to figure out how to do this. I can make an (A, B, C) or (a, b, c) or (i, ii, iii) or of course (1, 2, 3) list, but none of these will serve my purposes. I very specifically need an (A1, A2, A3) list.

Am I pretty much stuck doing this manually with a table or is there a way to accomplish what I'm after using the list or order list tags? Does CSS provide a means?

Hi..
I understnad that
Code:

<ol><li> Car</li>
<li>Bus</li>
<li>Train</li></ol>

will display
1.Car
2.Bus
3.Train

I want the lists to appear decending order as in

3.Car
2.Bus
1.Train

The logic is "Train"-- was added first, and the most recent addition-- "Car" is shown at the top
Now these lists are added dynamicaly .. so i cannot use the START

Any help is great help
Thank you
Deepa

Hello...I posted a question about this before but it doesn't seem to have caught anyone's eye so I thought I'd try again:

http://www.trekandromeda.com/index/news.html
http://www.trekandromeda.com/index/home.css

I've got this site cross-browser compatible in Firefox, IE7, and Safari and was about ready to put it up for viewing when I discovered that Opera (which I have to consider because some of my community members use it) is reading the lists slightly bizarrely -- if you look at the page above you'll notice that the date/title things are offset oddly from the blue image in a way that they are not in either Firefox or IE.

Does anyone know why this is, and if so, does anyone know how to fix it? I really need to get this working soon, and it's the only problem I have left to solve.

I got a problem with the list I pasted below. I would like to get rid of the space between the last </dd> and the opening of the <ol> tag. Is their any other way I can do this so I don't have the space between the 2 elements?




<dl>

<dt>CHAPTER 1:Why HTML Rocks!</dt>

<dd>Coding isn't for pussies</dd>

<dd>What do you need to know</dd>

<dd>Common Mistakes</dd>

<ol>

<li>Eat</li>

<li>Sleep</li>

<li>Huh?</li>

</ol>

</dl>

Thanks

I recently posted this in the middle of someone else's thread, which wasn't the best thing to do, so here it is again in its own thread.

On my web site I have a drop-down menu with a "Go" button beside it. when JavaScript is enabled in Firefox and IE7, selecting an option from the list automatically takes you to that location without touching the Go button.

However, when JavaScript is disabled, the drop-down's automatic redirection is also disabled. So you need a "Go" button next to the drop-down bar. This works in Firefox, but it doesn't work in IE7, and I don't know why.

Any help would be gratefully received.

You can see the drop-down working at: http://www.historyfiles.co.uk/MainFeaturesIndex.htm

Here's the script:
<table border="0" cellpadding="0" cellspacing="0">
<form method="get" action="" tabindex="3" target="_top">
<tbody>
<tr>
<td height="16">
<select name="link" class="xbar" onchange="if (this.options[selectedIndex].value != '') location.href=this.options[selectedIndex].value">

<option value="#">
Choose a topic
</option>

<option value="MainFeaturesIndex.htm">
British Isles
</option>

</select>&nbsp;<input value="Go" src="images/nav-gobutton.jpg" border="0" value="Go" alt="Go" type="image" class="xGo" tabindex="4" onclick="if (this.options[selectedIndex].value != '') location.href=this.options[selectedIndex].value" width="22" height="16">
</td>
</tr>
</tbody></form>
</table>

Hey there, I'm new to the forums, and never really asked for help on a site before, but I'm stuck.

Basically, i have a client that needs an automated way to send forms for bookings online. So far, i have created a basic HTML page that the client can import > as text in Outlook and the html gets placed into the Email. This works fine, as the user can fill out the form and reply back to us. The problem happens when i add the following code:

Code:

<select name="accomodation">
                <option value="" selected="selected">Please Select</option>
                <option value=""> -------------------------- </option>
                <option value="32">1 Bedroom Studio</option>
                <option value="41">1 Bedroom Spa</option>
                <option value="48">1 Bedroom Deluxe Spa</option>
                <option value="39">2 Bedroom Spa</option>
                <option value="42">2 Bedroom Deluxe Spa</option>
                <option value="45">3 Bedroom</option>
                <option value="46">Houses / Cottage</option>
              </select>

Now this code works when originally inserted into the email, i can make a selection and email it away, and the selection stays and is visible when opened. But once the email is sent, any further changes (a reply back, forward etc.) will break the drop down and just splatter the list in my table.

Is there any way to correct this? any other option of code i could use or a setting i can use to stop the break?

Help would be greatly appreciated.

Thanking you,

Evan.

I am an HTML n00b and don't understand why this simple example is not working as I would like. I want 2 levels of indentation for list items and then I want the next line to be back at the zero margin. However, the last line is coming out indented as far as the previous list item as though the browser is remembering the margin settings for that item.

How do I get the last line back to the zero margin?

Code:

<html>
<head>
<style>
<!--
p.Standard
	{margin-top:0cm;
	margin-right:0cm;
	margin-bottom:0cm;
	margin-left:0cm;
	line-height:128%;
	font-size:11.0pt;
	font-family:"Calibri","sans-serif";}
li.Level1
	{margin-top:0cm;
	margin-right:0cm;
	margin-bottom:0cm;
	margin-left:0cm;
	line-height:128%;
	font-size:11.0pt;
	font-family:"Calibri","sans-serif";}
li.Level2
	{margin-top:0cm;
	margin-right:0cm;
	margin-bottom:0cm;
	margin-left:1cm;
	line-height:128%;
	font-size:11.0pt;
	font-family:"Calibri","sans-serif";}
-->
</style>
</head>

<body lang=EN-AU link=blue vlink=blue style='tab-interval:36.0pt'>
 <li class=Level1>This is a list item</li>
  <li class=Level2>This is indented</li>
<p class=Standard>I want this back with zero margin</p>

  </body>
</html>

Hi there, i'm in the middle of setting up a shopping cart and have a little problem!

I'm laying out the privacy page, and when I select numbered list for the formatting of some Terms and conditions, the numbers that run onto 2 lines are not indenting like the line above it. So the first line is indented with the number and the bottom line is aligned to the left. It looks untidy.

It appears fine in dreamweaver but not when I upload to server. I'm sure there is a simple explanation for this, here is the address: http://www.thinking-forward.co.uk/privacy.cfm

How come when ever I had a num/bullet list and the lines break, it shows up like this:


This is a test this is a test this is a test thiestThis is a test this is a test this is a
test this is a test this is a test thiestThis is a test this is a test this is a test t
1. hiestThisis a test this is a test this is a test thiest.




The # 1. Should be before the first line Always... This is driving me crazy... I am using sharepoint designer, and it looks fine there, but when I load it in a browser, it shows up like it does above...

Hey,

I've got this problem involving a list in IE. I've basically made a LI within another LI like so:-

Code:

<ul class="mainNav">	  
        <li><a href="/index.php?frc=1" class="first">Home</a></li>
        <li><a href="/GamePortal.php">Games</a></li>
        <li class="headlink"><a href="/edit_profile.php">My Profile</a>
        	<ul>
			<li><a href="/edit_profile.php">Game Profile</a></li>
			<li><a href="/link.php">Community Profile</a></li>
		</ul>
        </li>
        <li><a href="/promotions.php">Promotions</a></li>
</ul>

This generates a sort of list underneith a list to be used as a dropdown menu.
I've assigned it some CSS to do this

Code:

.mainNav li.headlink ul {
	list-style: none; 
	display: none; 
	float: none;	
	margin: 0px;	
	position: absolute;
	top: 35px;		
	z-index: 100;	
	min-width: 72px;
	text-align: center;
	padding: 5px;
}

What happens is that when using FF the content displays perfect (no suprises there) but when I use IE for the same page, it moves the drop down list to the end of the item above on it's x axis (the y is fine).

I've tried all sorts of different things; I used relative which worked but then expanded the LI item above it shifting everything along in the line. So it has to be absolute positioned to stop that from happening. I've messed about with every single margin I can think of to no avail.


Any Ideas.

Hi all,

[LINK REMOVED]

Just in the process of changing this website from a black layout with a background to an all white layout... I'm wishing I had started from scratch now but I stupidly tried to work with the existing site.

So anyyways you can ignore the crappy looking bits because my question is just about the menu bar at the top... It's made from an inline list. Is there any way that I could spread it out across the screen, so that the menu item on the right is hard up against the right?

The other thing is that the site will be in 3 or 4 languages so the menu items will have more characters in Spanish (for example). It needs to be able to adapt, or I need to implement a different solution for each language.

The html looks like this:
Code:

			<!-- main navigation -->
			<ul id="nav">
				<li class="home">
					<a href="index.htm"><span>Home</span></a>
				</li>
				<li>
					<div>
						<ul>
							<li><a href="message-from-director.htm">Message From Director</a></li>
							<li><a href="what-is-15-15.htm">What is 15/15?</a></li>
							<li><a href="festival-history.htm">Festival History</a></li>
							<li><a href="judges-special-guests.htm">Judges &amp; Special Guests</a></li>
						</ul>
					</div><a href="#"><span>About 15/15</span></a>
				</li>
				<li>
					<div>
						<ul>
							<li><a href="register-now.php">Register Now</a></li>
							<li><a href="get-ready.htm">Get Ready</a></li>
							<li><a href="conditions-of-entry.htm">Conditions of Entry</a></li>
							<li><a href="faq.htm">FAQ</a></li>
						</ul>
					</div><a href="#"><span>How To Enter</span></a>
				</li>
				<li>
					<div>
						<ul>
							<li><a href="screening-information.htm">Screening Information</a></li>
							<li><a href="nominations.htm">2009 Nominations</a></li>
						</ul>
					</div><a href="#"><span>Programme</span></a>
				</li>
				<li>
					<div>
						<ul>
							<li><a href="films.htm">Films</a></li>
							<li><a href="festival-trailers.htm">Festival Trailers</a></li>						
						</ul>
					</div><a href="#"><span>Archives</span></a>
				</li>
				<li>
					<div>
						<ul>
							<li><a href="festival-sponsors.htm">2009 Festival Sponsors</a></li>
						</ul>
					</div><a href="#"><span>Sponsors</span></a>
				</li>
				<li>
					<div>
						<ul>
							<li><a href="press-releases.htm">Press Releases</a></li>
							<li><a href="images.htm">Images</a></li>
						</ul>
					</div><a href="#"><span>Newsroom</span></a>
				</li>
					<li class="contact">
					<div>
						<ul>
							<li><a href="contact-us.php">Contact Us</a></li>
							<li><a href="15-15-committee.htm">15/15 Committee</a></li>
						</ul>
					</div><a href="#"><span>Contact</span></a>
				</li>
			</ul>

...and the CSS looks like this:

Code:

#nav {
	font-size: 15px;
	line-height: 20px;
	list-style: none;
	padding: 0;
	position: absolute;
	top: 250px;
	left:-5px;
	width: 750px;
}
#nav li {
	display: inline;
	float: left;
	margin: 0 0 0 0px;
	position: relative;
}
#nav a {
	color: #000;
	float: left;
	text-decoration: none;
}
#nav a span {
	cursor: pointer;
	float: left;
	display: inline;
	font-weight: bold;
	line-height: 30px;
	padding: 0 5px;
}
#nav li.hover a,
#nav li:hover a {
	background: url(../img/active-l.gif) no-repeat 0 0;
}
#nav li.hover a span,
#nav li:hover a span {
	background: url(../img/active-r.gif) no-repeat 100% 0;
}
#nav .contact div {
	background: #D3D2D2 url(../img/bg-bg-t2.gif) no-repeat 0 -1px;
	left: auto;
	right: 0;
}
* html #nav .contact div {
	right: -1px;
}
#nav div {
	background: #D3D2D2 url(../img/bg-bg-t.gif) no-repeat 0 -1px;
	display: none;
	left: 0;
	padding: 5px 0 0;
	position: absolute;
	top: 30px;
	width: 168px;
	z-index: 100;
}
#nav li.hover div,
#nav li:hover div {
	display: block;
}
#nav div ul {
	background: url(../img/bg-b.gif) no-repeat 0 100%;
	list-style: none;
	margin: 0;
	overflow: hidden;
	padding: 0 0 5px;
	text-transform: none;
	width: 168px;
}
#nav div ul li {
	margin: 0;
	padding: 0;
	width: 168px;
}
#nav li.hover div ul li a,
#nav li:hover div ul li a {
	background: none;
	color: #000;
	display: block;
	line-height: 30px;
	padding: 0 0 0 9px;
	width: 159px;
}
#nav li.hover div ul li a:hover,
#nav li:hover div ul li a:hover {
	background: #D9581F;
}

Any ideas?

Thanks so much in advance...

Neil

Somebody suggested I do this using list items instead of left-floating DIVs, so I did. But I have no other experience of working with lists and no matter what I do, I can't get the list items to sit right next to each other. There's always a gap between them that I can't get rid of.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<HTML xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<HEAD>

<STYLE>
ul { list-style-type:none; }
li { display:inline; }
  #headings { font-family:Courier New; line-height:25px; font-size:16px; font-weight:bold; text-align:center; margin-top:10px; }
  #headings a { background-color:#000; padding:7px; padding-top:4px; padding-bottom:2px; border:1px solid #f00; }
  #headings A:link { color:#ccc; }
  #headings A:visited { color:#ccc; }
  #headings A:hover { background-color:#aaa; color:#000; }
</STYLE>

</HEAD>
<BODY>


<DIV id="headings">
<UL>
<LI><A HREF="p1.html">News</A></LI>
<LI><A HREF="p2.html" onMouseover=showmenu(event,linkset[0],'110px') onMouseout=delayhidemenu()>Produkt</A></LI>
<LIl><A HREF="p3.html">Media</A></LI>
<LI><A HREF="p4.html">Downloads</A></LI>
<BR>
<LI><A HREF="p5.html" onMouseover=showmenu(event,linkset[1],'166px') onMouseout=delayhidemenu()>Col Dee</A></LI>
<LI><A HREF="p6.html">Contact</A></LI>
<LI><A HREF="p7.html">Guestbook</A></LI>
</UL>
</DIV>


</BODY>
</HTML>

As you can see the "panels" are split into two rows using a simple linebreak.

By the way, I've managed to get zero top and bottom margins by controlling the line-height attribute.

Can anyone help with this?

Thanks for reading,
Seymour.