ansaurus

Question

Fix layout via css

Answer 1

+1 A:

I'd say it's hopeless if you can't get to the 565px div, because that's what's not positioning itself inline with the menu...

Here's something you could do with JS:

    <!-- I'm able to start modifying here. -->
    <script type="text/javascript">
    $(document).ready(function() {
        $('table#firstTable').parent().parent('div').removeAttr('style').attr('style', 'margin: 11px auto;');
        });
    </script>

First you get rid of the hard-coded style on the DIV, then add back whatever you want to stay there. Pretty clumsy, but I hope you get the idea.

dalbaeb 2009-02-13 17:15:05

nah, he could go with an !important selector to override what he needs to or even JS if it comes to that

annakata 2009-02-13 17:19:16

by the way, it will work if you remove width: 775px, since it is making the 565px div jump down because it doesn't fit in on one line with the menu because of additional width due to borders (160 + 565 + borders does not equal 775).

dalbaeb 2009-02-13 17:20:27

Answer 2

+1 A:

I know it's not the solution you're looking for, but a possible alternative would be to change the text itself and add a hover to display the whole thing... eg:

<td><span title="This is data chunk 1 withALongChunkThatDoesn'tDivideWell">This is data chunk1 with...</span></td>

Chris Shaffer 2009-02-13 17:18:14

Answer 3

+1 A:

There simply isn't a solution which you'll both like and be allowed to implement. The incorrectly-cased DOCTYPE ("Dtd Xhtml") throws IE6 into quirks mode, from which there is no return. Specifically, in quirks mode there is absolutely no way to force IE6 to not "stretch" elements, which breaks your floating. You can cause it to appear (still stretched) on the same "line" as your float if you can get access to the "main content" div, but aside from that, you'll simply have to munge the contents, by adding spaces or <wbr>s:

<!-- this works, but would be hard to implement programmatically -->
<td>This is data chunk 1 with<wbr>A<wbr>Long<wbr>Chunk<wbr>That<wbr>Doesn't<wbr>Divide<wbr>Well</td>
<td>This is data chunk 2 with<wbr>A<wbr>Long<wbr>Chunk<wbr>That<wbr>Doesn't<wbr>Divide<wbr>Well</td>
<td>This is data chunk 3 with<wbr>A<wbr>Long<wbr>Chunk<wbr>That<wbr>Doesn't<wbr>Divide<wbr>Well</td>
<td>This is data chunk 4 with<wbr>A<wbr>Long<wbr>Chunk<wbr>That<wbr>Doesn't<wbr>Divide<wbr>Well</td>
<td>This is data chunk 5 with<wbr>A<wbr>Long<wbr>Chunk<wbr>That<wbr>Doesn't<wbr>Divide<wbr>Well</td>

Ben Blank 2009-02-13 17:39:14

"The transitional DOCTYPE throws IE6 into quirks mode..."Only when the DOCTYPE is not the first statement on the page - not in this case.

Traingamer 2009-02-13 20:11:37

You're right — I think it's the incorrect casing, then, not the transitional DTD, that's throwing IE into quirks mode.

Ben Blank 2009-02-13 20:31:23

Answer 4

+2 A:

if you can wrap the offending table in another block level element such as a div tag you can style that div as below:

<div style="width: 100%; overflow: scroll;">
  <table border="1">
      <tr>
          <td>This is data chunk 1 withALongChunkThatDoesn'tDivideWell</td>
          <td>This is data chunk 2 withALongChunkThatDoesn'tDivideWell</td>
          <td>This is data chunk 3 withALongChunkThatDoesn'tDivideWell</td>
          <td>This is data chunk 4 withALongChunkThatDoesn'tDivideWell</td>
          <td>This is data chunk 5 withALongChunkThatDoesn'tDivideWell</td>
       </tr>
  </table>
</div>

This will put the table into a scrollable window so it won't stretch the div past 565 pixels. This, of course, will only work for you if making the table scrollable is an option with your client. Unfortunately you don't have many other options.

Ross Pace 2009-02-13 17:44:51

I'd recommend changing this to `overflow-x: scroll` instead, but this is a very nice solution.

Ben Blank 2009-02-13 19:06:51

Answer 5

+2 A:

I can't see any way of correcting this using only CSS. IE6's wrapping calculation is going to be preformed in such a way that unless the main content area is expanded, the content will be moved under the menu. I don't know if this will work within your constraints, but a bit of code like this will correct it visually.

function resize_content ( )
{
     var main = document.getElementById ( "main" );
     var content = document.getElementById ( "content" );
     if ( main && content )
          main.style["width"] = ( content.clientWidth + 160 ) + "px";
}

I used IDs for clarity, but if you couldn't modify the markup, you could get the elements using relatives.

Joseph Tary 2009-02-13 18:27:25

Actually I do have IDs...I just removed them in the sample, trying to pare the sample down to the critical essentials. Thanks!

Beska 2009-02-13 18:37:34

This answer is incredibly sweet (or as sweet as a hack to an ugly system can be.)

Beska 2009-02-13 19:02:18

Thanks! I agree; it's not the prettiest solution -- but you sounded like you're pretty limited (and I know how that is)

Joseph Tary 2009-02-13 19:04:35

Answer 6

A:

If I understand correctly, I think you're looking for something similar to the following:

<!DOCTYPE html PUBLIC "-//W3C//Dtd Xhtml 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/Dtd/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<body>
<div style="margin: 11px auto; width: 775px; position: relative">

    <!-- Menu -->
    <div style="position: absolute; width:160px; left: 0; top: 0; border:#999 1px dashed;">
            Menu Item 1<br />
            Menu Item 2<br />
    </div>

    <!-- Main content area -->
    <div style="margin-left: 165px">

            <!-- I'm able to start modifying here. -->
            <!-- Content chunk 1 -->
            <table border="1">
                    <tr>
                            <td>This is data chunk 1 withALongChunkThatDoesn'tDivideWell</td>
                            <td>This is data chunk 2 withALongChunkThatDoesn'tDivideWell</td>
                            <td>This is data chunk 3 withALongChunkThatDoesn'tDivideWell</td>
                            <td>This is data chunk 4 withALongChunkThatDoesn'tDivideWell</td>
                            <td>This is data chunk 5 withALongChunkThatDoesn'tDivideWell</td>
                    </tr>
            </table>

            <!-- I'd like to be able to stop modifying here. -->

            <!-- Content chunk 2 -->
            <table border="1">
                    <tr>
                            <td>This is data chunk 1</td>
                            <td>This is data chunk 2</td>
                            <td>This is data chunk 3</td>
                            <td>This is data chunk 4</td>
                            <td>This is data chunk 5</td>
                    </tr>
            </table>

            <!-- I have to stop modifying here. -->

    <!-- Footer -->
    <div style="float: clear; text-align: center;">
            Here's a footer of some kind.  I don't want to be overlapped.
    </div>

</div>

</body>
</html>

The above CSS does the following: Makes the outer div relative positioned, which allows you to then take the menu div and position it absolutely to its top left. Then, a left margin of 165px was put on the left of the content. Any content that doesn't fit in the content's space should overflow off to the right. I don't have any way to test in IE 6, the this works in Safari and should in Firefox.

steve.platz 2009-02-13 19:11:42

Ahh..but unfortunately, that's in the area I can't modify. I'm not really able to modify anything outside of the content area (including the content container), since that has the potential to affect *everything* on the site.

Beska 2009-02-13 19:50:22

ansaurus

tags:

views:

answers:

Fix layout via css

related questions