954,604 Members — Technology Publication meets Social Media
Username:
Password:
Lost login information?
Have something to say? Contribute New Article Reply to this Article

absoluted div issue

Hey there,
i make table with some results and want to make the first row (titles) absoluted, but all the table have horizontal-scrollbar when i move the scroll the absoluted row dont move.
how to fix that with CSS :/
Code:

<style type="text/css" media="all">
.slim #blueBar{height:37px;}
#blueBar{background-color:#3b5998;width:895px;z-index:300}
.fixed_elem{position:absolute;clip : auto;white-space:normal;}
#boxtable {
/*the chat div container*/
text-align:left;
margin:0 auto;
margin-bottom:10px;
padding:1px;
background-color: #f0f0f0;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-right: 1px solid rgba(9, 9, 9, 0.125);
height:400px;
width:910px;
overflow:auto;
}
</style>   
<div id="boxtable" >
<div id="blueBarHolder" class="slim">
<div class=" fixed_elem" id="blueBar">
<table><thead >
					
                        <tr >
						
                          <th style="text-align:center;">  <input type="checkbox" name="chkDel[]" value=""></th>
						  <th style="text-align:center;"></th>
                                <th style="text-align:center;">UID</th>
                                <th style="text-align:center;">PID</th>
                                <th style="text-align:center;">Admin</th>
                                <th>Name</th>
                                <th style="text-align:center;">Class</th>
								<th style="text-align:center;">Specialty</th>
								<th style="text-align:center;">Level</th>
								<th style="text-align:center;">Contribute</th>
								<th style="text-align:center;" >Exp</th>
								<th style="text-align:center;">GID</th>
								<th style="text-align:center;">GRole</th>
								<th style="text-align:center;" >Strength</th>
								<th style="text-align:center;">Health</th>
								<th style="text-align:center;">Intelligence</th>
								<th style="text-align:center;">Wisdom</th>
								<th style="text-align:center;">Dexterity</th>
								<th style="text-align:center;">CurHP</th>
								<th style="text-align:center;">CurMP</th>
								<th style="text-align:center;">PUPoint</th>
								<th style="text-align:center;">SUPoint</th>
								<th style="text-align:center;">Killed</th>
								<th style="text-align:center;">Map</th>
								<th style="text-align:center;">X</th>
								<th style="text-align:center;">Y</th>
								<th style="text-align:center;">Z</th>
								<th style="text-align:center;">Face</th>
								<th style="text-align:center;">Hair</th>
								<th style="text-align:center;">RevivalId</th>
								<th style="text-align:center;">Rage</th>
								<th style="text-align:center;">Reborn</th>
								<th style="text-align:center;">TradeCharacter</th>
								<th style="text-align:center;">Price</th>
								<th style="text-align:center;">AccountUID</th>	
                        </tr>
                        </thead> </table>
</div></div>

<table  >
                    <thead >
                        <tr >
						
                          <th style="text-align:center;">  <input type="checkbox" name="chkDel[]" value=""></th>
						  <th style="text-align:center;"></th>
                                <th style="text-align:center;">UID</th>
                                <th style="text-align:center;">PID</th>
                                <th style="text-align:center;">Admin</th>
                                <th>Name</th>
                                <th style="text-align:center;">Class</th>
								<th style="text-align:center;">Specialty</th>
								<th style="text-align:center;">Level</th>
								<th style="text-align:center;">Contribute</th>
								<th style="text-align:center;" >Exp</th>
								<th style="text-align:center;">GID</th>
								<th style="text-align:center;">GRole</th>
								<th style="text-align:center;" >Strength</th>
								<th style="text-align:center;">Health</th>
								<th style="text-align:center;">Intelligence</th>
								<th style="text-align:center;">Wisdom</th>
								<th style="text-align:center;">Dexterity</th>
								<th style="text-align:center;">CurHP</th>
								<th style="text-align:center;">CurMP</th>
								<th style="text-align:center;">PUPoint</th>
								<th style="text-align:center;">SUPoint</th>
								<th style="text-align:center;">Killed</th>
								<th style="text-align:center;">Map</th>
								<th style="text-align:center;">X</th>
								<th style="text-align:center;">Y</th>
								<th style="text-align:center;">Z</th>
								<th style="text-align:center;">Face</th>
								<th style="text-align:center;">Hair</th>
								<th style="text-align:center;">RevivalId</th>
								<th style="text-align:center;">Rage</th>
								<th style="text-align:center;">Reborn</th>
								<th style="text-align:center;">TradeCharacter</th>
								<th style="text-align:center;">Price</th>
								<th style="text-align:center;">AccountUID</th>
								
								
								
                        </tr>
					
                        </thead>
