Splurd Posted December 9, 2008 Share Posted December 9, 2008 I learned html a long time ago (3?4? years ago)and now I'm in a job as a webdeveloper. so the concept of depreciated HTML is new to me I only realised this when IE started misbehaving. Anyway, so I'm looking thru the html tags and see some of the depreciated, in particuar ol's type attribute. And right now I'm trying to get a ordered list like this <table border="0"> <tr> <td colspan="2">a.<a href="/ect/html"> URL goes here </a></td> </tr> <tr> <td> </td> <td>I use tables due to long text descriptons which go to 2nd line. So tables to make them aligned</td> </tr> <tr> <td colspan="2">b.<a href="/ect/html"> URL goes here </a></td> </tr> <tr> <td> </td> <td>I use tables due to long text descriptons which go to 2nd line. So tables to make them aligned</td> </tr> <tr> <td colspan="2">c.<a href="/ect/html"> URL goes here </a></td> </tr> <tr> <td> </td> <td>I use tables due to long text descriptons which go to 2nd line. So tables to make them aligned</td> </tr></table> I'm in a tad of a rush, so I'm not going to edit the css file but use inline css, and how can I get it done with css? Basically want to know how to do a. b. c. instead of 1. 2. 3.And is there a way to break the numbering and start again.:edit btw very sorry if this sounds like I'm too lazy to take my thumb out of my arse and learn the basics my self but like I said, in a bit of a rush >_< : Link to comment Share on other sites More sharing options...
Ingolme Posted December 9, 2008 Share Posted December 9, 2008 Just look through the W3Schools CSS reference.The list-style-type property will do what you want. list-style-type: lower-alpha; Link to comment Share on other sites More sharing options...
Jerry62704 Posted December 9, 2008 Share Posted December 9, 2008 Ingolme has the css you need relative to the type of display on the list. Set a width to the list should cause word wrapping. Inline css is OK, but I don't see any. <!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" ><head><title>test</title><style type="text/css"> div ol {list-style-type: lower-alpha;} li {width: 8em; background-color: yellow;} ul {list-style-type: lower-alpha;}</style></head><body><div> <ol> <li>inside div this is a long list item and it is going here</li> <li>this is a shorter item</li> </ol><div> <ol> <li>outside div this is a long list item and it is going here</li> <li>this is a shorter item</li> </ol> <ul> <li>this is a long list item and it is going here</li> <li>this is a shorter item</li> </ul></body></html> This page won't display correctly in IE6 due to the "hasLayout" bug. Look at it in FF to see the "number" (lower alpha) increment right. The color is for the fun of it.This demonstrates you don't need tables to position things and that css can let the word wrapping happen. Link to comment Share on other sites More sharing options...
Splurd Posted December 10, 2008 Author Share Posted December 10, 2008 Ingolme has the css you need relative to the type of display on the list. Set a width to the list should cause word wrapping. Inline css is OK, but I don't see any.<!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" ><head><title>test</title><style type="text/css"> div ol {list-style-type: lower-alpha;} li {width: 8em; background-color: yellow;} ul {list-style-type: lower-alpha;}</style></head><body><div> <ol> <li>inside div this is a long list item and it is going here</li> <li>this is a shorter item</li> </ol><div> <ol> <li>outside div this is a long list item and it is going here</li> <li>this is a shorter item</li> </ol> <ul> <li>this is a long list item and it is going here</li> <li>this is a shorter item</li> </ul></body></html> This page won't display correctly in IE6 due to the "hasLayout" bug. Look at it in FF to see the "number" (lower alpha) increment right. The color is for the fun of it.This demonstrates you don't need tables to position things and that css can let the word wrapping happen. Still new to css, so excuse me if I dont use it much :)Tables still appeal to me as the easiest way to organize text. And I have to achieve browser neutrality so it will display fine in all browsers. (well focus is on IE and firefox mostly)But the world of css does seem very versatile. Link to comment Share on other sites More sharing options...
Jerry62704 Posted December 10, 2008 Share Posted December 10, 2008 Still new to css, so excuse me if I dont use it much :)Tables still appeal to me as the easiest way to organize text. And I have to achieve browser neutrality so it will display fine in all browsers. (well focus is on IE and firefox mostly)But the world of css does seem very versatile.I use to use tables as well. We all did. The NS/IE browser wars of the 90s was painful and caused me to ignore css for years.I just wanted to demonstrate that using current technology isn't hard and will do everything a table will do. You have to decide what you want to use and if it works for you, go for it. I've fought this battle with my son who is in the same boat as you are (but without a father that knows this stuff and loves to help with it).You can hard code the list using tables if you want. It gets you around the <ol> problem. The code will be much harder to fix down the road and much larger (loads slower), but that isn't the problem you have now. So back to basics.You originally said you had a deprecation issue with ol, but you didn't list any ol in your example. Could you post that part of it?The first questions I would ask are:Has the page passed the validator?Has the css passed the validator?What DOCTYPE are you using?Where is the link as it is much easier to fix if we have a live link? Link to comment Share on other sites More sharing options...
Splurd Posted December 15, 2008 Author Share Posted December 15, 2008 You originally said you had a deprecation issue with ol, but you didn't list any ol in your example. Could you post that part of it?The first questions I would ask are:Has the page passed the validator?Has the css passed the validator?What DOCTYPE are you using?Where is the link as it is much easier to fix if we have a live link?Well, if you did a simple copy past and look at the code I orignally posted, it shows a list, but its hardcoded out.Anyway, thru some experimentation I find that this method works.<ol style="list-style-type: lower-alpha;"> <li>url goes here</li> Description goes here<br><br> <li>url goes here</li> Description goes here<br><br> <li>url goes here</li> Description goes here<br><br></ol> Link to comment Share on other sites More sharing options...
Jerry62704 Posted December 15, 2008 Share Posted December 15, 2008 Well, if you did a simple copy past and look at the code I orignally posted, it shows a list, but its hardcoded out.Anyway, thru some experimentation I find that this method works.<ol style="list-style-type: lower-alpha;"> <li>url goes here</li> Description goes here<br><br> <li>url goes here</li> Description goes here<br><br> <li>url goes here</li> Description goes here<br><br></ol> I guess my reply got eaten by the internet fairies. Sigh.No, your original post (as seen here) did not include any lists of any kind. But that isn't important. The code example you have here is full of errors. Try to validate it and you will see what I mean. I guess you could use something like this: <li>url goes here<br> Description goes here<br><br></li>Be sure to use a DOCTYPE and you will probably have to change the <br> to <br />. Do you have the full page available? Link to comment Share on other sites More sharing options...
jlhaslip Posted December 15, 2008 Share Posted December 15, 2008 have a look at the Definition lists to do what you have happening here.dl/dt/dd Link to comment Share on other sites More sharing options...
Ingolme Posted December 16, 2008 Share Posted December 16, 2008 I guess my reply got eaten by the internet fairies. Sigh.No, your original post (as seen here) did not include any lists of any kind. But that isn't important. The code example you have here is full of errors. Try to validate it and you will see what I mean. I guess you could use something like this: <li>url goes here<br> Description goes here<br><br></li>Be sure to use a DOCTYPE and you will probably have to change the <br> to <br />. Do you have the full page available?I don't recommend <br><br> at all; give it padding or margin instead, that's exactly what they're there for.And, like jlhaslip, definition lists would do a better job for this. Link to comment Share on other sites More sharing options...
Jerry62704 Posted December 16, 2008 Share Posted December 16, 2008 I don't recommend <br><br> at all; give it padding or margin instead, that's exactly what they're there for.And, like jlhaslip, definition lists would do a better job for this.I'm not against line breaks where they are working. I would normally use a margin and sometimes padding to position things. I would also include the self-closing "<br />" version of course.Why do you think a definition list would be better at a menu than an unordered list? I'll check the link after lunch. Link to comment Share on other sites More sharing options...
jlhaslip Posted December 16, 2008 Share Posted December 16, 2008 In this case, the link is the DT (definition term) and the text could be the DD (definition data).Set margins/padding to style them without all the br's. Perfect for this application. Link to comment Share on other sites More sharing options...
Ingolme Posted December 16, 2008 Share Posted December 16, 2008 I'm not against line breaks where they are working. I would normally use a margin and sometimes padding to position things. I would also include the self-closing "<br />" version of course.Why do you think a definition list would be better at a menu than an unordered list? I'll check the link after lunch.The fact that it just works isn't a reason to not follow good practice. I recommend CSS over <br>s for two reasons: less useless markup, and each browser chooses its own size for the line unless you secify the text size with pixels. You'll be loading the CSS from cache, so every time the page is loaded, you're saving your server from sending 8 more bytes of text than it would have done (saving bandwidth). 8 bytes isn't a lot for one page, but if you keep adding <br>s all over all your pages, it adds up.The definition list works for what he's doing because it has a "title" and "description" for each link (however, it won't add "a.", "b.", "c." next to each link). Link to comment Share on other sites More sharing options...
Jerry62704 Posted December 16, 2008 Share Posted December 16, 2008 The fact that it just works isn't a reason to not follow good practice. I recommend CSS over <br>s for two reasons: less useless markup, and each browser chooses its own size for the line unless you secify the text size with pixels. You'll be loading the CSS from cache, so every time the page is loaded, you're saving your server from sending 8 more bytes of text than it would have done (saving bandwidth). 8 bytes isn't a lot for one page, but if you keep adding <br>s all over all your pages, it adds up.The definition list works for what he's doing because it has a "title" and "description" for each link (however, it won't add "a.", "b.", "c." next to each link).His original post shows the list is for a menu. I've never heard of using a definition list for a menu before. What he needs is the menu and perhaps a tool tip.Sometimes people try to make a case that <br> isn't semantic, but they are wrong. OTOH, I usually use css for placement - I just don't get worked up over someone else using <br> or not. When they use it multiple times (as in this case), then I agree with you that they are not using it correctly. But the bigger issue is they don't know how to code the basic construct at all and that is a big problem down the road. Relying of the browser getting the tags wrong isn't a way to go. That's why I suggested validating the page first.I don't think you and I are that far apart on this issue. <g> Link to comment Share on other sites More sharing options...
Ingolme Posted December 16, 2008 Share Posted December 16, 2008 "Menu" is just a human term, there's no <menu> element, because it was deprecated. If the menu is simple, like - Item- Item- Item or 1. Item2. Item3. Item then <ul> or <ol> work well. But the menu this person is showing is more like this: Title DescriptionTitle DescriptionTitle Description The definition list (<dl>) is an element designed specifically for this purpose, that's why I recommend it over other types of list. If you use another type of list for it, you're actually dividing each list item into two list items which isn't semantically correct. Link to comment Share on other sites More sharing options...
Splurd Posted December 17, 2008 Author Share Posted December 17, 2008 I guess my reply got eaten by the internet fairies. Sigh.No, your original post (as seen here) did not include any lists of any kind. But that isn't important. The code example you have here is full of errors. Try to validate it and you will see what I mean. I guess you could use something like this: <li>url goes here<br> Description goes here<br><br></li>Be sure to use a DOCTYPE and you will probably have to change the <br> to <br />. Do you have the full page available?What I meant was, in my original post, I was listing out items, by hard coding them using tables and manually typing in a. b. c. It was not using <ol> Dont just look at the code and say that its not a list >_<I didnt use definition lists because they wanted it to be in a list format, with a. b. c. ectan uhhh, the site does fail validation miserably. But its complex and messy and will be "revamped" eventually. So I'm not really concerned with correct or wrong, as long as it displays properly in the browsers. Link to comment Share on other sites More sharing options...
jlhaslip Posted December 17, 2008 Share Posted December 17, 2008 as long as it displays properly in the browsers.Then the use of BR's, List items doesn't really matter. Continue using tables is okay with me.Come back when you need advise about the correct way to do things. We'll be here. Link to comment Share on other sites More sharing options...
Jerry62704 Posted December 19, 2008 Share Posted December 19, 2008 What I meant was, in my original post, I was listing out items, by hard coding them using tables and manually typing in a. b. c. It was not using <ol> Dont just look at the code and say that its not a list >_<I didnt use definition lists because they wanted it to be in a list format, with a. b. c. ectan uhhh, the site does fail validation miserably. But its complex and messy and will be "revamped" eventually. So I'm not really concerned with correct or wrong, as long as it displays properly in the browsers.It's OK by me. But browsers aren't interested in you eventually fixing the page. They will display, by their own rules, exactly what you have here and now. Saying "I want it proper" and you don't care if it is "correct or wrong" are mutually exclusive.Tell your car you don't care if it has gas or not, but you want to drive to the store. Link to comment Share on other sites More sharing options...
Splurd Posted December 26, 2008 Author Share Posted December 26, 2008 The site I'm working on is kinda old, all the original coders have run away and frankly no one knows how it works anymore.Its full of bad practices and alot of hard coding, it does not have a doctype and the pages that do have a doc type are using the default one from dreamweaver. which is not a strict doctype. If fails validation badly. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.