2009-04-17 15 views
4

レイアウトは左にメニューDIVがあります。これは、一定のEM幅で左にフローティングされます。私は、メニューの幅以上の左余白を持つコンテンツDIVを持っています。メニューの右側にうまく座って、メニューとコンテンツの両方が完全に並んでいる残りのスペースを埋めます。CSS浮動小数点数 - IE6で落ちるコンテンツ

ただし、Internet Explorer 6では、コンテンツが広すぎると、メニューの下に表示されます。つまり、空白があり、スクロールせずにコンテンツを実際に見ることはできません。

残念ながら私はコンテンツを変更することができません。これはサードパーティのコンテンツをホストするサイトの再設計であり、そのコンテンツの変更は私のできる範囲外です。

また、メニューとコンテンツの両方の下に配置する必要があるフッターバーがあります。

IE6に絶対配置を使用して別のレイアウトを提供することで、ほぼうまく動作するようになりました。残念ながら、フッタはゴミに見えます。私たちのサイトではIE6が2番目に多く使われています。

また、あふれてしまっていましたが、うまくいっていない場所にランダムなスクロールバーが表示されてしまうという問題が発生しました。

IE6と「適切な」ブラウザで動作するシンプルな非Javascriptの方法があるかどうかは知りませんか?私は現在、テーブルベースのレイアウトでなければならないと考えています。ここで

は、問題の例です: look at thisをお持ちの

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 

<html> 
    <head> 
     <style type="text/css"> 
      .menu { 
       width: 14em; 
       float: left; 
      } 

      .content { 
       margin-left: 15em; 
       zoom: 1; 
      } 

      .footer { 
       clear: both; 
      } 

      /* styling to make the demo more obvious */ 
      .menu { 
       background-color: #f99; 
      } 
      .content { 
       background-color: #9f9; 
      } 
      .footer { 
       background-color: #99f; 
      } 
      td { 
       border: 1px solid #000; 
      } 
     </style> 
    </head> 

    <body> 

    <div class="container"> 
     <div class="menu"> 
      <ul> 
       <li><a href="#">menu item</a></li> 
       <li><a href="#">menu item</a></li> 
       <li><a href="#">menu item</a></li> 
       <li><a href="#">menu item</a></li> 
      </ul> 
     </div> 

     <div class="content"> 
      <h1>Main Content</h1> 
       <table> 
        <tr> 
         <td>this is a really</td> 
         <td>wide table which</td> 
         <td>I am using to push</td> 
         <td>the content down</td> 
         <td>need to keep going</td> 
         <td>so that it breaks</td> 
         <td>in ie6</td> 
         <td>but naturally</td> 
         <td>nothing else</td> 
         <td>sghskdhksdhfsdhffs</td> 
         <td>sghskdhksdhfsdhffs</td> 
         <td>sghskdhksdhfsdhffs</td> 
         <td>sghskdhksdhfsdhffs</td> 
        </tr> 
       </table> 
      </div> 
     </div> 

     <div class="footer"> 
      <p>Copyright blah blah blah</p> 
     </div> 
    </body> 
</html> 
+0

私は同じ答えに2つのコメントを追加する方法を理解できませんでした...とにかく... 私はオーバーフローでこの問題を解決することができましたが、それは私が2組のスク​​ロールバー。本当に大きなテーブルをナビゲートすると、信じられないほど困難になりました。スクロールバーを使用して別のスクロールバーを検索する必要がありました。その後、最初のものを使用して再度スクロールアップしてください。それだけで、ユーザビリティの問題が発生しました。 (それは働くことができないと言っているわけではない) –

答えて

2

はなぜ例えばhttp://layouts.ironmyers.com/

ために確立レイアウトを使用していないか、このcss overflow

調査したいかもしれませんが、それは助けません?

EDIT:

は、これらの修正プログラムのいずれかを試してみてください。 (@Blakeが提案のようにあなたには、いくつかの条件付きコードを使用することができます)

  • オーバーフロー:スクロール - これは必ずあなたのコンテンツを見ることができますデザインのコストで(スクロールバーが醜い)
  • オーバーフロー:隠された - オーバーフローを切断します。それは人々がコンテンツを読むことができないことを意味します。

    .content { 
         margin-left: 15em; 
         zoom: 1; 
         overflow:scroll 
         /* overflow:hidden */ /* probably second best */ 
    } 
    

これはあなたの問題であり、この1 How to prevent long words from breaking my div?を見てみ?

+0

すばらしい主よ、素早く! :) 返信いただきありがとうございます。 私はいくつかの確立されたレイアウトを試しましたが、残念ながらそれらはすべて同じ問題を抱えています - コンテンツがメニューの下にあるか、逆もあります。私は前にironmyersのサイトに出くわしていなかったが、私は行って、メニューがコンテンツの下に落ちる。 –

