Nov 21, 2009

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

 		free web hosting
Open Discussion > MODERATED AREA > Computers > Programming Languages > HTML, XML etc..

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

fffanatics
Jan 22 2006, 06:30 AM
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.

 

 

 


Comment/Reply (w/o sign-up)

Tyssen
Jan 22 2006, 08:11 AM
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%?

Comment/Reply (w/o sign-up)

fffanatics
Jan 22 2006, 04:15 PM
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

Comment/Reply (w/o sign-up)

Tyssen
Jan 22 2006, 09:51 PM
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.

Comment/Reply (w/o sign-up)

fffanatics
Jan 23 2006, 05:35 AM
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

Comment/Reply (w/o sign-up)

iGuest-Kunal
Aug 20 2008, 07:18 AM
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

Comment/Reply (w/o sign-up)


Got an Opinion! Express your Views! (no registration):-
Add your Reply/ Opinion/ Views/ Comments/ Suggestion/ Questions/ Queries etc.
Posts with decent grammar & English will be accepted and please refrain from profanities.
For asking a Question, We recommend you to sign-up (for free) so that you can track the topic easily.
Nature of your Post*: Opinion/ Reply/ Comments
Question/Query
Feedback to us.
       
Name   Email
Title/Question*

This textarea will convert to Rich-Text automatically (IE, Firefox, Chrome)

Similar Topics

Keywords : table, width, div, tag, table, expands, past, screen, 100percent

  1. Width Of Display Area Of Browser Window
    is there a formula? (6)
  2. Screen Resolution
    I need a code to help out here please... (6)
    Hey everyone.. I was just wondering if there was a code/script that I could insert into my html
    website to change viewers resolution from 1024x800 to 800x600 or something to that effect. It's
    just I use 800x600 at home, and I programme it around that, and it's fine, but on some public
    computers it's default to 1024x800 and can't be changed.. Is there a script to chance
    this??? Help plz anyone!!! Thanks in advance, Sean.....
  3. Centering Page Of Html At Various Display Widths
    Viewing Screen Shots No Matter Resolution (14)
    I am running into a HUGE problem creating a website. When viewing the site on 800x600 it views in
    the center of the page. When viewing the site on 1024x768 it views on the left side of the page. How
    do I make the page always appear in the middle? I have seen many sites set up that will adjust
    accordingly, but I cannot figure it out. If you want to view my source you can do so by going to the
    website: www.faithcity.org/test.html. Moving to the html Topic ....
  4. Max Table Width
    (13)
    Well, I have a table that I don't want to be over 350 pixels in width - even on the largest
    screens. On small screens, the table will be smaller. But on large screens, I don't want the
    table to larger than 350 pixels... Is there a way to do that?....
  5. Table Width Help
    table width="100%" goes off screen (2)
    Hey everyone. My problem is that current i have a left menu and a right menu which are created using
    a div the properties listed below. Then i have a center section to my website where i have a table
    that i need to fill the remaining space on the screen (aka the space from the right side of the left
    menu to the left side of the right menu). However, when i set the table's width to 100%, it goes
    of the screen. Can anyone help me with this? If you look at my main page, the news section works but
    only because the text forces the table to its largest size and then wraps.....
  6. Popup Window With Height And Width?
    (10)
    I will try to explain: When clicking on the link, a pop-up window will be opened. I also want to
    have the width=300 and height=160 (just examples /wink.gif' border='0'
    style='vertical-align:middle' alt='wink.gif' /> ) Could someone give me a short code for that?....
  7. Adding Width And Height To Page
    (8)
    how do you add width and height to your page? without adding it to your link you previously
    clicked... I mean, that the width and height should be included in the ORIGINAL page... i hope
    someone can help me with this... thanks in advance! /cool.gif' border='0'
    style='vertical-align:middle' alt='cool.gif' /> btw: i'm not that familiar with
    scripting.......


      8. Looking for table, width, div, tag, table, expands, past, screen, 100percent

Searching Video's for table, width, div, tag, table, expands, past, screen, 100percent
See Also,
advertisement


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

Affordable Web Hosting, Low cost Web Hosting - ComputingHost.com