忙しい現代人の腰&肩のお悩み対策!

safariだけCSSが崩れてしまいます。

初心者ですが、教えて下さい。

コンテンツ部分の中に、画像(説明文付き)を横並びに3列並べて表示するためにfloatで指定してあります。

下記のように並べたいのですが、safari以外のブラウザでは全てうまく表示されるのに、safariだけ2と3が下に落ちて崩れてしまいます。

1 2 3
4 5 6

どのようにしたら横に並んでくれるのか、わかりません。。

どうかお詳しい方、ご教授下さい。

______________________________________

#secondary {
float:left;
width:705px;
padding:10px 0 0 15px;
margin:0;
}
.index .module {
float:left;
width:210px;
margin:0 17px 0 0;
padding:0 4px;
text-align:left;
}

.galleries {
background:#eee;
float:left;
width:100%;
margin:0 0 15px;
position:relative;
}
.gallery .galleries {
float:left;
position:relative;
width: 720px;
margin:0 0 15px;
padding:0;
list-style:none;
padding-top:10px;
line-height:1.4em;
}
.gallery .galleries .thumb {
float:left;
margin:0 10px 10px 0;
}
.index .galleries {
margin-bottom:5px;
}
.galleries ul {
float:left;
margin-left:0;
margin-bottom:0;
list-style:none;
text-align:left;
}
.galleries li {
background-image:none;
float:left;
position:relative;
width:220px;
height:6.4em;
overflow:hidden;
margin-bottom:0;
padding:75px 0 1.6em 15px;
}
.archive .galleries li {
height:10.5em;
}
.galleries h3 {
margin:0 10px 0 4px;
font-size:100%;
}
.galleries h3 a, .galleries a.img, .galleries h3 a:visited {
border-width:0;
}
.galleries .img {
position:absolute;
top:4px;
left:15px;
}
.galleries .img img {
display:block;
}
.galleries p {
margin:0 10px 0 4px;
}
.galleries div {
margin:0 4px;
}
.gal {
background:url("../images/bg_gal.gif") 11px 0px no-repeat;
margin:0;
}
html>body .gal {
background-image:url("../images/bg_gal.png");
}

このQ&Aに関連する最新のQ&A

A 回答 (2件)

No.1さんゆうとうり 原因を推測なんてませんが。


3行の段組を記述します。必要の内容を記述しておかしくなった内容を検討してください。

<div style="width:705px;clear:both;">
<div style="width:210;float:left;margin-right:1.2em;">内容1</div>
<div style="width:220;float:left;">内容2</div>
<div style="width:210;float:left;">内容3</div></div>
<div style="width:720px;clear:both;">
<div style="width:220;float:left;margin-right:1.2em;">内容4</div>
<div style="width:220;float:left;">内容5</div>
<div style="width:220;float:left;">内容6</div></div>

float:left;
width:705px;
は、
width:705px;clear:both;
でないですか。
clear:bothを指定しないSsfari参照したプラウザ表示状態を添付します
「safariだけCSSが崩れてしまいます」の回答画像2
    • good
    • 0
この回答へのお礼

ご回答ありがとうございます。
かなり時間が経ち過ぎてしまい申し訳ございません。

いろいろと試してみましたが解決ならず、諦める事に致しました。

お礼日時:2011/10/27 10:57

驚くほど煩雑なCSSを読み取ってHTMLを想像して原因を推測なんて勘弁してください。


それで推測される原因も正解でない場合が多いでしょう。
 下記の点だけ教えてください。
・文書構造
 本文中のどの部分に画像リストがあるのか
・貼り付ける画像のサイズ
・その画像は<a href=""></a>で囲まれているのか?
・画像リスト周りのマークアップの凡例

 
    • good
    • 0
この回答へのお礼

ご回答ありがとうございます。
かなり時間が経ち過ぎてしまい申し訳ございません。

いろいろと試してみましたが解決ならず、諦める事に致しました。

