Latest Lists

Home > Html Lists Bullet Information > Html Lists Bullet Knowledge Base > HTML unordered list help!?

HTML unordered list help!?

http://www.ivoog.com/link See the list with the 2 bullets where it says "violate any laws, third party rights, or our policies; violate our prohibited items policy;" How can I make that list to be lined up with "While using bob, you will never:" So I need the bullets to be lined up with the "W" Please edit the code for me or explain clearly. It MUST be cross-browser compatible. So it should look the same with Internet Explorer and Firefox. Please help! This is VERY annoying. Thank You! First answer to get it right gets the 10 points best answer and five stars! LOOK IN SAFARI AND INTERNET EXPLORER! IF I USE A NEGATIVE MARGIN THEY ARE BOTH DIFFERENT FROM EACH OTHER. Sorry, I meant Opera, not Safari. Sorry. If "psioniceagle" gets it right you will get 10 points and five stars!

Public Comments

  1. use CSS with a negative left-margin
  2. EDIT*********************************************************** I just downloaded that browser and see no difference between any of them using the style command, are you sure you typed it correctly or perhaps are using too large/small of a negative margin? ******************************************************************** EDIT AGAIN ****************************************************** I give up, as far as i can tell the <ul> indenation on opera is different then the rest of the browsers, so you have to decrease it by a greater margin to get it to look right, which screws up the other 3. If i take out the <ul> </ul> and just use <li> it screws up on firefox but works for the other three if you give them the same margin... *sigh*, i'd take the first route as i've never actually seen someone use opera -ever- as their main browser (not to say people don't, i just havn't seen them). is there a reason they have to look -exactly- the same... even on a more obscure browser that over 99% of people don't use? and even on that one it doesn't look terrible. *********************************************************************** EDIT****************************************** one more thought just came to my head, testing now... only works on IE... never mind. The last thought i have is you could do it with absolute positioning, but if you ever want to add.... anything..... to the page it becomes a real hassle and i have always always stayed away from doing it ******************************** above poster is kind of correct and there are two ways you can do it a better solution is to infact use CSS style sheets. add this code between your existing <style> </style> tags near the top li {margin-left:-10px} do note it may not be exactly 10 pixels, you may find -12 or -8 to your liking, play with it... but the number must be negative a less elegant solution is to simple take out the <ul> and </ul> tags and just use <li>, note that this ONLY works for bulleted unordered lists (which is what you are using). the above solution works for any kind of lists edit: found a typo in my style command..... doh, should work now edit2:further clarification This is what you have now: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>User Agreement</title> <style type="text/css"> .sty122 {font-size: large; font-family:Arial} .sty123 {font-size: small; font-family:Arial} .3543 {margin-top:10px} .dy098 {position:relative; margin-left:12px; margin-top:10px} .dy099 {position:relative; margin-top:10px; margin-left:10px} .style2 {font-size: x-large} </style> </head> <body> This is the change <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>User Agreement</title> <style type="text/css"> li {margin-left:-10px} .sty122 {font-size: large; font-family:Arial} .sty123 {font-size: small; font-family:Arial} .3543 {margin-top:10px} .dy098 {position:relative; margin-left:12px; margin-top:10px} .dy099 {position:relative; margin-top:10px; margin-left:10px} .style2 {font-size: x-large} </style> </head> <body> note the line returns aren't needed, they aren't bad either, but i did that just to make it stand out
  3. <blockquote>Using bob <br>While using bob, you will never: <p>* violate any laws, third party rights, or our policies; <br>* violate our prohibited items policy;</blockquote> </html> I deleted extra spaces.
  4. Either add this to your inline styles at the top of your html page (to make all the lists the same): ul { margin:0 5px 0 25px; padding:0; } Or change your unordered list tag in the html file to this: <ul style= "margin:0 0 0 25px; padding:0;" >
  5. All of these solutions will work. However there is a MUCH, MUCH easier way of doing it. Remove the <ul> and </ul> tags. They cause the indentation, and are not necessary to create a bullted list. For example instead of Here's my list <ul> <li>one</li> <li>two</li> <li>three</li> </ul> Do this Here's my list <li>one</li> <li>two</li> <li>three</li>
Powered by Yahoo! Answers