What could be the reason behind my image displaying correctly in the majority of browsers, yet not in Internet Explorer

The HAML code below is what I have:

%header
  .grid
    %a{:name => "top"}
      .logo
        %a{:href => root_path}
          =image_tag("logo3.png")
    .tagline
      .clearfloat
      %p Fast Facts About Your Website, Your Competitors And Best Practice

It compiles to the following HTML structure:

<header>
  <div class='grid'>
    <a name='top'>
      <div class='logo'>
        <a href='/'><img alt="Logo3" src="/assets/logo3-f98780b46c9b7f088007b22a6a6d3605.png" /></a>
      </div>
    </a>
  <div class='tagline'>
    <div class='clearfloat'></div>
    <p>Fast Facts About Your Website, Your Competitors And Best Practice</p>
  </div>
</div>
</header>

In addition to the HAML, there is also SASS code using Susy:

@import "compass/reset";
header {
  clear: both;
  padding: 1.25em;
  @include content-box;

  .grid {
    padding-bottom: 0em;
    padding-top: 0em;

    .logo {
      @include span-columns(3, 9);
      padding-left: 3.75em;
      margin: 0;
      height: 3.25em;
    }

    .tagline {
      @include span-columns(6 omega, 9);
      height: 3.25em;

      p {
        position:absolute;
        top: 3.25em;
        text-align: right;
        width: 50%;
      }}}}

.grid {
  @include container;
  padding-top: 3.75em;
  padding-bottom: 3.75em;
  padding-left: 1.25em;
  padding-right: 1.25em;  
  }

.clearfloat {clear: both;}

This results in the following CSS when compiled:

body {
    margin: 0;
    background-image: url(/assets/background-15f6db398b101b42f0b97400986e777a.png);
}
.container {
    *zoom: 1;
    max-width: 86.25em;
    _width: 86.25em;
    padding-left: 3.75em;
    padding-right: 3.75em;
    margin-left: auto;
    margin-right: auto;
}
.container:after {
    content: "";
    display: table;
    clear: both;
}
header {
    clear: both;
    padding: 1.25em;
    background-image: url(/assets/subtle_dots3-4c8426c60999e17a694d2d04c7df3c1d.png);
    -webkit-box-shadow: #191919 3px 3px 6px;
    -moz-box-shadow: #191919 3px 3px 6px;
    box-shadow: #191919 3px 3px 6px;
}
header .grid {
    padding-bottom: 0em;
    padding-top: 0em;
}
header .grid .logo {
    width: 30.43478%;
    float: left;
    margin-right: 4.34783%;
    display: inline;
    padding-left: 3.75em;
    margin: 0;
    height: 3.25em;
}
header .grid .tagline {
    width: 65.21739%;
    float: right;
    margin-right: 0;
    #margin-left: -3.75em;
    display: inline;
    height: 3.25em;
}
header .grid .tagline p {
    position: absolute;
    top: 3.25em;
    text-align: right;
    width: 50%;
}
.grid {
    *zoom: 1;
    max-width: 86.25em;
    _width: 86.25em;
    padding-left: 3.75em;
    padding-right: 3.75em;
    margin-left: auto;
    margin-right: auto;
    padding-top: 3.75em;
    padding-bottom: 3.75em;
    padding-left: 1.25em;
    padding-right: 1.25em;
}
.grid:after {
    content: "";
    display: table;
    clear: both;
}
.clearfloat { clear: both }

All modern browsers display the logo on the left side of the header correctly, like this:

However, Internet Explorer (including version 9) misplaces the logo behind the tagline as shown here:

htmlcssinternet-explorersusy-compass

Answer №1

The HTML structure is incorrect. It's not allowed to nest an anchor (a) element within another anchor element. Additionally, without utilizing HTML5, nesting a block element (div) inside an inline element (a) is also prohibited.

Various browsers may interpret this code differently and make adjustments to correct the invalid markup. To ensure uniform rendering across all platforms, it's essential to develop valid HTML code.

Answer №2

You could potentially solve this issue with a quick tweak. Consider adding the following code to your header section, or alongside your other meta tags.

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

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

Adding text with jQuery

Currently, I am utilizing the Jquery text editor plugin known as JqueryTE. While adding some functions to it, I have encountered a roadblock. Specifically, I am attempting to insert additional text into the source of the textarea but have been unsuccessfu ...

javascriptjqueryhtml

Personalizing the fileTemplate selection in FineUploader

My English is not the best, so apologies in advance. I'm struggling to customize the FineUploader FileTemplate option. I don't want to use fineUploaderBasic; I want total customization. Initially, I managed to hide the file name and size after a ...

jqueryhtmlcssfine-uploader

Eliminate styling that is specific to certain browsers

Recent browser updates have introduced new styling and functionality to input[type=number], including up and down buttons. In Chrome, I was able to eliminate this added styling by accessing the shadow DOM and identifying the specific element. However, de ...

htmlcssfirefoxbrowser

What is the process for generating a MediaWiki article that contains preloaded text derived from an HTML form input?

