Floating CSS links in older versions of Internet Explorer, specifically version 7

In IE8 or higher, the following CSS works fine, but not in IE7 or lower:

  #main_navi {
   list-style:none;
   text-align:left;
   padding:0px;
   margin:0px 0px 20px 0px; 
   float:left;
  }

.dsn li {
  display: none;
}

a.main_navi_0 ul {
  float:left;
  display:none;
}

a.main_navi_0:link, a.main_navi_0:visited {
  color:blue;
  font-size:16px;
  font-weight:200;
  font-family: 'Allerta', sans-serif;
  height:65px;
  padding:40px 10px 0 20px;
  display:block;
  float:left;
  text-align:center;   
}


a.main_navi_1:link, a.main_navi_1:visited {
  font-size:16px;
  font-weight:200;
  font-family: 'Allerta', sans-serif;
  height:65px;
  padding:40px 10px 0 20px;
  display:block;
  float:left;
  text-align:center;  
 color: #3c94e2;
}

a.main_navi_0:hover, a.main_navi_1:hover {
  color:#000;
  border-bottom:5px solid #3c94e2;
}    

a.sub_navi_0:link, a.sub_navi_0:visited {
  color:#696969;
  font-size:13px;
  font-weight:200;
  font-family: 'Allerta', sans-serif;
  height:25px;
  padding:5px 10px 0 10px;
  display:block;
  float:left;
  text-align:center;
  z-index:999;
  position:relative;
  border-bottom:2px solid #dedad6;    
}

a.sub_navi_1:link, a.sub_navi_1:visited {
  color:#696969;
  font-size:13px;
  font-weight:200;
  font-family: 'Allerta', sans-serif;
  height:25px;
  padding:5px 10px 0 10px;
  display:block;
  float:left;
  text-align:center;
  z-index:999;
  position:relative;
  border-bottom:2px solid #3c94e2; 
}

a.sub_navi_0:hover,  a.sub_navi_1:hover {
  color:#000;
  border-bottom:2px solid #3c94e2;
}

Here's my html file structure:

<div id="nav">
    <div id="logo">
        <a target="_self" href="fileadmin/../home.html">
        <img border="0" title="4fleet Group" alt="" src="fileadmin/../fileadmin/img/logo.jpg">
    </a>
</div>
<div id="main_navi">
    <ul>
        <li class="dsn">
            <a class="main_navi_0" href="xyz.html">Über uns</a>
        <ul>
            <li>
                <a class="sub_navi_0" href="xyz/team.html">Team</a>
            </li>
            <li>
                <a class="sub_navi_0" href="xyz/presse.html">Presse</a>
            </li>
        </ul>
        </li>
        *another li with class ="dsn" tree*
    </ul>
</div>

Output in IE7 or lower:

Link1
      Link2
           Link3

Desired output:

Link1 Link2 Link3

I'm looking for a solution to make it work in IE7. I have an additional CSS file for IE7, but I need help with the code.

cssinternet-explorer

Answer №1

inline-block; is not a valid value for float

Perhaps you intended to use display: inline-block;. Keep in mind that this may not be compatible with IE7.

Instead, you may want to consider using float: left;, although without seeing the HTML structure it's difficult to give a definitive answer.

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

"Issue with scaling on Responsive Canvas leading to blurriness

I am working on a Canvas project and I want to make sure it is easily navigated on any device, whether it's a desktop or mobile. To achieve this, I decided to make the canvas responsive. Originally, the canvas was set at 800x800 which looked fine but ...

javascripthtmlcsshtml5-canvas

Placing an image on the chosen option of a <mat-select> using Angular Material

I have incorporated Angular Material into my Angular 2 project, and I am trying to insert a static image (HTML element) in the selected value of mat-select. Unfortunately, I have been unable to find a solution for this issue. Is there anyone who can ...

htmlangularcssangular-material

What are some ways to create an opaque effect for a DIV element

I've set up a div on the top of my website that spans 100% width and is in an absolute and fixed position. The code for it looks like this: div.header{ height: 60px; width: 100%; position: absolute; position: fixed; top: 0px; ...

javascripthtmlcss

Is it possible for a div or any other element to apply "margin:auto" while allowing padding only for the text inside it, rather than specifying a fixed size or percentage?

When creating a new div and adding text to it, there are a few considerations. <div style="margin:auto;background-color:yellow;padding:10px;">text</div> Instead of the default 100% width, we can add padding around the text "text". To achieve ...

css

What is the best way to ensure a PrimeVue TabPanel takes up the full vertical space and allows the content within the tabs to be scroll

