Strange header image behavior when clicking on a different link (specifically visible in Internet Explorer)

I'm encountering a strange issue with an image in the header of my website. When clicking on the projects link, the image within the RSS feed link seems to switch places. This peculiar behavior appears to be unique to Internet Explorer (currently using version 10.0).

<header id="primary">
   <a href="http://bensouthgate.com"> ben's stuff </a>&nbsp;&nbsp;&nbsp;
   <a href="../posts.php"> posts </a> &nbsp;&nbsp;&nbsp;
   <a href="../projects.php"> projects </a>&nbsp;&nbsp;&nbsp;
   <a href= "../about.php" > about </a>&nbsp;&nbsp;&nbsp;
   <a href="../feed.xml"> <img src="../i/RSS-icon.gif" height="30px" width="30px" style="border:none;"> </a>
   <link rel="shortcut icon" href="http://bensouthgate.com/favicon.ico" />
</header>

Being new to CSS and HTML, I am at a loss as to where to begin troubleshooting this issue.

Thank you for any assistance!

UPDATE:

For reference, here is my current stylesheet:

/* 
Stylesheet for bensouthgate.com
Written 07/21/13
*/

/*************************
  Fonts
*************************/

/* Element Selectors */
html, body
{
    margin: 0;
    padding: 0;
    height: 100%;
    color:#5e5f5c;
}

body
{
    background: #fff;
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
    font-weight: 300;

}



header#primary
{
    float:left;
    color: #ffffff;
    text-indent:15%;
    top:0;
    line-height:2;
    font-size:30;
    background-color: #33798d;
    width: 100%;
    height: 60px;
    z-index:10;
}


/* ID Selectors */
header#primary a {
  color:white;
  display:inline-block; 
  float:left; 
  padding-right:5px

}

header#primary a:hover a:visited {
  color:#92948e;
}


h3 {
  margin-top:50px;
}

h4 {
  text-align: center;
}

code {
  font-size:16;
}

pre code {
  margin-top:-10px;
  font-size:14;
}



a {color:#33798d;}
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:active{text-decoration:none;}
a:hover { 
  color:#439eb8;
}

sup { 
  vertical-align: top; 
  font-size: 0.6em; 
}

svg { 
  margin-left:auto; 
  margin-right:auto; 
  display:block;
}

ul {
  list-style-type: square;
}


#wrapper {
    min-height:100%;
    position:relative;
}


#logo
{
  color:white;
  background-color:#92948e;
  width:100%;
  padding-top:60px;
  text-indent:18%;
  height: 35px;
  line-height: 1.7;
  font-size: 20;
  display:block;
}

/* Post Content Formatting */
#main
{
    float: left;
    padding-left: 15%;
    padding-right:15%;
    padding-bottom:80px;
}



/* Class Selectors */
.footer
{
    font-size: 12;
    padding-top:5px;
}

.bottom-space {
    margin-bottom: 30px;
}

/* Float Clearing Group Classes */
.group:before,
.group:after {
  content: "";
  display: table;
}
.group:after {
  clear: both;
}
.group {
  zoom: 1;
}
htmlcss

Answer №1

Your code has a few errors that need to be corrected. Here are some helpful pointers:

  1. The 

    <link rel="shortcut icon" href="http://example.com/favicon.ico" />
    should be placed in the <head> section of your HTML document.

  2. Avoid using &nbsp; for spacing between elements, and instead use margin for proper alignment.

  3. In order to create a navigation menu like yours, it's recommended to use an unordered list (ul). Below is an example incorporating your data:

Please note that I have removed the float: left; style for this to function correctly.

HTML:

<head>
    <!-- other head area content goes here -->
    <link rel="shortcut icon" href="http://example.com/favicon.ico" />
</head>
<body>
    <ul class="navigation">
        <li><a href="#">Example 1</a></li>
        <li><a href="#">Example 2</a></li>
        <li><a href="#">Example 3</a></li>
        <li><a href="#">Example 4</a></li>
        <li><a href="#"><img src="RSS-icon.gif" alt="RSS" /></a></li>
    </ul>
    <!-- additional code can now follow -->
</body>

CSS:

.navigation {
    list-style: none; /* removes default list bullets from ul */
    padding: 0; /* eliminates standard padding from ul */
}

.navigation li {
    display: inline-block; /* arranges menu items horizontally */
    margin-right: 30px; /* adds spacing between menu items */
}

Make sure to update the # with your specific paths again.

Answer №2

To fix the issue of image movement in IE10 and ensure the logo is displayed correctly, try removing float:left from header#primary and padding-top from #logo. After making these adjustments, check to see if there are any noticeable changes on the page before clicking on the header.

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

Mysterious codes are active and causing redirecting actions to unfamiliar websites upon clicking

Issue:- Upon clicking on the NAVBAR menu or any div element on my bootstrap website, it sometimes redirects to unwanted ads or unfamiliar links in a new tab. Links imported from hosted file:- <link rel="stylesheet" type="text/css" href="css\boot ...

javascriptjqueryhtmlcssmalware

Using JavaScript to identify when a page is scrolling with smooth scrolling behavior and phasing out the scroll event for this purpose

My web page has a scroll event triggered by scrolling, but it also has links that smoothly scroll the content using scroll-behavior: smooth. I want to ensure that the scroll event only executes when scrolling occurs and not when a link is clicked. Below i ...

javascripthtml

