1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Having some trouble with tables, formating, and CSS

Discussion in 'CSS' started by Josh Inno, Dec 11, 2006.

0
Page 1 of 2
  1. #1
    Hey there. I am having some trouble with formatting a table, and am hoping that someone can tell me how to use CCS styles to add some padding.

    I have a table that, in general, needs to have 0 cell padding, and 0 cell spacing, but I need some interior padding on 2 cells out of the table. Is it possible to give the table as a whole one style, and a specific cell in the table another? If so, how would you recommend best doing this?
     
    Josh Inno, Dec 11, 2006 IP
  2. LucasMS

    LucasMS Peon

    Messages:
    616
    Likes Received:
    11
    Best Answers:
    0
    Trophy Points:
    0
    #2
    try this::

    
<table cellpadding="0" border="0"><tr><td>No padding></td><td style="padding:2px;">2pixels padding</td></tr></table>
    Code (markup):
     
    LucasMS, Dec 11, 2006 IP
    Josh Inno likes this.
  3. Josh Inno

    Josh Inno Guest

    Messages:
    1,623
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    0
    #3
    That's basically what I have been trying. I have cellpadding="0" in the table tag, and cellpadding="2" in the td tag. It doesn't provide any padding to keep the text inside it from running up against the cell wall. I tried replacing cellpadding="2" with style="padding:2px;", but it change the result at all, the text is still rammed right up against the cell wall.
     
    Josh Inno, Dec 11, 2006 IP
  4. Josh Inno

    Josh Inno Guest

    Messages:
    1,623
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Just wanted to let everyone know that I got that problem solved. The solution was to move the cellpadding=0 property into CSS and change it to a default of padding:0px; under the default td properties, then create a second td style, and apply that one to the content cells.
     
    Josh Inno, Dec 11, 2006 IP
  5. Josh Inno

    Josh Inno Guest

    Messages:
    1,623
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Well, I have padding:10px in the content frame, but now I have a new problem.

    I have tried to insert an image into one of these frames, and everything blows up.

    The main table is sized to be 331px wide, there are two side frames, each 7px wide, and I have sized the content frame to be 317px wide. cellspacing = 0 in the table tag. The image is smaller than 297 px wide, but the side frames are getting pushed out and are loosing some of their width. Can anyone help me?
     
    Josh Inno, Dec 12, 2006 IP
  6. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #6
    Got link? Kinda hard to tell without seeing some code.

    cheers,

    gary
     
    kk5st, Dec 12, 2006 IP
    Josh Inno likes this.
  7. Josh Inno

    Josh Inno Guest

    Messages:
    1,623
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    0
    #7
    Josh Inno, Dec 13, 2006 IP
  8. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #8
    Josh,

    Before doing anything else, fix your markup. You need a complete DTD so that browsers, IE especially, are in standards mode.

    Why use tables? That seems an overly complicated approach.

    cheers,

    gary
     
    kk5st, Dec 13, 2006 IP
  9. Josh Inno

    Josh Inno Guest

    Messages:
    1,623
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    0
    #9
    Well first of all because through all of this, I have been learning CSS as I went, and I will freely acknowledge that I am not comfortable enough with CSS to avoid using tables. I'm an old school coder (From back before CSS even existed) who is getting back into the game, and tables are like an old familiar friend. I've replaced a lot of the style coding with CSS, but I'm still using tables for the structure, at least for now.

    Thank you for the link. I hadn't actually been exposed to the Doc type declaration before, and am looking into it.
     
    Josh Inno, Dec 13, 2006 IP
  10. Josh Inno

    Josh Inno Guest

    Messages:
    1,623
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    0
    #10
    Thanks for the help. I was able to get my document more into standards by moving more of the formating into the CSS (got rid of the height tags) but it's still giving me one error that I can't seem to get fixed. I've re-validated, so the link labled "markup" above should show the remaining error.

    It says that I am not allowed to use the

    
<html>
    Code (markup):
    tag in it's location at the top of the document, just under the doctype declaration.

    I could really use some help trying to figure -that- one out.
     
    Josh Inno, Dec 13, 2006 IP
  11. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #11
    Look again at the error message,
    Are you using includes? It looks as if you've imported a document, complete with its own header.

    cheers,

    gary
     
    kk5st, Dec 13, 2006 IP
  12. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #12
    Here's your problem, 
    
