|
HTML - List Problem
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. Similar TutorialsI am making a website with a list inside list for my navigation bar. It looks good on safari(win/mac) and firefox but the list looks horrible in IE7.0(didnt check 6.0) I was wondering if anyone know what it could be HTML Code: Code: <div id="nav"> <img class="menupic" src="images/mainmenu.png" alt="Main Menu"/> <ul class="navli"> <li><a class="point" href="#"><img src="images/menu_findme.png" alt="findMe"/></a></li> <li> <ul class="navlinks"> <li><a href="#goto_facebook" id="facebook">- Facebook</a></li> <li><a href="#goto_myspace" id="myspace">- Myspace</a></li> <li><a href="#goto_youtube" id="youtube">- Youtube</a></li> </ul> </li> </ul> <ul class="navli"> <li><a class="point" href="#"><img src="images/menu_blog.png" alt="blog"/></a></li> <li> <ul class="navlinks"> <li><a href="#blogid2" id="blogid2">- Testing | May 01</a></li> <li><a href="#blogid1" id="blogid1">- Debut Album | Apr 30</a></li> <li><a href="#goto_blogarchive" id="blogarchive">- Archives</a></li> <li class="donthidethis"><ul class="navli donthidethiseither" style="padding:0;"> <li><a class="point" href="#">- Categories</a></li> <li><ul class="navlinks"> <li><a href="#goto_catid2" id="catid2">- Media</a></li><li><a href="#goto_catid1" id="catid1">- News</a></li><li><a href="#goto_catid3" id="catid3">- Off Topic</a></li><li><a href="#goto_catid4" id="catid4">- Tutorials</a></li> </ul></li> </ul></li> </ul></li> </ul> <ul class="navli"><li><a class="point" href="#"><img src="images/menu_eliasmusictv.png" alt="eliasMusic Tv"/></a></li> <li><ul class="navlinks"> <li><a href="#" id="coming">- Coming soon...</a></li> </ul></li> </ul> <ul class="navli"><li><a class="point" href="#"><img src="images/menu_about.png" alt="about"/></a></li> <li><ul class="navlinks"> <li><a href="#goto_biography" id="biography">- biography</a></li> </ul></li> </ul> <ul class="navli"><li><a class="point" href="#"><img src="images/menu_links.png" alt="links"/></a></li> <li><ul class="navlinks"> <li><a href="#" id="links">- Coming soon...</a></li> </ul></li> </ul> <ul class="navli"><li><a class="point" href="#"><img src="images/menu_contact.png" alt="contact"/></a></li> <li><ul class="navlinks"> <li><a href="#goto_contact" id="contactpage">contactForm</a></li> </ul></li> </ul> CSS Code: Code: #nav { float:right; width:195px; padding-left:20px; background:url("images/navback.png"); } #nav ul { list-style: none; margin-left:1px; border: none; } #nav .navli { padding-top:3px; padding-bottom:3px; } #nav .navlinks { padding-left:25px; } #nav .navlinks a,a:link { color:#262626; } #nav .navli img { margin-top:5px; margin-bottom:5px; } #nav .navlinks a:hover { color:#dadada; } #nav img.menupic { margin:20px 10px 5px 95px; } #nav a { font-size:14px; display:block; } #nav a.point { font-size:14px; font-weight:bold; } .navliover { background:url("images/navhover.jpg"); }
Any help at all would be appriciated please I can show u the website via Private message if you are interested in helping Thanks in advance Reply With Quote 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> <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> 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 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 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 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>
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. 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. 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... Last week I decided to build my first site to get a better idea of how it is done. I found the code for a scrolling list in an old design I had from years ago. I cut the code out and placed it into a new template I am editing. It'll work, but there's two problems. I've spent about 6 hours searching for solutions or whole new code to use but it seems like there isn't much use for a scrolling list any more. Problem One: There doesn't seem to be any way to "execute" the selection on the list. I've placed the code below. I can scroll down the list - click on, say, Game 2, but it doesn't link anywhere. How would I either add a button that says "Go" and sends the user to the desired game url or have them simply click the title and link there? Problem Two: For some reason it displays completely differently in Firefox, Safari and IE. Not just a subtle difference: http://www.myimgs.net/images/zgds.jpg (Firefox) http://www.myimgs.net/images/aymd.jpg (IE) http://www.myimgs.net/images/dcqk.jpg (Safari) How would I make it display a little more uniformly across all browsers? I tried changing the values below but I don't see any difference at all. I'd rather it looked like the Safari version. --- <td valign="top" width="300" align="right"> <table width="300" border="0" cellspacing="0" cellpadding="0"> <tr> <td valign="top" rowspan="2"><form> <table width="300" border="0" cellspacing="0" cellpadding="0"> <tr> <td> <select name="highlight" multiple class="inputs3"> <option><game.html="#">Game 1</a></option> <option><game.html="#">Game 2</a></option> <option><game.html="#">Game 3</a></option> </select></td> </tr> </table> </form></td> </tr> </table> </td> </tr> </table> </td> <td width="1" height="80%" bgcolor="#CBCBCB"><img src="images/dot.gif" width="1" height="1" alt="" border="0"></td> </tr> 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 & 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 Hello, I'm trying to program a couple unordered lists into my web page and I encountering a problem. I can't seem to align them with the top of the cell. They act as if there's an extra list item above the first one. Here's the URL to the page: http://www.cactusridgerr.com/CCRR/comfort.htm Here's the code for the bottom two cells with the lists in them: Code: <tr> <td style="vertical-align: top; padding-left: 0px; padding-top: 0px;"> <ul type="disc" style="margin: 1em;"> <li>Elegant dining room</li> <li>Fireside lounge</li> <li>Library and computer room</li> <li>Craft room & country kitchen</li> </ul> </td> <td style="vertical-align: top; padding-left: 0px; padding-top: 0px;"> <ul type="disc" style="margin: 1em;"> <li>Wellness and exercise spa</li> <li>Beauty salon</li> <li>Theater and multi-purpose room</li> </ul> </td> </tr> Does anyone know why they refuse to be aligned with the top of the cells? 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. I have a big list and I want to show on my webpage 6lines from that list randomly (when webpage is refreshed another 6 lines appear). can anyone help me with he code, how should the list look like so it works...or where can I find more info on this ? thanks Hello, I ran into this problem today in my Basic XHTML class, and it was enough to stump me and the instructor: if you want to put an unordered list in the middle of a page, but you want the list items to be left-aligned so the bullets are one on top of the other...how do you do it? I started with code something like <div align="center"> <ul type="disc"> <li>Wine</li> <li>Women</li> <li>Song</li> </ul> </div> This centers the list on the page, but it also centers each list item. I tried placing a <div align="left"> around the list items, individually and collectively, but depending on the positioning it either had no effect or it nullified the center attribute completely and gave me a left-aligned list on the left edge of the page. Attempts to change the style of the <li> tag, which I haven't done in months and was never all that good at, failed. I know I can do this in ten seconds by putting the list inside a one-cell table, and with much fiddling I could probably do it with a spacer GIF...but what's the 1.0 Strict way? hi, I need to display all the names in the list box. So using select tag i have done this. When the data exceeds the scroll bar will be displayed. But the scrollbar stands in top and shows the top data. Instead i need to display the bottom data that is the scroll bar should be always down and when the user needs the top then they can scroll and see it. Can you please give me suggestions to be done like this. regards thiru List boxes and Text boxes Hi I need to design a list with yearnumbers like this: 1980 Born in LA 1986 School in NY with hollydays 1998 University in London . . .and so on. the following approach has unfortunately a dot after the number: <ol> <li value="2009">Dotzigen, Svizzera, nel ambito del Summerdays 09</li> <li value=""></li> <li value=""></li> <li value=""></li> <li value=""></li> <li value=""></li> |
|||||||