Jump to content
xisto Community
Sign in to follow this  
fffanatics

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

Recommended Posts

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.

Share this post


Link to post
Share on other sites

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%?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.