お礼日時:2011/10/27 10:57

このQ&Aに関連する人気のQ&A

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

このQ&Aを見た人が検索しているワード

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

QcssレイアウトでSafariだけがどうしても崩れます

こんばんわ、いつもお世話になっております。少しまえにも同じような感じで質問させていただいたのですが、
あれからなんとかいろいろなブラウザで修正をして見れるようになったのですが、
どうしてもSafariだけがレイアウトがひどくくずれてしまいます。
どこを直したらいいのかわからない状態でして、もし何かヒントがありましたら教えていただけますでしょうか?
だいたいの感じですが、floatを使用してる部分が(普通はちゃんと左右にレイアウトされる部分が上下にずれている、、)おかしいのですが
何を修正すればいいのかわかりません、。
よろしくお願いいたします。

Aベストアンサー

CSSで指定しているidをどんな要素に当てたのか書いて下さらなかったので^^;
適当な画像と文章を当てはめて表示させましたけど、

>普通はちゃんと左右にレイアウトされる部分が上下にずれている

という感じではありませんでしたが?
#wrapper~imgで指定されているのが画像だとして、#wrapper~ulが説明文の段落のidだとするときちんと左右にレイアウトされて表示されます。

手持ちのFirefox1.5.0.4、Netscape7.2、Opera9.0、IE5.2.3、Safari2.0.4(最新版のSafariになります)で特にレイアウトに違いはありませんから、この記述に問題は無いようですが・・・・。

ちなみにOSに残ってるOpera7.53お試し版で表示させたら見事に上下にずっこけたのでそんな感じの事なんでしょうかね?

QsafariやFirefoxで右のカラムが下へ行ってしまう

CSSで
A
B C
D
という4つのカラムでレイアウトしたいので下記のようなCSSにしました。
------------------------------------------------
#A{
width:700px;
}
#B{
float:left;
padding-top: 15px;
width: 150px;
height: 100%;
}
#C{
float:right;
text-align: left;
width: 550px;
padding: 15px 50px 30px;
}
#D{
position:relative;
width:100%;
height:50px;
clear:both;
text-align:center;
}
------------------------------------------------
IEでは問題ないのですが、safariやFirefoxでは
A
B
C
D
となってしまい、BとCが並んでくれません。
Cはテキストのみなので画像等のサイズオーバーでカラム落ちしているわけではなさそうです(長いURLなどもありません)
Cのfloat:right;を消すと並んでくれるのですが、そうするとどういう訳かpaddingの指示が無視されてピッタリくっついてしまいます。
IEよりもsafariの方がCSSでは正しいそうなので何か間違っているのだと思うのですが、どなたかご教授ください。

CSSで
A
B C
D
という4つのカラムでレイアウトしたいので下記のようなCSSにしました。
------------------------------------------------
#A{
width:700px;
}
#B{
float:left;
padding-top: 15px;
width: 150px;
height: 100%;
}
#C{
float:right;
text-align: left;
width: 550px;
padding: 15px 50px 30px;
}
#D{
position:relative;
width:100%;
height:50px;
clear:both;
text-align:center;
}
------------------------------------------------
IEでは問題ないのですが、safa...続きを読む

Aベストアンサー

初めまして。
FireFoxやsafariなどの正規表現に忠実なブラウザでは
──────────────────────────
width(550px)+padding(50px)=実際に表示される横幅
──────────────────────────
となります。
つまり、#Aの横幅に対して#B+#Cの値の方が大きくなってしまっているので、結果として、収まらなかった#Cが下に追いやられてしまっている、という具合です。

対処法としては
──────────────────────────
<div style="横幅を指定">
<div style="余白を指定">内容物</div>
</div>
──────────────────────────
このように相性の悪いプロパティは、各要素に対して一つずつ指定する事で全てのブラウザに対応出来ます。

Qfloat: leftで横に並べたら、サファリだけ

