HTML - List Items Aligning The Right Problem In Ie
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. Similar TutorialsHello, 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? 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 see the use of the <ul> and <li> tags when creating things like menus and in the case of digg and gamegrep at the least, comments. I can see a possible use with comments for indentatiing replies to other comments. The question still stands for things like menus though, does it have to do with search engine crawlers and how they parse the page? Any insight by anyone who knows anything about this would be nice. Thanks Hi Folks, I'm a newbi and just learning. Does anyone know if there is a tag or an object that would allow me to enter the same short list of items on several pages and be able to change the list on all the pages by changing it on one page? In other words if I change the list items on say a master page, it changes the list on all other pages where the same items are listed? Thanks for your help. Joel Hi, I know this is being an extreme perfectionist. But, if you look at http://www.tendervendors.com/dev/hr_systems.html, at the selected link on the navigation bar (HR Systems), you'll see that there are 2 lines either side of the HR Systems (selected) link. This is fine, however because the bottom border is on the other links and not the selected one, and the two side borders are on the selected link, the don't line up. I'm aware that i could specify the right border on the 1st link and the left border on the 3rd link, but i was trying to make it simple, so someone without alot of understanding and program it after i've done. So, i then thought, well i could overlap the links, 2px to the left, so set li { position:relative }, and then li {left:-2px}. but it doesn't overlap the li's, it overlaps the entire ul over the page (content div) border. Any ideas as to why this is? Thanks, Matthew Millar Hi every one I have a quick question. I'm building and interface this is make of unordered list items. Those list items are contained in a span so that interface can have separate look for the other links on the page. But when I validate my page in Dreamweaver I get some page errors that. Here is the error: The tag:"span" is not allowed within: "ul" It is only allowed within: a, abbr, acronym, address, b, bdo, big, button, caption, cite, code, dd, del, dfn, div, dt, em, fieldset, h1, h2, h3, h4, h5, h6. . ..[XHTML 1.0 strict] Now here is the code in question: HTML Code: <ul id="nav"> <span class="left_links"> <li class="nav_items_00"><a href="index.html">Home</a></li> <li class="nav_items_00"><a href="services.html">Services</a></li> <li class="nav_items_00"><a href="gallery.html">Gallery</a></li> <li class="nav_items_00"><a href="events.html">Events</a></li> <li class="nav_items_00"><a href="http://hsgsphoto.wordpress.com/" target="_blank">Blog</a></li> <li class="nav_items_00"><a href="about.html">About</a></li> </span> The page that you can see this code in action is located at: http://www.hsgsphoto.com I guess my question is what would be the best practice in this situation. I need the a way to tell this group of links to act different then links in other parts of the page but the error I'm getting in validation is that list items (li) tags are not to be used within a span. Thank you so much for any feed back and help John Hi there, I was wondering if it's good practice to put <li> tags inside table cells. Normally, I would just put the list items in their own div container without the table, but for specific design reasons, I need to separate the list items in their own table data cells. This is how I'm currently doing it: Code: <div id="container"> <ul> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td><h2>List Header</h2></td> </tr> <tr> <td height="29"><li><a href="itemone.html">Item One</a></li></td> </tr> <tr> <td height="29"><li><a href="itemtwo.html">Item Two</a></li></td> </tr> <tr> <td height="29"><li><a href="itemthree.html">Item Three</a></li></td> </tr> <tr> </table> </ul> </div> Notice that the H2 header isn't actually a list item but is still within the <ul> tags. Is any of this confusing or incorrect for google indexing? Hi this is my first post. I am frustrated with how the bulleted "inspection" list is not aligned to the top. This is the code I'm working with: Code: <div id="table"> <table> <tr> <td><h4>Auto Repairs</h4> </td> <td><h4>Maintenance</h4></td> <td><h4>Inspections</h4></td> </tr> <tr> <!--Auto Repairs--> <td> <ul> <li><strong>Brake Repair & Brake Pads</strong></li> <li>Custom Exhaust</li> <li>Check Engine</li> <li>Battery</li> <li>Alternators</li> <li>Starters</li> <li>Timing Belt</li> <li>Waterpump</li> </ul> </td> <!--Maintenance--> <td> <ul> <li>30, 60, 90k-mile Service</li> <li>Oil Changes</li> <li>Tune Ups</li> <li>Transmission Service</li> <li>Power Steering Flush</li> <li>Antifreeze/Coolant Service</li> <li>Brake Fluid Flush</li> </ul> </td> <!--Inspections--> <td> <ul> <li>Free 30-Point Inspection</li> <li>MD State Inspections</li> <li>Emissions</li> <li>Diagnostics</li> </ul> </td> </tr> </table> Thanks for helping me. Hi there, I have a list box which is dynamically populated by data from an SQL Server database. I want there to be 2 columns of data inside the list box but the problem is the first column can be blank on some occasions, resulting in it looking like this: Code: example - example example - example - example example - example - example example - example Is there any way I can divide the list box into 2 seperate columns so the data lines up even in the first column is blank? Like this.... Code: example - example example - example - example example - example - example example - example Thanks! Matt oooooooooops! Hello all, I am having a problem vertically aligning something inside a <li> element. This is the code I'm talking about: Code: <ul class="small_nav2"> <li class="small_nav_back"><a href="javascript: ;" onclick="hide_more_nav();" id="scroll_nb"></li> <li class="small_nav_next"><a href="javascript: ;" onclick="hide_more_nav();" id="scroll_nn"></li> </ul> It has the following CSS attached: Code: .small_nav2 { margin: 0 0 40px 0; } .small_nav_back { background:url("images/shadow_left.png") no-repeat scroll right top transparent; height:90px; left:0; position:absolute; top:5px; width:20px; } .small_nav_back a { background:url("images/btn_arrow_left.gif") no-repeat scroll left top transparent; display:block; height:19px; width:14px; top:5px; } As you can see, there is a <li> item, that has a background-image, and a hyperlink within that <li> item, that also has a background-image. Now I want that hyperlink (the block of 19x14) to align vertically within the <li> element. But how can I do that? I've tried (I hope in the right manner) to use vertical-align: middle, and adjusted the line-heigt as well. To no succes. You can see it all in action HERE Hi guys, I need help with IE7. If I open my webpage in Firefox it looks like screenshot1.png but when I open it in IE7 it displays like screenshot2.jpg. A live preview @ http://www.rawox.webege.com/home.php. Does anyone know how to fix this? I'm trying for 2 hours now and I can't get it Thanks in advance, Rawox I 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 hello, i've placed an image gallery to my website . i am unable to align it to the center, Hello everyone, my first post here, I was wondering if anyone could help. I'm pretty inexperienced with websites, but I've been drafted in by a friend to help the online side of his business. I've been updating his website and come up with www.amarininn.com However, the fading javascript image is being placed in the middle of the page in IE and in Firefox and Chrome the Booking button and other image links are sitting behind the image, not underneath it. How can I fix this? Secondly, it seems www.amarininn.com ( the old website) is hosting malware. Is there an easy way to diagnose and fix this? I'm tempted to just format the whole thing and start afresh. This is a great looking forum and I hope to learn a lot here. Any help with my questions would be most appreciated. JonnieO 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> <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> 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 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. |