htmlを作成したものをhttp://で表示する時と、https://で表示する時とで
画面の幅がことなってしまいます。このためhttps://の時にレイアウトが
崩れてしまいます。
試したところFirefox3.5.5では起き、IE7では起きないようです。
Firefoxでこの問題を避ける方法はないでしょうか。
レンタルサーバは XREA で、httpsは共用サーバを利用しています。
以下にhtmlを引用します。https://の時には
imgやstyleで指定する画像も共用サーバを経由しました。
--(http://のときのhtml------------------------------------------------
<?xml version="1.0" encoding="EUC-JP"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio …
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-JP" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta name="robots" content="noindex" />
<meta name="description" content="デスクリプション" />
<meta name="keywords" content="キーワード" />
<title>タイトル</title>
<link rel="stylesheet" type="text/css" media="all" href="http://test.com/style.css" />
</head>
<body style="background-image:url('http://test.com/images/body_back.jpg');">
<div id="body-box" class="block-center">
<font color='red'><b>(TEST環境)</b></font> 携帯サイト
<div id="header-box" style="background-image:url('http://test.com/images/topbar.png');">
</div>
<div id="menu-box">
<div id="menu-box-bg">
<div class="menu-top"><a href="http://test.com/">トップ</a></div>
</div>
</div>
<div id="contents-box" style="float:right;width:546px;border-top:1px solid #553333;border-left:1px solid #553333;background-color:#fffefe;"><div style="margin:10px;padding:100px 100px;border:1px solid #888888;">
ああああああああああああああああああああ
</div></div>
<div id="footer" style="clear:both;border-top:1px solid #37001e;">
フッター
</div>
</div>
<div id="footer-link" align="center" >
携帯サイト
</div></body>
</html>
--------------------------------------------------------------------
No.1ベストアンサー
- 回答日時:
menu-boxにはfloat:left;が指定されていますか?
現在menu-boxの次にcontents-boxを書かれていますが、menu-boxより前にcontents-boxを書くとどうでしょうか。
この回答への補足
コメントありがとうございます。
float:left;はstyle sheetに記入しています。
contents-boxを先に書くと、
contents-boxが上になり、menu-boxが下になります。
更に調べてみました。
上の画像でも判るとおり、httpsのほうでは画面の幅が狭くなって
います。これはFirefox以外では起きていません。
どうも幅を狭くするのにpixel数が再計算されていて、その際に
おそらく全体の幅よりmenu-box+contents-boxが
1pixel大きくなってしまったようです。
下のより簡単なhtmlでもhttpsでアクセスすると、
Firefoxのみ幅が狭くなってしまいます。
-------(ここから)---------------------------------------------------
<?xml version="1.0" encoding="EUC-JP"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio …
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-JP" />
<meta http-equiv="Content-Language" content="ja" />
<title>タイトル</title>
</head>
<body>
<div style="margin:0px auto 0px auto;background-color:#880000;width:800px;height:100px;">
</div>
</body>
</html>
-------(ここまで)---------------------------------------------------
その後、自己解決しました。
Firefox3.0.8では発生せず、では銀行などのhttpsになっている画面を
Forefox3.5.5とIEで較べても問題なし。
そこで、SSL化の仕方に問題があるかと考えて、
XREAの共用SSLサーバをss1.xrea.comに変更したら問題が消えました。
なんで起きていたのか仕組み上の説明はついてませんが、
この質問を閉じさせていただきます。
お手数掛けました。どうも、ありがとうございます。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
スクロール可能なチェックボックス
-
大分類・中分類・小分類
-
フッター上部に謎の隙間
-
CSS <div>の入れ子が反映さ...
-
【CSSハック】アンカーポイント...
-
レイアウトが崩れないようにす...
-
文字を固定したいのですが…
-
innerHTMLとは
-
html使用backgroundの代用タグ...
-
CSSで背景を下までのばすには?
-
MAX関数を使ってからLEFT JOIN...
-
[急ぎ] videoタグで埋め込んだm...
-
交互に入れ替わる画像を複数配置
-
「jQuery」アコーディオンメニ...
-
初心者です。クリッカブルマッ...
-
画像の重なりの順序を代える方...
-
JavaScript - 月ごとに画像変化
-
OpenCVで固定枠で画像を操作す...
-
jspでcssが読み込めない
-
スワップイメージが上手く動作...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
スライダーの枠に動画を収める...
-
フッター上部に謎の隙間
-
【CSS】floatで左右に並べた...
-
オンマウス時に別画像を上に重...
-
CSS <div>の入れ子が反映さ...
-
文字を固定したいのですが…
-
Ctrl+F(検索)の窓を出したいの...
-
テーブルの1つのセル内で、上揃...
-
CSS のみのタブ切り替えについて
-
フッターの下に隙間ができてしまう
-
スクロール可能なチェックボックス
-
Flickity で画像にリンクを貼る...
-
スマートフォンで適切に見られ...
-
floatさせたdivタグを折り返さ...
-
オープニングにアニメーション...
-
html/cssで要素が出てこなくて...
-
チェックボックスの背景色って...
-
サイトにコンテンツを並べる際...
-
CSS 可変マージン
-
HTML CSS 文字化け
おすすめ情報