Controlling this Ugly table with CSS a little better

Yes, I know this table isn't pretty.  

http://rowbytesting.com/free-consultation

But why is the top table labeled "Where would you like your Free Consultation?" so tall?  I don't see any padding, etc.

I tried adding a height to the table's  css, but it only made the table taller, not shorter.  For example if I gave it a height of 1000px, it would make it 1000 px,  but if I gave it a height of 100 px, it would have no effect.

I see no hidden br's or p's in the table.  So why is it's height behaving so badly?

Also how do I get the checkbox text in that particular table to be 14 px instead of 13 px.

Yes, it's ugly, but I need to get these initial issues fixed before I think about making it prettier.

THanks

Rowby



LVL 9
Rowby GorenAsked:
Who is Participating?
 
twohawksCommented:
#1: Look at the height setting in the TD containing the quoted text...

<table width="100%" cellpadding="3" border="1" id="locationPerk">
        <tbody><tr>
          <td width="454" valign="top" height="194"><p>Where would you like your Free Consultation?</p>

Open in new window


#2: checkboxes, eh?  Perhaps helps to be checking this out..
http://www.456bereastreet.com/archive/200701/styling_form_controls_with_css_revisited/
0
 
sunu340Commented:
>>But why is the top table labeled "Where would you like your Free Consultation?" so tall?  I don't see any padding, etc
Its becoz of the height element specified there..
<td width="454" valign="top" height="194"><p>Where would you like your Free Consultation?</p>
...
Change the height to ur desired height.Anything below 163px will have no effect here bcoz of the font-size mentioned.As the table required some space to fill up the texts.

>>Also how do I get the checkbox text in that particular table to be 14 px instead of 13 px.
To achieve this add style element width:13px;height:13px; to the checkbox either inline or in css file.
0
 
Rowby GorenAuthor Commented:
Hi twohawks.

Thanks for that - the height is now fixed.

I'll dig into your checkbox link in the a.m.

Rowby
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
Rowby GorenAuthor Commented:
Hi suno340 and twohawks....

Looking at both of your responses (including twohawks link) I get the impression that each individual checkbox needs to have its own style associated with its id.  

I would prefer to have a global css for spacing etc of all checkboxes -- within the surrounding table id....

Or am I misunderstanding checkbox styling...

Rowby
0
 
sunu340Commented:
it will be better if u can provide class to checkboxes u want to have specific sizes.

Another approach is u can use css to directly maupulate the checkbox,for e.g :

p > input[type=checkbox] {     // as in ur case
width: 20px;
height:20px;
}


This will target only the checkbox present inside a p. All other checkbox in the page will remain unaffected.

Hope this helps:)
0
 
Rowby GorenAuthor Commented:
Hi sunu340

Later this a.m. I'll try your p approach to overall checkboxes.

(Will later split points)  

Rowby
0
 
Rowby GorenAuthor Commented:
Hi Hi sunu340

Your "global" textbox solution worked perfectly.

I wish I could give both of your "the Solution" award -  but I will split the points evenly.

Rowby
0
 
Rowby GorenAuthor Commented:
AH, it appears I was able to give both of you not only equal points but both as the Solution.

I appreciate your prompt and expert  help and your enlightenment on these issues!

Rowby
0
 
twohawksCommented:
Thanks, rowby. Glad it worked out. I will be checking out sunu's solution... I wonder if that is fully crossbrowser functional?
0
 
Rowby GorenAuthor Commented:
RE crossbroser compatible -- let me know.  I don't care about IE 6 or earlier, but would be interested in the other  modern browsers.

Rowby
0
 
Rowby GorenAuthor Commented:
HI

I will check them out....

Rowby
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.