IEとNetscapeのどちらで見ても(バージョンは基本的に新しいものと考えれるので、古いバージョンは気にしないとして)、レイアウトが同じになるように制御するタグ(Java Script)はどう書けば良いのでしょうか?文字サイズから表から同じレイアウトで見せたいのですが。今、私のサイトはIEで見ると完璧ですがNetscapeで見るとレイアウトがズレます。

またソースが「ソースの表示で見れない」と「右クリックを制御して右クリックすると自分のサイト内の他ページにリンクで飛べる」というJava Scriptを使っていますが、これらもNetscapeじゃ使えないんですよね・・・?サイトのソースをここに公開しないでご質問してしまって、わかりにくいとは思いますが、とにかくIEとNetscapeでレイアウトを同じにするにはどういう方法があるのか教えて下さい。宜しくお願い致します。

A 回答 (1件)

IEでは、DIVやTABLEタグなど任意に配置したりできますし、直接タグ(要素)に対して動作させることができますが、NN(NN6は除く)では基本的にLAYERタグを使用してレイアウトや動作をさせます。


IEで、幅や高さなどを%で指定した場合、NNではPXで判断されるようなことがあります。また、見出し(H1など)タグのfont-familyは、指定しても表示しなかったり、表示できないプロパティーがあったりします。
Javaを使用して共通させることをしている方もいますが、基本的にスタイルシートやDHTMLを使用してIEとNN共通したページを作ることはできません。
MacintoshのIE5で、WindowsのIEとかなり共通した表示ができるようになりましたが、まだ異なる部分もあります。まだ動作できないDHTMLがあります。
IE・NN専用の2つのWebを作るか、FONTとTEXT関係のプロパティーだけ使用し、HTMLでTABLEタグを多用してレイアウトをするしかありません。

※補足、NN6は従来のNNは別のものようです。動作チェックはまだしていません。
    • good
    • 0
この回答へのお礼

なるほど・・・やっぱり簡単にはいかないのですね。今は一番簡単に「このサイトはIEじゃないとレイアウトがずれたり動作しない機能があります」っていう感じのコメントを入れて逃げています(笑)。ありがとうございました!

お礼日時:2001/08/31 12:02

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aと関連する良く見られている質問

QIEの右クリックメニューに「エディタでソースを表示」する機能を追加したい

インターネットエクスプローラーでホームーページを閲覧中に右クリックから「ソースを表示」を選択すると、「ez-HTML」(HTMLエディタエディタです。)で表示できるように設定しているのですが、たまに他のエディタでソースを表示したいと思うときがあります。

ですが、「窓の手」等のソフトを使用してソースを表示するエディタをいちいち切り替えるのはとても面倒です。

IEの右クリックのメニューに「メモ帳でソースを表示」のよう項目を追加して他のエディタで表示出来るようにしたいのですが、その方法がわかりません。

分かる方どうかご教示お願いします。

Aベストアンサー

右クリックメニューに追加するのは簡単にはいかないみたい。
何かしらのプラグインが必要なのでは?

インターネットオプションの
「プログラム」タブに
HTMLエディタ欄でいくつかのプログラムが
選択できるようになっている場合、
(追加する方法は知ってます)
ツールバーの「編集」ボタンの右に「▼」アイコンが現れ、
その「▼」をクリックして編集アプリを選択できるようになります。

この機能を利用してはどうでしょうか?

ちなみに私のは「▼」をクリックすると
Notepad
Terapad
FrontPage
Word
Excel
の5つのアプリから選択できるようになってます。

でも、一部のHPは
「ソースの表示」はできるけど
「編集」ができないのもありますね。

QIE6とIE7のHtmlレイアウトについて

お世話になります。

現在、XHTMLで画面を作成しています。
Htmlのレイアウトについて、非常に困った問題が発生しています。
IE6で正常に表示されるものが、IE7では崩れて表示されてしまいます。

具体的にはテーブルの中身がIE6だと、

テーブル(右寄せ(本来の形))
---------|-----------------------------
aaa |テキストフィールド1
---------|-----------------------------
bbbbb |テキストフィールド2
---------|-----------------------------

具体的にはテーブルのl中身がIE7だと、

テーブル(中央揃え(ずれている状態))
---------|-----------------------------
aaa | テキストフィールド1
---------|-----------------------------
bbbbb | テキストフィールド2
---------|-----------------------------

になってしまいます。(汚くて、判りづらくてすみません!!)

以下にHTMLを記載します。
<table align="center">
<div>
   <tr>
  <td>
</td>
</tr>
</div>
</table>
<table border="1">
<tr id="trpattern">
<td width="200"> 
            <labelid="reportpatternLabel"/></td>
       <td width="350">
 <selectid="patternItems"onchange="hide(this.value);">
