Fixed headers of table ruin in IE Compatibility mode

hi folks,
i am working on fixed headers table and i have a problem.its all fine. until it is runned under IE compatibility mode. as i have to test for compatibility mode to check my work. here is the code


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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 type="text/css">
div.result-wrap{width:1040px;height:293px;position:relative;padding-top:40px;}
div.result-scroll{width:100%; height:80px; overflow-x:hidden; overflow:auto;}
table.results{width:1020px; overflow-x:hidden;}
table.results td{border:1px solid #09C;padding:2px; width:120px; text-align:center;}
table.results thead p{position:absolute; top:5px; margin-left:150px; cursor:pointer;}
</style>
</head>
<div class="result-wrap">
	<div class="result-scroll">
    	<table class="results">
        	<thead>
            	<tr>
                	<th><p>Name</p></th>
                    <th><p>City</p></th>
                    <th><p>Provience</p></th>
              </tr>
		</thead>
        <tbody>
        	<tr>
            	<td>David</td>
                <td>California</td>
                <td></td>
             </tr>
        	<tr>
            	<td>Eldon</td>
                <td>NY</td>
                <td></td>
             </tr>
        	<tr>
            	<td>Bill</td>
                <td>Lousiana</td>
                <td></td>
             </tr>
        	<tr>
            	<td>sookie</td>
                <td>Bel Temps</td>
                <td></td>
             </tr>
             <tr>
             	<td>Eric</td>
                <td>Lousiana</td>
                <td></td>
             </tr>
             <tr>
             	<td>Jesse</td>
                <td>Lousiana</td>
                <td></td>
             </tr>
             <tr>
             	<td>Gothic</td>
                <td>Lousiana</td>
                <td></td>
             </tr>
             <tr>
             	<td>Tera</td>
                <td>Bel Temps</td>
                <td></td>
             </tr>
        	<tr>
            	<td>David</td>
                <td>California</td>
                <td></td>
             </tr>
        	<tr>
            	<td>Eldon</td>
                <td>NY</td>
                <td></td>
             </tr>
        	<tr>
            	<td>Bill</td>
                <td>Lousiana</td>
                <td></td>
             </tr>
        	<tr>
            	<td>sookie</td>
                <td>Bel Temps</td>
                <td></td>
             </tr>
             <tr>
             	<td>Eric</td>
                <td>Lousiana</td>
                <td></td>
             </tr>
             <tr>
             	<td>Jesse</td>
                <td>Lousiana</td>
                <td></td>
             </tr>
             <tr>
             	<td>Gothic</td>
                <td>Lousiana</td>
                <td></td>
             </tr>
             <tr>
             	<td>Tera</td>
                <td>Bel Temps</td>
                <td></td>
             </tr>
           </tbody>
      </table>
	</div>
  </div>
   
   
<body>
</body>
</html>


[ot] i need ur input on this though its annoying not to leave a visitor msg on ur profile

input[type=text] is an attribute selector that can selct elements by the attributes they contain or by the values (or partial values) of the attribute.

The above selects inputs that have a “type” attribute with a value that says “text” (i.e.it would select only <input type=“text” … elements and not submit buttons).

btw i was using DW Browser Lab for Testing Cross Browser Compatibility issues, now its expired. any free ones in ur mind?

[/quote]

There are a number of free ones around such as:

Just google for more. :slight_smile:

I don’t use the free ones though as I have a paid for browsercam account plus I have most of the modern browsers on my three computers on my desk in front of me :).

Off Topic:

btw paul, have u read m thread about styling input fields? i have a problem, my boss wanted me to class readonly and mandatory,with different colors. i told them it will ruin many thing in short. when i did the textfield heights were reduced. any know how why?

no that’s not what i m looking for, i am looking for scrollable body and fixed thead

ut the best paul!!! thanks so much i been trying to give it left-:20px and it would overlap every heading on first one in IE, didn’t knew i had to get rid of positioning in IE

Hi,

You would need to add   inside the empty table cells to get IE to show the borders.

