Header position displays incorrectly in Internet Explorer due to CSS

I'm experiencing an issue with the header position on my website, as it always aligns to the left side in IE. However, in Chrome and Firefox, it is perfectly centered without any problems.

Can anyone offer their expertise on how to resolve this?

Homepage:

CSS Code:

.header {
  left: 0;
  right: 0;
  top: 0;
  margin-left: auto;
  margin-right: auto;
  position: fixed;
  max-width: 950px;
  height: 141px;
  background: url(../img/bg_top.jpg);
  background-size: cover;
  color: #FFF;
  z-index: 100; }
cssinternet-explorerheader

Answer №1

Give this code a try for the perfect solution.

To style the header section, include the following CSS:

.header {
    width: 100%;
}

For the navigation component, adjust the left margin using the following CSS:

.nav .ul .li {
    margin-left: 32px;
}

Answer №2

Utilizing the margin auto and fixed max-width properties eliminates the need to specify left and right values, allowing the content to be automatically centered on the page.

No additional adjustments necessary.

  .header { 
    top: 0;
    margin-left: auto;
    margin-right: auto;
    position: fixed;
    max-width: 950px;
    height: 141px;
    background: url(../img/bg_top.jpg);
    background-size: cover;
    color: #FFF;
    z-index: 100; }

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

jQuery animation not executing as expected due to transition issues

I'm looking to create a cool effect where the previous quote disappears and a new one appears when I click on a button, all with a smooth transition effect. In my attempt below using jQuery .animate and opacity property, I'm struggling to make i ...

javascriptjqueryhtmlcss

Manipulating content with JavaScript in Internet Explorer using the outerHTML property is a powerful

Encountering an Issue with outerHTML in IE Browser If I try the following: txt = "Update Complete!"; msg = sub.appendChild(d.createElement("p")); msg.outerHTML = txt; It works without any problem. However, if I use: txt = "1 Error:<ul><li> ...

javascripthtmlinternet-explorerouterhtml

What is the best way to resize a div located below a dynamic div in order to occupy the available space?

My website has a dynamic div1 and a scrollable table inside div2. I need the div2 to take up the remaining height of the window, while ensuring all divs remain responsive. I've tried using JavaScript to calculate and adjust the heights on window loa ...

javascriptcssangularbootstrap-4flexbox

The background color and border are not showing up in the <div> element

I am encountering an issue with 3 inline <div> elements where the one on the far left is not displaying the light blue background and black border that it should have. HTML: <!DOCTYPE html> </html> <head> <link rel= ...

htmlcss

Creative Text Container CSS Styling

Check out this website for the container I want to replicate: container This is the specific textbox: Here's how mine currently appears: I analyzed their css file and examined their html source code. I isolated the section of html and css related t ...

htmlcsstextboxwebkit

Is it possible to utilize CSS rules for a non-existent div within CSS?

Can this be achieved using CSS? If .div1 is not present, enforce the following rule: .div2{ property: value; } For example, <div class="div1"> ... </div> <div class="div2"> <!-- it exists, so no action needed --> </div& ...

htmlcsscss-selectors

The image selection triggers the appearance of an icon

In my current project, I am working on implementing an icon that appears when selecting an image. The icon is currently positioned next to the beige image, but I am facing difficulties in making it disappear when no image is selected. Below are some image ...

javascriptjqueryhtmlcssonclick

Visual button spacing

There is no CSS styling applied to the page. When two image buttons are placed in separate lines of code like this: <asp:ImageButton ID="btnVoteUp" Height="16px" Width="16px" runat="server" ImageUrl="images/thumbs_up.gif" CausesValidation="false" Co ...

asp.netcss

How to superimpose an image onto another image using HTML and Bootstrap 4

I am trying to superimpose one image on top of another image and adjust its pixel location. After doing some research online, I came up with the following code snippet: .background { position: relative; width: 100%; top: 0; left: 0; z-index: 1 ...

javascripthtmlcssbootstrap-4

Update the picture displayed in the parent div when it is in an

My code currently changes the image when a parent div is in an active state, but I'm struggling to figure out how to revert it back to the original image when clicked again. I attempted to use 'return false' at the end of the script, but it ...

javascripthtmljquerycss

Height that is determined in real-time

I am attempting to adjust the height of a div based on the size of the screen. Within this div, there is a calendar that contains multiple lines of content, which can be displayed or hidden based on user preference. The height of the calendar is not fixed, ...

css

Exploring the origins of CSS through patch design

Want to learn how to create a background like this using CSS? Check out this link for inspiration! ...

htmlcss

Create a sleek transition for your Bootstrap 4 fixed Navbar by having it smoothly slide down and change to a

Throughout my experience with HTML/CSS, I have predominantly relied on themes that included this feature by default. However, as I now venture into building from scratch, I find myself struggling to recreate it. You'll notice that I have a stylish fi ...

javascripthtmljquerycssbootstrap-4

The paragraph tag remained visible despite the use of the hidden display property

Can you help me figure out why my code isn't working with .d-none .d-sm-block? <div class="container"> <div class="row row-content align-items-center"> <div class="col-12 col-sm-12"> <h2>heading 1&l ...

htmlcssbootstrap-4display

Customizing the parent class of an input in Blazor/Scss: A step-by-step guide

My current set up involves using <label> elements with an <input type=radio> as a child. This enables the label to be clickable and trigger the selection of the corresponding radio input. <div id="content"> <label class="optio ...

htmlcssasp.net-coreblazorradio-button

Eliminate the space beneath the panel header in Bootstrap version 3.3.4

Can anyone help me understand why there is extra padding appearing under the drop-down select list in my panel header? picture <div class="panel panel-default"> <div class="panel-heading clearfix"> <h3 class="panel-title pull-l ...

htmlcsstwitter-bootstrap

Why is my main.scss having trouble importing other files?

I am experiencing issues with importing my scss file. First, I created a file called main.scss and added some code to it. All the codes are functioning properly and showing up on the webpage. Next, I created two folders named settings and elements. In ...

csssass

Align the image in the middle using JavaScript for Firebase

I am struggling to display the center of an image within a circle-shaped <img> tag with a border-radius of 50%. The issue arises when trying to display an image fetched from Firebase storage, rather than from a URL. In attempt to solve this problem, ...

javascriptjqueryhtmlcss

Having Trouble Adding a CSS File to Your Django Project? Can't Seem to Get it

I am feeling exhausted trying to solve this problem and now I am in desperate need of help. I have been attempting to add a main.css file to my Django project so that I can handle the CSS myself. I have watched numerous tutorials, but most have crashed m ...

pythoncssdjango

The CSS overlay effect refuses to shut down

Greetings everyone, I'm new around here so please bear with me. I am encountering an issue wherein the overlay only works in one direction - it appears when the button is clicked, but nothing happens when attempting to close it. I have tried adjustin ...

jqueryhtmlcssscrolloverlay