締切済み

【タグ打ち】Winだと画像表示がおかしいです。

2009/04/06 21:28

お願いします。現在Mac（iMac OS 10.5.4）、テキストエディットmi でホームページを作成中の初心者です。トップページの右下に画像を配置しようと思い、下記のソースを試したのですが自分のMac（Safari）ではキレイに表示されていますが、Win（IE7.0／文字サイズ中でも小でも）だと画像自体が崩れて表示されます。どのように崩れているかというと、例えば縦長のだ円の画像を表示させたいが、真ん中が抜けてただの円の画像になってる、という具合です。 ↓以下ソース。<HEAD>～</HEAD>内に記載してます。足りないものは何でしょうか？ <style type="text/css">  a:link { color: #333333; } a:visited { color: #333333; } a:hover { color: #990000; } a:active { color: #990000; } </style> 解りづらくて申し訳ありませんが、ご回答頂きたく。よろしくお願いします。

Ryu_ka
お礼率77% (7/9)

HTML
回答数4
ありがとう数2

みんなの回答 （4）
専門家の回答

みんなの回答

reverie013
ベストアンサー率18% (26/143)

2009/04/08 11:53 回答No.4

すみません、書き漏れてました；ちなみにですね、自分の環境(WinXP)で、お見せ頂いたコードそのまま(頭に<html>を書き加えて背景画像を手持ちの物に変えただけ)で試したところ、 IE7ではちゃんと表示されており、Firefox2では内容文の最終行が下ラインという状況で表示されていました。画像自体が変になるという現象は起こっていません。 Firefoxでちゃんと表示されるようになれば万々歳ですね。頑張って下さい。

質問者

お礼 2009/04/09 13:23

そうですか。自宅のWinXPでみると、どうも崩れてるんですよね・・・。他のブラウザでも見てみたほうが良いですね。とりあえず作り直したいと思います。ありがとうございました。

reverie013
ベストアンサー率18% (26/143)

2009/04/08 11:44 回答No.3

コードのご提示ありがとうございます。うう～ん。とりあえずまず言えるのが、ちょっとハチャメチャな書き方ですね。；タイトル以前が書かれていないので、DOCTYPEやmetaがどうなっているのかわかりませんが。。。気になる点をいくつか挙げてみますね。(何がどう関与して不具合を起こしているかもわかりませんので……) ・DOCTYPE宣言を書く(書いて無かったらの話) ・HTML内にCSSを書くのなら、metaも書いておく(書いて無かったらの話) ・<br>をデザイン(余白空け)目的に使わない→marginで・折角CSSで書いているのなら、bgcolorもCSSで。・font要素は非推奨・文章は基本、p要素などブロックレベル要素で囲う etc というわけで、ご自分の書かれたコードをチェッカーに掛けてみて下さい。 http://htmllint.itc.keio.ac.jp/htmllint/htmllintl.html お話はまたそれからですね。。。

質問者

お礼 2009/04/09 13:18

ご回答ありがとうございます。う～ん。なるほど、ハチャメチャなのですね。右も左もわからない状態なので、とりあえず書いてくださった問題点を一つずつ解決していこうと思います。チェッカーなんてものがあるのですね。こちらも活用したいと思います。ご親切にどうもありがとうございました。

reverie013
ベストアンサー率18% (26/143)

2009/04/07 11:13 回答No.2

状況を再現できるミニマムコードをご提示頂けると、回答し易いです。少なくとも、背景画像の指定方法に問題はないかと思いますが。ちなみに、-->は</style>の直前に書いた方が良いですよ。もしくは外部シートにしてしまうのが一番良いと思います。

質問者

補足 2009/04/07 23:35

ありがとうございます。遅くなりすみません。以下コードです。 <TITLE>タイトル</TITLE> <style type="text/css">  </style> </HEAD> <BODY bgcolor="#CCCC99"> <BR> <BR> <BR> <font size="4" color="#996633"> <b>文字</b>　　 <hr size="5" color="#996633"> <BR> <font size="1" color="#996633">■■□</font> <font size="3"><b>文字</b></font> <font size="1">□■■</font> <BR> <BR> <font size="2" color="#333333"> 文字文字文字文字文字文字文字文字 <BR> 文字文字文字文字文字文字文字文字文字文字文字文字<BR> 文字文字文字文字文字文字文字文字文字文字文字 </font> <BR> <BR> <BR> <font size="1" color="#996633">■■□</font> <font size="3"><b>文字</b></font> <font size="1">□■■</font> <BR> <BR> <font size="2" color="#000000"> 文字文字文字文字 </font> 以下、画面にスクロールバーが出るまで<BR> （※もう少し文章やリンクが続きますが、基本的に上記と同じものです。） </body> </html> 以上です。長くなってすみません。ミニマムコードとのことですが、どれが原因か解らないので長くなってしまいました。おっしゃられたとおり、-->は</style>の直前に書いてみました。ちなみに、IE7の画面表示を全画面にしたり、一度他のページに飛んでまた戻るとちゃんと右下（一番したまでスクロールしたときの右下）に表示されるようです。よろしいでしょうか？お願いします。

noname#100277

2009/04/06 23:01 回答No.1

提示されたCSSは無関係。他のHTMLやCSSを提示しないと回答は得られません。

質問者

補足 2009/04/08 00:04

ありがとうございます。すみませんでした。 NO.2の方の回答欄に補足しましたので、そちらをご覧ください。

関連するQ&A

CSSで表示が異なってしまう
下記のようなCSSを使っているのですが、リンクが入ると表示が異なってしまいます。画像の下のようにしたいのですが、どうすればよろしいでしょうか？よろしくお願いします。 ■ CSS A:link{ color:#0095ff; text-decoration: none;} A:visited{ color:#0095ff; text-decoration: none;} A:hover{ color:#00efff; text-decoration: underline;} A:active{ color:#00efff; text-decoration: underline;} .style02{ padding:3px 0 0 6px; margin-bottom: 5px; font-size:16px; font-weight:bold; background-image:url(../_images/h_02.gif); background-repeat:repeat-x; border: 1px solid #000000; color: #000000; } ■ ソース <a class="style02" href="http://www.hogehoge.com">トップページ</a> <div class="style02">トップページ</div>
- ベストアンサー
- HTML
CSSでリンクの表示をテキストと画像で変えたい
CSSを使って、・テキストのリンクのときは、 a:link　で　常に点線のアンダーラインを表示 a:hover　で　マウスを重ねたとき色を変える・画像のリンクのときは、　アンダーラインをださない　a:hoverの動作をさせないという風にしたいのですがうまくいきません。 a:link { color: black; text-decoration: none; border-bottom-width: 1px; border-bottom-style: dotted; border-bottom-color: #333333; } a:hover { background-color: black; text-decoration: underline; color:white; } といった指定をして、テキストからのリンクに適用しています。そのうえで、画像には上記の設定が生きないようにしたいと思っていますがうまくいきません。 .bordernone { border: none; } と書いて、リンクの画像に <img src="image/xx.jpg" class="bordernone" style="border-style:none"> などとしてもうまくいきません。よろしくお願いいたします。
- ベストアンサー
- CSS
Lightbox2.0にてnext、prev画像が表示されない
タイトル通りなのですが、ホームページにてLightbox2.0を使用しているのですが、next、prev画像が表示されません。パスを変更してclose、loading画像は表示できたのですが、他に変更するところはあるのでしょうか？ lightbox.cssにて #prevLink:hover, #prevLink:visited:hover { background: url(/images/nextlabel.gif) left 15% no-repeat; } #nextLink:hover, #nextLink:visited:hover { background: url(/images/prevlabel.gif) right 15% no-repeat; } こちらにてパスを変更しましたがIE、Firefoxどちらとも表示されず・・・どうすれば表示できるのでしょうか？
- 締切済み
- JavaScript
IEで画像が表示できません
Firefoxでは画像が表示できるのですがIEでは表示されませんスタイルーシートは下記のとおりです。お願いいたします。 body {background: url("http://pub.ne.jp/man96/image/user/1170964897.gif") repeat-y; background-position:0px 0px; padding: 1;} a { color: #66c; text-decoration: none; } a:link { color: #66c; text-decoration: none; } a:visited { color: #66c; text-decoration: none; } a:active { color: #66c; text-decoration: none; } a:hover { color: #66c; text-decoration: underline; } h1, h2, h3 { margin: 0px; padding: 0px; } #banner { font-family: verdana; color: #777; font-size: 13px; font-weight: bold; text-align: 0px 0px; margin-bottom:11px; background: #ccffff この画像がIEで表示されなくて背景色です url("http://pub.ne.jp/man96/image/user/1170626058.jpg")no-repeat; background-position: center;padding:0px;height:250px; } ちなみにURL：http://pub.ne.jp/man96/です
- 締切済み
- ブログ
css：リンク画像の枠消し： a img { border:none} にしてもダメ
リンク画像に、【テキストリンクと同じスタイル】つまりリンクの背景色や枠線が適用されてしまい、困っています。下のように、entry-bodyというクラスの a を打ち消す a img のスタイルを指定しているのですが…。（色番号は長くなるので#だけにしています）a:visited img や　a:hover img も同様に指定しています。また、.entry-body img には、他のスタイル指定をしていません。どなたかお分かりになったら助けてください！ .entry-body a { color:#; background-color:#; border-bottom:1px #;} .entry-body a img { background-color:transparent; border-bottom:none;}
- ベストアンサー
- HTML
スタイルシート…
たぶん、初歩的な問題なんですが…自力では調べてもわからなかったので… スタイルシートで、画像を固定し、尚且つ、リンクの貼ってある文字の上にカーソルがくると文字色が変わるようにしたいのですが、どのようにすればよいのでしょうか？一応、 <style type="text/css">  </style> じゃないかな…？と思って、試してみたのですが、画像は固定できてるんですが、リンクの文字色は変わりませんでした…。アドバイスお願いします！
- ベストアンサー
- HTML
liタグのナビボタンがFirefoxで二重に表示。
liタグでナビボタンを縦に３つ積みたいのですが、IEでは正しく表示しますが、何故かFirefoxでは２段めから２つずつ表示してしまい５つのナビボタンになってしまいます。どのように記述すれば良いのでしょう？ <div id="sidebar"> <ul> <li id="aaa"><a href=""><span>aaa</span></li> <li id="bbb"><a href=""><span>bbb</span></li> <li id="ccc"><a href=""><span>ccc</span></li> </ul> </div> div#sidebar { width: 245px; float:left; border-right-width: 1px; border-right-style: solid; border-right-color: #CCCCCC; } div#sidebar ul li a { display: block; } div#sidebar ul li a span { position:absolute; width: 0; height: 0; overflow:hidden; } ul li#aaa a { width: 245px; height: 60px; background-image:url(image/aa.jpg); background-position: 10px 20px; background-repeat: no-repeat; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #999999; } ul li#bbb a { width: 245px; height: 60px; background-image:url(image/bb.jpg); background-position: 10px 20px; background-repeat: no-repeat; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #999999; } ul li#ccc a { width: 245px; height: 60px; background-image:url(image/cc.jpg); background-position: 10px 20px; background-repeat: no-repeat; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #999999; }
- ベストアンサー
- CSS
FireFoxでvisitedの表示不具合について
HTMLやCSSに知識がなく困っています。質問をよろしくお願いいたします。メニューバーには８つのボタンがあるのですが FireFoxでは、visitedが表示されず IEはページの行き来でメニューボタンが消失します。何か解決法はありませんでしょうか？よろしくお願いいたします。 CSS部分 body { background-color: #FFFFFF; margin:0; padding:0; } #menu{ position:absolute; top:0px; width:800px; height:219px; left:-1px; margin:0; padding:0; background-image:url(../topimage/title.gif); background-repeat:no-repeat; } #menu #bottom{ position:absolute; float:left; top:149px; width:800px; height:70px; left:0px; } #bottom ul{ list-style:none; padding:0; margin:0; } #bottom ul li{ padding:0; margin:0; float:left; } #bottom a.c,#bottom a.c:link { display:block; width: 115px; height:70px; background-image:url(../top/img/menu/b1.gif); background-repeat:no-repeat; background-position:0% 0%; } #bottom a.c:visited { background-position:100% 0%; } #bottom a.c:hover { background-position:33% 0%; } #bottom a.c:active { background-position:66% 0%; } 以下ボタン７つのソースがほぼ同じ為、省略します。 HTML部分 <div id="menu"> <div id="bottom"> <ul> 　<li><a href="../new/top.html" target="main" class="c"></a></li>　 <li><a href="../product/top.html" target="main" class="d"></a></li> <li><a href="../example/top.html" target="main" class="e"></a></li> <li><a href="../company/top.html" target="main" class="f"></a></li> <li><a href="../rinen/top.html" target="main" class="j"></a></li> <li><a href="../faq/top.html" target="main" class="g"></a></li> <li><a href="../info/top.html" target="main" class="h"></a></li> <li><a href="../recruit/top.html" target="main" class="i"></a></li> </ul> </div> </div>
- 締切済み
- HTML
spanタグ　無視される
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>sample</title> <style type="text/css"> span.test{ padding: 6px 0px; background-color: gainsboro; text-align:center; border: 1px gray solid; margin-top:10px; margin-bottom:8px; color: gray; width: 100px; } </style> </head> <body> <span class="test"> <a href="#A"> A</a> </span> <br> <span class="test"> <a href="#B"> B</a> </span> </body> </html> ------------------------- というソースで spanタグで padding: margin-top:10px; margin-bottom:8px; width: が無視されてしまうのですがなぜでしょう？更に画像のように文字が重なってしまいます。 padding: margin-top:10px; margin-bottom:8px; width: これらを適用させるにはどうすればいいでしょうか？ AとBは隣同士に表示したいため、divではなく、spanを使用しました。
- ベストアンサー
- HTML
ドリームウィーバで背景画像が表示できない
デザインでは表示されているのですが、ブラウザで確認しようと思っても背景画像が表示されません。コードです。 <style type="text/css">  </style> </head> <body> <div id="contents"> <h1></h1> <h2></h2> </div> </body> </html> なにが原因なのでしょうか？教えてください。
- ベストアンサー
- ホームページ作成ソフト

【タグ打ち】Winだと画像表示がおかしいです。