float: leftで横に並べたら、サファリだけ隙間が空いてしまいます。
IEやファイヤーフォックスではピッタリ表示できています。


問題の箇所は以下です。

<div style="float: left;">
<p style="position: relative;">
<img src="./img/img-001.png" width="240" height="150" />
<br />
<span style="font-size: 12px; padding: 2px 5px 2px 5px; position: absolute; top: 130px; left: 0px; width: 230px; height: 16px; color: white ; background-color: black; opacity: 0.6;">テストテスト1</span>
</p>
</div>

<div style="float: left;">
<p style="position: relative;">
<img src="./img/img-002.png" width="240" height="150" />
<br />
<span style="font-size: 12px; padding: 2px 5px 2px 5px; position: absolute; top: 130px; left: 0px; width: 230px; height: 16px; color: white ; background-color: black; opacity: 0.6;">テストテスト2</span>
</p>
</div>

<div style="float: left;">
<p style="position: relative;">
<img src="./img/img-003.png" width="240" height="150" />
<br />
<span style="font-size: 12px; padding: 2px 5px 2px 5px; position: absolute; top: 130px; left: 0px; width: 230px; height: 16px; color: white ; background-color: black; opacity: 0.6;">テストテスト3</span>
</p>
</div>

どうすればサファリの隙間を消せるでしょうか?

float: leftで横に並べたら、サファリだけ隙間が空いてしまいます。
IEやファイヤーフォックスではピッタリ表示できています。


問題の箇所は以下です。

<div style="float: left;">
<p style="position: relative;">
<img src="./img/img-001.png" width="240" height="150" />
<br />
<span style="font-size: 12px; padding: 2px 5px 2px 5px; position: absolute; top: 130px; left: 0px; width: 230px; height: 16px; color: white ; background-color: black; opacity: 0.6;">テストテスト1</span>
</p...続きを読む

Aベストアンサー

ちょっとコードとcssに突っ込みどころがやたら多いですが、とりあえずサファリの隙間を消す事だけで考えるとimgとbrの間にある改行を削除すればいいです。
コード内の改行が半角スペース扱いになる事は結構あるので注意しましょう。

Qsafariだけcssが反映されない

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link rel="stylesheet" href="base.css" type="text/css" media="screen,print" />
<title>あ</title>
</head>
<body>

</body>
</html>


このhtmlはbase.css(以下)を読み込んでいます。
/* CSS Document */
@charset "Shift_JIS";
body {
background-image: url(images/bg.jpg);
background-repeat: repeat;
}

fire fox、operaでは背景画像images/bg.jpgが
表示されていますが、safariでは真っ白です。

index.html内に
<style type="text/css">
<!--
body {
background-image: url(images/bg.jpg);
background-repeat: repeat;
}
-->
</style>
と記述してしまえば、safariでも当然のように反映されていますが、
これが外部ファイルになると反映されません。

今回の例は、おかしい部分を抽出してみたのですが、
bodyの背景が表示されない、一番上に10pxくらいの空白(マージン?
)が生じるという不具合以外、他の要素はsafariでもちゃんと表示されていました。

floatを使ったページはsafariでは背景が表示されないと
いう情報を得て、検査するために抽出してゆき、最後には
こんなにシンプルになっても障害がとりのぞけないので、
どんな見落としがあるのか、教えて頂けないでしょうか?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link rel="stylesheet" href="base.css" type="text/css" media="screen,print" />
<title>あ</title>
</head>
<body>

</body>
</html>


このhtmlはb...続きを読む

Aベストアンサー

試して見たけど最初は再現できなかった。

で、もしやと思って
> /* CSS Document */
このコメントの部分もCSSファイルに書いたら再現しました。

@charset は先頭に書かなければ行けないので
コメントも書いちゃだめなんでしょう。
コメントか@charsetのどちらか消してください。

参考URL:http://winmac.exblog.jp/4963334/

Q文字の位置、上下のマージンがずれる

