hey folks, i made a page in which when u click “priority”, a popup is created. in FF its ok but in IE and Chorme, there are horizantal scoll. the height and width isn’t the same as viewpoint in FF. where am i going wrong?
Are you having a fixed header and scrollable table body in your popup also? It didn’t look like you needed to do this but that may be because your example wasn’t showing enough data to get an idea of what you were doing.
The widths in the table cells are still wrong though anyway and need to be made right.
Add padding-top to #wrapper and it is that space into which you absolutely place the thead content. Your #wrapper needs to be as wide as the table content it holds though and not 100px wide.
The fixed header effect is achieved by moving the thead content above the actual table using absolute position which removes it from the flow.
It’s best seen in a simple layout without using a table:
[FONT=Arial][SIZE=2]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
* {
margin:0;
padding:0
}
.wrap {
width:300px;
height:100px;
padding-top:40px;/* space for absolutely placed text*/
position:relative;/* stacking context for absolute child*/
}
.scroll {/* the scrolling box itself */
height:100px;
overflow:scroll;
overflow-x:hidden;
width:300px;
background:red;
}
.scroll h1 {
position:absolute;/* move header out of scrolling area*/
top:0
}
</style>
</head>
<body>
<div class="wrap">
<div class="scroll">
<h1>scrolling content</h1>
<p>some text to scroll</p>
<p>some text to scroll</p>
<p>some text to scroll</p>
<p>some text to scroll</p>
<p>some text to scroll</p>
<p>some text to scroll</p>
<p>some text to scroll</p>
<p>some text to scroll</p>
<p>some text to scroll</p>
<p>some text to scroll</p>
</div>
</div>
</body>
</html>
[/SIZE][/FONT]
The h1 is placed absolutely above the scrollbox and therefore does not scroll. You could achieve the same effect simply by separating the header and not placing it in the scrollbox at all. However with a table you usually want the table header to be part of the same table so that it matches the width of the data.
If this is not an issue for you and you are using fixed widths then just use two tables with one table holding the header information and then the scrolling table just contains the scrolling information. It’s not very semantic and you need to manually set the widths of the cells in both tables to match and use the table-layout:fixed algorithm also.
e.g.
[FONT=Arial][SIZE=2]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
* {
margin:0;
padding:0
}
.test{width:300px;}
.scroll {/* the scrolling box itself */
height:100px;
overflow:scroll;
overflow-x:hidden;
width:300px;
background:red;
}
</style>
</head>
<body>
<table class="test">
<tr>
<td>testing</td>
</tr>
</table>
<div class="scroll">
<table class="test">
<tr>
<td>some text to scroll</td>
</tr>
<tr>
<td>some text to scroll</td>
</tr>
<tr>
<td>some text to scroll</td>
</tr>
<tr>
<td>some text to scroll</td>
</tr>
<tr>
<td>some text to scroll</td>
</tr>
<tr>
<td>some text to scroll</td>
</tr>
<tr>
<td>some text to scroll</td>
</tr>
<tr>
<td>some text to scroll</td>
</tr>
<tr>
<td>some text to scroll</td>
</tr>
<tr>
<td>some text to scroll</td>
</tr>
<tr>
<td>some text to scroll</td>
</tr>
<tr>
<td>some text to scroll</td>
</tr>
<tr>
<td>some text to scroll</td>
</tr>
<tr>
<td>some text to scroll</td>
</tr>
</table>
</div>
</body>
</html>
[/SIZE][/FONT]
Off Topic:
your adding pain to my misery :p:lol:
here, the problem is that i while u click a button a popup will come up and see it in compatibility mode. the th/thead get disturbed and out of alignment. btw what is fast and effective way to check on your cross browsers compatibility?
well i commented out the php coz that wasn’t necessary and for security purpose too. ok i’ll set the width problem too. but should i be changing position too like u said?
Off Topic:
i send u a email, did u read it? awaiting reply
Hi,
You seem to have the wrong widths on the table in the popup and I also assume that the popup is not going to be a fixed header.
Remove the absolute positioning from the p element in that popup.
table.popbox p{position:static;margin:0}
Then remove the widths from the table as they don’t match the elements in question.
<table class="popbox">
<thead>
<tr>
<th><p>Priroty</p></th>
<th><p>Active</p></th>
<th><p>Action</p></th>
</tr>
</thead>
<tfoot>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tfoot>
<tbody>
<tr>
<td><input type="text" name="" id="" /></td>
<td><input type="checkbox" name="" id="" /></td>
<td class="last">Save/Edit</td>
</tr>
</tbody>
</table>
This following rule affects all tables in your site and you should really only apply it ot the tables that need it.
thead tr p {
position:absolute;
top:0px;
margin-left:70px;
}
Use a class to identify those tables and add it to the above rule.
I don’t understand why you’re trying to get it to work in compat mode. You mean you have IE8 acting like IE7? Or is that how you’re testing for IE7?
i fixed that using left though this time i need it centered but in Compatibility mode it messed up
i m talking about when u see the popup in compatibility mode. the th get out of aligment
If you are talking about the close button in the popup then you will need to set a width on the float that you added to the inline styles.
<div style="float:right; margin-right:85px[B];width:79px"[/B]>
<input type="button" class="buttons" value="Close" />
</div>
You’ll have to explain the exact problem again as I got lost along the way and provide a link to the page in question.
Be aware that compatibility mode isn’t the same as running IE7 natively although it does give some indication of how it may appear.
btw paul, thanks it solved my problem. thought it was easy but i m sort of dumb to ignore little things 
ok. thanks
i m working around your scrolltable from ground zero. i have a fixed header. i m using thead and tbody as i don’t need tfoot. but the scrollable tbody text start from top. overlapping the thead heading.how do i make it move down. here is my css
#wrapper{height:500px; width:100px; position:relative;}
.inner{height:280px; width:800px; overflow:auto;}
thead tr p{position:absolute;}
sorry for annoyance i m just taking one step at a time.
I believe it depends on the chrome surround etc. The fix I gave you above works for me in Safari.
Off Topic:
paul, its been a while since u showed up, i wanted to pm u but ur not receiving any
I am away most of June so I turned my PM off - I’m back for a week now but away again in another week so didn’t want to get involved in too many ongoing problems.
i have another issue. when i see my popup in compatibility mode. the things are out of alignment. any help with that? if you click ‘priority’ on this page
its quite frustrating, how JS popup width and height is different from what we define in pixel. they aren’t equal.
Off Topic:
paul, its been a while since u showed up, i wanted to pm u but ur not receiving any
I dunno, this seems to be a Javascript problem? I’ll ask for the thread to get moved.
I did make some screenshots.
http://stommepoes.nl/firefoxadmin.png Firefox/Linux
http://stommepoes.nl/chromeadmin.png Chrome/Linux
You have a bigger problem than scrollbars in Opera:
http://stommepoes.nl/operaadmin.png Opera holds the popup inside it! So if the popup were larger than the main browser window, the user might get stuck!
Didn’t I answer that in the other thread with the text-align:left fix? Or are you referring to something else?
i followed your scrollable table with fixed header thingy coz it has data which will dynamically make tr and td. should i be playing with position as u asked?