Ie Table Width In A Div Tag Table expands past screen at 100%

[fffanatics 0]

Hey everyone. I have been designing websites for a long time but i have recently decided to tryout the DIV layout technique instead of just using good old tables. However, this is the biggest problem i have come across. So I have a page where i need to have a table to display a whole bunch of details on armor in a game since the site is for players of final fantasy. However, when i do width="100%" so that the table expands the whole way to the side of the div so it looks the best it now will go past the edge and off the screen at 100%. Below is most of the code. Please help me out since it works fine in Firefox but not IE which is a must.

<div id="noRightMenu">     <?php  	if (file_exists($relPath."leftside.php")) {  	@include($relPath."leftside.php");  }//if		?>     <br>     <div class="centerTable">       <div class="topicTitle">Armor</div>       <div class="news">         <div class="newsContent" style="border-top : 1px solid white;">           <table border="0" cellspacing="0" cellpadding="0" width="100%" class="infoTable">             <tr>               <td colspan="2"></td>             </tr> ...#noRightMenu{	*height : 565px;	min-height : 547px;		margin-left : 165px;	margin-right : 15px;}.centerTable{	background : url("images/tableBg.jpg");	border : 1px solid white;	width : 100%;}.topicTitle {	z-index : 0;	font-size : 20px;	font-weight : bold;		text-align : left;	text-indent : 10px;	border-bottom : 1px solid white;	background: #000040;	width : inherit;}.news {	margin-top : 15px;	margin-bottom : 15px;	width : inherit;	position : relative;}.newsContent {	background:  url("images/tableUpperBg.jpg");	text-indent: 25px;	margin-left : 15px;	margin-right : 15px;		margin-bottom : 3px;	border: 1px solid white;	border-top : 0px;	}.infoTable{	display : table;}.infoTable td{	display : table-cell;	padding-left : 15px;	padding-top : 2px;}.infoTable th{	display : table-cell;	border-bottom : 1px solid white;	font-size : 16px;	font-weight : normal;	text-align : left;	padding-left : 15px;	background-color: #000040;}

PS It still does this even if i remove the infoTable display : table element or if i put width : 100% in the infoTable class instead of in the table tag.

Hope someone can help. Thanks in advance.

[Tyssen 0]

Below is most of the code.

Most of the code isn't good enough. A look at the page itself would be better but more of the code would help.
What happens if you remove the width:100%?

[fffanatics 0]

If i remove the width : 100% the table fits in the block but the fields do not span all the way across this leaving an area on the right that looks out of place. As of the page itself, i just uploaded it. Just go to http://forums.xisto.com/no_longer_exists/

[Tyssen 0]

First problem - no doctype which means IE is in quirks mode and thus renders using the incorrect box model. With a doctype, IE is in standards mode which means it uses the same box model as other standards compliant browsers like Firefox and Opera.

[fffanatics 0]

Thanks a ton. I have added the correct doctype and fixed up a bit of my code so it is fullt in xhtml and now it works great. i have never known i should use doctype til now. It was never taught to me in my html classes nor in the books i have read. I guess it is one thing that definitely should be mentioned more often. Once again thanks and if i have any other div problems in IE ill post them here. If not ill make a new topic. Thanks

[iGuest 3]

Similar problem of div tag and table inside it but in firefox.

Ie Table Width In A Div Tag

 

Hi,

I am working in Asp.Net , I am using a div tag and a table inside that,when I view in IE it proper but when I see in Firefox the table is out of the box I created of div and towards the right hand side.Pllz help me I am using div for the first time.

 

-question by Kunal