The placement of bootstrap 3 .nav element in the browser Internet Explorer 9

Having an issue with my navigation in Windows Explorer 9. It's supposed to be positioned under the site heading, which works fine in Chrome and newer versions of Internet Explorer. However, in IE 9 it appears over the main heading at the top of the page. I even tried adding a border around the .nav class, but in Explorer it adds a border where the nav should be and its new position at the top of the page, very strange! Hopefully someone can offer some assistance.

Check out the link below for a jsbin demonstrating the problem.

Joe

HTML5

http://jsbin.com/lehul/1/edit?html,css,output

csshtmltwitter-bootstraptwitter-bootstrap-3

Answer №1

This issue presents a significant problem as the content is completely enclosed in an anchor tag, leading to potential issues with the functionality of menu links as well.

Visit this link for reference

The following code snippet offers a solution:

  <div class="background_nav"></div>
       <div id="InvisHeader">
                <div class="container">
         <a href="index.html" style="text-decoration: none;">
                        <div id="heading">
                            <h1>Suzi Mclaughlin Design</h1>
                            <p>Designing flowers and stuff since forever like u know and stuff!</p>
                        </div>  </a>
                   <div class="nav">
                            <ul>
                                <li><a href="about.html">About</a></li>
                                <li><a href="index.html">Gallery</a></li>
                                <li><a href="http://suzimclaughlin.blogspot.co.uk/" target="_blank">Blog</a></li>
                                <li><a href="contact.html">Contact</a></li>                                  
                            </ul>
                </div>
          </div>
          </div>

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

Selecting the parent span element using jQuery

Is there a better way to display text in the parent <div>'s <span>? I'm having trouble with using spans and .parent(), any advice would be appreciated. HTML: <div> <span></span> <!--the span where I need to show ...

javascriptjqueryhtml

What is the best way to include 2 or more radio buttons in every row of data within a table?

Is it possible to have multiple radio buttons for each row of data in a table? The current code snippet is as follows: echo '<table> <tr> <td>Home</td> <td>Not Home</td> <td>Address</td> <td>Su ...

phphtmlmysql

How can I modify the data within a PHP-generated table displayed on an HTML page?

As part of my school coursework, I am working on a computing project that involves PHP, HTML, and MySQL to create a web-based application. In the database "cp11641_users," there is a PHP table named "users" which has been displayed in an HTML table using ...

phphtmlmysql

What are the steps to restrict a user from accessing a specific website?

In my Vue.js project, I've implemented a function that hides a specific menu item for users with insufficient permissions: <a :href="href" @click="navigate" v-if="hideMenuItem()"> // some code </a> hideMe ...

javascripthtmlcsstypescriptvue.js

What is the reason behind why decimals don't automatically pre-fill like integers do?

Seeking help with an HTML issue - I have a field pre-filled with a decimal number, but it's not displaying the value when loaded. The field should accept both integers and decimals, but only integer values are showing up correctly. I've spent ho ...

htmlasp.netasp.net-mvcasp.net-core

Creating a personalized contact form with a mailto link that also includes the ability to automatically copy information into the email

I'm in the process of developing a basic contact form that includes input fields for name and subject, as well as a send button (which is an <a> element inside a <div>. I am utilizing an <a> tag because I intend to use mailto functio ...

javascripthtmlcssmailto

Angular 1.5 component using HTTP GET

Trying to utilize a 1.5 component with AngularJS has presented some challenges for me. I have a service that fetches my JSON file using $HTTP and returns a promise. In the controller of my component, I resolve the promise and assign it to a value using thi ...

javascripthtmlangularjs

AngularJS has declared a variable as undefined

After successfully completing a tutorial on AngularJS (available here: https://github.com/felipedaraujo/saturn-quiz), I decided to expand the app by adding a quiz about the planet Earth. This way, users can now select quizzes based on different planets. E ...

javascripthtmlangularjs

Unable to alter the background color of the text box

I am currently struggling with my code where I am trying to overlay a text box on an image. Even after setting the background color to white, it still shows up as transparent. I have successfully done this in the past, but for some reason, it is not work ...

htmlcssbackground-color

Modify the static navigation menu to a dynamic menu in Wordpress

Currently, I am attempting to transform my static navigation menu into a dynamic WordPress navigation menu. This is the code that I currently have: <nav> <ul id="menu"> <?php $pages = array( 'in ...

phphtmlcsswordpress

Having trouble with Firefox not recognizing the linear gradient color in my CSS3 code

I'm working on implementing a linear gradient background using CSS, but I'm facing an issue with Firefox not displaying it correctly. body { height: 100%; /*background-color: #F0F0F0;*/ background-repeat: repeat-x; /* Safari 4-5, Chrome 1-9 */ ...

cssfirefox

What could be causing my difficulty in locating an HTML element using jQuery/JS string interpolation?

In my project, I have a set of div blocks each identified by a unique numerical id. For instance: https://i.sstatic.net/lYod8.png One of the tasks in my project is to select the 29th element following a specific chosen element. For example, if I choose t ...

javascriptjqueryhtmlcss

calculate the product of the table's td element

Recently, I encountered a task where I had to make a table with an editable quantity cell. Whenever the quantity was changed, it needed to be multiplied by the value in another parent td. Here is the code snippet that helped me achieve this: $(document) ...

javascriptjqueryhtml

Challenges faced when utilizing AJAX within a PHP loop

I am currently using a PHP WHILE loop to showcase multiple products, each with its own unique id#. These products can be rated using a PHP AJAX JQUERY-based system. However, after a user rates a product and the AJAX response returns the value, it is curren ...

phpjqueryhtmlajaxwhile-loop

The website is displaying a strange mix of text and HTML when viewed on a PC

While browsing the internet for C programs, I stumbled upon this particular program that caught my eye: <span style='color:#004a43'>#</span><span style='color:#004a43'>include</span><span style='color:#8 ...

javascripthtmlcssfirefox

Display the output of a Python script on a simple HTML page running on your local machine

I'm looking to create a basic web page that will run locally on my computer and display results from a Python script. I've tried using HTML and PHP, but so far I haven't had any success. Keep in mind, I'm new to web development. For ex ...

phppythonhtml

Switching Angular-cli from scss to css

I accidentally created my Angular project using scss style, but I want to switch to css style. Is there a way to convert scss style to css using Angular-cli? ...

cssangularsass

Animating back with a jQuery if statement

Is there a way to implement an if statement that triggers an animation when the right image reaches +400px, and then animates back to -400px upon hovering over the image? $('#left img').mouseenter(function() { $('#right img').animate ...

javascriptjquerycssanimation

Clicking on the button results in no action

Having an issue with a button that has an onclick event attached to it. Despite meeting all the necessary conditions, when the button is clicked, nothing seems to be happening. Here's the code snippet: function PU2() { console.log(quarks) if (q ...

javascripthtml

When trying to insert glyphicons into a textarea, the result is displaying the actual text instead

When the glyphicon is clicked, I want the entered content to be added dynamically to the textarea. $(document).ready(function(){ //Click Event of glyphicon class $(document).on('click','.glyphicon',function(){ ...

javascriptjqueryhtmlbootstrap-4glyphicons