CSS

私はそれが他のブラウザであるよりも、コンテンツのdiv要素の幅が大きくなっているMac上のSafariでは、このウェブサイトhttp://www.christopherbier.com/gbg/locations.html CSS

を作っていますと別のSafariの幅の問題。それは右側のバービットと重なり合う。私はこれを解決する方法がわかりません。ここに私のCSSは次のとおりです。

#mainwrap { 
    width:1000px; 
    margin-right:auto; 
    margin-left:auto; 
    background-color:#f0f0f0; 
    min-height:200px; 
} 
body{ 
    background-color:#4c7094; 
    background-image: url(images/bg.gif); 
    background-repeat:repeat-x; 
    font-size:.9em; 
    color:#FFF; 
    margin-top:0px; 
    font-family: Tahoma, Geneva, sans-serif; 
} 

a{ 
    color:#335b83; 
} 
#nav { 
    float:left; 
    padding: 0px 0px 0px 3px; 
    margin: 0px 0px 0px 0px; 
    list-style:none; 
    border:0px solid #000; 
    background-color:#FFF; 
} 

#nav li { 
    float:left; 
    margin: 3px 3px 0px 0px; 
    font-family:Tahoma, Geneva, sans-serif; 
    background-color:#e7ebf0; 
    border:3px double; 
    display: inline; 
    border-color:#99aabb; 
} 

#nav a { 
    float:left; 
    display: block; 
    color:#1d4c7b; 
    padding: 5px 15px 5px 15px; 
    font-size: .8em; 
    vertical-align:middle; 
    text-decoration:none; 
    font-family: Georgia, "Times New Roman", Times, serif; 
} 

#nav a:hover { 
    float:left; 
    display: block; 
    color:#FFF; 
    padding: 5px 15px 5px 15px; 
    font-size: .8em; 
    background-color:#5b7290; 
    vertical-align:middle; 
    text-decoration:none; 
    font-family: Georgia, "Times New Roman", Times, serif; 
} 



h2 { 
    font-size:2em; 
    margin: 0px 0px 0px 0px; 
    padding: 0px 0px 0px 0px; 
    display: inline; 
    font-family:Georgia, "Times New Roman", Times, serif; 
} 

h3 { 
    font-size:1.5em; 
    margin: 0px 0px 0px 0px; 
    padding: 0px 0px 0px 0px; 
    display: inline; 
    color:#335b83; 
    font-family:Georgia, "Times New Roman", Times, serif; 
    border-bottom: 1px; 
    border-bottom-color: #497caf; 
    border-bottom-style: dotted; 
    border-width: 80%; 
} 

h4 { 
    font-size:1.2em; 
    margin: 0px 0px 0px 0px; 
    padding: 0px 0px 0px 0px; 
    display: inline; 
    color:#999; 
    font-family:Georgia, "Times New Roman", Times, serif; 
} 

#phonebar{ 
    padding: 0px 6px 9px 6px; 
    background-image: url(images/phonebg.gif); 
    background-repeat: repeat-x; 
    background-color:#335b83; 
    color:#FFF; 
    float:left; 
    border:0px solid #000; 
    width:120px; 
    text-align:center; 
} 

#asseenbar{ 
    padding: 0px 9px 9px 6px; 
    margin-right: 0px; 
    background-image: url(images/phonebg.gif); 
    background-repeat: repeat-x; 
    background-color:#335b83; 
    color:#FFF; 
    float:left; 
    border:0px solid #000; 
    width:188px; 
    text-align:center; 
} 

#footer { 
    clear:both; 
    margin-right:auto; 
    margin-left:auto; 
} 

#footerpre{ 
background-image: url(images/footerpre.jpg); 
background-repeat:repeat-x; 
width: 1000px; 
height:73px; 
border: 0px solid #000; 
margin-top:0px; 
margin-bottom:0px; 
    margin-right:auto; 
    margin-left:auto; 
} 

#footerfin{ 
    background-image: url(images/footerfin.jpg); 
background-repeat:repeat-x; 
width: 1000px; 
margin-top:0px; 
    margin-right:auto; 
    margin-left:auto; 
} 

