AKB48の推しメンをセンターにできちゃうかもしれない!? >>

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

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

A 回答 (5件)

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お試し版で表示させたら見事に上下にずっこけたのでそんな感じの事なんでしょうかね?

この回答への補足

早速回答していただきありがとうございます。
>#wrapper~imgで指定されているのが画像だとして、#wrapper~ulが説明文の段落のidだとするときちんと左右にレイアウトされて表示されます。

説明がへたくそで本当に申し訳なく思います。上記の通りなのですが、Safariの最新版ではレイアウトにくずれはないという事で、さっそく自分でも試してみたいと思います。
Safariの古いバージョンではOpera7.53のように上下にずっこけた状態(たぶん同じ感じだと思います。)になるのですが、
これはもう無視してもいいのでしょうか?また何が原因かってのがわかりましたら是非教えて下さい。よろしくお願いします

補足日時:2006/07/31 02:31
    • good
    • 0

>Safariの古いバージョンでは…これはもう無視してもいいのでしょうか?



ただ単に「古い」というだけで、具体的なバージョンを示していただけないのでは、判断のしようがありません。

大まかな目安ですが、Safariのバージョンは1.3.x以降が多数派で、1.2.xまでのバージョンは最近では少数派になりました。質問者さんがSafari 1.2.xまでのバージョンで表示確認をされているのでしたら、ある程度表示が崩れてもやむを得ないかな(好ましくはないですが)、という気はします。
    • good
    • 0

最新版のSafari RSSを使って表示していますか?

この回答への補足

ありがとうございます。
普通にSafariを起動して、表示させてだけなのでRSSを使って表示とか、、
の意味がわからないのですが、、、、、申し訳ありません。
それが原因なのでしょうか?

補足日時:2006/07/31 00:31
    • good
    • 0

Macで作業してますか?Winでの作業ならあきらめてsafariは無視してください(^^;

この回答への補足

こんばんわ、winで作業しているのですが、safariは無視しちゃっても
大丈夫なのでしょうか?
クライアント様に何か言われたときにどういえばいいでしょうか?
何か納得してもらえる説明のしかたがありましたら教えていただけますでしょうか?

補足日時:2006/07/31 00:30
    • good
    • 0

崩れるというCSSの記述を具体的に書き込んでみて下さい。



実際に見てみないと検証のしようがありません^^;

この回答への補足

ありがとうございます。では実際に記述させていただきます。
わかりにくい部分があるかと思いますができるだけの説明を
加えさせていただきます。
/*メイン部分(真ん中の段)開始///////////////////////////////////////*/
#wrapper #contents #main2 {
margin: 0px;
padding: 0px;
height: 260px;
width: 520px;
float: right;
}
/*新人紹介部分*/
#wrapper #contents #main2 #newface {
margin: 0px;
padding: 0px;
float: left;
height: 260px;
width: 300px;
background: url(images/newface.jpg) no-repeat;
}
#wrapper #contents #main2 #newface img {
margin: 7px 0px 0px 10px;
padding: 0px;
border-right: 2px solid #660000;
border-bottom: 2px solid #660000;
float: left;
}
#wrapper #contents #main2 #newface ul {
color: #000000;
line-height: 14px;
font-size: 11px;
font-style: normal;
letter-spacing: 0.1em;
float: right;
margin: 10px 0px 0px;
border-left: 3px dotted #E9C082;
padding: 0px 0px 0px 6px;
}
サイトの内容は
大きい四角を作ってその中に左側に写真を配置、右側にその説明を配置という感じです。説明はCSSのとおりリスト形式で配置しています。
写真はfloatで左を指定して、説明文を右に回りこませる感じなのですが、、、
これで解ることがありましたらよろしくお願いいたします。

補足日時:2006/07/31 00:25
    • good
    • 0

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

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

このQ&Aを見た人はこんなQ&Aも見ています

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

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

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

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

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

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

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

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

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

よろしくお願いします。

Aベストアンサー

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

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/

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の方も修正する方法でもよけ...続きを読む

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 系のブラウザの存在を忘れる!とか

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を考慮しているものもたくさんあるので、そちらを使った方が良いでしょう。
しかし、これも完全に誤差をなくせるというわけではありませんが、一度試してみると良いでしょう。

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

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

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

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

Aベストアンサー

こんなのはどうかな?

position: absolute;
bottom: 0px;

Qsafari でcssがききません!

こんばんは。
仕事でサイトを作っているのですが、Macのsafariでだけまったくcssが効かないという現象にぶちあたってしまいました。

下のように、外部cssを読み込み、文字サイズはcss.jsでwin、mac向けに指定してます。(文字サイズは表示されてます)
<link rel="stylesheet" type="text/css" href="css/default.css"/>
<script language="javascript" type="text/javascript" src="js/css.js"></script>

