Johnny2 Posted January 10, 2013 Report Share Posted January 10, 2013 following along in the courses and we were taught to use * {margin: 0px; border: 0px; padding: 0px;} as a way of making all browsers work the same... but it doesn't allow me to make a table that looks normal. Can't figure out why... please help. Here is my html/css: <!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style> * {margin: 0px; border: 0px; padding: 0px;} </style> </head> <body> <table border="10px" margin="10px" cellpadding="10px"> <tr> <td>cats</td> <td>dogs</td> <td>apples</td> <td>twinkies</td> <td>ho ho's</td> <td>ding dongs</td> <td>oranges</td> </tr> <tr> <td>a</td> <td>b</td> <td>c</td> <td>d</td> <td>e</td> <td>f</td> <td>g</td> </tr> </table> </body> </html> Quote Link to comment Share on other sites More sharing options...
Andrea Posted January 10, 2013 Report Share Posted January 10, 2013 I'm not sure what you mean by 'normal', but this is what's happening: * {margin: 0; border: 0; padding: 0;} (note I deleted the unit of measure - we want zero everything, not just pixel) Removes margin, border, and padding from every single element that may or may not be on your page. In this situation, it removes those things from your table, table rows, and table cells, and you will have to add them back in where and how you want them, which you are trying to do, but it's clearly not working, and I honestly cannot tell you why. I even removed the 'px' which were not needed, and it still didn't work. My theory is that you're trying to use a very outdated way of doing things, and the browsers may just not recognize it any more. If you change to the current way of inline styling, things work (Right-click, pick view source, and you can see my code). The problem is that the formatting now only addresses the table, not its elements, so you would either have to add in styling to every single td, which would be pretty tedious, or you can just style the whole thing using internal (vs. inline) styling: Like This Does this help? If anyone knows why the initial way didn't work - even so I think it should - I'd be very interested. Quote Link to comment Share on other sites More sharing options...
falkencreative Posted January 10, 2013 Report Share Posted January 10, 2013 I changed <style> *{margin: 0px; border: 0px; padding: 0px;} </style> TO: <style type="text/css"> {margin: 0; border: 0; padding: 0;} </style> and it works. That's because you changed the CSS to be invalid (there is no selector to indicate what element(s) the margin/border/padding are being applied to), meaning the browser ignored the incorrect CSS. Quote Link to comment Share on other sites More sharing options...
coollew Posted January 10, 2013 Report Share Posted January 10, 2013 That's because you changed the CSS to be invalid (there is no selector to indicate what element(s) the margin/border/padding are being applied to), meaning the browser ignored the incorrect CSS. I see. Quote Link to comment Share on other sites More sharing options...
Johnny2 Posted January 11, 2013 Author Report Share Posted January 11, 2013 Thank you for your reply Andrea. What I mean by "normal", for the most part, is being able to see gridlines/cells in the table. They all just disappear when I use that wildcard CSS in my external stylesheet (or in internal styles for that matter). If that way of zeroing-out everything (to make all browsers play the same) is outdated, then why is Killersites teaching us to do it that way? Also, I'm not sure what you mean by "things work" in your link. I only see a table without gridlines when I click on it. Quote Link to comment Share on other sites More sharing options...
Andrea Posted January 11, 2013 Report Share Posted January 11, 2013 Setting things to zero is not outdated, but using the type of table styling you were using is. Paste a link to the tutorial you were following, so it can get updated. In my post, you'll find 3 links to pages with tables on them. The last one has a table with grid. If you right-click it, you can see the code I used to get it that way. The reason you don't see the gridlines in the 'things work' example is given here: The problem is that the formatting now only addresses the table, not its elements, so you would either have to add in styling to every single td, which would be pretty tedious, or you can just style the whole thing using internal (vs. inline) styling: Like This Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.