I have created a sandbox demo to illustrate my issue. My goal is to make the content of tabs scroll when necessary but fill to the bottom if not needed. I believe using flex columns could be the solution, however, my attempts so far have been unsuccessful. ...

htmlcssvue.jsprimevue

The Bootstrap navigation bar isn't displaying properly on mobile devices

Help! My Bootstrap navbar is not working properly on mobile view. The menu icon shows up but when clicked, no items are displayed. Here is the HTML code for my navbar: <header class="header_area"> <div class="main-menu"> ...

htmlcssbootstrap-4

What is the best way to design a div that includes two separate columns for text and an image icon?

Check out this code: <?php foreach ($data as $vacancy) { ?> <div class="vacancy"> <img src="<?php echo Yii::app()->request->baseUrl; ?>/images/vacancy_icon.jpg" /> <div class="name"> < ...

htmlcss

Position flex-box items to align with the baseline of the final line of text within a block

I am attempting to replicate the layout shown in the final example of the image linked below using flexbox. https://i.sstatic.net/KSaig.png It seems that the align-items: baseline; property works perfectly when the blocks contain only one line of text. ...

cssflexboxbaseline

Using innovative Javascript capabilities for intricate CSS characteristics

As I dive into my JavaScript code that heavily manipulates the DOM, efficiency is key. I'm on the hunt for a native browser API that allows me to handle complex CSS attributes with ease. Performance matters to me, so using tools that are as native as ...

javascriptcssdom

Guide to Designing a Three-Column Layout Using Only CSS

I'm currently facing an issue with the alignment of the content section on my webpage which consists of three columns. The DIVs are not floating as expected. Below is the code I am using: <div id="content"> <asp:ContentPlaceHolder ID="Ma ...

htmlcssxhtmlcss-float

Advantages of Maintaining or Disabling the CSS Outline on Websites

Have you noticed how anchors around buttons or images create a dotted outline when clicked on or in focus? I usually disable these outlines with CSS to give a cleaner look, but I've heard there can be issues for keyboard-based users. What has been you ...

htmlcssbuttonuser-experience

What is the best way to create a complete margin separation between two unrelated elements?

Here is the code snippet I am currently working with: HTML <div class="container"> <div class="limit"> &nbsp; </div> <div class="dots"> &nbsp; </div> </div> CSS .container { background-colo ...

htmlcss

Set the height of the vertical scroll at a fixed 100% floatValue

Check out my creation at http://jsfiddle.net/ZygnV/ html, body { margin: 0; padding: 0; height: 100%; } .main-content-wrapper { height: 100%; overflow-y: hidden; white-space: nowrap; } .main-sidebar { display: inline-block; height: 1 ...

javascripthtmlcss

Parallax Page with a Stylish CSS Navigation Bar

I've been searching for tutorials on parallax effects and I've managed to implement it successfully. However, when I tried adding a navigation bar to the parallax page, the results were not what I expected. Can someone assist me with this? Below ...

cssparallaxnavigationbar

The text remains static and does not adjust its size when the screen is

I'm currently utilizing the text-only carousel feature found at this jsFiddle link. Below is the code I am using for resizing: window.addEventListener("resize", resetCarousel); function resetCarousel(){ setCarouselHeight('#carousel-text&apos ...

javascriptcsstwitter-bootstrapresponsive-designcarousel

What is the answer to this issue where the entity name is required to directly come after the "&" in the entity reference?

Whenever I insert the code into my Blogger platform, an error pops up stating: The entity name must directly follow the '&' in the entity reference Here is the code: <script> if (typeof bc_blocks == "undefined" && wind ...

javascripthtmlcss

Modifying Font Style in Angular 4 Material

Is there a way to change the font in Angular 4 Material material.angular.io using the styles file in .CSS format instead of SASS? While the documentation offers an example for SASS at: https://github.com/angular/material2/blob/master/guides/typography.md ...

cssangularmaterial-design

Scrolling to the next div will automatically align it in the center of the screen for the user

I am in the process of creating a single-page website and I would like to stack multiple divs on top of each other, all approximately 400px in size (with variations). Instead of using a smooth scroll, I want the page to jump to the next div and have it cen ...

javascriptjquerycsshtml

Conceal series of images with a click; reveal them again once completed

I'm working on a layout featuring overlapping images and I'm looking to create a hide-and-seek effect where the images are hidden one by one when clicked, and then shown in reverse order until all of them are visible again – essentially creatin ...

htmljquerycsshideshow

The Challenges of CSS Specificity in Multiple Browsers

I am using this as an opportunity to learn, so I appreciate if you can refrain from telling me what not to do and instead help me understand the concepts. What I am trying to achieve here is comprehension. Here is a sample of CSS code: input[type="file"] ...

htmlcsscross-browser