Can any of you please do me a quick favour and convert this ugly table into its neat CSS based counterpart... In my stylesheet I will have: ul { list-style: disc url(bullet_red.jpg) inside; } Code (markup): The bullet as in the HTML Table below will be just an <ul>/<li> as styled by the stylesheet. <table border="0" cellpadding="0" cellspacing="0" width="601" align="center"> <tr> <td colspan="3" class="large"> <dd> <dd><b><i>If you like...</i></b> </td> </tr> <tr> <td width="126"> </td> <td width="11"><img src="images/bullet.jpg" width="8" height="8"></td> <td width="289" class="medium">This</td> </tr> <tr> <td width="126"> </td> <td><img src="images/bullet.jpg" width="8" height="8"></td> <td class="medium">That</td> </tr> <tr> <td> </td> <td> <img src="images/bullet.jpg" width="8" height="8"> </td> <td class="medium"> And the other </td> </tr> <tr> <td> </td> <td> </td> <td> <dd><b><i>... then do such and such</i></b></td> </tr> </table> Code (markup): I'd like to preserve the lot being centred, the first line left, the list centered and the last line right-ish like it is when you use the HTML Table. Loads of Green or a little PayPal donation available if you impress me
Here is how I would do it, I have left the old table on there too. You will just have to adjust the margins to get it positioned as you want in its location I got it roughly the same but you may want it more accurate. <HTML> <HEAD> <TITLE></TITLE> <style> #list { margin: 0 auto; width: 601; _text-align: center; } .list { margin-left: 150px; list-style: disc url(bullet_red.jpg) inside; } .boldit { font-weight: bold; font-style: italic; } .first{ margin-left: 40px; } .second { margin-left: 250px; } </style> </HEAD> <BODY> <table border="0" cellpadding="0" cellspacing="0" width="601" align="center"> <tr> <td colspan="3" class="large"> <dd> <dd><b><i>If you like...</i></b> </td> </tr> <tr> <td width="126"> </td> <td width="11"><img src="images/bullet.jpg" width="8" height="8"></td> <td width="289" class="medium">This</td> </tr> <tr> <td width="126"> </td> <td><img src="images/bullet.jpg" width="8" height="8"></td> <td class="medium">That</td> </tr> <tr> <td> </td> <td> <img src="images/bullet.jpg" width="8" height="8"> </td> <td class="medium"> And the other </td> </tr> <tr> <td> </td> <td> </td> <td> <dd><b><i>... then do such and such</i></b></td> </tr> </table> <div id="List"> <p class="boldit first">If you like...</p> <ul class="list"> <li>This</li> <li>That</li> <li>And the other</li> </ul> <p class="boldit second">... then do such and such</p> </div> </BODY> </HTML> Code (markup): EDIT I also just thought you will have problems with IE as it interates margins diffrently to FF but there are hacks for that.
Very neat bit of code, so much cleaner. I didn't read through it properly first time round, implemented it now and it's loads better, thanks!
IE 6 decided to ignore the stylesheet (Opera and FF behave well) and centres the bulleted text... Any ideas on making IE like this too? IE also refuses to display my text... Relevant CSS defnitions are: p { line-height: 1.5em; } TD.info { text-align: justify; vertical-align: middle; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #000000; text-indent: 6%; } TD.description { text-align: justify; vertical-align: middle; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; color: #000000; text-indent: 6%; } Code (markup): It does seem to add space for the text within the <p>'s, it just doesn't show up (not white on white either ). I have <td class="info"><p>text that doesn't show in IE but fine in Opera and FF</p></td> etc. Any ideas on those matters? I'm such a CSS/JS n00b I feel bad about it...
Do ya just love IE hear you go. Same again you may wanna adjust the margins to make them perfic for ya. All I did was use a the underscore to make certain properties only work for IE and give two diffrent margin seetings, you have to do this cos IE interprate margins diffrently to FF. I also had to change the alignment for the list and div for IE too. The only changes made though have been in the CSS. <HTML> <HEAD> <TITLE></TITLE> <style> #list { margin: 0 auto; width: 601; _text-align: center; } .list { margin-left: 150px; _margin-left: 370px; _text-align: left; list-style: disc url(bullet_red.jpg) inside; } .boldit { font-weight: bold; font-style: italic; } .first{ margin-left: 40px; _margin-left: 30px; } .second { margin-left: 250px; _margin-left: 420px; } </style> </HEAD> <BODY> <div id="List"> <p class="boldit first">If you like...</p> <ul class="list"> <li>This</li> <li>That</li> <li>And the other</li> </ul> <p class="boldit second">... then do such and such</p> </div> </BODY> </HTML> Code (markup):
If you use the HTML strick doc type it will behave slightly diffrently too. Hear is one I made if you want to use a doctype. The only downside of using the type of CSS hack I have used is it is not valid CSS and will not pass the validator the only way around that is to have two diffrent CSS files one for IE and one for all other browsers, then use comment selectors in the head of your doc so it only calls the CSS file needed. This only matters if you are bothered about making your sites valid.(As I do like to make my sites valid) <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <HTML> <HEAD> <TITLE></TITLE> <style> #list { margin: 0 auto; width: 601; text-align: center; } .list { margin-left: 340px; _margin-left: 370px; text-align: left; list-style: disc url(bullet_red.jpg) inside; } .boldit { font-weight: bold; font-style: italic; } .first{ margin-left: 240px; _margin-left: 270px; } .second { margin-left: 460px; _margin-left: 430px; } </style> </HEAD> <BODY> <div id="List"> <p class="boldit first">If you like...</p> <ul class="list"> <li>This</li> <li>That</li> <li>And the other</li> </ul> <p class="boldit second">... then do such and such</p> </div> </BODY> </HTML> Code (markup):
It will be on eBay and they don;t declare any doctype... From their header: <META http-equiv="Content-Type" content="text/html;charset=ISO-8859-1"> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> Code (markup):
Ah right sound I thought I had best give ya the slightly different version for a page that has a doc type aswell as the modifyed one to cater for crappy IE.
Thanks, the list looks great now (in IE bullets a bit near text but screw IE, who uses it anyways ). Any ideas on why IE refuses to show my text (while you're at it)? Solve that and I'll PayPal you a little something... Relevant CSS defnitions are: p { line-height: 1.5em; } TD.info { text-align: justify; vertical-align: middle; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #000000; text-indent: 6%; } TD.description { text-align: justify; vertical-align: middle; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; color: #000000; text-indent: 6%; } Code (markup): It does seem to add space for the text within the <p>'s, it just doesn't show up (not white on white either ). I have <td class="info"><p>text that doesn't show in IE but fine in Opera and FF</p></td> etc.