...

View Full Version : Change Table Font Size



<(^^<)KIRBY
02-25-2005, 08:40 PM
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!

hemebond
02-25-2005, 08:43 PM
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.

<(^^<)KIRBY
02-25-2005, 08:46 PM
CSS:


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:


<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>

channy
02-25-2005, 08:57 PM
CSS:


<!-- // snip // -->
.td{
12px Verdana, sans-serif;
}
<!-- // snip // -->


Part in Question:


<!-- // 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

.td {12px Verdana, sans-serif;}

with


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.



<td class="special">Job #</td>

<(^^<)KIRBY
02-25-2005, 09:04 PM
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!

channy
02-25-2005, 09:07 PM
My pleasure :thumbsup:

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

<(^^<)KIRBY
02-25-2005, 09:39 PM
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


<table border="off">

<table style="border=off">

<td boder="off">

<td style="border=off">


However, none of these work. Suggestions?

channy
02-25-2005, 09:56 PM
If you mean the border around the table:

<table border="0">

If you mean the border around the image:

<img src="whatever.jpg" border="0">

<(^^<)KIRBY
02-25-2005, 10:07 PM
um... I tried them both, and neither worked...

channy
02-25-2005, 10:12 PM
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. :)

<(^^<)KIRBY
02-25-2005, 10:27 PM
Well, the CSS is pretty much the same, just with that altered <td> tag...

Here's the page I need help with:


<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>

channy
02-25-2005, 10:33 PM
<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.



<div id="left" style="background-image: url(Pictures/crackback.gif); height: 1044px; width: 147px;">


EDIT:
also there's your
<center> <h3>Staff</h3</center> should be
<center> <h3>Staff</h3></center>

<(^^<)KIRBY
02-25-2005, 10:40 PM
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.

channy
02-25-2005, 10:46 PM
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.

rmedek
02-25-2005, 10:48 PM
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.

<(^^<)KIRBY
02-25-2005, 10:59 PM
I'm certain that it is the table cells that are doing it. however I don't know how to override it, you know? Trust me, as soon as I post it, I will link it, however I'm not sure how yet... I have to go through some hosting company, and I need to talk to them on account of my client.

Anyway, back to the topic at hand.

I've tried adding the border="0" part to both the td and the table tags, though neither worked. I also tried the CSS thing you suggested, and it didn't work either. :(

My CSS and everything is up top, and I swear, that my pictures still have a right border, most likely due to the td section in my CSS.

I really wish I had more experience with this stuff...

channy
02-25-2005, 11:04 PM
can you give a link to where you're testing the website??

Like I said earlier I can't see any borders around the images I've put in place of your staff photos with what you've posted here.

This is testing in IE6
Screenshot (http://members.shaw.ca/umbralsea/testing/testing1.jpg)
This is testing in Firefox 1.0
Screenshot (http://members.shaw.ca/umbralsea/testing/testing2.jpg)

<(^^<)KIRBY
02-28-2005, 08:27 PM
Well, I'd be more than happy to link it, however it's not posted. it's still under construction until I get a few more pictures.

I'd show you a screenshot of what I'm talking about, except that I can't figure out how to post them to this forum, while still having them large enough to see.

I'm certain it has to do with the <td> class I added to my CSS, though. I'm just not sure how I can change it, and still keep all of my tables bordered.

channy
02-28-2005, 08:36 PM
you could always create another class just for photos...


.photos {border: none;}

What browser are you using to test in?

<(^^<)KIRBY
02-28-2005, 08:46 PM
Well, I'm tryin to make it IE and FF compatible, considering 98% of the world uses one or the other, so...

Ok, this is officially frustrating. Everything you guys have told me should work. The only thing I can think of, is that my <td> class is still overriding all of the other stuff I've put in, even though it shouldn't.

should it?

I mean, I thought stuff put straight into the tag itself should override the CSS class. Am I just confused?

<(^^<)KIRBY
02-28-2005, 08:46 PM
I'm sorry. I meant to say, I am testing it in both IE and FF... newest versions of both.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum