Alignment get disturbed

i have this static table head with scrollable body. the heads are ok until the search button is clicked and the results comes in. but when the tbody get filled with data the headers get disturbed like they have been pushed from left side 3-4 px. i don’t know how to fix it so i post my question here. here is my css


div.data-result{width:1020;height:278px;position:relative;padding-top:40px;}
div.data-scroll{width:100%; height:275px; overflow-x:hidden; overflow:auto;}
table.data{width:1020px; overflow-x:hidden;}
table.data thead p{position:absolute; top:5px; margin-left:25px; cursor:pointer;}
table.data th p{background:url(../images/sorter.png) no-repeat 100% 0;padding-right:13px;}
table.data td{border:1px solid #09C;padding:2px; text-align:center; width:120px;}

i couldn’t post the link to the page coz its not available online and if so is private and as forums get indexed i can’t afford it getting indexed. anyways i hope someone can help me with that

Ok, I’ve had a look at the link you sent me and the problem is that some of your data is too wide for the cell and as tables will do they will stretch the cells to fit the data and squash other cells in the process. This means that the header rows will change due to the re-positioning of the data.

The only suggestion I can make is that you fix the width of the cells with table-layout:fixed and break the words.

e.g.


.result-search table{table-layout:fixed;word-wrap:break-word}

That should work in IE and the latest versions of Firefox (and some others).

You should also fix those non matching tags that Jason mentioned. However the p element in the th is a necessary requirement so don’t remove it. It is the mechanism that allows the header to remain fixed and is taken from one of my demos (it could of course be a div or span instead but I though that p was more descriptive but perhaps it should have been a heading tag to be more semantic).

The drawback of the fixed table header as I have mentioned before is that it’s a bit of a hack and although it works you will just have to live with some of the side effects. Although any header would have moved with the data that you were squeezing into the cell.

If you don’t want the cells to be distributed via table-layout:fixed then you would instead need to trap your data serverside and break any unbroken text at the correct length so that it can wrap within the cell.

Apologies to those that haven’t been able to follow this and is one of the reasons I originally said that you should make a working demo so all could follow.:slight_smile:

What Paul was saying politely is CSS without the markup it’s applied to is gibberish.

Though noonope could be right on the malformed table, the ‘need’ for overflow:auto on a wrapper sends up warning flags as does the use of paragraphs inside the THEAD… Of course the LACK OF A METRIC on the width for data-result… Hey, that could be your problem right there.

width:1020;

1020 WHAT? PX, EM, PT, quijada’s, tacos?

Taco’s rule!

If we can’t see the site then build a reduced case working example with html and css otherwise we would just be guessing :slight_smile:

If something moves when data is present are you sure its not just moving position to accommodate a scroll bar or something?

your table is most likely not well formed.

deathshadow, i understand i used bad html, i was in hurry to change things and i ran over few things which went unnoticed but meanwhile i fix it. does it help fixing the problem of my th text getting pushed

if that’s the case, here’s a good reading for you emaarkhan :slight_smile:

Got your PM and replied – for the others who responded it does indeed have malformed tables… specifically things like

<th><p>Driver<br /> Name</p></td>

Which I told him not only should that be /th instead of /td, but that there is ZERO reason for that to have a P tag inside it.

Though going through the markup as I expected there’s a whole bunch of tables for things that shouldn’t be tables, like a two column form. (and no, it’s not time to abuse a definition list either!)

deathshadow i pm u.can u check it

i would, but i miss my table :slight_smile:

When he said ‘well formed’ noonnope is referring to the proper order of tags. From simple things like failing to close tags where closing is NOT optional, to outright invalid things like putting in TD’s without TR around them or putting tags that cannot go directly as a child of the TABLE tag like say… span or H2, directly in as children of the table tag… or even simply forgetting to put the same number of columns in every TR.

CSS is only as good as the markup it’s applied to… since you provided no HTML, we have no clue what could actually be wrong.

paul i pm u. can u check i m waiting for reply

Paul yes there is a scrollbar
deathshadow A good point noticing absence of metric system. i will look into it and up u folks

care to elaborate?