SitePoint Sponsor

User Tag List

Results 1 to 20 of 20
  1. #1
    Phil fillup07's Avatar
    Join Date
    May 2002
    Location
    Jacksonville, FL
    Posts
    1,168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS & Table Spacing And Padding - Just Can't Get It To Work!

    I looked at this thread, but it didn't help me. http://sitepointforums.com/showthrea...threadid=78241

    Here is my code:
    Code:
    <html>
    <head>
    <style>
    .menutable {BORDER: #6699cc 1px solid}
    .menuheadingrow {background-color: #6699CC; color: #000000; text-decoration: none}
    .menuitemrow {color: #000000; text-decoration: none}
    .menuitemcolumn {background-color: #E2E2E2; BORDER-RIGHT: #cccccc 1px solid; BORDER-LEFT: #f7f7f7 1px solid; BORDER-BOTTOM: #cccccc 1px solid; BORDER-TOP: #f7f7f7 1px solid}
    </style>
    </head>
    <body>
    <table class="menutable" width="140" cellpadding="0" cellspacing="0">
        <tr class="menuheadingrow"> 
          <td>Menu Heading</td>
        </tr>
        <tr class="menuitemrow"> 
          <td class="menuitemcolumn">Item 1</td>
        </tr>
        <tr class="menuitemrow"> 
          <td class="menuitemcolumn">Item 2</td>
        </tr>
      </table>
    </body>
    </html>
    An example is here:
    http://www.ax2.org/phil/cellcolors2pcss.htm

    That is exactly how I want it to look.

    But currently, the Table isn't using cellpadding or cellspacing in the CSS and I need it to.

    Please, before posting, TEST what you say and make sure it turns out to look the exact same
    (because I've tried soooo many things and it hasn't worked).

    Thanks a lot
    Phil
    Last edited by fillup07; Sep 28, 2002 at 08:12.

  2. #2
    Non-Member mmi's Avatar
    Join Date
    Jun 2001
    Location
    Rhode Island
    Posts
    587
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hey Phil - maybe it's me, but I think your question is a little hard to understand - you say you have the display you want, but you'd like to control this table with css rather than using the padding and spacing attributes for TABLE - can you explain why?

    as this page indicates, using css padding for TABLE is problematic in all the major browsers - have you tried border-spacing?

  3. #3
    Phil fillup07's Avatar
    Join Date
    May 2002
    Location
    Jacksonville, FL
    Posts
    1,168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by mmi
    hey Phil - maybe it's me, but I think your question is a little hard to understand - you say you have the display you want, but you'd like to control this table with css rather than using the padding and spacing attributes for TABLE - can you explain why?

    as this page indicates, using css padding for TABLE is problematic in all the major browsers - have you tried border-spacing?
    Thanks for your response...

    Correct - I have the correct display, but I need it done in all CSS instead of the HTML cellpadding and cellspacing and partial CSS.

    I have tried border-spacing as well, couldn't get it to work.

    Any ideas?

  4. #4
    Non-Member mmi's Avatar
    Join Date
    Jun 2001
    Location
    Rhode Island
    Posts
    587
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    but I need it done in all CSS
    since you say you've struggled with this some already, I'm thinking if you can tell us why this is the case, that may open the door to finding a solution

  5. #5
    Phil fillup07's Avatar
    Join Date
    May 2002
    Location
    Jacksonville, FL
    Posts
    1,168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by mmi
    since you say you've struggled with this some already, I'm thinking if you can tell us why this is the case, that may open the door to finding a solution
    Okay, it doesn't HAVE to be done in CSS (obviously, since I have the display already). But I really wanted it to (so all the table properties are stored in CSS and all I have to do to make the table look right is add the class.

    I came here b/c I thought since this is the CSS forum you guys would know how to do it.

    Thanks.

  6. #6
    Non-Member mmi's Avatar
    Join Date
    Jun 2001
    Location
    Rhode Island
    Posts
    587
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    well, don't measure this group's knowledge/ability by mine - among other deficiencies, I'm not very stylish

  7. #7
    Phil fillup07's Avatar
    Join Date
    May 2002
    Location
    Jacksonville, FL
    Posts
    1,168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Anyone?

  8. #8
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm with MMi...I'm not really sure what you're wanting to do.

    Your HTML code uses the cellpadding and spacing attributes for the TABLE tag. You use that code and say it's exactly what you want but you say that you want it to be CSS. Have you tried the padding attribute?

    Also, I'm not sure why you're so focused on getting your HTML and CSS to talk to each other when as MMI mentioned there are known issues with what you're trying to do.

    To be perfectly honest, trying to seperate your content from your presentation is admirable, but done properly there would only be one or two places that you would need to change cellspacing and cellpadding in your TABLEs.

    I will point out one thing in your original and following posts. No one hear is under any obligation to help you out, or to test their code before they post it. Neither are the people here working for the W3c that we would be the end all fount of knowledge regarding CSS. Please bear that in mind before you get a little snippy with our members.

    I hope you can figure it out and don't give up on this forum either.
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  9. #9
    Phil fillup07's Avatar
    Join Date
    May 2002
    Location
    Jacksonville, FL
    Posts
    1,168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Alright, thanks a lot.

    I know that people don't have to answer here... and that people don't know everything. I am a frequent poster in the ASP forums, both asking and helping others. I only asked people to test the code first because I had seen a lot of pages about this through searching google, but none worked.

    Thanks guys...

  10. #10
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I wasn't trying to discourage you. I also agree that people should test their code. What's the point if you don't right? If you;re taking the time to answer then at least try to make your answer "the" answer.
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  11. #11
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    Basically I see one of your main problems is likely to be that you using the Micro$oft browser typically: table, tr, td {border-spacing 0px;} would produce an almost exact replica in a browser like Mozilla 1.0.

    However, you have to ask yourself why are you using <table> for a vertical menu bar and require its styling via CSS... It seems like a misuse of the <table> element; when well written CSS without the <table> element could have produced better results in a fully CSS-2 compliant browser.
    Last edited by xhtmlcoder; Oct 3, 2002 at 03:09.

  12. #12
    Phil fillup07's Avatar
    Join Date
    May 2002
    Location
    Jacksonville, FL
    Posts
    1,168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by xhtmlcoder
    Basically I see one of your main problems is likely to be that you using the Micro$oft browser typically: table, tr, td {border-spacing 0px;} would produce an almost exact replica in a browser like Mozilla 1.0.

    However, you have to ask yourself why are you using <table> for a vertical menu bar and require its styling via CSS... It seems like a misuse of the <table> element; when well written CSS without the <table> element could have produced better results in a fully CSS-2 compliant browser.
    Like what?? I've never made stuff like that without tables...

  13. #13
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    That's fair enough, I was just trying to get across it is possible to have something similar using CSS without any tables; that is assuming the browser interprets the CSS correctly...

    I don't know if your browser is up to the task but if you look here at one of my friend's sites: http://www.rickbull.co.uk/ you'll see a CSS menu without the use of any <table> elements, yes the menu is different but you should be able to now understand what I meant.
    Last edited by xhtmlcoder; Oct 3, 2002 at 04:28.

  14. #14
    Non-Member mmi's Avatar
    Join Date
    Jun 2001
    Location
    Rhode Island
    Posts
    587
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    DIV?

  15. #15
    SitePoint Wizard iTec's Avatar
    Join Date
    May 2001
    Location
    Sydney, Australia
    Posts
    2,243
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    *itec bounces into discussion*

    *drops a note with some css*
    Code:
    <style>
    .menutable {BORDER: #6699cc 1px solid; width: 150px;}
    .menuheadingrow {
    	background-color: #6699CC;
    	color: #000000;
    	text-decoration: none;
    }
    .menuitem {
    	color: #000000;
    	text-decoration: none;
    	BORDER-RIGHT: #cccccc 1px solid;
    	BORDER-LEFT: #f7f7f7 1px solid;
    	BORDER-BOTTOM: #cccccc 1px solid;
    	BORDER-TOP: #f7f7f7 1px solid;
    	background-color: #E2E2E2;
    }
    </style>
    *adds a sprinkling of html*
    Code:
    <div class="menutable">
    	<div class="menuheadingrow">Menu Heading</div>
    	<div class="menuitem">Item 1</div>
    	<div class="menuitem">Item 1</div>
    </div>
    *and bounces back out again*

  16. #16
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    Yes, the <div> "division" element is a generic style container normally considered as a block element and hence why it acts as a good vertical substitute.

    Precisely said Zebedee, Boing!

  17. #17
    Phil fillup07's Avatar
    Join Date
    May 2002
    Location
    Jacksonville, FL
    Posts
    1,168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow, amazing

    Thanks !

  18. #18
    Phil fillup07's Avatar
    Join Date
    May 2002
    Location
    Jacksonville, FL
    Posts
    1,168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by iTec
    *itec bounces into discussion*

    *drops a note with some css*
    Code:
    <style>
    .menutable {BORDER: #6699cc 1px solid; width: 150px;}
    .menuheadingrow {
    	background-color: #6699CC;
    	color: #000000;
    	text-decoration: none;
    }
    .menuitem {
    	color: #000000;
    	text-decoration: none;
    	BORDER-RIGHT: #cccccc 1px solid;
    	BORDER-LEFT: #f7f7f7 1px solid;
    	BORDER-BOTTOM: #cccccc 1px solid;
    	BORDER-TOP: #f7f7f7 1px solid;
    	background-color: #E2E2E2;
    }
    </style>
    *adds a sprinkling of html*
    Code:
    <div class="menutable">
    	<div class="menuheadingrow">Menu Heading</div>
    	<div class="menuitem">Item 1</div>
    	<div class="menuitem">Item 1</div>
    </div>
    *and bounces back out again*
    Would a .menuheading:hover work so that I could change the color when the mouse is over? If not, what should I use to achieve that effect?

  19. #19
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    It depends upon what actually you want to change colour I presume you'd like to get both the background to and text change colour.

    Well, there are several ways this could be achieved, but let us assume you only want the 'cell row', which contains the word "Menu Heading" to change colour then you, could add the following:

    Code:
    .menuheadingrow A:hover {
     background-color : silver; 
     color : white; 
     text-decoration : none;
     width : 100%;
    } 
    a {
     text-decoration: none;
     color: black;
    }
    
    /* Add the above CSS lines  to iTec's example */
    Then you could rewrite the hypertext similar to this:

    Code:
    <div class="menutable">
     <div class="menuheadingrow"><a href="#">Menu Heading</a></div>
     <div class="menuitem">Item 1</div>
     <div class="menuitem">Item 2</div>
    </div>
    The result should be the "Menu Heading" text will turn white and the background 'cell row' colour will turn silver. Without a doubt the syntax I've just there is very ragged and poorly written but it should achieve the required results.
    Last edited by xhtmlcoder; Oct 4, 2002 at 04:55.

  20. #20
    SitePoint Guru sowen's Avatar
    Join Date
    Feb 2001
    Location
    Stockport, UK
    Posts
    729
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This weeks alist apart covers CSS menus http://www.alistapart.com/stories/taminglists/ it covers it all.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •