Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations gkittelson on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

CSS Issue in IE browser

Status
Not open for further replies.
Suneelk

Suneelk

Programmer
Aug 14, 2009
5
US
Hi Below HTML rendered perfectly in most of the browsers expect IE. I am using some asp.net controls, so I can't control the HTML markup generated by web server. Any help is appropriated.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<html xmlns=" >
<head>
<title></title>
<style type="text/css">
table.hht
{
border:0px;
width:97%;
}
table.hht tr td
{
padding:0px; margin:0px;

}
table.innertable
{
border:0px;
width:100%;
}
table.innertable tr td
{
padding:0px; margin:0px;
vertical-align:top;
}
table.tsc
{
border:0px;
width:100%;
}
table.tsc tr td
{
padding:0px; margin:0px;
vertical-align:top;
}
table.tsc tr
{
padding:0px; margin:0px;
}
.hhtcol0
{
width: 10px;
padding: 1px 0px 2px 0px;
}
.hhtcol1
{
text-align:left;
width:auto !important;
}
.hhtcol2
{
width:100px !important;
}
.bt
{
font-weight:bolder;
}
a
{
text-decoration:none;
}
</style>
</head>
<body>
<div style="width:900px; border:1px red solid;">
<table class="hht" >
<col class="hhtcol0" />
<col class="hhtcol1" />
<col class="hhtcol2" />
<col class="hhtcol2" />
<col class="hhtcol2" />
<col class="hhtcol2" />
<tr>
<td></td>
<td class="bt">Person Name</td>
<td class="bt">Start</td>
<td class="bt">End</td>
<td class="bt">Status</td>
<td class="bt"></td>
</tr>
<tr>
<td colspan="6"><hr /></td>
</tr>
<tr>
<td><a href="#" title="click here to expand details">+</a> </td>
<td colspan="5">
<table class="tsc">
<tr>
<td class="hhtcol1">Person 1</td>
<td class="hhtcol2">10/10/2000</td>
<td class="hhtcol2">10/10/2001</td>
<td class="hhtcol2">Active</td>
<td class="hhtcol2">Add<br />Edit<br />remove<br /></td>
</tr>
<tr><td colspan="5">Description: Description about Person 1....</td></tr>
<tr><td colspan="5"><div id="divcond1"></div></td></tr>
<tr><td colspan="5"><hr /></td></tr>
</table>
</td>
</tr>
<tr>
<td><a href="#" title="click here to expand details">+</a> </td>
<td colspan="5">
<table class="tsc">
<tr>
<td class="hhtcol1">Person 2</td>
<td class="hhtcol2">10/10/2003</td>
<td class="hhtcol2">10/10/2004</td>
<td class="hhtcol2">Past</td>
<td class="hhtcol2">Add<br />Edit<br />remove<br /></td>
</tr>
<tr><td colspan="5">Description: Description about Person 2....</td></tr>
<tr><td colspan="5"><div id="divcond2"></div></td></tr>
<tr><td colspan="5"><hr /></td></tr>
</table>
</td>
</tr>
<tr>
<td><a href="#" title="click here to expand details">+</a> </td>
<td colspan="5">
<table class="tsc" border="1">
<tr>
<td class="hhtcol1">Person 3</td>
<td class="hhtcol2">10/10/2005</td>
<td class="hhtcol2">10/10/2006</td>
<td class="hhtcol2">Past</td>
<td class="hhtcol2">Add<br />Edit<br />remove<br /></td>
</tr>
<tr><td colspan="5">Description: Description about Person 3....</td></tr>
<tr>
<td colspan="5">
<div style="margin:0px; padding:0px;">
<table class="innertable">
<tr>
<td class="hhtcol1">Person 3 contact 1</td>
<td class="hhtcol2">10/10/2005</td>
<td class="hhtcol2">10/10/2006</td>
<td class="hhtcol2">Past</td>
<td class="hhtcol2">Edit<br />remove<br /></td>
</tr>
<tr><td colspan="5">Description: Description about Person 3 contact 1....</td></tr>
<tr><td colspan="5"><hr /></td></tr>
</table>
</div>
</td>
</tr>
<tr><td colspan="5"><hr /></td></tr>
</table>
</td>
</tr>
</table>
</div>
</body>
</html>
 