仕事でHTML+CSSでコーディングをされる方、
または精通されている方に質問です。

pタグで2行の段落を続けて配置してみました。
IE6・7、FF、Chrome、Safariではぴったりレイアウトが合うのですが、
IE8・9で確認すると誤差が生じます↓

<p>あああああ</p>
<p>かかかかか</p>

★pに対する指定
font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","MS Pゴシック","MS PGothic";
font-size: 14px;
line-height: 1;
margin: 0;
padding: 0;

各pタグにわかりやすく背景色をつけて確認してみると・・・

・IE8だと、2段目のテキスト位置が1px上に上がり、pの高さも1px縮む
・IE9だと、1段目と2段目のテキスト位置が1px上に上がり、2段目のpの高さが1px縮む

それぞれのpに高さを決めれば問題はないようですが、
高さを決めずにテキストを配置する場合、
この誤差については対応ができないものなのでしょうか?

pタグに限らず、ul、dlなんかでもずれることが多いです。
テキストをぴったりを合わせる技術ってないのでしょうか?

仕事でHTML+CSSでコーディングをされる方、
または精通されている方に質問です。

pタグで2行の段落を続けて配置してみました。
IE6・7、FF、Chrome、Safariではぴったりレイアウトが合うのですが、
IE8・9で確認すると誤差が生じます↓

<p>あああああ</p>
<p>かかかかか</p>

★pに対する指定
font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","MS Pゴシック","MS PGothic";
font-size: 14px;
line-height: 1;
margin: 0;
padding: 0;

各pタグにわかりやすく背景色をつけて確認して...続きを読む

Aベストアンサー

まず、line-height:20pxのように、line-heightをpxで指定してみてください。
ブラウザの違いによる縦の誤差はなくなるはずです。

誤差が生じる原因としてはOSやブラウザの違いから、フォントやレンダリングの違いによるものです。
なので、font-size:14px;に指定していても、line-heightをemや%で相対的に指定している場合は、必ず誤差が生じます。

なお、文字列の横をそろえるのほぼ無理と考えてください。

>pタグに限らず、ul、dlなんかでもずれることが多いです。

こちらに関しては、ブラウザ間のデフォルトの差異をなくすため、リセットCSSがよく使われます。
リセットCSS、reset cssなどで検索してみれば色々出てくるでしょう。
最近はHTML5を考慮しているものもたくさんあるので、そちらを使った方が良いでしょう。
しかし、これも完全に誤差をなくせるというわけではありませんが、一度試してみると良いでしょう。

Qsafariで特定条件下でデーブル幅が効かなくなります

safariでcolspanでセルを結合し、その中に大きい要素(下の例ですとwidth500pxの画像や、文字数60のテキスト領域)を入れると、他の行の幅が変わってしまいます。

スタイルシートでtd幅を指定してやったりしてみたのですが、どうしても幅が変わってしまいます。
何か解決方法等ございましたら、ご教授願います。

<table width="600" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="20%" align="center" bgcolor="#99FFFF">20%</td>
<td width="80%" align="center">80%</td>
</tr>
<tr>
<td colspan="2" align="center" bgcolor="#FFCCCC"><img src="http://cmm001.goo.ne.jp/img/sn/sn_50.gif" width="500" height="24"></td>
</tr>
</table>
<br>
<table width="600" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="20%" align="center" bgcolor="#99FFFF">20%</td>
<td width="80%" align="center">80%</td>
</tr>
<tr>
<td colspan="2" align="center" bgcolor="#FFCCCC"><form name="form1" method="post" action="">
<textarea name="textarea" cols="60"></textarea>
</form>
</td>
</tr>
</table>
<br>
<table width="600" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="20%" align="center" bgcolor="#99FFFF">20%</td>
<td width="80%" align="center">80%</td>
</tr>
<tr>
<td colspan="2" align="center" bgcolor="#FFCCCC"></td>
</tr>
</table>