I am in the process of developing a private wiki using MediaWiki, and I have designed a Special page with HTML elements to serve as a template entry form. My goal is to create a new WikiPage based on the input provided by the user, following a similar s ...

phphtmlmediawikimediawiki-extensionsmediawiki-templates

The document type specified in the HTML validation process does not support the use of the "hr" element

My goal is to display a list of articles including images, titles, horizontal lines, and dates using a UL. Unfortunately, I encountered a validation error when testing them on the website validator tool at https://validator.w3.org/. Below is a simplified ...

htmlw3c-validation

What are the differences between incorporating JavaScript directly into HTML and writing it in a separate file?

I need help converting this JavaScript embedded in HTML code into a standalone JavaScript file. I am creating a toggle switch that, when clicked, should go to a new page after the transformation. I am looking for the non-embedded version of the function. H ...

javascripthtmljquerycssonclick

scraping mixed content from an HTML span using Selenium and XPath

Currently, I am attempting to extract information from a span element that contains various content. <span id="span-id"> <!--starts with some whitespace--> <b>bold title</b> <br/> text here that I want to grab.... < ...

htmlseleniumselenium-webdriverxpath

Is there a method to access a website, trigger JavaScript functions, and subsequently retrieve the HTML content using PHP?

I am currently exploring options to access a webpage, execute JavaScript functions on it (thus altering the HTML content), and eventually save the modified version of the page. I'm uncertain if this approach is feasible, and if not, are there alternat ...

javascriptphphtml

Struggling to make images wrap properly using flexbox

I've been struggling to get these images to wrap properly within my container. They keep overflowing beyond the designated width and I'm not sure if it's because I have paragraphs placed under each image. Any ideas on how to make 3 images ap ...

htmlcssflexbox

Robotic Arm in Motion

GOAL: The aim of the code below is to create a robotic arm that consists of three layers (upper, lower, and middle), all connected to the base. There are four sliders provided to independently move each part except for the base which moves the entire arm. ...

javascripthtmlcsshtml5-canvaswebgl

Using jQuery to update the CSS class for all li icons except for the one that is currently selected

Utilizing Font Awesome Icons within the li elements of a ul Challenge When a user clicks on the user icon, the color changes from black to yellow. If the user clicks on another icon, that one also turns yellow. Is there a way to remove the existing yell ...

jquerycssfont-awesome

What's the best way to add vertical space to my DIV containing buttons?

Here is an example of HTML with CSS classes that float elements left and right: <div class="block-footer"> <button class="medium float-left">A</button> <button class="medium float-left">A</button> <button class="m ...

htmlcss

Prevent the elongation of HTML select elements in Bootstrap

Struggling to set the size of an HTML "select" field in Bootstrap 3 (latest) to normal width instead of 100%? Looking for a cleaner solution than resorting to tables or adding fields within bootstrap columns that might cause indentation issues due to borde ...

htmlcsstwitter-bootstrap

Incorporating A Full-Fledged Office Word Editor Into My Web Application

In our web project, we are looking to integrate a feature that allows users to create, edit, and save their word documents for reporting purposes. While Microsoft Office offers an online option here, it seems limited to working within the Microsoft OneDriv ...

htmlms-wordms-officetext-editorrich-text-editor

Applying scoped CSS styles to parent elements in HTML5

I've been delving into the details of the HTML5 specification, specifically regarding the scoped attribute on style elements. According to the specification: The scoped attribute is a boolean attribute. When used, it signifies that the styles are mean ...

csshtmlscope

The :after pseudo-element in action with multi-line text

Can the styling of the :after pseudo-element be applied to every line of multi-line text? Here is the code I am currently using: .container { width: 50px; } .text { position: relative; } .text:after { content: ''; position: ...

htmlcsslayoutpseudo-element

Toggling the visibility of a div using JavaScript

When I click the button, I want to show and then hide a div. However, it doesn't work on the first click - only on the second click. How can I make it work on the first click? HTML <p>Click the button</p> <button onclick="myFu ...

javascripthtmlcss

Is there a way to dynamically incorporate line numbers into Google Code Prettify?

Having some trouble with formatting code and inserting/removing line numbers dynamically. The line numbers appear on the first page load, but disappear after clicking run. They don't show at all on my website. I want to allow users to click a button a ...

javascriptjquerycssgoogle-code-prettify

What strategies can we implement to ensure consistency in visual styles and templates across our microservices?

Our team is currently working on multiple microservices simultaneously. While traditional microservice architecture discourages code sharing and reuse between services, we are considering the benefits of consistent styling across all services that have Web ...

cssstylesmicroservices

Accessing JSON data through crawling may trigger an "Invalid access" warning

Currently extracting data, I came across this base URL After inspecting chrome's developer tools - Network tab, I found the following URL: international?Adt=1&Chd=0&ECITY1=HKG&ECITY2=ICN&Fa…019.03.13.&TRIP=RT&W ...

pythonhtmljsonajaxweb