td.content {
	vertical-align: top;
	font-family: Tahoma, Arial, Verdana, Helvetica, sans-serif;
	font-size: 70%;
	padding-left: 10px;     <<==
	padding-right: 10px;   <<==
	background-color :#FFFCD5;
	width: 317px;  <<==
   }
    Code (markup):
    Remove the padding or the width property, or make allowance for the combo. Padding is added to the width, making that center td 337px wide, total. Eg., {width: 297px; padding: 0 10px;} would fit the available design width. See http://www.w3.org/TR/CSS21/box.html

    cheers,

    gary
     
    kk5st, Dec 13, 2006 IP
  13. Josh Inno

    Josh Inno Guest

    Messages:
    1,623
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    0
    #13
    Thank you very much for all your help. was indeed forgetting to check and take the separate header out of a php file I was experimenting with. That problem is now fixed and gone, and the page is now 4.1 Transitional compliant. I'm still having a bit of trouble with getting it compliant with strict, however, as I need to center some things, and I'm having trouble finding the CSS equivalent of the align tag for some things. The layout is also slowly trickling out of the main .php file, and into the CSS file, which is always good, so long as it all still works.

    The main issue I was having problems with was indeed due to a misunderstanding of padding. I was under the impression that the interior of the border was where height and width were measured, not the interior of the padding. The tutorial I had worked my way though didn't have the information about where height and width were applied. Thanks so much for your help!
     
    Josh Inno, Dec 14, 2006 IP
  14. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #14
    To center a block element, use margin. For example, 
    
table {
    width: 80%;
    margin: 0 auto;
    }

…
  <body>
    <table summary="">
      …
    </table>
  </body>
    Code (markup):
    will give you a table 80% of the viewport width, centered in the viewport. You must use a DTD that will trigger standards mode, else IE goes stupid and doesn't know about {margin: auto;}.

    Go through my site (see sig line). It's not a tutorial, but the pages demonstrate a lot of common and a few uncommon usages for css. Deconstruct the pages and rebuild them with your own design and content. That should act as a homework assignment to make the tutorials and references you study come to life.

    Do strive for a strict DTD validation. There is no sane reason to use deprecated elements or attributes.

    cheers,

    gary
     
    kk5st, Dec 14, 2006 IP
  15. Josh Inno

    Josh Inno Guest

    Messages:
    1,623
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    0
    #15
    Thanks, I am working hard to get to standard, but I'm afraid that my skills are still transitioning, as I've only been working on my current site 2 weeks around other duties, and the last site I made before that was back before CSS even existed.

    As for the depreciated elements, it seems that the "class" tag has become depreciated. What would you use in it's stead? I've seen in some doccuments that it says that you should only use a given ID once, what if you want several different elements to use the same style name?
     
    Josh Inno, Dec 15, 2006 IP
  16. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #16
    The class attribute is fully valid. What is giving you the indication it is deprecated?

    cheers,

    gary
     
    kk5st, Dec 15, 2006 IP
  17. Josh Inno

    Josh Inno Guest

    Messages:
    1,623
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    0
    #17
    Sorry, I did mean attribute. *Sigh* Sorry, between all the code, and a Math final I'm working on, my brain is currently quite a bit over-used.

    this
    validation tool says that "there is no "class" Attribute. And no, I don't use "class" in quotes in my code either.
     
    Josh Inno, Dec 15, 2006 IP
  18. Josh Inno

    Josh Inno Guest

    Messages:
    1,623
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    0
    #18
    By the way, I tried some samples of code from the page you linked me to, and the code lines up to the bottom of the page beautifully. Thank you. Unfortunately, I have to use absolute positioning to do this, and the align="center" tag won't work with that, and I can't use an auto-margin, as the rest of my code isn't 4.01 Strict compliant yet.
     
    Josh Inno, Dec 15, 2006 IP
  19. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #19
    You're all but valid. :)

    The align="center" attribute can be replaced by a style rule {text-align: center;}

    The class attribute is not valid because it's on a font element, which is deprecated. If an element is invalid, it has no valid attributes. Lose the font tag.

    Sometimes the real cause of an error lies further on in the error list.

    I get the feeling you're over thinking and over doing the use of classes, forgetting to take advantage of the cascade and inheritance.

    cheers,

    gary
     
    kk5st, Dec 15, 2006 IP
  20. Josh Inno

    Josh Inno Guest

    Messages:
    1,623
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    0
    #20
    I am now HTML 4.01 STRICT compliant, and am even using a copy of the DTD file, downloaded from w3.org, so that if a hacker ever attacks w3.org, or they reorganize their site, mine will be safe.
     
    Josh Inno, Dec 15, 2006 IP
Page 1 of 2