rainwater Posted February 24, 2010 Share Posted February 24, 2010 Hey all you smart people. I have another 'probably' stupid question, but I'm not afraid to ask.I am going through the books recomended here in this forum, however, their forum is aged itself so there is no moderator. I searched their forum and there was no question like mine. I know you will have an answer for me.23.12.2012 perhaps you have my answer as you referred me to this book. Head First HTML with CSS and XHTML.I am nearing the end of the book, and there is no example or answer for me. I made a table and inserted it into my .html file.I made the .css file with the styling as instructed.The table is supposed to have a border of light gray dotted. I have tried it in four different browsers, and it looks the same in all of them. It comes out solid. Please, will you look at it and see where I have gone wrong. It is driviing me crazy. I have tried changing all the things and it won't work. The book doesn't say to do this, but on one of my tries, I changed the .css file to say:table td, th { border: thin dotted gray; padding: 5px;} The book said:td, th { border: thin dotted gray; padding: 5px;} It almost worked. It made most of the lines dotted.Here is the code as listed in the book to do. I must have made a mistake somewhere.body { font-family: Verdana, Geneva, Arial, sans-serif; font-size: small;}h1, h2 { font-weight: normal; color: #cc6600; border-bottom: thin dotted #888888;}h1 { font-size: 170%;}h2 { font-size: 130%;}blockquote { font-style: italic;}table { margin-left: 20px; margin-right: 20px; border: thin solid black; caption-side: bottom; border-collapse: collapse;}td, th { border: thin dotted gray; padding: 5px;}caption { font-style: italic; padding-top: 8px;}THE HTML FILE<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <title>My Trip Around the USA on a Segway</title> <link type="text/css" rel="stylesheet" href="journal.css" /> </head> <body> <h1>Segway'n USA</h1> <p> Documenting my trip around the US on my very own Segway! </p> <h2>August 20, 2005</h2> <p><img src="images/segway2.jpg" alt="Me any my Segway in New Mexico" /></p> <p> Well I made it 1200 miles already, and I passed through some interesting places on the way: </p><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <style type="text/css"> td, th {border: 1px solid black;} </style> <title>Testing Tony's Travels</title></head><body> <table summary="This table holds data about the cities I visited on my travels. I've included the date I was in each city, the temperature when I was there, and altitude an population of each city. I've also included a rating of the diners where I had lunch, on a scale from 1 to 5."> <caption> The cities I visited on my Segway'n USA travels </caption> <tr> <th>City</th> <th>Date</th> <th>Temperature</th> <th>Altitude</th> <th>Population</th> <th>Diner Rating</th> </tr> <tr> <td>Walla Walla, WA</td> <td>June 15th</td> <td>75</td> <td>1,204 ft</td> <td>29,686</td> <td>4/5</td> </tr> <tr> <td>Magic City, ID</td> <td>June 25th</td> <td>74</td> <td>5,312 ft</td> <td>50</td> <td>3/5</td> </tr> <tr> <td>Bountiful, UT</td> <td>July 10th</td> <td>91</td> <td>4,226ft</td> <td>4,173</td> <td>4/5</td> </tr> <tr> <td>Last Chance, CO</td> <td>July 23rd</td> <td>102</td> <td>4,780</td> <td>265</td> <td>3/5</td> </tr> <tr> <td>Truth or Consequences, NM</td> <td>August 9th</td> <td>93</td> <td>4,242 ft</td> <td>7,289</td> <td>5/5</td> </tr> <tr> <td>Why, AZ</td> <td>August 18th</td> <td>104</td> <td>860 ft</td> <td>480</td> <td>3/5</td> </tr> </table></body></html> <h2>July 14, 2005</h2> <p> I saw some Burma Shave style signs on the side of the road today: </p> <blockquote> <p> Passing cars, <br /> When you can't see, <br /> May get you, <br /> A glimpse, <br /> Of eternity. <br /> </p> </blockquote> <p> I definitely won't be passing any cars. </p> <h2>June 2, 2005</h2> <p><img src="images/segway1.jpg" alt="The first day of the trip" /></p> <p> My first day of the trip! I can't believe I finally got everything packed and ready to go. Because I'm on a Segway, I wasn't able to bring a whole lot with me: </p> <ul> <li>cellphone</li> <li>iPod</li> <li>digital camera</li> <li>and a protein bar</li> </ul> <p> Just the essentials. As Lao Tzu would have said, <q>A journey of a thousand miles begins with one Segway.</q> </p> </body></html> Link to comment Share on other sites More sharing options...
ShadowMage Posted February 24, 2010 Share Posted February 24, 2010 The table is supposed to have a solid black line around the outside and the interior grid lines (on each cell) are supposed to be dotted gray. table {margin-left: 20px;margin-right: 20px;border: thin solid black; //table bordercaption-side: bottom;border-collapse: collapse;}td, th {border: thin dotted gray; //grid linespadding: 5px;} What does your CSS look like? Just posting what the book says it's supposed to be doesn't tell us where you might have made a mistake. Link to comment Share on other sites More sharing options...
rainwater Posted February 24, 2010 Author Share Posted February 24, 2010 Oh gosh...I just looked here in the tutorial in the CSS table one....I guess I did it right....however, it still does not look right to me at the top where the headings are....the lines are still solid seperating the headings. Is it supposed to look like that? Link to comment Share on other sites More sharing options...
ShadowMage Posted February 24, 2010 Share Posted February 24, 2010 Oh gosh...I just looked here in the tutorial in the CSS table one....I guess I did it right....however, it still does not look right to me at the top where the headings are....the lines are still solid seperating the headings. Is it supposed to look like that?The table headers? No they should have a dotted gray border on all sides that do not meet the edge of the table. Link to comment Share on other sites More sharing options...
rainwater Posted February 24, 2010 Author Share Posted February 24, 2010 The table headers? No they should have a dotted gray border on all sides that do not meet the edge of the table.The code I posted is my code. The code in the book is in sections as I go through the chapter.I had taken a break, shut the computer down, and am now back; and now it displays ok escept for in IE, so I guess it is ok now.I was quite frustrated with this, and now it works! Sorry to have bothered all of you. Thank you for taking the time to respond. Link to comment Share on other sites More sharing options...
ShadowMage Posted February 24, 2010 Share Posted February 24, 2010 I had taken a break, shut the computer down, and am now back; and now it displays ok escept for in IE, so I guess it is ok now.In my books IE is bass ackwards anyway, when it comes to standards. But that's beside the point...How is it displaying in IE? What version of IE? Link to comment Share on other sites More sharing options...
rainwater Posted February 24, 2010 Author Share Posted February 24, 2010 In my books IE is bass ackwards anyway, when it comes to standards. But that's beside the point...How is it displaying in IE? What version of IE?IE7The headings bottom border is dotted while the dividing lines in the table headings are solid. All the rest of the browsers have the headings surrounded in a solid line. Opera, Foxfire, GoogleThe book had the code wrong for the table code ... my thinking is because the book is out of date. However, it is a real good book and has taught me a lot.table td, th {border: thin dotted gray;padding: 5px;} The book said:td, th {border: thin dotted gray;padding: 5px;} Link to comment Share on other sites More sharing options...
ShadowMage Posted February 24, 2010 Share Posted February 24, 2010 I just noticed something in the html code you posted in your first post. You have duplicated information. it looks as though you have one page started and then start another inside that one. You this segment at the very beginning: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/><title>My Trip Around the USA on a Segway</title> Then later you have: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/><style type="text/css">td, th {border: 1px solid black;}</style><title>Testing Tony's Travels</title> That's going to cause some serious problems. There are also duplicate </body> and </html> tags.As for the book being wrong about the CSS...it's not. table td, th {border: thin dotted gray;padding: 5px;} ...is exactly the same as td, th {border: thin dotted gray;padding: 5px;} The first one says that any td that is the child of a table or any th should be formatted with a dotted gray line. The second says that any td or th should be formatted with a dotted gray line. Since td and th can only appear inside a table, the two declarations are identical.FWIW, to make your CSS the way you intended (that is to say, any td or th inside a table) you'd need to put table in front of both td and th like this: table td, table th {border: thin dotted gray;padding: 5px;} Link to comment Share on other sites More sharing options...
rainwater Posted February 25, 2010 Author Share Posted February 25, 2010 Yes, I did have it incorrect. The book instructed to copy and paste, and I neglected to see that error. Thank you for catching that. And I changed the table .css to what you posted.table td, table th {border: thin dotted gray;padding: 5px;}We have been out of power all day since early this morning, and the wind is whipping, so will probably go out again. I wanted to check this forum though, to get caught up on my corrections.Thanks again, and I will be back when time allows. Link to comment Share on other sites More sharing options...
ShadowMage Posted February 25, 2010 Share Posted February 25, 2010 And I changed the table .css to what you posted.table td, table th {border: thin dotted gray;padding: 5px;}Note that, as I stated before, that is still the same as...td, th {...} ...since td and th can only appear within a table.Those are nested selectors. I was merely pointing out the fact that to select multiple tags nested inside a single one you need to put the parent tag name in front of each nested tag name. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.