Header problem in Internet Explorer 7

I have been using IE-tester and Adobe Browser Lab to check the IE Compatibility, but a friend suggested using IE Developer Toolbar and switching the IE Browser Mode to IE7. The whole website looks different compared to IE Tester and Adobe Browser Lab. Can anyone tell me which one is more reliable?

I am currently working on but in IE7, the header is completely collapsed. Can someone please help me resolve this issue? I have tried all my usual methods but haven't found a good solution.

Here is the bug I am facing in IE7: (image from @matmuchrapna)

Is there anybody who can assist me in solving these issues?

Furthermore, I am 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 &amp; Appliances" href="http://www.mulberrydesignerkitchens.com/kitchen-accessories-appliances/">Accessories &#038; 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 &amp; Articles" href="http://www.mulberrydesignerkitchens.com/kitchen-information/">Information &#038; 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 &amp; Maps" href="http://www.mulberrydesignerkitchens.com/contact-us-maps/">Contact Us &#038; 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;
}
...
csshtml

Answer №1

Consider incorporating the following code snippet:

#telephone {
    position: absolute;
    right: 0;
}

When implementing this in my ie browser:

Answer №2

To achieve the desired layout, simply apply the position: absolute; property:

div#telephone {
    position: absolute;
    top: 10px;
    right: 0px;
}

Answer №3

To show the header, ensure it is set to display: block; and then get the HTML5 shiv from this link:

http://code.google.com/p/html5shiv/

Hopefully, this information is useful for you :)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilize CSS and Bootstrap to ensure equal-sized responsive images in a row by scaling them down to the same dimensions

I am new to web design and struggling with resizing images using the img-fluid class in a particular portfolio view where they function as thumbnails. I will upload some images to clarify my goal. The challenge is maintaining consistency in size for each i ...

htmlcssbootstrap-5

What steps can I take to bring this idea to life in my gallery?

Currently, I am facing a roadblock while transitioning my design concept into actual code. My main concern lies with creating this art piece. Although the gallery is up and running with all the images in place, I'm encountering difficulties with the s ...

javascripthtmlcss

JavaScript code to make titles slide in as the user scrolls

Looking for a better way to make all titles slide in upon scrolling instead of coding individually? Consider using a forEach loop! Here's how you can modify the code below: function slideInLeft() { document.querySelectorAll('.subtitle-left ...

javascripthtmlcssfor-loopforeach

Leveraging the :has pseudo-class in Tailwind along with adjacent sibling selectors

My CSS code is working perfectly as intended. [data-type='transfer']:has(+ [data-type^='sale_']) { opacity: 0.25; } This CSS snippet targets elements with data-type="transfer" that are next to elements containing data attri ...

cssreactjstailwind-css

Choose the ngModel option from the dropdown menu

I have a project where I need the first question from a list to be displayed automatically. I found an example of how to do this using the index, like so: <select> <option *ngFor="let answer of answers; let i = index" [value]="answer.id" [selec ...

javascripthtmlangularangular-ngmodelangular2-ngmodel

How can I update my outdated manifest v2 code to manifest v3 for my Google Chrome Extension?

Currently, I am developing an extension and using a template from a previous YouTube video that is based on manifest v2. However, I am implementing manifest v3 in my extension. Can anyone guide me on how to update this specific piece of code? "backgro ...

javascriptcssjsonchrome-extension-manifest-v3

Initiate Bootstrap 4 dropdown menus from the initial menu point

I need the dropdown menus to align with the position of the first dropdown. There are multiple dropdowns on the page. Check out the screenshot for reference. JSFiddel: https://jsfiddle.net/kfh9Lbep/ https://i.sstatic.net/hHAKz.png Any ideas on how to ac ...

jquerytwitter-bootstrapcssbootstrap-4

What is the process for transferring an image from the main page to another?

For days, I have been searching for an answer without any luck. It seems that I just can't wrap my head around it and apply it to what I am working on. Currently, I am using PHP to store images on the server when a user hits submit. My goal is to dis ...

javascriptphpjqueryhtml

Is the percentage width and height for setting the size of an image in html/css mobile based on the screen's dimensions?

Currently, I'm working on an Oracle Apex jmobile query project involving an HTML page that includes the following image code: <center> <img src="#WORKSPACE_IMAGES#Logo.svg" align="center"> </center> Additionally, there is CSS to st ...

jqueryhtmlcssoracle-apex

Make the div block fill the entire body by setting its width to 100%

I am attempting to make the center block (which has a grey background) expand to the edges of the browser. By utilizing the code below, I have been successful in achieving this: #aboutBlock { background: #f2f2f1; position:absolute; left:0; ...

htmlcss

Integrate a PHP variable into an HTML/JavaScript statement that was previously transformed from PHP

Incorporated within this PHP variable is a mix of HTML and JavaScript code. My task is to enhance it by adding another PHP variable. Specifically, I have a PHP variable denoted as $user->user_email. How can I seamlessly integrate this variable into th ...

javascriptphphtmlvar

Safari is experiencing issues with overflow-x functionality after a device rotation

I'm currently in the process of developing a website that requires a specific div element to be horizontally scrollable if its content exceeds the screen size. This functionality works smoothly on most browsers, except for Safari: Scenario: When the ...

htmlcssipadsafaritouch

Implementing Validation for DropdownChoices and Checkboxes in Wicket Java

There is a checkbox and dropdown menu on an HTML page. Upon clicking submit, if both are selected, there should be an error message stating that at least one of them is mandatory and prompting the user to select at least one value. To address this issue, ...

javahtmlcheckboxwicketdropdownchoice

Displaying the appropriate DIV element based on the value entered by the user

I am encountering some difficulties... I have an <input> field. Depending on the input, one of the various <div> elements should be displayed. For now, it's just a text (e.g. "Your plan contains less than 1500 kcal!"), but later, the div ...

javascriptcss

Spacing in CSS between the menu and its submenu elements

My current challenge involves creating space between the menu and the submenu. However, I've noticed that when there is this space, the submenu doesn't function correctly. It only works when the design has no gap between the menu and the submenu. ...

htmlcss

Tips for animating input width as the size value changes during an ajax query transformation

This is my JavaScript code: function updatePriceDisplay() { $.ajax({ url:"query.php?currency=<?=$currencycode;?>" }).done(function(data) { $("value").attr("value", data).attr("size", data.length - 2); }); } updatePriceDi ...

javascripthtmlajax

Creating a Loop for Tabs on an HTML Form

When navigating through form input boxes using the tab key, it usually goes in order. However, I discovered that you can actually customize this order by using tabindex=x. Since I have 5 inputs on my form, I use tabindex 5 times to specify the order. But ...

javascriptjqueryhtmlcsstabs

Angular JS: Automatically toggle the visibility of a div on a panel click event

There is a row, panel, and a closed div on load. Clicking on the panel should make the div appear while making the row and panel disappear. Clicking on X should make the panel and row appear again. <script src="https://ajax.googleapis.com/ajax/libs/ ...

javascripthtmlcssangularjs

Ways to turn off JavaScript when reaching a certain breakpoint, similar to a media query

I am facing an issue with my <header> and <nav> blocks which are impacted by JavaScript. Is there a way to create a JavaScript solution similar to a media query that would deactivate this JavaScript code if the window width is less than or equa ...

javascriptjqueryhtmlcss

What is the best way to display a div beneath the highlighted text within a textarea field?

I have encountered a situation where I want to display a div (like a popup) when text is selected in a text area. However, when using mouse-down for this action, the position of the div sometimes does not align directly below the selected text. Below is t ...

javascriptjquerycss