HTMLとCSSで作成したホームページで<div>内のテキストが繰り返される現象について
- HTMLとCSSで作成したホームページの<div>内のテキストの一部が繰り返される現象が発生しています。
- 過去に同じ症状が発生し、空白を入れることで解決したことがありますが、今回は謎の空白が発生しており、解決方法が分かりません。
- <p>タグや画像を変更しても同じ現象が起きることが確認されています。解決方法をご存知の方がいらっしゃいましたら、教えていただきたいです。
- ベストアンサー
IE6だけ最後の文字を数文字繰り返す＋謎の空白
CSS＋HTMLでホームページを作っているのですが、とあるページの<div>で囲った最後のテキストの部分だけがなぜか4文字から5文字繰り返します。 以前も同様の症状にあい、こちらで質問させていただいた祭には、結局コード上で空白を入れることで解決？しましたが、今度は謎の空白、おそらく下に150pxくらいのマージンできていて、どうにもこうにも回避できません・・・ 心当たりや解決方法をご存じの方はいらっしゃいますでしょうか？ ちなみに、最後のテキストというのは<p>タグなんですが、その下に画像を入れても<p>タグの最後のテキスト＋空白になります。 また、ためしに<p>タグを消して上の<h3>タグを最後にしても同じで繰り返し＋謎の空白が出てきてしまいました・・・ 同じ<div></div>内に入れても画像は特に反応しないようです（その上のテキストに症状が出る） どうかよろしくお願いいたします。
- HTML
- 回答数1
- ありがとう数0
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
手元にあるのがIE8で再現できないが， floatされた要素間にコメントがあると発生することがあるらしい http://www.positioniseverything.net/explorer/dup-characters.html
関連するQ&A
- IE6,7で画像の上に載せた文字がずれる
HTMLなのですが、 画像が縦に3つつながって1つの画像のようになった状態で表示しようとしています。 さらに上と下の画像にはテキストを上にかぶせて表示します。 画像全体にリンクを貼ってあります。 下記のようなコードで作成した所、IE6,7でのみ、下記のバグが出てしまいました。 ・画像とテキストの縦位置のズレ ・画像間に2px程度の空白が生じる ・画像に設定したリンクが開かない 大変困っています。 どなたか原因と修正方法を教えていただけますでしょうか。 <a href="test.html"> <div style="position: relative; width: 183px; height: 265px; "> <img src="images/top.jpg" width="183" height="36" /> <div style="position: absolute; top: -11px; left: 55px;" class="font16b"> <p align="center">text1</p> </div> <img src="images/main.jpg" width="183" height="193" border="0" /> <img src="images/bottom.jpg" width="183" height="36" /> <div style="position: absolute; top: 218px; left: 4px; width: 181px;" class="font13"> <p align="left">text2</p> </div> </div> </a>
- ベストアンサー
- CSS
- tableでページを分割したときの空白
質問です。<table>タグを使って、ページを左右に2分割しているのですが、左側に<p>タグでコンテンツメニューを記述しているため、右側のテキストの上に空白ができてしまっています。 <p>タグを使ったまま、右側のテキストの上に空白が出来ないようにするには、どのように記述すれば良いのでしょうか。 回答をお待ちしております。
- ベストアンサー
- HTML
- DreamweaverCS6で空白を認識させない
初心者です。 Windows7でDreamweaverCS6を利用してホームページを制作しています。 ソースコードのレイアウトが見にくいのでタグの先頭を揃えたいのですが、<p></p>内で半角・全角ともスペースキーで作った空白が反映されてしまい、タグとしては見やすく後々管理しやすそうにはなるのですが、ブラウザ上の表示がとても変になり困っています。 例）スペース空白(■)でこのような表示になります。 表示させたい形→あいうえお ブラウザ表示 →あ い う え お タ グ 入力 →あ ■ い ■ う ■ え ■ ■ ■ ■ お このようなブラウザ表示にしたい ブラウザ表示→あいうえお タ グ 入力→あ ■ い ■ う ■ え ■ ■ ■ ■ お __________________________________________ ↓ 見にくいタグ記述例（現在 空白が反映されるため使えない） ↓ ↓ ↓ <div class="nihongo"> <p>かきくけこさしすせそたちつてとかきくけこさしすせそたちつてと<br>なにぬねのはひふへほ<br>まみむめも<br>あいうえお<br>かきくけこさしすせそたちつてとかきくけこさしすせそたちつてと</p> </div> ￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣ __________________________________________ ↓ 見やすいタグ記述例（これがしたい） ↓ ↓ ↓ <div class="nihongo"> <p>かきくけこさしすせそたちつてとかきくけこさしすせそたちつてと<br> なにぬねのはひふへほ（***任意の場所で改行&空白で先頭をそろえる***） まみむめも<br>かきくけこさしすせそたちつてとかきくけこさしすせ<br> そたちつてと（***<br>と空白で先頭をそろえる***） <br>あいうえおかきくけこさしすせそたちつてとかきくけこさしすせそた ちつてと</p> </div> ￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣ 色々ググッてみたものの、よくわかっていないためか答えに辿りつけません。 スペースキーでタグの先頭を揃えても、そのスペース(空白)がブラウザ上で反映されない入力、または設定、記述方法などご存知であればご教示くださいませ。 どうぞよろしくお願いいたします。 m(_ _)m
- ベストアンサー
- CSS
- イメージタグはタグで囲むべき？
CSSを使ってサイトを作成しています。 気になった事があったので質問させてください。 テキスト（文字）を入力する祭は、<p>～</p>・<div>～</div>等のタグで囲むかと思います。 <img src="" width="" height="" alt="" /> 上記のようなイメージタグは、<p>～</p>・<div>～</div>等で囲む必要はあるのでしょうか？ 囲まなくてはいけないものなのでしょうか？ <p>～</p>・<div>～</div>タグにスタイルをつけていなければ、 囲んでも囲まなくても表示は変わりませんが、HTML的というか文法的に囲むべきなのでしょうか？ ※<p>タグは「reset.css」で上下改行なしにしてあります。 宜しくお願いします。
- ベストアンサー
- CSS
- CSSで最後の四文字が改行して繰り返される・・・
はじめまして。 現在、CSSを勉強中のものです。 今回、IE6でみると原因不明の問題が発生していました。 <p>タグにclassをつけて文字を挿入しているのですが、なぜかそこの部分のテキストの最後の「4文字」が改行されて下の段に表示されます。 同じclassの部分にはすべて同じ現象が見られました。 どなたか原因や解決方法をご存知の方は、教えていただけないでしょうか？ 問題のclassの部分は以下のようになっています。 .text01 { width: 180px; float: right; margin-top: 15px; color: #666666; font-size: 12px; text-align: justify; text-justify: distribute; }
- ベストアンサー
- HTML
- 文字と数字を1文字ずつ分割し右詰めさらに0は空白
エクセルで仕訳伝票を作成していますが文字と数字を1文字づつ分割し右詰までできましたが、0のばあいは空白にしたいです。 =IF(COLUMNS(P:$P)>LEN(TEXT($A9,"¥0;¥-0")),"",LEFT(RIGHT(TEXT($A9,"¥0;¥-0"),COLUMNS(P:$P)),1)) 色々調べてこの関数を使っていますがA9に金額を入れ￥0は空白にしたいです。よろしくお願いいたします。
- 締切済み
- その他（パソコン）
- ページの下端に空白ができます。なぜかわかりません。
ページの最下端に接するように背景色を表示したいですが、 画像のように、空白ができてしまいます。 ・HTML <div class="shita"><p class="fontshitei">テキスト</p><div> ・CSS div.shita { background-color: red; width: 100%; } p.fontshitei { font-family: フォント名; } ちなみに、全体の指定は以下のとおりです。 body { background-color: white; color: silver; margin: 0px; } marginを0pxに設定したのですが、解決しません。
- ベストアンサー
- CSS
- jQueryで最後の要素だけ文字の色を変えたい
jQueryで<div>の中で<p>タグの最後の、<p>う</p>、<p>お</p>、<p>す</p>の文字の色を変えたいのですが全然できません。 <div class="test"> <p>あ</p> <p>い</p> <p>う</p>←ココ <div class="test"> <p>え</p> <p>お</p>←ココ </div></div> <divl class="test"> <p>さ</p> <p>し</p> <p>す</p>←ココ </div> 色々と試しましたが、うまくいきませんでした。 $(".test>p:last-child").css("color","yellow"); では、<p>お</p>、<p>す</p>しか変わりません。 $(".test>p:last-of-type").css("color","yellow"); で希望どうり動作しましたが、IE8などでは動きませんでした。firefox,chromeでは動作しました。 IE8でも動作する方法はありませんか？よろしくお願いします。
- ベストアンサー
- JavaScript
- <ul>タグの上の空白って消せますか？
<ul><li></li></ul>で囲まれた部分の上に空白ができてしまいます。 CSSでいろいろ試してみましたが、どうしても空白がきえませんでした・・・ ためしに<ul></ul>をとっちゃったんですが・・・これはまずいですよね？ どうすれば空白を消す（指定）することができるのでしょうか？ また、同時に<li>で囲まれた画像の下の空白や左位置のずれもとりたいのですが・・・ どうかよろしくお願いいたします。 ＝＝＝＝＝タイトル画像＝＝＝＝＝＝ テキストテキストテキスト ■■■（画像）（画像） テキストテキストテキスト ■■■（画像）（画像） テキストテキストテキスト ■■■（画像）（画像） このような感じでレイアウトしたいのですが、どうしても■の画像の一番上の部分に空白ができて、■同士が重なってしまいます。 ■同士が重なるのはmargin rightを指定すればなんとかなるのですが、 これもできれば他の方法があれば教えていただきたいです・・・ どうかよろしくお願致します。
- ベストアンサー
- HTML
- PCの画面上に表示される、謎の空白が消えません。
PCの画面上に表示される、謎の空白が消えません。 PCをつけてしばらくすると、画像のように画面真ん中の下寄りに白い空白が出来ます。 空白にポインタを動かすと、砂時計マークになり操作する事ができません。 画面上に常にそこにあるので、インターネットの閲覧などで非常に煩わしくてなりません。 この空白を消す方法のご存知の方は、こちらに回答の程よろしくお願いします。
- 締切済み
- その他（インターネット・Webサービス）
