Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Westi on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Row height confusion with CSS 2

Status
Not open for further replies.
Glasgow

Glasgow

IS-IT--Management
Jul 30, 2001
1,669
GB
I have a table containing a number of textboxes. When I use:
Code: 
  <table cellspacing="0px" cellpadding="0px" border="0px">

in line, my table appears as I want with minimal vertical & horizontal spacing between the textboxes. But when I use a style sheet with:
Code: 
table.InputTable02  { font-family: verdana; font-size: 8.5pt;
                      cellspacing:0px; cellpadding:0px; border:0px;}
and the put the following in line:
Code: 
  <table class="InputTable02">

does not give the same spacing. I know the stylesheet class is being picked up because if I change the point size in the class, it affects the table the way I'd expect.

Am I be doing something dumb?

Thanks in advance.
 
Sort by date Sort by votes

Cellpadding and cellspacing do not tranaslate directly to CSS like that.

You will have to use an alternative, such as:

Code: 
table.InputTable02 td {
   padding: 0px;
   margin: 0px;
}

Hope this helps,
Dan


The answers you get are only as good as the information you give!

 
Upvote 0 Downvote

Aaah - you'd also need to use border-spacing on the table:

Code: 
<html>
<head>
	<style type="text/css">
		table.nospacing {
			border-spacing: 0px;
		}
		table.nospacing td {
			padding: 0px;
			margin: 0px;
		}
	</style>
</head>

<body>
	<table class="nospacing" border="1">
	<tr>
		<td>123</td>
		<td>456</td>
		<td>789</td>
	</tr>
	<tr>
		<td>123</td>
		<td>456</td>
		<td>789</td>
	</tr>
	<tr>
		<td>123</td>
		<td>456</td>
		<td>789</td>
	</tr>
	</table>

	<table cellspacing="0" cellpadding="0" border="1">
	<tr>
		<td>123</td>
		<td>456</td>
		<td>789</td>
	</tr>
	<tr>
		<td>123</td>
		<td>456</td>
		<td>789</td>
	</tr>
	<tr>
		<td>123</td>
		<td>456</td>
		<td>789</td>
	</tr>
	</table>
</body>
</html>

Unfortunately, it looks like IE doesn't support this, certainly in the test above. Firefox renders it just fine, however.

Dan


The answers you get are only as good as the information you give!

 
Upvote 0 Downvote
Am I be doing something dumb?
Click to expand...
Two of them actually :).

First, don't specify units in HTML attributes - they're only ever in pixels (jut a number) or percentages (number with a % sign):
Code: 
<table cellspacing="0" cellpadding="0" border="0" width="100%">

Second, there aren't CSS properties called cellspacing or cellpadding. CSS properties often do have the same names as their HTML attribute equivalents, but it isn't always true. In the case of table padding and spacing, you have to apply styles to the individual table elements...
Code: 
table.InputTable02 {
border: 0;
padding:0;
border-collapse: collapse;
}

table.InputTable02 th,
table.InputTable02 td {
margin: 0;
padding: 0;
border: 0;
}
In CSS you normally do have to specify units, but values of 0 are a special case - 0 pixels = 0 ems = 0 whatever-other-unit - you don't need to specify them.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd
 
Upvote 0 Downvote
also you dont need to do this

table.InputTable02


i would use it as an id

#InputTable02 {
border: 0;
padding:0;
border-collapse: collapse;
}

#InputTable02 th,td {
margin: 0;
padding: 0;
border: 0;
}

then call it like this

<table cellspacing="0" cellpadding="0" border="0" id="InputTable02">
 
Upvote 0 Downvote
Ok I see the sense in what you're saying and I've learned something so thanks for replies Dan & Chris (& Steven!) but it doesn't seem to get me anywhere, the cells are still not "snug". I will investigate further but if you have any suggestions....
 
Upvote 0 Downvote
Apologies - I missed one of my own typos. So that's 3 dumb things I've managed. Stars duly earned and thanks again.
 
