Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 21
  1. #1
    New Coder
    Join Date
    Oct 2004
    Posts
    67
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Change Table Font Size

    How do I change my table data's font size? I've tried changing it in my CSS, but... it didn't work so hot. is there something I can put in my <table> tag or something like that? I thought I could do something similar to the font-changing tag in the body tag, but when I put it in my <table> tag, it didn't work.

    I'm not sure this question really needs all of my code, but let me know if you still want it.

    Thanks!

  • #2
    Senior Coder
    Join Date
    Jul 2004
    Location
    New Zealand
    Posts
    1,315
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Setting the font-size on the table should have worked, so we will at least need a link to the code, and a hint as to what user-agent you're testing in.
    Forget style. Code to semantics. Seperate style from structure, and structure from behaviour.
    I code to specs, and test only in Firefox (unless stated otherwise).

  • #3
    New Coder
    Join Date
    Oct 2004
    Posts
    67
    Thanks
    0
    Thanked 0 Times in 0 Posts
    CSS:
    Code:
    body {
    
    background: #E8E8E8;
    font: 16px Verdana, sans-serif;
    }
    
    *#left {
    background-image: url(Pictures/crackback.gif);
    float: left;
    margin-right: 20px;
    }
    #right {
    width: 75%;
    float: right;
    }
    a:link {color: #104E8B;
    text-decoration: none;
    background-color: transparent }
    a:visited { color: #4169E1;
    text-decoration: none;
    background-color: transparent }
    a:hover { color: #00066;
    text-decoration: underline; 
    background-color: transparent }
    a:active { color: #A9ACB6; 
    text-decoration: underline; 
    background-color: transparent }
    .title { text-align: center}
    .floaty {
    float: right;
    }
    .td{
    12px Verdana, sans-serif;
    }
    #navlist
    {
    padding: 0 1px 1px;
    font: bold 12px Verdana, sans-serif;
    background: gray;
    width: 13em;
    }
    
    #navlist li
    {
    list-style: none;
    margin: 0;
    border-top: 1px solid gray;
    text-align: left;
    }
    
    #navlist li a
    {
    display: block;
    padding: 0.25em 0.5em 0.25em 0.8em;
    border-left: 1em solid #AAB;
    background: #CCD;
    text-decoration: none;
    }
    
    #navlist li a:link { color: #448; }
    #navlist li a:visited { color: #667; }
    #navlist li a:hover
    {
    border-color: #000066;
    color: #FFF;
    background: #4169e1;
    }
    #good {
    text-align:center;
    }
    Part in Question:
    Code:
    <div id ="content">
    <br><br>
    <br><br>
    <br><br>
    <br>
    
    <h3><center>Utah</center></h3> 
    <br><br>
    
    <table cellpadding=5>
    <tr>
    <td style="border-right:1px solid #000000;"><center><u>Job #</u></td>
    <td style="border-right:1px solid #000000;"><center><u>Job Name</u></td>
    <td style="border-right:1px solid #000000;"><center><u>Contract</u></td>
    <td style="border-right:1px solid #000000;"><center><u>Supervising P.E.</u></td>
    <td style="border-right:1px solid #000000;"><center><u>Phone</u></td>
    <td style="border-right:1px solid #000000;"><center><u>Owner or Prime</u></td>
    <td><center><u>City/State</u></td>
    </tr>
    <tr>
    <td style="border-right:1px solid #000000;"><center>249</td>
    <td style="border-right:1px solid #000000;"><center>Echo Junction</td>
    <td style="border-right:1px solid #000000;"><center>$909,448</td>
    <td style="border-right:1px solid #000000;"><center>Travis Wentz</td>
    <td style="border-right:1px solid #000000;"><center>602-437-7878</td>
    <td style="border-right:1px solid #000000;"><center>Gilbert Western</td>
    <td><center>Utah, via AZ</td>
    </tr>
    </table>
    </div>

  • #4
    New Coder
    Join Date
    Feb 2005
    Location
    Ontario Canada
    Posts
    44
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by <(^^<)KIRBY
    CSS:
    Code:
    <!-- // snip // -->
    .td{
    12px Verdana, sans-serif;
    }
    <!-- // snip // -->
    Part in Question:
    Code:
    <!-- // snip // -->
    
    <table cellpadding=5>
    <tr>
    <td style="border-right:1px solid #000000;"><center><u>Job #</u></td>
    <td style="border-right:1px solid #000000;"><center><u>Job Name</u></td>
    <td style="border-right:1px solid #000000;"><center><u>Contract</u></td>
    <td style="border-right:1px solid #000000;"><center><u>Supervising P.E.</u></td>
    <td style="border-right:1px solid #000000;"><center><u>Phone</u></td>
    <td style="border-right:1px solid #000000;"><center><u>Owner or Prime</u></td>
    <td><center><u>City/State</u></td>
    </tr>
    <tr>
    <td style="border-right:1px solid #000000;"><center>249</td>
    <td style="border-right:1px solid #000000;"><center>Echo Junction</td>
    <td style="border-right:1px solid #000000;"><center>$909,448</td>
    <td style="border-right:1px solid #000000;"><center>Travis Wentz</td>
    <td style="border-right:1px solid #000000;"><center>602-437-7878</td>
    <td style="border-right:1px solid #000000;"><center>Gilbert Western</td>
    <td><center>Utah, via AZ</td>
    </tr>
    </table>
    <!-- // snip // -->

    Try this

    replace
    Code:
     .td {12px Verdana, sans-serif;}
    with
    Code:
    td.special { 
      align: center;
      font: 12px Verdana, sans-serif;
      border-right:1px solid #000000;
      text-decoration: underline;
    }
    and remove that repeating border-right:1px solid #000000; from all of your tds...the point of css is to remove the need for repetative code within your webpage content.

    Code:
    <td class="special">Job #</td>
    Last edited by channy; 02-25-2005 at 10:02 PM. Reason: added a class on the td

  • #5
    New Coder
    Join Date
    Oct 2004
    Posts
    67
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok... thanks a lot. Looks like that did it.

    The reason I had all the repeating code in there, was that I forgot that I could alter <td> that way, through the CSS. Not to mention on another HTML forum I posted on, a guy told me that the way I had it would work just fine. Perhaps I forgot to post my CSS on there too... hmmm...

    Anyway, thanks a lot. Peace!

  • #6
    New Coder
    Join Date
    Feb 2005
    Location
    Ontario Canada
    Posts
    44
    Thanks
    0
    Thanked 0 Times in 0 Posts
    My pleasure

    You were on the right track with making a class for the td...just needed a few little bits and pieces.

  • #7
    New Coder
    Join Date
    Oct 2004
    Posts
    67
    Thanks
    0
    Thanked 0 Times in 0 Posts
    OH! One more thing. I have another table on a different section of the web pages that includes pictures. I need to turn the border off for this page, but I want it on for the other. What code can I use to override it? I've tried
    Code:
    <table border="off">
    
    <table style="border=off">
    
    <td boder="off">
    
    <td style="border=off">
    However, none of these work. Suggestions?

  • #8
    New Coder
    Join Date
    Feb 2005
    Location
    Ontario Canada
    Posts
    44
    Thanks
    0
    Thanked 0 Times in 0 Posts
    If you mean the border around the table:
    Code:
    <table border="0">
    If you mean the border around the image:
    Code:
    <img src="whatever.jpg" border="0">
    Last edited by channy; 02-25-2005 at 10:58 PM. Reason: added image border info

  • #9
    New Coder
    Join Date
    Oct 2004
    Posts
    67
    Thanks
    0
    Thanked 0 Times in 0 Posts
    um... I tried them both, and neither worked...

  • #10
    New Coder
    Join Date
    Feb 2005
    Location
    Ontario Canada
    Posts
    44
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You're going to have to post the code then hon cause I'm not certain what border you mean nor what other code that is about that might be affecting your elements.

  • #11
    New Coder
    Join Date
    Oct 2004
    Posts
    67
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well, the CSS is pretty much the same, just with that altered <td> tag...

    Here's the page I need help with:
    Code:
    <html>
    <title> Marcon Precast Inc.</title>
    <LINK TYPE="text/css" HREF="styles/Marcon.css" REL="stylesheet">
    
    <body>
    <div id="left" style="background-image: url(Pictures/crackback.gif); height: 1044px; width: 147px;  border: 1px solid black;">
    
    <br>
    <br>
    <img src="pictures/marconLogo.gif">
    <br><br>
    <!--** START NAVSTUDIO MENU TAGS (479422) **-->
    <div id="vqp_about" style="position:absolute;visibility:hidden;">****JavaScript based drop down DHTML menu generated by NavStudio. (OpenCube Inc. - http://www.opencube.com)****</div>
    <script language="JavaScript" vqptag="doc_level_settings" vqp_datafile0="MarconMenu.js" vqp_uid0=479422>cdd__codebase = "";cdd__codebase479422 = "";</script>
    <script language="JavaScript" vqptag="datafile" src="MarconMenu.js"></script><script vqptag="placement" vqp_menuid="479422" language="JavaScript">create_menu(479422)</script>
    <!--** END NAVSTUDIO MENU TAGS **-->
    </div>
    <div id ="content">
    <br><br><br><br><br><br><br>
    
    <center> <h3>Staff</h3</center>
    <center><table border="0">
    	<tr>
    	<td><img src="pictures/staff/elaine.jpg" border="0"></td></tr>
    	<tr><td><center>Elaine Martin<br>President</center></td>
    	</tr>
    <tr>
    <td> </td>
    </tr>
    </table>
    </center>
    <center>
    <table>	
    	
    	<tr>
    	<td ><center><img src="pictures/staff/tory.jpg"></td>
    	<td><center><img src="pictures/staff/darrell.jpg"></td>
    	<td><center><img src="pictures/staff/carma.jpg"></td>
    	<td><center><img src="pictures/staff/chet.jpg"></td>
    	</tr>
    <tr>
    <td> </td>
    </tr>
    	<tr>
    	<td><center>Tory Martin<br>Operations Manager</td>
    	<td><center>Darrell Swigert<br>Safety Manager</td>
    	<td><center>Carma Christensen<br>Business Manager</td>
    	<td><center>Chet Wilemon<br>Senior Foreman</td>
    	</tr>
    	<tr>
    	<td><center><img src="pictures/staff/lenny.jpg"></td>
    	<td><center><img src="pictures/staff/darwin.jpg"></td>
    	<td><center><img src="pictures/staff/tina.jpg"></td>
    	<td><center><img src="pictures/staff/dora.jpg"></td>
    	</tr>
    	<tr>
    	<td><center>Lenny Schmidt<br>Senior Foreman</td>
    	<td><center>Darwin Williams<br>Senior Foreman</td>
    	<td><center>Tina Mendez<br> Receptionist/Project Admin</td>
    	<td><center>Dora Prudhomme<br>Accountant</td>
    	</tr>
    </table>
    </div>
    
    <br><br>
    <br><br>
    </div>
    
    </body>
    </html>

  • #12
    New Coder
    Join Date
    Feb 2005
    Location
    Ontario Canada
    Posts
    44
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by <(^^<)KIRBY
    Code:
    <div id="left" style="background-image: url(Pictures/crackback.gif); height: 1044px; width: 147px;  border: 1px solid black;">
    is crackback.gif the one you want the border off of? if so remove the border:1px solid black; from it.

    Code:
    <div id="left" style="background-image: url(Pictures/crackback.gif); height: 1044px; width: 147px;">
    EDIT:
    also there's your
    Code:
    <center> <h3>Staff</h3</center>
    should be
    Code:
    <center> <h3>Staff</h3></center>
    Last edited by channy; 02-25-2005 at 11:43 PM.

  • #13
    New Coder
    Join Date
    Oct 2004
    Posts
    67
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I'm sorry, I should have been more specific. Crackback is my background... I have that taken care of. The pictures with names (i.e. elaine.jpg, tory.jpg, darrell.jpg, etc) are the ones that keep getting the border. They are the ones that I want to take the border off of.

  • #14
    New Coder
    Join Date
    Feb 2005
    Location
    Ontario Canada
    Posts
    44
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by <(^^<)KIRBY
    I'm sorry, I should have been more specific. Crackback is my background... I have that taken care of. The pictures with names (i.e. elaine.jpg, tory.jpg, darrell.jpg, etc) are the ones that keep getting the border. They are the ones that I want to take the border off of.
    Ahh have you checked the images themselves for the border? I've added images I have as placers in your code and none of them appear with a border.

    If you are adding links to their images to profiles or some such you will need the border="0" in each of their img src="yadda.jpg" or they will get a link border.

  • #15
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    As the imgs aren't in a link, they shouldn't have a border to begin with. Just in case you could add:

    img {
    border: none;
    }

    to your external css. I suspect it's the table cells that are giving the border, though. Hard to tell without a link to the page.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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