#phone { 
    font-size:1em; 
    margin: 0px 0px 0px 0px; 
    padding: 8px 0px 0px 0px; 
    font-family:"Times New Roman", Times, serif; 
} 


#asseen { 
    font-size:.8em; 
    margin: 0px 0px 0px 0px; 
    padding: 9px 0px 0px 5px; 
    text-align:left; 
    font-family:"Times New Roman", Times, serif; 
} 

#menubar{ 
    clear:left; 
    margin-bottom:0px; 
    width:1000px; 
    margin-left:auto; 
    margin-right:auto; 
    background-color:#FFF; 
    background-image:url(images/phonebg.gif); 
    background-repeat:repeat-x; 
    height:38px; 
} 

#content{ 
    margin-right:auto; 
    margin-left:auto; 
    background-color:#FFF; 
    width:772px; 
    min-height:400px; 
    float:left; 
    margin-bottom: 0px; 
    padding: 20px 5px 5px 20px; 
    border:0px solid #000; 
    color:#333; 
} 

    #gpbar { 
     float:right; 
     width:188px; 
     padding: 0px 9px 9px 6px; 
     min-height:400px; 
     background-color:#f0f0f0; 
    }

と私のHTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Georgia Buying Group</title> 
<link href="style.css" rel="stylesheet" type="text/css" /> 
</head> 

<body> 
<div id="mainwrap"> 
<center> <img src="images/banner.jpg" width="1000" height="72" /></center> 
<div id="menubar"> 
<div id="phonebar"> 
<p id="phone">888-325-1924</p> 
</div> 
    <ul id="nav"> 
<li><a href="index.html">HOME</a></li> 
<li><a href="webuy.html">WHAT WE BUY</a></li> 
<li><a href="goldparty.html">GOLD PARTIES</a></li> 
<li><a href="aboutus.html">ABOUT US</a></li> 
<li><a href="locations.html">LOCATIONS</a></li> 
<li><a href="contact.html">CONTACT US</a></li> 
</ul> 
<div id="asseenbar"> 
<p id="asseen">Call or Stop By Today!</p> 
</div> 
</div> 
<div id="content"> 
    <h3>Our Locations 
    </h3><br /><br /> 
    <h2>Acworth </h2> 
    <h4> Cobb County</h4> 
    <br />3451 Cobb Parkway Suite 7 
    Acworth, GA, 30101 <a href="http://www.google.com/maps?f=q&amp;source=embed&amp;hl=en&amp;geocode=&amp;q=3451+Cobb+Parkway+Suite+7+Acworth,+GA,+30101+&amp;sll=37.0625,-95.677068&amp;sspn=33.710275,79.101563&amp;ie=UTF8&amp;ll=34.04889,-84.686136&amp;spn=0.008606,0.019312&amp;z=14&amp;iwloc=A">View Larger Map</a> 

<table cellpadding="5px"><tr> 
    <td valign="top" width="325"><iframe width="325" align="left" height="225" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://www.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=3451+Cobb+Parkway+Suite+7+Acworth,+GA,+30101+&amp;sll=37.0625,-95.677068&amp;sspn=33.710275,79.101563&amp;ie=UTF8&amp;ll=34.04889,-84.686136&amp;spn=0.008606,0.019312&amp;z=14&amp;iwloc=A&amp;output=embed"></iframe><br /><img src="images/store.jpg" /></td><td width="317" valign="top"> 
    <u><b>Store Hours:</b></u><br /> 
    <table><tr><td bgcolor="#EBEBEB"><strong>Sunday</strong></td><td>10a - 6p</td></tr> 
    <tr><td bgcolor="#EBEBEB"><strong>Monday</strong></td><td>10a - 6p</td></tr> 
    <tr><td bgcolor="#EBEBEB"><strong>Tuesday</strong></td><td>10a - 6p</td></tr> 
    <tr><td bgcolor="#EBEBEB"><strong>Wednesday</strong></td><td>10a - 6p</td></tr> 
    <tr><td bgcolor="#EBEBEB"><strong>Thursday</strong></td><td>10a - 6p</td></tr> 
    <tr><td bgcolor="#EBEBEB"><strong>Friday</strong></td><td>10a - 6p</td></tr> 
    <tr><td bgcolor="#EBEBEB"><strong>Saturday</strong></td><td>10a - 6p</td></tr> 
    </table><br /> 
    <u><b>Phone:</b></u> <h2>888-325-1924</h2> 
    <br /> 