<option id="pattern">
</option>
</select><br></br>
</td>
</tr>
<tr id="trarea">
<td width="200"><label id="selectAreaLabel"/></td>
<td width="350">
<select id="areaItems" style="width:130;" onchange="selectNsc()">
<option id="area">
</option>
</select><br></br>
</td>
</tr>
<tr id="trnsc">
<div id="nscdiv">
<td width="200"><label id="nscselectLabel"/></td>
<td width="350">
<select id="nscItems" style="width:130;" onchange="fillnscList()">
<option id="nsc">
</option>
</select><br></br>

</td>
</div>
</tr>
<tr id="trperiod">
<td width="200"><label id="periodLabel"/></td>
<td width="350">
<input type="text" id="periodfrom"></input>
<label id="symbolLabel"></label>
<input type="text" id="periodto"></input>
</td>
</tr>
<tr id="trlevel" style="display:none">
<td width="200"><label id="levelLabel"/></td>
<td width="350">
<select id="levelItems">
<option id="level">
</option>
</select><br></br>
</td>
</tr>
<tr id="trcompare" style="display:none">
<td width="200"><label id="compareAnotherLabel"/><label id="NSCAverageLabel"/></td>
<td width="350">
<input type="radio" name="nscrdb" value="Yes" label="Yes" onclick="callshow(this.value);"></input>
<label> Yes</label>
<input type="radio" name="nscrdb" value="No" label="No" checked="checked" onclick="callshow(this.value);"></input>
<label> No</label>
</td>
</tr>
</table>
---------------------------------------------------

どの様なタグ、方法を用いれば解消されるのでしょうか?
どなたかご教授願いますでしょうか?
お願いいたします!!

お世話になります。

現在、XHTMLで画面を作成しています。
Htmlのレイアウトについて、非常に困った問題が発生しています。
IE6で正常に表示されるものが、IE7では崩れて表示されてしまいます。

具体的にはテーブルの中身がIE6だと、

テーブル(右寄せ(本来の形))
---------|-----------------------------
aaa |テキストフィールド1
---------|-----------------------------
bbbbb |テキストフィールド2
---------|-----------------------------

具体的にはテーブルのl中身がIE7だ...続きを読む

Aベストアンサー

おはようございます.
テーブルの中身の水平方向の揃えを変えたいなら,
<td align="right">aaaa</td>
などとすれば良いでしょう.
ただし,CSSを使っているならその部分の記述を補足してください.

また,現状ではXHMLの書き方が滅茶苦茶なので,
正しく描画される保証がありません.
XHTMLなら以下の点を修正してください.
(1) 要素の書き間違い (selectid,optionid)
(2) 改行は<br />とすべき
(3) <label>は空要素ではないので,
<label id="selectAreaLabel"/>としてはいけない
(4) <div>の入れ子関係がおかしい
無理して文法の厳格なXHTMLにする必要はないのでは?

QIE6とIE7でfloatレイアウトのずれ対処法

質問させていただきます。

当方制作のWEBサイトのレイアウトの一部が
IE6と7のみで崩れてしまいます。

画像のように、正しくはbox1とbox2を横並びに配置したいのですが、
IE6と7のみbox1の下にbox2がきてしまいます。
FirefoxやOpera.Safariでは崩れません。

具体的な内容は下記です。

画像のような配置で、box1.box2.box3が配置されています。

現在box1.box2.box3のCSSは下記です。

.box1
{float:left;
width:60%;
height:112px;
}

.box2{
color:#333;
float:none;
width:39%;
height:108px;
overflow:auto;
margin:5px;
border:2px dotted #6ebef2;
background-color:#FFF;
padding:0px;
font-size: 9pt;
}

box3 {
width : 100% ;
height : 20px ;
background-color:white;
text-align: right;
margin-top: 10px;
margin-bottom: 10px;}

html上では以下のように記述しています。

<div class="box1">
本文
</div>
<div class="box2">
本文
</div>
<div id="box3">
本文
</div>


何分独学で制作しておりますので、
ここのところで非常につまづいております。
3時間考えてもできませんでした....。

もし対処法をご存知でしたら、
教えていただけますと大変助かります。
よろしくお願い致しますm(_ _)m

質問させていただきます。

当方制作のWEBサイトのレイアウトの一部が
IE6と7のみで崩れてしまいます。

画像のように、正しくはbox1とbox2を横並びに配置したいのですが、
IE6と7のみbox1の下にbox2がきてしまいます。
FirefoxやOpera.Safariでは崩れません。

具体的な内容は下記です。

画像のような配置で、box1.box2.box3が配置されています。

現在box1.box2.box3のCSSは下記です。

.box1
{float:left;
width:60%;
height:112px;
}

