Need CSS align help

HTML & CSS
1

Hi,

I have a HTML page . I could not upload here as file size is big …hence uploading in google doc.

here is the link

http://docs.google.com/View?id=dc83hzcs_373fxscgdgv

this is the look I get when I open the HTML in the browser …

http://docs.google.com/View?id=dc83hzcs_367gqgwv9dg

This is the look I desire in the browser …
http://docs.google.com/View?id=dc83hzcs_369dwx5jxgc
[ formatted and edited in mspaint ]

What changes I need to do In my code ? Can you please help ? I don’t want to alter the existing CSS , as the existing CSS are used in the page elsewhere . I would like to overwrite the CSS styles to get the desired look.

Thanks for your time.

2

Lawlz, love the username!

I don’t go into stuff like google docs because usually they want me to have, like, javascript on and stuff.

But it looks like you may have to set some explicit widths in your table headers. I ran into a similar issue making some tables… the problem was that the contents of the columns were single digit numbers, which seemed to set the width of the whole column (and ended up doing pretty much what your table is doing). I had to either set widths on those th’s (I assume you have th for your top table headers… if not, you should) or a width on the td’s underneath. I forget which worked.

Since this DOES mean screwing around with the CSS files, see if you can’t throw an id (or if it already has one that’s being used in CSS, a new class) on it and give it really specific styles. You should be able to do that without affecting other elements.

*edit oh I went ahead and tried clicking the link anyway… yay, it just worked.

Give your table an id.

Put a full doctype up there (yours now is partial… copy the full doctype from this page: http://www.w3.org/QA/2002/04/valid-dtd-list.html ). Otherwise, browsers think your page was built back in the days of Geocity : )

Then I’ll bet this would work:
<style type=“text/css”>
#idofTable .cellTextLeft{
width: some width that you want to be the minimum;
font: 11px Arial, Helvetica, sans-serif;
color: #000000;
text-align: left;
border-right: 1px solid #000000;
height: 17px;
PADDING-LEFT: 10px;
}

If you’re not catering to IE6 you can do min-width instead, which would let your table get wider… cause I notice you have 29% as a stated width for your table headers.

3

Hi, I notice you are trying to have a fixed table header, you are doing two tables but it could be combined into 1 if you use the fixed header technique from this quiz :slight_smile:
You should combine it into 1 table and that way the header column widths will be depending upon the cells :). That way it will work

4

Ah yeah I kinda missed that but it seems to be in two (or three) for this reason:
</table>
<input type=“hidden” name=“checkedCustTerrOld” value=“”>
</table>

Maybe there’s some reason the input is outside the inner table but inside the outer table? Er, thats confuzling me now…

5

That’s invalid anyway and there’s no reason to have that there :slight_smile:

6

combined into 1 table ?

but see , I want to keep the inner table scrolling.

I,m not getting you what you are trying to say.
Can you please do the changes in my code and post …let me see how it can fixed .

I think in that case I will loose the inner table scrollability…is not it?

can it still fetch my desired look ?

7

That’s not a problem. If you looked at the quiz and ran some code from there you would see it working :slight_smile:

I,m not getting you what you are trying to say.
Can you please do the changes in my code and post …let me see how it can fixed .

I think in that case I will loose the inner table scrollability…is not it?

can it still fetch my desired look ?

Just take the code from the quiz and modify the text output to match yours, then style it however you wish :). Simple as that. I won’t do the manual work for you lol :slight_smile: