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?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
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
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook 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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.