上記のページは、InternetExplorerでは僕の思い通りに表示されるんですが、OperaやSafariでは思い通りに表示されません。
線が太く表示されてしまいます。1pxと指定したのですが、うまくいきません。
どうすれば思い通りに表示できるでしょうか?
具体的にタグをどう変えればよいか、教えてください。
それと、そのサイトのソースを、もっとこうした方が良いよというのもあれば、教えていただけると嬉しいです。
firefoxでも同様な画面なので、これはIE独自の現象でしょうね。
詳しいアドバイスは専門家にゆだねるとして、
cssをいじって細い線のクラスを作ればいいんじゃないかと思うのですが。
もしくは、エクセルで似たような画面をつくってhtml出力してみてはどうでしょうか?
(これは、私のやったCSS学習法)
私見ゆえダミーhttp://www.hatena.ne.jp/
http://www.tagindex.com/hp_guide/img/spacer_gif.html
罫線として使っているテーブルのセルの中に縦横1pxの透過GIFを入れてみてください。それで1pxで表示されるようになるはずです。
元の状態からすぐに修正できる方法として回答します。
おすすめできない方法ですが、大元のHTMLがちょっとひどすぎる状態なのでこれでよいと思います(すみません)。
<TR>
<TH bgcolor="#dfdfdf" width="5" height="20"></TH>
<TD><B> nk-server.netについて</B></TD>
</TR>
<TR>
<TD colspan="2" bgcolor="#000099" height="1"></TD>
</TR>
の様な部分(下線の部分)のHTML(TD要素)全てにに下記のように「style="height: 1px; margin: 0; padding: 0;"」を付け加えてください。
<TR>
<TH bgcolor="#dfdfdf" width="5" height="20"></TH>
<TD><B> nk-server.netについて</B></TD>
</TR>
<TR>
<TD colspan="2" bgcolor="#000099" height="1" style="height: 1px; margin: 0; padding: 0;"></TD>
</TR>
注:<、>は半角に直してください。
HTMLに関してははっきりいってかなりきびしいかと思います…。
今後のサイト製作において、下記のサイトで一度しっかりと勉強されてみてはいかがでしょうか。
ありがとうございました。最終的にこの方法を使用させていただきました。うまくいきました。
今後はHTMLの書き直しをはかりたいと思います。