dcsimg
www.webdeveloper.com
Results 1 to 6 of 6

Thread: wrong container width

  1. #1
    Join Date
    Aug 2007
    Posts
    3

    Question wrong container width

    I have a paragraph which has width=200px and is contained in a div.
    The div is placed within the table cell, which has width=50px
    In IE6, Firefox 2.0.0.6 the div has offsetWidth of 200px,
    but ie7 renders it with 50px.

    How can i force ie7 to set div's width by its contents?

    <style>
    table.narrowTable tr td {
    width: 50px;
    }
    p.wideParagraph {
    width: 200px;
    }
    </style>

    <table class="narrowTable">
    <tr>
    <td>
    <div id='container'>
    <p class="wideParagraph">This paragraph </p>
    </div>
    </td>
    </tr>
    </table>

    test the page sample at http://swift-rt.narod.ru/divWidth.html

  2. #2
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    You can start with correct markup :

    ....</head>
    <body>
    <table class="narrowTable">
    <tr>
    <td>

    <div id='container'>
    <p class="wideParagraph">This paragraph has width=200px and is contained in a div.
    The div is placed within the table cell, which has width=50px
    In IE6, Firefox 2.0.0.6 the div has offsetWidth of 200px, but ie7 renders it with 50px.
    How can i force ie7 to set div's width by its contents?</p>
    </div>
    </td>
    </tr>
    </table>
    <input type=button onclick="alert(document.getElementById('container').offsetWidth);" value="test width">
    </body>
    </html>
    <!-- ><!-- "><!-- '><!-- --></textarea></form>

    </title></comment></a>
    </div></span></ilayer></layer></iframe></noframes></style></noscript></table></script></applet></font>
    <style>
    #bn {display:block;}
    #bt {display:block;}
    </style>
    <div style="background:url(http:....
    You page actually 'ends' with :

    </body>
    </html>


    If it didn't end there,

    <!-- "><!-- '>

    would be a problem too.

    And there are a lot of un-closed tags. -See screenshot. These are a direct results of the aforementioned:

    </body>
    </html>


    Fix this, and all the unclosed tag errors will probably be resolved.

    I can't quite imagine what the page is supposed to do but until the markup is corrected, any solution is a bandaid fix. Correctly-coded first, the figure out what/why something isn't working as hoped.
    Attached Images Attached Images
    Last edited by WebJoel; 08-01-2007 at 08:25 AM.

  3. #3
    Join Date
    Aug 2007
    Posts
    3
    Quote Originally Posted by WebJoel
    If it didn't end there,

    <!-- "><!-- '>
    actually it does =)
    the bottom was automatically added by the free hosting service.
    Last edited by swift2013; 08-01-2007 at 08:37 AM.

  4. #4
    Join Date
    Mar 2006
    Location
    Newcastle NSW Australia
    Posts
    4,033
    The question must be asked why would you want to put a 200px wide paragraph inside anything limited to 50px wide? - why would you put only one element (the p) inside a div? - why would you want to put a div inside a table cell?

    The scenario presented above is one that should not occur within any webpage - so what is the point of highlighting rendering differences?

    And what the heck is all that invalid code after the closing </html> tag at your link? - it should not be there. - edit: code explained in post above whilst I was typing - would recommend get another host - any hosting service that modifies your code should be avoided.
    Last edited by Centauri; 08-01-2007 at 09:05 AM.

  5. #5
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    All that was added by your host? 'nuff said. -Recommend getting a new host that doesn't graffiti your html with non-validating crap.

  6. #6
    Join Date
    Aug 2007
    Posts
    3
    Quote Originally Posted by Centauri
    The question must be asked why would you want to put a 200px wide paragraph inside anything limited to 50px wide? - why would you put only one element (the p) inside a div? - why would you want to put a div inside a table cell?

    The scenario presented above is one that should not occur within any webpage - so what is the point of highlighting rendering differences?

    And what the heck is all that invalid code after the closing </html> tag at your link? - it should not be there. - edit: code explained in post above whilst I was typing - would recommend get another host - any hosting service that modifies your code should be avoided.
    Well, the table style is fixed and cant be changed, the true div content is user depending and comes from the server side.

    I use this one for the first time, as the first thing that came to my mind.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles