|
HTML - Ordered Lists In Ie7
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. Similar TutorialsHi 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 Hi everyone I am new to these forums and I am having trouble with ordered lists on one of the article on my site: http://boostplace.com/automotives/fitting-a-motorcycle-helmet/ If you look at the list it goes from 1 to 9 then resets to zero. Please can someone help me with this? I am using wordpress 3.2.1 as my cms P.S. I didn't want to link the article properly as this is my first post. Sorry about having to copy an paste. Thanks Hello, I am trying to generate customize numbering style for HTML ordered list like below: 1. Item no 1 2. Item no 2 a) sub item 1 b) sub item 2 (i) level no 3 (ii) level no 4 Is it possible (through css may be) to generate bullet numbers in Parenthesis? any sample code? Thanks. Hi, Is there any way such that i can use ordered list to number the rows of a table?? Nikhil Hi there, I'm new to this forum; got here researching the best method to do a task in HTML dealing with ordered lists. Basically I'm trying to figure out the best method to have the word "Step" precede the number in an ordered list, so that <ol> <li>first line of text</li> <li>next line of text</li> <li>last line of text</li> </ol> would return Step 1. first line of text Step 2. next line of text Step 3. last line of text I know how to do this using background images with CSS, but that isn't ideal because any formatting changes to the text would require making a new gif or jpg for the word "step." Does anyone know how to do this? Thanks for your help! I've got three drop-down lists in a navbar that displays properly in IE but not in Firefox or Sea Monkey. I can't figure out what I'm doing wrong. The lists under "Historic District" and "Take Action" are fine, but the two items under "Blog" don't show up in FF or SM. The "Blog" links are external. Would that matter to FF and SM? The WC3 turned up the likely error, but when I added and/or removed a ul and/or li tag, I got strange results and was unable to fix the problem. If someone can explain what I should do and why I'd appreciate it. WC3 flagged the <ul> tag after <li><a href="http://west80s.blogspot.com/">Blog</a></li> because: "document type does not allow element "UL" here; assuming missing "LI" start-tag" Here's the site: http://west80s.org/ Here's the code: Code: <ul class="NavHoriz-menu">
<li class="first"><a href="index.htm">Home</a></li>
<li>
<a href="http://">Historic District</a>
<ul>
<li class="first"><a href="Historic-District.htm">Proposed District</a></li>
<li><a href="letters-index.htm">Support the Historic District</a></li>
<li><a href="GB-pix.htm">Gilbert Brownstones</a></li>
<li><a href="WestPark.htm">West Park Church</a></li>
<li><a href="330-W-86-St.htm">330 W 86th St</a></li>
</ul>
</li>
<li><a href="http://west80s.blogspot.com/">Breaking News</a></li>
<li><a href="http://">Take Action</a>
<ul>
<li class="first"><a href="hydrofracking.htm">Hydrofracking</a></li>
<li><a href="letters-index.htm">Support the Historic District</a></li>
</ul>
<li><a href="MembershipForm.htm">Join</a></li>
<li><a href="mailto:info@west80s.org">Contact Us</a></li>
<li><a href="http://west80s.blogspot.com/">Blog</a></li>
<ul>
<li class="first">
<a href="http://west80s.blogspot.com/2011/07/please-help-us-wipe-out-graffiti-this.html">Graffitti Removal</a></li>
<li><a href="http://west80s.blogspot.com/2011/07/weve-adopted-tree.html">Beautificaiton</a></li>
</ul>
</li>
</ul>
Thanks for any help. Ellen Hello, I've been working on my website recently and I've found a problem that I have no idea how to fix. I have an unordered list that serves as the menu on the left of the site. I've been trying to remove the black dots that come with the unordered list. They only show up on the first one and they blemish the site. I want to keep it with a list because it allows for pleasing aesthetics in combination with my CSS (link hover changes the color). Is there a way I can keep the same look and get rid of the dots? Code: <html> <head> <link rel="stylesheet" type="text/css" href="style.css" /> <title>Bob's Page</title> </head> <body> <center> <img class="center" src="img/banner.jpg"></center> <div class="left"> <ul> <li><a href="index.html">Home</a></li> <li><a href="about.html">About</a></li> <li><a href="products.html">Products</a></li> <li><a href="mailto:robert.t.adams5@gmail.com">Contact Me</a></li> </ul> </div> <div class="right"> <p>Text goes here. </div> </body> </html> look at it he http://eco-heater.bobadams.x10hosting.com I have some drop down list tests I am playing with he http://www.my-plague.net/list.php There are a few thing I need help with: 1) If I don't put a "select" url, if go is clicked on I get a server error. I just want it to do nothing. e.g. with the header. 2) If I put a style for a "select" that has no url, then the list reverts to a square more box-like shape. 3) I want to make the go button open the urls in a new window. 4) I don't know what the js code at the end does because it still works without it (found the code in a tutorial) : Code: <script language="JavaScript">
<!--
function gotoLink(form) {
var OptionIndex=form.ListBoxURL.selectedIndex;
parent.location = form.ListBoxURL.options[OptionIndex].value;}
//-->
</script>
Hi, I have a basic understanding of HTML, and now I have a problem. My blog is on www.wrappedfolds.blogspot.com. I am trying to make my list on my blog navigational rather than just a list. I want all of the designs (the list is after where it says "a list of my designs") to be links to the article that they're posted on. I have read plenty about it, but I can't seem to get it to work. I am currently trying to create some nested lists to display the following... A...R...X B...S...Y C...T...Z (where the letters will eventually be replaced by words) and have made this work perfectly in chrome and firefox, however when I use Internet Explorer I get something resembling the following... A B...R C...S...X .....T...Y ..........Z I assume it's probably to do with the css, but please can someone help me with this problem, the html and css are shown below, thanks in advance for any help. HTML Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <link rel=stylesheet href="links.css" type="text/css"> </head> <body> <div id="container"> <ul id="links-nav"> <li> <ul> <li><a href="#">A</a></li> <li><a href="#">B</a></li> <li><a href="#">C</a></li> </ul> </li> <li> <ul> <li><a href="#">R</a></li> <li><a href="#">S</a></li> <li><a href="#">T</a></li> </ul> </li> <li> <ul> <li><a href="#">X</a></li> <li><a href="#">Y</a></li> <li><a href="#">Z</a></li> </ul> </li> </ul> <div class="clear"></div> </div> </body> </html> CSS Code: #container{
width:960px;
margin:0px auto;
border: 1px solid #000;
padding:20px 10px;
height:auto;
font-family: Arial, sans-serif;
font-size:11px;
}
.clear {
clear: both;
height: 0;
overflow: hidden;
}
a{
text-decoration:none;
color:#555;
}
#links-nav li, li ul li{
list-style:none;
}
#links-nav{
display:inline;
margin:0;
padding:0;
}
#links-nav li ul{
float:left;
padding:0;
width:168px;
padding: 0px 10px;
}
Hi all.... Ive been having issues trying to get these two lists below to look the same. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>MESH, Inc. - Home</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<div id="container">
<img id="banner" src="images/topbanner.png" alt="top banner">
<ul id="top-nav">
<li><a href="mcad_project.html">mcad<span id="mcad"></span></a></li>
<li><a href="niosh_project.html">niosh<span id="nios"></span></a></li>
<li><a href="mcad_project.html">mcad<span id="moad"></span></a></li>
<li><a href="mcad_project.html">mcad<span id="scad"></span></a></li>
<li><a href="cloud_mapping.html">cloud<span id="clou"></span></a></li>
<li><a href="cloud_mapping.html">cloud?<span id="what"></span></a></li>
</ul>
<ul id="nav">
<li><a id="active" href="home.html">Home</a></li>
<li><a href="products.html">Products</a></li>
<li><a href="services.html">Engineering Services</a></li>
<li><a href="projects.html">Projects</a></li>
<li><a href="publications.html">Publications</a></li>
<li><a href="contact_us.html">Contact Us</a></li>
<li><a href="about_us.html">About Us</a></li>
</ul>
<div id="content">
<div align="center"><span style="font-weight:bold;">ENGINEERING SERVICES</span></div><br>
<p>
Since 1978, MESH has been providing clients with engineering services to
solve their most complex problems. We specialize in:
</p>
<ul id="services">
<li>Software and hardware interfaces </li>
<li>Real-Time Software </li>
<li>Prototyping </li>
<li>Sensor Interfacing </li>
<li>Signal Processing </li>
<li>Electronic Design </li>
<li>User Interface and Design</li>
</ul><div align="center"><span style="font-weight:bold;">CHEMICAL/BIOLOGICAL STANDOFF MONITORING PRODUCTS</span></div><br>
<p class="padding-bottom">MESH provides leading edge technology to safeguard people and facilities from chemical and biological hazards. The MESH standoff systems, unlike point detectors, are not dependent on airborne threats finding their way to the detector or sampling point. The standoff sensors include: </p>
<ul id="services2">
<li>MCAD – Standoff sensor for chemical vapors at distances in excess of 6km </li>
<li>Dragonfly – Standoff aerosol sensor (either chemical or biological). </li>
<li>Firefly – Standoff vapor or aerosol hyperspectral imager based on innovative technology, resulting in an affordable approach to the next generation of chemical sensing. </li>
</ul>
</div><!-- end #content -->
<div id="footer">610-932-7754 <a href="mailto:info@meshoxford.com">info@meshoxford.com</a></div>
</div><!-- end #container -->
</body>
</html>
Heres the style sheet.... dont think this is the problem Code: body {
margin:10px;
background-color:#f0f0f0;
font-family:verdana,arial,helvetica,sans-serif;
font-size:16px;
overflow-y:scroll;
}
#container {
width:776px;
margin:auto;
background-image:url(../images/container-white-bg.png);
box-shadow:#333 15px 15px 30px;
}
#banner {
display:block;
width:760px;
height:120px;
padding:8px 8px 0 8px;
background-color:#066;
}
#top-nav {
width:768px;
height:81px;
padding:8px 0 8px 8px;
margin:0;
list-style-type:none;
background-color:#066;
}
#top-nav li {
float:left;
margin-right:8px;
}
#top-nav a,#top-nav span {
position:relative;
display:block;
width:120px;
height:81px;
line-height:81px;
font-size:90%;
font-weight:bold;
color:#000;
text-align:center;
background-color:#cff;
}
#top-nav span {
position:absolute;
top:0;
left:0;
background-image:url(../images/gallery-banner.png);
}
#top-nav span:hover {
opacity:0.5;
filter:alpha(opacity=50);
}
#top-nav a:hover {
text-indent:-9999px;
}
#top-nav #active-top:hover {
text-indent:0;
}
#top-nav a:hover {
text-indent:-9999px;
}
#top-nav #active-top span {
display:none;
}
#mcad {background-position:-8px -8px;}
#nios {background-position:-134px -8px;}
#moad {background-position:-260px -8px;}
#scad {background-position:-386px -8px;}
#clou {background-position:-512px -8px;}
#what {background-position:-638px -8px;}
#nav {
float:left;
width:120px;
padding:0 8px;
margin:0;
list-style-type:none;
background-color:#066;
}
#nav li {
margin-bottom:2px;
}
#nav a {
display:block;
width:120px;
padding:30px 0;
font-size:90%;
font-weight:bold;
color:#000000;
text-align:center;
background-color:#699;
}
#nav a:hover {
color:#fff;
}
#nav #active {
background-color:#cff;
}
#nav #active:hover {
color:#000;
}
#content {
float:left;
width:610px;
padding:25px 15px 10px 15px;
}
h1 {
margin:0 0 10px;
font-size:140%;
text-align:center;
}
#content p {
margin:0 0 10px;
font-size:90%;
color:#000;
}
#services {
font-size:110%;
color:#000;
}
.text-indent {
text-indent:20px;
}
.padding-bottom {
padding-bottom:16px;
}
#footer {
clear:both;
line-height:30px;
font-size:90%;
color:#cff;
text-align:center;
background-color:#066;
}
#footer a {
margin:0 40px;
color:#cff;
}
Thanks Coothead edit: photo of what it looks like in FF Hello, I am new here and hope someone can help. I am creating a page where I need to have several nested lists. The 'numbering' is showing up correctly but the 'nested' lists are not indented. Can anyone take a look at the page and my source code and see if you can help me figure out what is wrong? go to http://www.prewrath.com/index2.html Thank you! bzig I put this code in : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org.TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>My first web page</title> </head> <body> <h1>My first web page</h1> <h2>What this is</h2> <p>A simple page put together using HTML</p> <h2>Why this is</h2> <u1> <li>To learn HTML</li> <li> To show off <o1> <li>to my boss</li> <li>to my friedns</li> <li>to my cat</li> </o1> </li> <li>Because I've fallen in love with my computer and I want to give her some HTML lovin</li> </u1> </body> </html> I'm not getting the indentation or the numbers for the ordered list. Any suggestions would be greatly appreciated. Hi, i want to add a horizontal overflow to the div element that holds the UL. each LI is displayed along side each other using Float:left. however, when they reach the end of the page it starts a new line. how can i get it so it doesnt start a newline, but carrys on in a line and can be scroll-able? thankyou Code: bodywrapper {
width:930px;
margin:auto;
margin-top:20px;
background:url(../images/layout/main_body_bg.jpg) repeat;
}
/*Image Gallery*/
#gallery ul {
margin-left:-30px;
margin-bottom:0;
margin-top:-10px;
}
#gallery ul li {
display:block;
float:left;
height:100px;
width:100px;
padding-top:10px;
padding-right:10px;
}
.thumbnails {
outline:none;
border:none;
}
.thumbnails_link {
outline:none;
}
Hey -- is there a difference between how Opera and Firefox interpret lists? My site appears to be reading the same in both browsers except that the lists (a considerable part of the design) are not showing up in the same manner. Is there something I can do about this? http://www.trekandromeda.com/index/techindex.html http://www.trekandromeda.com/index/home.css The entire site is written at this point so the other pages will show the same problem. Can anyone help me with this? Hey everyone, I just want to ask a simple question... What is the best element to use to arrange content? I've tried div's, tables and now lists but I still don't know what to use. What do you guys think? hi all, im having a bit of a problem displaying a list horizontally, and its really getting a bit frustrating. as far as i can see, it should be a case of using display:inline on the li tags, but so far no luck. ive included my css below: Code: #navigation ul
{
list-style-type:none;
padding:0px;
margin:0px;
}
#navigation ul li
{
display:inline;
}
#navigation ul li a
{
display:block;
width:90px;
height:30px;
color:#fff;
text-align:center;
text-decoration:none;
}
#navigation ul li a:hover
{
background-color:#EF4252;
}
and my html: Code: <td id="navigation"> <ul > <li> <a href="contact.html" >Contact Us</a> </li> <li> <a href="wwd.html" >What We Do</a> </li> </ul> </td> any help would be appreciated. thanks Hi i am working on XSLT. the problem some text is given with list labels but it is not aligned properly. so for that i created a <div> and <span> tag as below: <ul style="list-style:none"> <li> <span style="float:left;width:30px;text-align:left;position:relative"> <span class="ro">(a)</span>*</span> <div style="margin-left:10px;width:75%;float: left;position:relative">The conduct of Centrelink cannot be made the subject of complaint or inquiry under the Anti-Discrimination Act because:<ul style="list-style:none"><li> <div style="clear:both;"/> </li> There was also issue in firefox of overlapping text which was solved by using clear:both. the issue is that in <div> i have used width="75%" due to which much whitespace is coming on R.H.S of the page. is there any other option instead of using width? width=75% is chosen after many trials. as nested lists can also be there. otherwise text comes to next line. Hello everyone! I have this client who has a lot of resellers, and all of them are on a list in his website, so that when customers look for someone to buy from, they can choose through his site. However, he is afraid that if the list is static, no one will bother to look beyond the first 2 or 3 names, and the ones in the bottom of the list will never be contacted. So, I need to create a method to display the resellers list in such a way that everytime one accesses the list, the order is changed at random, but always displaying all the names. The HTML code the names are arranged right now is a simple table with one reseller per TR tag. I don't work with MySQL, so the solution should be something else... PHP or Java preferred. Thanks in advance! |
|||||||