Transfer the CSS editing function from the user interface to the server in a Shiny application

Is there a way to dynamically change the color of input sliders globally? I am familiar with using chooseSliderSkin from the shinyWidgets package to modify CSS and change colors. However, I am facing an issue where this only works in the UI section and no ...

cssrshinyshinydashboard

Is using tables still considered a recommended practice for organizing a layout such as the one shown in the [IMG]?

Looking for recommendations on arranging images in the footer, in line with the design mockup using HTML/CSS. Wondering if tables are still a viable option for this purpose? ...

htmlcsshtml-table

The Ajax contact form is not submitting the necessary POST data to the PHP script

After creating an html form with ajax: function confirmSendMail() { $(".send_contact").click(function(event){ event.preventDefault(); var name = $("#inputName").val(); var email = $("#inputEmail").val(); var pho ...

phphtmlajax

What is the process for styling the <HTML> element effectively?

Query: How can I implement this style using JavaScript? jQuery would be appreciated as well :) Note: This style should be applied to the <HTML> element, not the document.body element. Otherwise, it will not work correctly. <style type="t ...

javascriptjquerycssxhtmlscrollbar

Struggling to align the navigation content alongside the brand name in Bootstrap 4

Seeking assistance with positioning my navigation menu next to my brand name using Bootstrap. Below is the current code snippet: <nav class="navbar-expand"> <a class="navbar-brand" href="https://example.com" target="_blank">Brand</a> ...

htmlcss

HTML5 Positioning Timeout

While working on my project, I incorporated the HTML Geolocation feature. However, I have observed that it is not always dependable. I am looking for a solution to add a backup plan that will time out after x seconds and display an error message. Any sugg ...

javascripthtml

I'm struggling to understand the reasoning behind the 'undefined' error occurring in the Google Maps distance service

Currently facing a puzzling issue with an 'undefined' exception. Developing a tool to track distance traveled between two locations, leveraging Google Maps distance matrix. Upon selecting a vehicle, entering an origin and destination, and clickin ...

javascripthtmlgoogle-maps

Interactive form featuring text fields and dropdown menus

Is it possible to create a form with the ability to add new rows consisting of SELECT and INPUT elements? Although my current code allows for this, I am facing an issue where no variable from the SELECT element is posted when the form is submitted. This i ...

javascriptjqueryhtmlajax

What is the best way to customize the endIcon of a styled-component button?

Presented here is a neatly styled button I've created import styled from 'styled-components'; import Button from '@material-ui/core/Button'; import ArrowForwardIosIcon from '@material-ui/icons/ArrowForwardIos'; const MyB ...

cssreactjsmaterial-uistyled-components

In AngularJS, how can you filter the ng-repeat value by clicking on a checkbox field?

Hey there, I'm looking to filter the ng-repeat value when a checkbox is clicked. Check out my Plunker here. By checking the checkbox labeled Role block, it should only show elements with roles value of "block". Similarly, by checking the checkbo ...

htmlangularjsmeanjs

There seems to be a malfunction with the hide and reset features, as they are

I have encountered an issue while working on hiding a series in Google Charts when clicked on the legend. The problem arises when an extra column is added to display tooltips on the bars, causing the functionality to break. Please check out the demos below ...

javascripthtmlangularjs

What is the solution to prevent opacity from affecting the href link?

I encountered an issue where, after setting a background image to cut off at a specific point on my website and adjusting its opacity, the down arrow button stopped functioning. Strangely, another button on the site that doesn't have a background behi ...

htmlcssopacity

Understanding and processing HTML strings in typescript

I am currently utilizing TypeScript. Within my code, there is an object named "Reason" where all variables are defined as strings: value, display, dataType, and label. Reason = { value: '<ul><li>list item 1</li><li&g ...

htmlreactjstypescriptparsing

jQuery swap- enhancing the appearance of numerical values

I am looking to customize specific characters within my <code> tag. While searching online, I came across the .replace() function but encountered issues when trying to style numbers. My goal is to change their appearance without altering the text its ...

javascriptjquerycss

What is causing the discrepancy between the appearance of my fiddle and my page?

Hey there, I encountered an issue while working on a page using jsFiddle - it seems to be behaving differently when viewed on the actual website! If you want to take a look: http://jsfiddle.net/8Hpmj/8/ http://ktaadn.me/about/ The example at ktaadn.me do ...

htmlcssjsfiddle

Angular ngRoute causing loss of jQuery script continuity during view/template transitions

I have encountered a unique challenge where I am required to develop a Single Page Application (SPA) in an unconventional manner. The client's server only supports static files, which means AJAX calls are not an option for me. To work around this lim ...

jqueryhtmlangularjsangular2-routingsingle-page-application

Updating events instantly with a single click in Angular 6: A step-by-step guide

Hello there, I am currently diving into learning Angular 6 and I have encountered a query. I want to achieve a functionality where upon clicking a button, the text on the button changes as well as the corresponding event that triggers when the button is cl ...

angularhtmltypescript

Converting the OpenCV GetPerspectiveTransform Matrix to a CSS Matrix: A Step-by-Step Guide

In my Python Open-CV project, I am using a matrix obtained from the library: M = cv2.getPerspectiveTransform(source_points, points) However, this matrix is quite different from the CSS Transform Matrix. Even though they have similar shapes, it seems that ...

pythoncssopencvimage-processingcomputer-vision