Sort by date Sort by votes
The layout seems substantially the same in IE7.0.5730.13, Chrome and FF3.5.2. Perhaps you could be more specific about the problem you are having. First advice however would be to dump the outmoded nested table-based layout and do it properly using appropriate HTML elements (Divs and ULs) for content and CSS for layout, reserving tables for strictly tabular data.

Please read FAQ222-2244 for guidance on forum usage, and avoid cross posting. I have asked for your duplicate (and off-topic) post in Web Design forum to be removed.

If you want the best response to a question, please check out FAQ222-2244 first.
'If we're supposed to work in Hex, why have we only got A fingers?'
Drive a Steam Roller
 
Upvote 0 Downvote
Thanks for the reply. I am new to these discussion forms (this is first post in my life). To give some back ground information about the html markup posted here, I do not have control on html markup (as of my knowledge in asp.net). I can only control lay out using style sheet.
I see one alignment issue in internet explorer. If I have inner table defined the outer table "Column1" width is not getting adjusted automatically.
Ex: if row size is 800px (I do not want to set this with in style sheet, rather it will be decided by screen size), last 4 columns width is defined as 100px (in style sheet) each and first column width is auto it should be 400px. This is not working as expected in internet explorer, rest of the browsers are fine. Let me know if you need any more details. Thanks for the help in advance.
 
Upvote 0 Downvote
Your outer <div> size is set to 900px so your layout will never be fluid in any browser. Set it's width to auto and try again.

If you want the best response to a question, please check out FAQ222-2244 first.
'If we're supposed to work in Hex, why have we only got A fingers?'
Drive a Steam Roller
 
Upvote 0 Downvote
Your are correct. I Forgot to tell one more thing I have set that to see border. I tried to set it as width:100% but it did not worked. Even with outer div width as 900px column1 width in row 3 is not as column1 width in row 1 and row 2 (in internet explorer only in browsers screen looks good). Have you noticed what I mean? Let me know if you need any specific details? Thanks.
 
Upvote 0 Downvote
If you are talking about the row containing 'Description' it has only one <td> and that has its colspan property set to 5. As you have 5 columns in the table, that <td> will fill the entire row width.

If you want the best response to a question, please check out FAQ222-2244 first.
'If we're supposed to work in Hex, why have we only got A fingers?'
Drive a Steam Roller
 
Upvote 0 Downvote
I am taking about the column which has content Person 3. Sorry for the confusion.
 
Upvote 0 Downvote
The difference for that row is
Code: 
<table class="tsc" border="1">
. There are so many things broken in IE6 that irregular coding like this is sure to affect. Please see my first post
johnwm said:
First advice however would be to dump the outmoded nested table-based layout and do it properly using appropriate HTML elements (Divs and ULs) for content and CSS for layout, reserving tables for strictly tabular data.
Click to expand...
Start with then look at There is also excellent tutorial stuff at
Read and study this material, redesign your site to modern standards and your problems will go away.

When you have done that come back if you have any further specific problems.


If you want the best response to a question, please check out FAQ222-2244 first.
'If we're supposed to work in Hex, why have we only got A fingers?'
Drive a Steam Roller
 
Upvote 0 Downvote
I will go through those stuff. Thanks for your cooperation.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
1K
spamjim
spamjim
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
658
pmonett
pmonett
cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
696
spamjim
spamjim
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
538
PeDa
PeDa
soni21
  • Locked
  • Question
JavaScript String to Number Conversion in HTML: Seeking Clarification
Replies
4
Views
1K
Chris Miller
Chris Miller

Part and Inventory Search

Sponsor

Back
Top