Welcome Guest ( Log In | Register)



 
 Reply to this topicStart new topic
> Ie Table Width In A Div Tag, Table expands past screen at 100%
fffanatics
post Jan 22 2006, 06:30 AM
Post #1


Privileged Member
*********

Group: [HOSTED]
Posts: 936
Joined: 14-April 05
From: West Chester, PA
Member No.: 5,636
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.

CODE

<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.

(list)

Go to the top of the page
 
+Quote Post
Tyssen
post Jan 22 2006, 08:11 AM
Post #2



***********

Group: Members
Posts: 1,161
Joined: 9-May 05
From: Brisbane, QLD
Member No.: 6,818
QUOTE(fffanatics @ Jan 22 2006, 04:30 PM)
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%?

(list)

Go to the top of the page
 
+Quote Post
fffanatics
post Jan 22 2006, 04:15 PM
Post #3


Privileged Member
*********

Group: [HOSTED]
Posts: 936
Joined: 14-April 05
From: West Chester, PA
Member No.: 5,636
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://fffanatics.trap17.com/ff7/armor.php

(list)

Go to the top of the page
 
+Quote Post
Tyssen
post Jan 22 2006, 09:51 PM
Post #4



***********

Group: Members
Posts: 1,161
Joined: 9-May 05
From: Brisbane, QLD
Member No.: 6,818
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.

(list)

Go to the top of the page
 
+Quote Post
fffanatics
post Jan 23 2006, 05:35 AM
Post #5


Privileged Member
*********

Group: [HOSTED]
Posts: 936
Joined: 14-April 05
From: West Chester, PA
Member No.: 5,636
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

(list)

Go to the top of the page
 
+Quote Post
iGuest
post Aug 20 2008, 07:18 AM
Post #6


Hail Caesar!
*********************

Group: Members
Posts: 5,876
Joined: 21-September 07
Member No.: 50,369
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

(list)

Go to the top of the page
 
+Quote Post
« Next Oldest · HTML, XML etc.. · Next Newest »
 

Reply to this topicStart new topic

Collapse

> Similar Topics

Topics Topics
  1. Table Width Help(2)
  2. Max Table Width(13)
  3. Centering Page Of Html At Various Display Widths(14)
  4. Screen Resolution(6)
  5. Width Of Display Area Of Browser Window(6)


 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 12th October 2008 - 03:01 AM
Powered By IP.Board © 2008  IPS, Inc.
Licensed to: Xisto Corporation