<tbody>
						
						<tr>
						     <td style="text-align:center;">  <input type="checkbox" name="chkDel[]" value=""></th>
						  <td style="text-align:center;"></th>
                                <td style="text-align:center;">UID</th>
                                <td style="text-align:center;">PID</th>
                                <td style="text-align:center;">Admin</th>
                                <td>Name</th>
                                <td style="text-align:center;">Class</th>
								<td style="text-align:center;">Specialty</th>
								<td style="text-align:center;">Level</th>
								<td style="text-align:center;">Contribute</th>
								<td style="text-align:center;" >Exp</th>
								<td style="text-align:center;">GID</th>
								<td style="text-align:center;">GRole</th>
								<td style="text-align:center;" >Strength</th>
								<td style="text-align:center;">Health</th>
								<td style="text-align:center;">Intelligence</th>
								<td style="text-align:center;">Wisdom</th>
								<td style="text-align:center;">Dexterity</th>
								<td style="text-align:center;">CurHP</th>
								<td style="text-align:center;">CurMP</th>
								<td style="text-align:center;">PUPoint</th>
								<td style="text-align:center;">SUPoint</th>
								<td style="text-align:center;">Killed</th>
								<td style="text-align:center;">Map</th>
								<td style="text-align:center;">X</th>
								<td style="text-align:center;">Y</th>
								<td style="text-align:center;">Z</th>
								<td style="text-align:center;">Face</th>
								<td style="text-align:center;">Hair</th>
								<td style="text-align:center;">RevivalId</th>
								<td style="text-align:center;">Rage</th>
								<td style="text-align:center;">Reborn</th>
								<td style="text-align:center;">TradeCharacter</th>
								<td style="text-align:center;">Price</th>
								<td style="text-align:center;">AccountUID</th>
</tr>
<tr>
						     <td style="text-align:center;">  <input type="checkbox" name="chkDel[]" value=""></th>
						  <td style="text-align:center;"></th>
                                <td style="text-align:center;">UID</th>
                                <td style="text-align:center;">PID</th>
                                <td style="text-align:center;">Admin</th>
                                <td>Name</th>
                                <td style="text-align:center;">Class</th>
								<td style="text-align:center;">Specialty</th>
								<td style="text-align:center;">Level</th>
								<td style="text-align:center;">Contribute</th>
								<td style="text-align:center;" >Exp</th>
								<td style="text-align:center;">GID</th>
								<td style="text-align:center;">GRole</th>
								<td style="text-align:center;" >Strength</th>
								<td style="text-align:center;">Health</th>
								<td style="text-align:center;">Intelligence</th>
								<td style="text-align:center;">Wisdom</th>
								<td style="text-align:center;">Dexterity</th>
								<td style="text-align:center;">CurHP</th>
								<td style="text-align:center;">CurMP</th>
								<td style="text-align:center;">PUPoint</th>
								<td style="text-align:center;">SUPoint</th>
								<td style="text-align:center;">Killed</th>
								<td style="text-align:center;">Map</th>
								<td style="text-align:center;">X</th>
								<td style="text-align:center;">Y</th>
								<td style="text-align:center;">Z</th>
								<td style="text-align:center;">Face</th>
								<td style="text-align:center;">Hair</th>
								<td style="text-align:center;">RevivalId</th>
								<td style="text-align:center;">Rage</th>
								<td style="text-align:center;">Reborn</th>
								<td style="text-align:center;">TradeCharacter</th>
								<td style="text-align:center;">Price</th>
								<td style="text-align:center;">AccountUID</th>
</tr>

								</tbody>
						</table>
DarkBerzerk
Light Poster
40 posts since Mar 2011
Reputation Points: 10
Solved Threads: 0
 

where are your close DIVs (

marios_neo
Newbie Poster
13 posts since Feb 2012
Reputation Points: 13
Solved Threads: 1
 

Not sure if it would have anything to do with the specific problem you are reporting however from line 115 on you are opening

<td>


tags but closing them with

</tr>


tags. I am not sure if this is carryover from the first section where you were using

<th>


tags. And it might have been easier to go with the following CSS:

th {text-align:center;}
td {text-align:center;}


That way you wouldn't have to specify it as a style in every single tag. Could be nitpicking but it bloats your file size plus if you were to do this on everything that you do and decide at some point that you want to add an attribute or change the alignment you'd only have to make a single change/addition rather than doing it for every single element you want affected.

I will try to figure out your initial probably later with rested eyes as it's 5am and I've been up 24 hours.

weekendrockstar
Junior Poster in Training
71 posts since Dec 2010
Reputation Points: 25
Solved Threads: 16
 

Hey there! Can you please give us a working link of a practical example of your code? That would prove very useful in helping you as then I can edit off my browser, and I won't have to erase every number that has been added. It would be a great help. Or perhaps you should just post the part where you are having a problem.

dantinkakkar
Junior Poster
177 posts since Aug 2011
Reputation Points: 49
Solved Threads: 21
 

Yes there are problems with the open and closing tags in line 115 and after. go on http://http://validator.w3.org/#validate_by_upload upload your html file, validate it and fix your errors

marios_neo
Newbie Poster
13 posts since Feb 2012
Reputation Points: 13
Solved Threads: 1
 

This article has been dead for over three months

Post: Markdown Syntax: Formatting Help
You