2012-02-12 7 views
0

画像(ロゴ)の幅は、下のdiv(header_box)を押し下げているため、100%と表示されます。他のすべてのブラウザでは、header_boxがロゴの右側に表示されますが、Internet Explorerは(もちろん)別のことをしています。Internet Explorerはdivの幅を100%として扱いますか?

HTML

<body> 
    <div id="header"> 
     <img id="logo" src="images/logo.png" alt="Logo" /> 
     <div class="header_box"> 
      <img id="profile" src="images/questionmark.png" alt="Profile Image" /> 
      <span id="profile_name">Sample</span><br /> 
      <ul id="profile_settings"> 
       <li>Profile</li> 
       <li>Settings</li> 
      </ul> 
     </div> 
     <div class="header_box"> 
      <img id="notifications" src="images/notifications.png" alt="Notifications" /> 
     </div> 
     <div class="clear"></div> 
    </div> 

CSS

#header { 
background:#3A3A3A; 
color:white; 
border-bottom:5px #771439 solid; 
-moz-box-shadow: 0 1px 5px 3px #888; 
-webkit-box-shadow: 0 1px 5px 3px#888; 
box-shadow: 0 1px 5px 3px #888; 
} 

#logo { 
height:82px; 
display:inline; 
} 

.header_box { 
display:inline-block; 
float:right; 
background:#262626; 
padding:5px; 
margin:16px 15px 12px 0; 
border-radius: 5px; 
-moz-border-radius: 5px; 
-webkit-border-radius: 5px; 
border: 1px #474747 solid; 
text-align:left; 
font-size:11px; 
min-height:40px; 
} 

は、あなたがこれ以上の情報が必要な場合は、私に教えてください。私はこの問題をどのように記述するのかは分かりません。

答えて

2

これは、IEの古いバージョンでよく見られる問題です。あなたはそれの高さでdiv内のすべてを囲むことができるはずですし、あなたのロゴCSSにfloat:leftを含める必要があります。 Hereはそれを試してみるのは難しいです。

HTML

<div style="height"82px;"> 
    <img id="logo" src="images/logo.png" alt="Logo" /> 
    <div class="header_box"> 
     <img id="profile" src="images/questionmark.png" alt="Profile Image" /> 
     <span id="profile_name">Sample</span><br /> 
     <ul id="profile_settings"> 
      <li>Profile</li> 
      <li>Settings</li> 
     </ul> 
    </div> 
    <div class="header_box"> 
     <img id="notifications" src="images/notifications.png" alt="Notifications" /> 
    </div> 
</div> 

CSS

#logo { 
float:left; 
height:82px; 
display:inline; 
} 
+0

作品、ありがとう.. – Sam

関連する問題