Reputation: 91
I am using .. IE-tester and adobe browser lab to check the IE Comparability.. but a friend told me to use IE Developer Toolbar and its function .. IE Browser Mode to IE7 .. the whole website look different then IE tester and adobe browser lab .. can is there anyone tell me .. which one is trust able ..
i m working on http://www.mulberrydesignerkitchens.com/ but in IE7 its header is totaly collapse .. please somebody help me resolve the issue .. i have tried all my known ways but not good output.
this is the bug i am facing in IE7: (pic from @matmuchrapna)
can anybody help me solve the issues.
and i m using html5
<header>
<a href="/">
<img id="logo" src="images/logo.png" height="75" width="287" title="HomePage" alt="Mulberry Kitchen Studios" /></a>
<div id="telephone">
<p>Showrooms: Norwich </p><img src="images/tel-norwich.gif" alt="" /><p> Beccles </p><img src="images/tel-beccles.gif" alt="" />
</div>
<nav id="primary-menu">
<div class="menu-mainnav-container">
<ul id="menu-mainnav" class="menu superfish sf-js-enabled">
<li id="menu-item-13" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-13"><a title="Contemporary Kitchens" href="http://www.mulberrydesignerkitchens.com/contemporary-kitchens/">Contemporary Kitchens</a></li>
<li id="menu-item-75" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-75"><a title="Traditional Kitchens" href="http://www.mulberrydesignerkitchens.com/traditional-kitchens/">Traditional Kitchens</a>
<ul class="sub-menu">
<li id="menu-item-81" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-81"><a title="Traditional Oak Kitchens" href="http://www.mulberrydesignerkitchens.com/traditional-kitchens/traditional-oak-kitchens/">Traditional Oak Kitchens</a></li>
<li id="menu-item-395" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-395"><a title="Unique Traditional Kitchens" href="http://www.mulberrydesignerkitchens.com/norwich-kitchens/unique-traditional-kitchens/">Unique Traditional Kitchens</a></li>
<li id="menu-item-73" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-73"><a title="Quality Kitchens" href="http://www.mulberrydesignerkitchens.com/classic-kitchens/">Classic Kitchens</a></li>
</ul>
</li>
<li id="menu-item-74" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-74"><a title="Bespoke Kitchens" href="http://www.mulberrydesignerkitchens.com/bespoke-kitchens/">Bespoke Kitchens</a></li>
<li id="menu-item-72" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-72"><a title="Accessories & Appliances" href="http://www.mulberrydesignerkitchens.com/kitchen-accessories-appliances/">Accessories & Appliances</a></li>
<li id="menu-item-71" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-71"><a title="All inclusive service" href="http://www.mulberrydesignerkitchens.com/all-inclusive-service/">All inclusive service</a></li>
<li id="menu-item-736" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-736"><a href="http://www.mulberrydesignerkitchens.com/norwich-kitchens/recent-projects/">Recent Projects</a></li>
<li id="menu-item-70" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-70"><a title="Information & Articles" href="http://www.mulberrydesignerkitchens.com/kitchen-information/">Information & Articles</a></li>
<li id="menu-item-69" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-69"><a title="Contact Us & Maps" href="http://www.mulberrydesignerkitchens.com/contact-us-maps/">Contact Us & Maps</a></li>
</ul>
</div>
</nav>
</header>
CSS
header{
position: relative;
background:#7a2652;
height: 75px;
display: block;
}
header #telephone {
color: #FFFFFF;
float: right;
margin-top: 10px;
padding-right: 10px;
width: 370px;
position: relative;
top: 0px;
}
header #telephone p {
padding: 0;
margin: 0;
font-size: 10px;
float: left;
margin-top: 2px;
color: #fff;
}
header #telephone img {
float: left;
margin-left: 5px;
margin-right: 5px;
}
nav#primary-menu {
height: 37px;
position: absolute;
right: 2px;
top: 38px;
width: 685px;
list-style: none outside none;
}
nav#primary-menu div {
background: none repeat scroll 0 0 #833B5D;
float: right;
height: 37px;
margin-left: 32px;
width: 645px;
}
nav#primary-menu ul#menu-mainnav {
list-style: none outside none;
}
nav#primary-menu ul#menu-mainnav li {
height: 37px;
margin: 0 -10px 0 -37px;
overflow: visible;
padding-left: 37px;
padding-right: 10px;
position: relative;
width: 80px;
z-index: 1;
float:left;
display: inline-block;
list-style: none outside none;
}
nav#primary-menu ul#menu-mainnav li:hover:last-child {
background: url("images/nav-last-bg.png") no-repeat transparent;
}
nav#primary-menu ul#menu-mainnav li:first-child {
background: url("images/nav-first-bg.png") no-repeat scroll left center transparent;
}
nav#primary-menu ul#menu-mainnav li:hover {
background: url("images/nav-current-bg.png") no-repeat scroll left center transparent;
}
nav#primary-menu ul#menu-mainnav li.current-menu-item {
background: url("images/nav-current-bg.png") no-repeat scroll 0 0 transparent;
}
nav#primary-menu a {
color: #FFFFFF;
float: left;
font-size: 9px;
line-height: 120%;
padding-bottom: 8px;
padding-top: 7px;
text-align: left;
text-decoration: none;
width: 60px;
}
nav#primary-menu a:hover {
color: #FFFFFF;
}
nav#primary-menu a:visited {
color: #FFFFFF;
}
nav#primary-menu ul#menu-mainnav li ul.sub-menu {
list-style: none outside none;
}
/*
nav#primary-menu ul#menu-mainnav li ul.sub-menu li {
background-color: #833B5D;
height: auto;
}
*/
nav#primary-menu ul#menu-mainnav li ul.sub-menu li {
background-color: #833B5D;
height: auto;
margin: 0;
padding: 6px 12px;
width: 120px;
}
nav#primary-menu ul#menu-mainnav li ul.sub-menu li a {
margin: 0;
padding: 5px;
width: 120px;
}
nav#primary-menu ul#menu-mainnav li ul.sub-menu li:hover {
background-color: #8e4d69;
}
nav#primary-menu ul#menu-mainnav li ul.sub-menu li.current-menu-item {
background: none repeat scroll 0 0 #8E4D69;
}
Upvotes: 1
Views: 177
Reputation: 6620
Just use the the position: absolute;
tag:
div#telephone {
position: absolute;
top: 10px;
right: 0px;
}
Upvotes: 1
Reputation: 19803
try add this
#telephone {
position: absolute;
right: 0;
}
in my ie:
Upvotes: 1
Reputation: 4575
Set the header to display: block; and download and use the HTML5 shiv:
http://code.google.com/p/html5shiv/
Hope that helps :)
Upvotes: -1