Troubles with horizontal list incompatibility in Internet Explorer 6 and 7

I am facing an issue with displaying an unordered list in IE6+7. The problem arises when styling the list items with specific width and height properties, causing IE to stack the items vertically instead of horizontally. Below is my code snippet:

For live example, visit: http://jsfiddle.net/NY94w/1/

HTML

<div>
     <ul class="hozlist">
          <li><a href="#" class="btnyellow ">View Details</a></li>
          <li><a href="#" class="btnyellow ">View NDP</a></li>
          <li><a href="#" class="btnyellow ">View News</a></li>
    </ul>
</div>​

CSS

ul.hozlist {
    list-style: none;
    padding: 0px;
    margin: 0px;
    text-align: left;
}
ul.hozlist li {display: inline-block; *display: inline}

    .btnyellow
    {
        width: 93px;
        height: 21px;
        background: yellow;      
        border:1px solid red;
        line-height:21px;
        vertical-align: middle;    
        padding: 0;
        cursor: pointer;
        font-size: 70%;
        text-align: center;
        display: block;
    }
    a.btnyellow, a.btnyellowsmall{text-decoration: none;color: black;font-family: Arial;}

Answer №1

Even though A.K's solution may work for your issue, relying on float is not always the most efficient choice. If you prefer not to use float with your elements, consider including zoom:1 in your ul.hozlist li {} style declaration.

ul.hozlist li {display: inline-block; *display: inline; zoom:1;}

Answer №2

To achieve the desired effect, replace

display: inline-block; *display: inline
with float:left in the following code:

ul.hozlist li {float: left}

CHECK OUT THE DEMO

Answer №3

Internet Explorer has limited support for inline-block, only allowing it for elements that are naturally inline like spans, strongs, and ems.

To achieve a similar result without using inline-block, you can use float: left instead:

ul.hozlist li {float: left;}

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

How come child elements are clipped in IE versions 9 and above when using the border-radius property with a fixed value?

When applying css border-radius:[some value] to a parent element and having a fixed positioned child element, I noticed that in Internet Explorer the child element appears to be 'clipped' into the parent. However, if I use border-radius:0 in the ...

Develop a feature or method in your code that allows for the display of the specified table column based on user interaction

I'm a beginner with ASP.NET and I'd like to learn more about events and functions that will change the color of the corresponding day button when pressed: <td class="style2"> <asp:Button ID="Monday" runat="server" BackColor="#009933" He ...

What is the best way to shorten string values that exceed a certain length?

Here is an array list I have: $myarray = array( array( 'name' => 'File name 1 - type.zip', 'size' => '600KB', ), array( 'name' => 'File name 2 - type.pdf&a ...

I can't figure out why my code isn't functioning properly. My goal is to have a PDF file generated when the submit button is clicked on a form, and for a

Hello everyone, I am new to the world of programming, but I have been assigned a project that involves using jQuery, JavaScript, html2pdf, and Bootstrap 5. I seem to be facing some issues with my code. Can someone please help me identify what's wron ...

Designing a fixed bottom footer enclosed within a wrapper that expands from the top header to the bottom footer

I have created the basic structure of my webpage using HTML / CSS. However, I now realize that I need a sticky footer that remains at the bottom of the screen with a fixed position. Additionally, I want the main content area, known as the "wrapper," to str ...

Steps for assigning an id to a newly created div within a parent div while in design mode

Imagine creating a div element with the attribute contenteditable="true", and then checking the console for what happens next: 1st. In the console, you only see a simple div tag. <div id="typbody" contenteditable="true" style="width:100%; height:200px ...

"All my online spaces are chaotic and cluttered beyond belief, overflowing with content in high-definition

One issue that frequently arises for me when developing websites is related to media queries and resolution. I have utilized the following code using a max-width of 1920px: @media only screen and (max-width : 1920px) {} However, I am facing challenges in ...

What is the best way to extract both the link and text from an <a> tag that contains another element in XPath?

In a similar way to my current data (which cannot be shared due to company policy), the example below is based on information extracted from this response and this response. The aim is to extract both the text of the <a> element and the link itself. ...

Can JavaScript executed within a web browser have the capability to manipulate files on the underlying host system's file system?

Is it possible to programmatically move files or folders from a website using code? I am aware that with Python and Node.js, this can be achieved through the OS, path, and fs modules. Can JavaScript running in a website also handle file management tasks ...

Disabling the final grid cell(s)

I am currently working on a 4 column grid in ReactJS. The grid includes various elements with images and text. I want to ensure that if there are five elements filled, the last three should be inactive so that each row always has four columns without any e ...

Ways to increase the font size of input text using bootstrap's css framework

I currently have a bootstrap textbox set up like this: <input type="text" class="span9" required name="input_text"/> My goal is to increase the height of my input box to 300px. The width, on the other hand, is being handled by span9. I utilized In ...

What are the reasons and methods for storing multiple images within a single image?

Lately, I've observed a trend where websites are consolidating multiple images into one large image, similar to Google's homepage. Although we see many small images on the left side, it is actually just one single image: I am curious about how ...

"Troubleshooting WordPress website: issues with CSS and images not

I recently developed a custom WordPress theme and everything was working perfectly on my local machine. However, when I moved the theme to the server, the CSS and images are not displaying properly. Strangely enough, when I checked the 'view source&ap ...

Optical imaging-guided Page Division

Looking for guidance on implementing a program that can perform "Vision-based Page Segmentation" with practical information rather than just theoretical knowledge. I prefer using JS (jQuery) and PHP for this project. After reading the article on VIPS: a ...

Beautiful ExpressionChangedAfterItHasBeenCheckedError

I need your help Input field where I can enter a Student email or IAM, which will be added to a string array List displaying all the students I have added, using a for loop as shown below Delete button to remove a student from the array The list has a sp ...

What could be causing the lack of population in ngRepeat?

In my angular application, I encountered an issue with ngRepeat not populating, even though the connected collection contains the correct data. The process involves sending an http get request to a node server to retrieve data, iterating over the server&a ...

Alter the website link in an HTML file as well as in the corresponding CSS and JavaScript

Is it possible for JQuery to alter URLs within a CSS or Javascript resource before they are loaded into the browser, or even as they load in the browser? URLs typically point to resources such as images and fonts. I have been considering this idea becaus ...

The div "tags" cannot be positioned beneath the photo as it is automatically located alongside the image inside the div

Is there a way to place the "Tags" div beneath an image, creating a bar of tags below it? I've been struggling to position it properly without disrupting the flow of the page. Using absolute positioning is not an option as it would break the layout. A ...

Gradually appear with jQuery while maintaining current position

Exploring Display Options In my current setup, I have text that initially has a display:none property, and jQuery is applied to fadeIn() the content. The challenge lies in the fact that since the text is centered, as each word appears, the positioning on ...

Locate an element by its neighboring label with XPath

Struggling to identify the XPATH for a specific element in a sea of similar attributes? Look no further. In this HTML snippet, the key to pinpointing the right element lies in its neighboring label, "Copyright". Here's the code: <div class="row"&g ...