<br /> 
    <u><b>Servicing:</b></u> 
    <br /><h4> Acworth, Woodstock, Cartersville,<br /> Marietta, Kennesaw, Roswell,</h4><br />Alpharetta, Canton, Powder Springs, Smyrna, Sandy Springs, Atlanta, Rome, Ludyville, Rockmart, Lathentown, Sugar Valley</td></tr></table></div> 
    <div id="gpbar"></div> 
<div id="footer"><p id="footerpre"></p></div></div> 
</body> 
</html>

出典

2009-04-09 Chris Bier

は、私が見ることができないので、マックを持っていませんが、いくつかのポイント：

あなたのXHTMLは有効ではありません。（実際にはデザインには必要ありません）、また、ヘッダーイメージの寸法をpxで指定することもできます。

mainwrap以外でマージンオートを使用している理由がわかりません。マージンを試してください：0;代わりに

* {margin：0;パディング：0}をスタイルシートの上部に追加し、後で必要な余分なパディングとマージンを追加します。これにより、すべてのブラウザがレイアウトになると同じ開始点に設定されます。

あなたが国境使用{ボーダー：なし}をしたくない場合は（あなたが国境を言う場合：0PX固体;いくつかのブラウザは、まだ試してみて、何かを描画します）

これは、問題を解決しない場合がありますしかし、より多くのブラウザがレンダリングするのがより容易であるように、マークアップがvalidであるように、正しい方向に進んでいきます。

出典

2009-04-09 20:09:09 wheresrhys

私はあなたがどうなるかの問題を正確にはわからないけれども、私は、Safariの4ベータ版の私のコピーで問題が表示されません右側のサイドバーが空になっているので、重なっているかどうかをどのように判断できるのか分かりません。おそらく、あなたはあなたが持っている正確な問題について明確にするべきでしょうか？

問題をデバッグし、自分で解決するか、さらに具体的な質問をするには、問題を理解するために必要な最小限の例まで問題を取り除いてください。問題に関連していないコンテンツと構造をすべて削除し、問題が引き続き存在することを確認します。問題に関連していないCSSをすべて削除して、問題がまだ存在することを確認します。次に、HTMLとCSSのそれぞれ約10行以下の単純な例が必要です。それを十分に取り除くと、そのプロセスで問題が発生する可能性があります（CSSの行のいずれかを削除すると問題が解決し、問題が見つかった場合）。そうでない場合は、関係のないコードをすべてぬぐうことなく、他の誰かがあなたに良いアドバイスを与えることができるようにしてください。

何がうまくいかないのか分からない場合は、SafariでWebインスペクタを試してみる必要があります。 Safari 4ベータ版では、「詳細設定」の設定に行き、「メニューバーにメニューを表示する」を選択することができます。正確にこの設定が導入されたときは思い出せませんが、Safariの以前のバージョンでは、these instructionsに従ってインスペクタを有効にする必要があります。これを済ませたら、右クリック（マウスの右ボタンがない場合はcontrol-クリック）し、「要素の検査」を選択してWebインスペクタを表示させることができます。より最近のバージョンのSafariでは、「開発」メニューから「Webインスペクタを表示」（Command-Option-I）を選択することもできます。これにより、CSSに関する多くの情報と、要素のメトリックがどのように機能するかが示されます。これは、問題のデバッグに役立ちます。

出典

2009-04-09 19:21:49

ありがとうございます、右側のバーは違う色ですが、上のボタンの右側にある青色の要素と同じ幅になっています。もしそうであれば教えてください。ありがとうブライアン。 –

私は次のことを見ています。あなたはグレーのサイドバーを "今日の電話または停止"と整列させたいと思っていますか？ http://ephemera.continuation.org/stackoverflow/cbier9-sidebar.png –

ええ、あなたのことは本当にうんざりしています。ボタンがすべて白い背景を持つように見えるようには見えません。狂ってる –

答えて

関連する問題