.box2{
color:#333;
float:none;
width:39%;
height:108px;
overflow:aut...続きを読む

Aベストアンサー

60%とか39%だと、borderが2px×数本入れると100%をオーバーしてしまう可能性がある。
marginを設定すると計算も狂う。
float:left;

これらの設計(数値)を計算というか想定しないとNGです・・・
また、DTDの過去/標準のモードによっても計算方法が違います・・・

旧IEでも過去モードでも標準モードでも両方の条件で同じ表示、またリキッドにするならDIVを二重にする方法が安全です。
※構造や方向性が一本ならこのように多重DIVを利用する事はないのですが・・・

<div id="box"><div id="box2">
<div class="box1"><div>本文</div></div>
<div class="box2"><div>本文</div></div>
<div id="box3"><div>本文</div></div>
</div></div>


#box{width:80%; border:1px solid black;}
#box2{ margin:5px;}
#box2 div div{ border:2px dotted #6ebef2;}
.box1{ float:left;width:60%;}
.box2{ float:right;width:39%;}
#box3 { clear:both; padding:10px 0;}
#box3 div{ height : 20px; background-color:white; text-align: right;}

60%とか39%だと、borderが2px×数本入れると100%をオーバーしてしまう可能性がある。
marginを設定すると計算も狂う。
float:left;

これらの設計(数値)を計算というか想定しないとNGです・・・
また、DTDの過去/標準のモードによっても計算方法が違います・・・

旧IEでも過去モードでも標準モードでも両方の条件で同じ表示、またリキッドにするならDIVを二重にする方法が安全です。
※構造や方向性が一本ならこのように多重DIVを利用する事はないのですが・・・

<div id="box"><div id="box2">
<div class="box...続きを読む

QFirefox、Netscapeでレイアウトが崩れる(スタイルシート)

2段組レイアウト、
左がナビゲーションメニューで
ロールオーバーボタンのような効果を出したくて、
IEとOperaでは正常に表示・動作したのですが
FirefoxとNetscapeで、レイアウトが大きく崩れてしまいます。

メニュー箇所のソースは以下です。

【HTML】
<div id="side">
<div id="sidelist">
<ul>
<li><a href="#">メニュー1</a></li><br>
<li><a href="#">メニュー2</a></li><br>
</ul>
</div>
</div>

【CSS】
#side{
float:left;
position:absoulte;
width:200px;
height:100%;
padding:0;
background-color:#ffffff;
}

#sidelist ul{
margin:0;
padding:0;
list-style:none;
}

#sidelist li{
display:inline;
}

#sidelist a,#sidelist a:link #sidelist a:visited{
width:100%;
height:100%;
padding:10px 20px;
border-bottom:1px solid #333333;
background-color:#cccccc;
color:#333333;
text-decoration:none;
}

#sidelist a:hover{
width:100%;
height:100%;
paddint:0;
margin:0;
color:ffffff;
background-color:#666666;
}

headerの幅を800px、mainの幅を600pxに指定したので
ナビゲーションメニューとなるsideは
200pxに指定しましたが、
数値を減らしてみてもやはり崩れます。

FirefoxとNetscapeでも崩れずに
表示させる方法はあるでしょうか?
よろしくお願いします。
なお、ブラウザは全て最新バージョンです。

2段組レイアウト、
左がナビゲーションメニューで
ロールオーバーボタンのような効果を出したくて、
IEとOperaでは正常に表示・動作したのですが
FirefoxとNetscapeで、レイアウトが大きく崩れてしまいます。

メニュー箇所のソースは以下です。

【HTML】
<div id="side">
<div id="sidelist">
<ul>
<li><a href="#">メニュー1</a></li><br>
<li><a href="#">メニュー2</a></li><br>
</ul>
</div>
</div>

【CSS】
#side{
float:left;
position:absoulte;
width:200px;
height:...続きを読む

Aベストアンサー

Aのインライン要素にpaddingが指定してあるからですね。
これで上手く行くと思います。
(コメントアウトは削除してください)
あと、HTMLの<BR>を削除してください。

#side{
float:left;
position:absoulte;
width:200px;
height:100%;
padding:0;
background-color:#ffffff;
}

#sidelist ul{
margin:0;
padding:0;
list-style:none;
}

#sidelist li{
/* display:inline; :インラインにする意味がない*/
}

#sidelist a,#sidelist a:link #sidelist a:visited{
width:100%;
/* height:100%; 削除*/
padding:10px 20px;
border-bottom:1px solid #333333;
background-color:#cccccc;
color:#333333;
text-decoration:none;
display:block; /* 追加 */
}

#sidelist a:hover{
width:100%;
/* height:100%; 削除*/
paddint:0;
margin:0;
color:ffffff;
background-color:#666666;
}

Aのインライン要素にpaddingが指定してあるからですね。
これで上手く行くと思います。
(コメントアウトは削除してください)
あと、HTMLの<BR>を削除してください。

#side{
float:left;
position:absoulte;
width:200px;
height:100%;
padding:0;
background-color:#ffffff;
}

#sidelist ul{
margin:0;
padding:0;
list-style:none;
}

#sidelist li{
/* display:inline; :インラインにする意味がない*/
}

#sidelist a,#sidelist a:link #sidelist a:visited{
width:100%;
/* hei...続きを読む

Q

人気Q&Aランキング

おすすめ情報