safariでcolspanでセルを結合し、その中に大きい要素(下の例ですとwidth500pxの画像や、文字数60のテキスト領域)を入れると、他の行の幅が変わってしまいます。

スタイルシートでtd幅を指定してやったりしてみたのですが、どうしても幅が変わってしまいます。
何か解決方法等ございましたら、ご教授願います。

<table width="600" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="20%" align="center" bgcolor="#99FFFF">20%</td>
<td width="80%" align="center">80%</td>
</tr>
<...続きを読む

Aベストアンサー

Webkit 系のブラウザだとサイズを百分率で指定すると確かにおかしくなるようですね。多分バグだと思います。

ソースを見て思ったのですが table の width が固定サイズなのならば、素直にピクセル単位で指定するのが一番手っ取り早い解決方法だと思います。
<tr>
<td width="120px" align="center" bgcolor="#99FFFF">20%</td>
<td width="420px" align="center">80%</td>
</tr>

リキッドレイアウトにする場合は…
とりあえず Webkit 系のブラウザの存在を忘れる!とか

QSafariでのひどいレイアウト崩れ

現在WEBサイトのコーディングを行っています。

WINDOWSで作業、IEとFirefoxで確認という形で作業をおこなっていました。
今日たまたまMacにふれる機会があり、Safariで作業中のサイトを確認してみると、ひどいレイアウト崩れがおこっていました。

とくに、background-imageの表示のされ方がひどいです。
しらべてみると、Safariではbackground-imageで指定した画像が、領域よりも大きいと、はみ出てしまったりしてしまうそうでした。

これは何か回避方法はないのでしょうか?
CSSスプライトでコーディングを行っているため、背景画像として使う画像は基本的に指定する領域よりもおおきくなってしまいます。

背景画像を指定している領域では全てがはみでたり、ずれたりで、本当にひどいことになってしまっています。

初歩的なことかも知れませんが、回避方法をご存知の方がいらっしゃいましたら、おしえていただけないでしょうか?

よろしくお願いします。

Aベストアンサー

Apple自身のサイトがCSS Spritesを使ってますから、何か回避策(?)はあるはずですよね。
overflow:hidden; は指定していますか?
背景画像なので関係ないかもしれませんが。
あんまり参考にならない回答ですみません。

QCSSでborderの長さを指定、または可変にしたい。

下記のように指定していますが、これだと横幅いっぱいに下の線が表示されてしまいます。

文字なりの長さ、または指定のピクセル数にしたいのですが、どのようにしたらよいでしょうか。

h3{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

Aベストアンサー

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよければ

<h3><span>××○○</span></h3>
のようにspanで囲い、スタイルをspanに対して指定する方法もあります。

h3 span{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよけ...続きを読む

Qcssで「下よせ」ってどうやっていますか?

フロートのレフト、ライトはいいとして、

あるボックス要素内(A)に異なるボックス要素(B)をいれます。
この(B)を(A)の一番そこにはりつかせたい時にどうすれば
最もよいのでしょうか?

いいアイデアをご教授ください。

Aベストアンサー

こんなのはどうかな?

position: absolute;
bottom: 0px;

Qテーブルタグの中にdivを含めてはダメ?

テーブルタグの中にdiv要素を入れるとダメなのでしょうか?
何か不都合でもあるのでしょうか?
何かご存知の方がいれば教えていただけませんか?

Aベストアンサー

以下、HTML 4.01での話です。(XHTMLでもほぼ同じだと思います)

tableタグ直下に書けるのは、caption,col,colgroup,head,tfoot,tbodyと定義されています。
特定の条件下でtbodyが省略できますので、実際はtrも書けます。これら以外は書けないことになっています。
tr直下にはth,tdが書けることになっています(それ以外は不可)。

th,tdの下にはブロック要素が書けるので、divも書けます。

このように、テーブル内でth,tdの中以外でdivが使えないのはHTMLの仕様でそう決まっているからです。


人気Q&Aランキング