0

私は何度もこの問題にぶつかり、フロートから完全に離れようとしています。つまり、それらを機能させるためにできることがいくつかありますが、レイアウトが固定されているか、またはsome IE6 specific fixesで解決する必要があるかもしれません。

  1. 彼らはクールじゃない 、これは異端のように聞こえるかもしれないが、 テーブルがレイアウトのために間違っていないです:ここではあなたが試すことができますいくつかのものがあります。
  2. で 'container' divを固定幅と自動余白に設定してみてください。
  3. それでも解決しない場合は、固定幅 のwidth 'content' divと固定 width 'container' divをお試しください。
+0

お寄せいただきありがとうございます。私はおそらく、テーブルベースのレイアウトは答えですが、それはサイトの柔軟性を損なうので、私が好きなものではないと思います(小さなスクリーンなどはスタイルが難しくなります) コンテナの幅を固定しても効果がありません残念ながら、コンテンツよりも幅を広げない限り、幅が何を必要としているのかわからないので、とにかく実用的かどうかはわかりません。 –

1

そうのような問題のdivの幅を修正するために必要なCSSを読み込むと場所ためにIE6のためのいくつかの条件付きコメントを使用します。

zoom: 1を削除
<!--[if IE 6]> 
IE 6 specific stuff goes here. You can load a specific stylesheet here, or just have inline css 
<![endif]--> 

You can read more on the conditional comments here.

+0

ありがとうございましたが、問題はIE6から隠す方法ではなく、私がそれから隠す必要がある特定のものが何であるかを知ることです。 :) –

+0

彼はIEからあなたのコンテンツを隠すことを提案していない、彼はIE6の問題を修正するために特定のCSSハックを使用することを示唆している。 – inspite

1

。 IE6でうまく動作します。

+0

それは私のために何も変わらない、本当ですか?ブラウザを狭くしてみてください。 IE7で問題を解決したhaslayoutを強制的にズーム:1に追加しました。 –

+0

はい - それは私にとってはIE 6.0.2900.2180など(xp sp2)でも正常に動作し続けます。うーん。 – Traingamer

3

既に述べたように、絶対的なポジションを試してみました。しかし、私は次のことを試してみると、それはあなたのために働くかもしれません。ここにCSSがあります:

.container { 
    position:relative; 
} 
.menu { 
    width: 14em; 
    position:absolute; 
    top: 0; 
    left: 0 !important; 
    left: -15em; 
} 

.content { 
    margin-left: 15em; 
} 
.footer { 
} 

説明:メニューは他のコンテンツとは関係なく絶対的に配置されています。しかし、IEはメニューを "content" divに相対的に置き、それを "content" divの後ろに隠します。回避策は、コンテンツdivが「余白が残っている」ように、左に多くのemがあるように、負の位置に配置することです。しかし、これはIEのためにのみ行う必要があります。そのため、IEは "!important"を無視し、他のブラウザはそれを認識して "left 0"を使用するため、 "left 0!important"が追加されます(ただし、 。

更新:

Alohciが指摘したようより良い方法は、「* htmlの」ハックを使用することであろう、その場合には「メニュー」のためのCSSは次のようになります。位置について

.menu { 
    width: 14em; 
    position:absolute; 
    top: 0; 
    left: 0; 
} 

* html .menu { 
    left: -15em; 
} 
+0

良いアイデア。仕事をしているようだ。個人的には、IE6をターゲットにするために* htmlのハックまたは条件付きコメントを使用したいと思っています!重要なのは重要です。重要なのはアクセシビリティの意味合いがありますが、すべて同じです。 – Alohci

0

おかげで:絶対的な考え。これは私がほとんど一緒に行った1つの解決策に似ています。

ここで問題になるのは、メニューがコンテンツよりも長い場合(そして非常に多くの場合)、フッタにフッタがオーバーレイされることです。コンテンツに任意の高さを加えて最小限の高さにしようとすることもできますが、メニューの大きさはわかりません。そのエリアのサイドパネルをかなり下って行く可能性があります。

絶対配置されたコンテンツに対応して相対配置されたコンテナを強制的に拡大する方法はないと思いますか? IE6のハックであっても、私は他のブラウザにfloatメソッドを使うことができます。

(繰り返しますが、コメントとしてこれを投稿していないため申し訳ありませんが、私はオプションとしてそれを得ることはありません)遅すぎる

1

が、通常、私は、ピクセル数を追加したり、絶対幅(で固定フロを取得、pointやhard measure systemをem、%など)に置き換えたり、場合によってはmin-widthプロパティを設定して解決したり、boxmodelの合計のためにパディングやボーダーにも注意してください。

+0

http://www.positioniseverything.net/explorer/expandingboxbug.html – IsaacDM

関連する問題