Upvote 0 Downvote
Steven, what is the difference in using id or class. For our friend, both do the same with the exception that he could reuse that same class somewhere else on the page.
 
Upvote 0 Downvote
id identifies something as a group, and classes identify something as a member of a group.
 
Upvote 0 Downvote
I have never heard of that. Can you substantiate, preferably with an example? All I have ever seen so far is that ids and classes as selectors work in the same way.
 
Upvote 0 Downvote

An id does not, AFAIK, identify something as a member of a group. I'd be interested in seeing this, too.

Dan



The answers you get are only as good as the information you give!

 
Upvote 0 Downvote
i didn't say it identified something as a member of a group. I said it identified something as a group, get read closer.
 
Upvote 0 Downvote
here is an example

when working with css constructed sites you might have something like

Code: 
<div id="left"><p>hello</p></div>
<div id="middle"><p>hello</p></div>
<div id="right"><p>hello</p></div>

set the style sheet like this

Code: 
#left p{font-size:11px;}
#middle p{font-size:20px;}
#right p{font-size:50px;}
 
Upvote 0 Downvote
What you're using is descendant selector which has nothing to do with ids, classes or anything. You specified that every p element inside its respective container should have a different font-size. However, you can do the same with classes or regular contextual selectors:
Code: 
<style type="text/css">
div p { font-size: 20px; }
#left p { font-size: 11px; }
.right p { font-size: 50px; }
</style>

<div id="left"><p>hello</p></div>
<div><p>hello</p></div>
<div class="right"><p>hello</p></div>
I am still baffled at what you were trying to point out.
 
Upvote 0 Downvote
forget it buy book - i don't have time to argue with closed minded people

look at this link towards the bottom "Selector Rules: Calculating Specificity"

its id first then a class then html - if you think of it a groups and members

first is the id then you can have many classes under a id

 
Upvote 0 Downvote
Funny duck you are. When you can't get your point across, you call the person you're talking to a close minded person. You stated something, you gave the example of it and all that example showed was simple behaviour of descendant selectors. I would like to learn something from you, but if you don't give a valid explanation for your claims, I cannot really take you seriously. The link you posted makes sense, however these are very very advanced features of css selectors and definitely not something Glasgow needs in their website.
 
Upvote 0 Downvote
i don't know how much Glasgow knows, just trying to give him or her a method i know - i wasn't try be offensive just feel like i've repeated myself several times. I apologize if i offended anyone with that statement.

I just know that i've read (don't remember exactly where) that id's are like an umbrella and you can have many styles under this umbrella. That's it real simple, now maybe i'm wrong but it makes sense to me - when i think of id (talking sql and stuff) i think of the main field the, the mother of the record, thats why people always use it to call records ex.

yourpage.asp?id=5
 
Upvote 0 Downvote
If it's any comfort, Glasgow knows a lot less than you guys in this field (if that was not already excruciatingly obvious)!
 
Upvote 0 Downvote
This is what the spec ( ) says:
id = This attribute assigns a name to an element. This name must be unique in a document.

class = This attribute assigns a class name or set of class names to an element. Any number of elements may be assigned the same class name or names.
Click to expand...
Ids are used to uniquely identify a single element on the page, classes are used to classify one or more elements that have some common characteristic. If you're looking to assign some styling to a single element, the two attributes are pretty much interchangeable, and choice is pretty much a matter of personal preference.

My own preference is generally to use classes - on the principle that if I've styled one thing that way, I might want to add another one day. I use ids to identify elements like the <div>s that hold the different parts of the page in a CSS layout, but my approach is no more right or wrong than Steven's, Vrag's, Dan's, or anybody else's.


-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
1K
spamjim
spamjim
scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
769
3esolar
3
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
814
pmonett
pmonett
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
642
PeDa
PeDa
PeDa
  • Locked
  • Question
Horizontal rule and CSS problem 2
Replies
2
Views
694
PeDa
PeDa

Part and Inventory Search

Sponsor

Back
Top