Macのfirefoxではなんの問題もありません。
cssは覚えたてて経験浅く、どのあたりに原因があるのかさっぱり分かりません…。
どなたか、解決法、参考サイトなどありましたら、教えてください!
よろしくお願いします。

Aベストアンサー

cssは組み合わせによってよくわからない現象が時々起きます。
IEでの話ですが、ソースコードで改行をいれたらレイアウトが崩れたり、全角スペースをいれたら表示されていないものが表示されたり・・・。
以前safariでcssがまったく効かなくなった事がありましたが、その時はcssでIE用のハックを使ったのがなぜか影響し、それを消したらcssが適用されるようになりました。
まずは読みこんでいるcssの記述をチェックしてみてください。半角スペースが抜けていたり、全角が入っていたり、スペルミスとか。
次はcssのシートを一度白紙にし、そこに一つ一つのclassやIDの設定を書き加えて、都度ブラウザチェックするとか。どこで問題が起きているのかを調べてみるということです。こういった事例に対して一つづつ対処していると、だんだんとバグが出たときのカンがついてきます。
頑張ってください。

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>
──────────────────────────
このように相性の悪いプロパティは、各要素に対して一つずつ指定する事で全てのブラウザに対応出来ます。

Qdivタグ内のコンテンツが重なって表示されてしまう。

下記のようなHTMLを表示させるときに
IEでは上下に並んで表示されるのですが、FF、Operaなどでは重なって表示されてしまいます。
どうしたら、上下に並べて表示させられますか?

<div id="a">
<div id="b">
<ul>
<li>重なってしまう文字列</li>
<li>重なってしまう文字列</li>
</ul>
</div>
</div>
<table>
<!-- このテーブルタグの上に重なって表示されてしまう -->
</table>

Aベストアンサー

CSSのどの部分かよくわからないなら
タグで指定したstyle属性の方が優先するはずだから
style="position:relative;clear: both;"
で直接打ち変えてしまえば。

QCSS、width100%でもできる余白

CSSに関する質問です。
上下に三分割し、中央の繰り返し背景を横一杯に広げたいのですか、幅を100%にしても余白が出来てしまいます。
どうすれば中央の背景を横一杯に広げることが出来るでしょうか?

また、ヘッダーのHeightをAutoにしているのに、なぜかロゴの下に余白ができます。

コードは以下のとおりです。

HTML

<html>
<head><link rel="stylesheet" type="text/css" href="css.css" /></head>
<body>

<div id="header">
<div class="centerbox">
<div id="lang"><ul><li>EN</li><li>CZ</li></div>
<div id="logo"></div>
<div id="menu"><ul><li>home</li><li>profile</li><li>works</li></ul></div>
</div>
</div>
<div id="contents"><div class="centerbox">contents</div></div>

<div id="footer"><div class="centerbox">footer</div></div>

</body>
</html>


CSS

body{color:white; width:100%;}
.centerbox{width:500px; height:100%;}
a:hover{background-color:red;}

/*base layout*/
#header{width:100%; height:auto; text-align:center; background-color:black;}
#lang{text-align:right;}
#lang li{list-style:none; display:inline; margin-left:10px}
#logo{float:left; width:150px; height:80px; background-color:white;}
#menu{text-aign:right; margin-top:50px;}
#menu li{list-style:none; display:inline; margin-left:10px}
#contents{width:100%; height:300px; background-color:gray; text-align:center; border-top:6px double yellow; border-bottom:6px double yellow;}
#footer{width:100%; height:100px; text-align:center; background-color:black;}

CSSに関する質問です。
上下に三分割し、中央の繰り返し背景を横一杯に広げたいのですか、幅を100%にしても余白が出来てしまいます。
どうすれば中央の背景を横一杯に広げることが出来るでしょうか?

また、ヘッダーのHeightをAutoにしているのに、なぜかロゴの下に余白ができます。

コードは以下のとおりです。

HTML

<html>
<head><link rel="stylesheet" type="text/css" href="css.css" /></head>
<body>

<div id="header">
<div class="centerbox">
<div id="lang"><ul><li>EN</li><li>CZ</li></div>
<di...続きを読む

Aベストアンサー

スタイルシートの書き始めに、
html,body{margin:0;padding:0;}
の一行を入れておくようにすれば回避できます。
 これは常に入れておきましょう。

 なお、今後のために・・・どの部分が影響しているかは
*{border:solid 1px red;}
を入れてみると、わかりやすいです。

また、firefoxの開発者向けツール ( https://addons.mozilla.jp/firefox/extensions/developer_tools/ )にあるFirebug | Firefox アドオン | Mozilla Japan の公式アドオン紹介サイト ( https://addons.mozilla.jp/firefox/details/1843 )を使うと、このあたりがよくわかると思います。


人気Q&Aランキング