Jump to content
Killersites Forums

Table Messed Up By *{Margin: 0Px; Border: 0Px; Padding: 0Px;}


Recommended Posts

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>

Link to post
Share on other sites

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.

Link to post
Share on other sites

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.

Link to post
Share on other sites

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.

Link to post
Share on other sites

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

Link to post
Share on other sites

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.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...