Then you would need to give some alternative rules for iE6 and 7 as follows


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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 type="text/css">
div.result-wrap {
    width:1040px;
    height:293px;
    position:relative;
    padding-top:40px;
}
div.result-scroll {
    width:100&#37;;
    height:80px;
    overflow-x:hidden;
    overflow:auto;
}
table.results {
    width:1020px;
    overflow-x:hidden;
}
table.results td {
    border:1px solid #09C;
    padding:2px;
    width:340px;
    text-align:center;
}
table.results thead p {
    position:absolute;
    top:5px;
    cursor:pointer;
[B]    width:340px;[/B]
}
</style>

[B]<!--[if (lte IE 7)]>
<style type="text/css">
table.results thead p{width:auto;margin-left:-20px;}
</style>
<![endif]-->[/B]


</head>
<div class="result-wrap">
    <div class="result-scroll">
        <table class="results">
            <thead>
                <tr>
                    <th><p>Name</p></th>
                    <th><p>City</p></th>
                    <th><p>Provience</p></th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>David</td>
                    <td>California</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>Eldon</td>
                    <td>NY</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>Bill</td>
                    <td>Lousiana</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>sookie</td>
                    <td>Bel Temps</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>Eric</td>
                    <td>Lousiana</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>Jesse</td>
                    <td>Lousiana</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>Gothic</td>
                    <td>Lousiana</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>Tera</td>
                    <td>Bel Temps</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>David</td>
                    <td>California</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>Eldon</td>
                    <td>NY</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>Bill</td>
                    <td>Lousiana</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>sookie</td>
                    <td>Bel Temps</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>Eric</td>
                    <td>Lousiana</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>Jesse</td>
                    <td>Lousiana</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>Gothic</td>
                    <td>Lousiana</td>
                    <td>&nbsp;</td>
                </tr>
                <tr>
                    <td>Tera</td>
                    <td>Bel Temps</td>
                    <td>&nbsp;</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
<body>
</body>
</html>


Fixed table headers are very awkward :slight_smile:

what does input [type=“text”] do?
btw i was using DW Browser Lab for Testing Cross Browser Compatibility issues, now its expired. any free ones in ur mind?

You’ve only styled on e border so the others are still at their default size which is a sort of 2px inset (or outset border) with the inner border being the background colour and therefore overall are 1px bigger.

Just border the other inputs:


[B]input[type=text]{border:1px solid #7f9db9}
[/B].inpt{border:1px solid red;}


For ie6 you would need to add a class as it doesn’t understand attribute selectors.

That will make them all the same smaller size. You can add padding f you want to make them bigger.

sorry my bad, here


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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 type="text/css">
.inpt{border:1px solid red;}
</style>
</head>
        <table width="200">
            <thead>
                <tr>
                    <th><p>Name</p></th>
                    <th><p>City</p></th>
                    <th><p>Provience</p></th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>David</td>
                    <td><input type="text" class="inpt" /></td>
                    <td><input type="text" /></td>
                </tr>
			<tbody>
		</table>
<body>
</body>
</html>

see thee is very slight difference in the height of both text field. that’s my issue.

You’ll have to give more than that to go on as I’m working in the dark here :slight_smile:

Example please.

well problem remains, what happens in suppose the inp class inputs will decreased in height. its more narrow,

You can order borders to inputs without too many problems.


<!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 type="text/css">
form,input{
    line-height:1.3;
}
form{
    width:30em
}
label{
    float:left;
    clear:left;
    width:15em;
    padding:0 1em 0 0;
    text-align:right
}
.inp{
    border:1px solid red;
    width:10empx;
    padding:3px 10px;
    margin:0 0 5px;
}


</style>
</head>
<body>
<form id="form1" method="post" action="">
    <fieldset>
    <legend>inputs</legend>
    <label for="name">Name</label>
    <input class="inp" type="text" name="name" id="name" value="Name" />
    <label for="address">Address</label>
    <input class="inp" type="text" name="address" id="address" value="Address 1" />
    <label for="address2">Adress2</label>
    <input  class="inp" type="text" name="address2" id="address2" value="Address 2" />
    </fieldset>
</form>
</body>
</html>


It all depends what you were trying to do. Other elements such as selects can’t be chnged by some browsers.

Here is an article on what you might be looking for.

http://www.imaputz.com/cssStuff/bulletVersion.html