Odd issue with hr element width inside a div that is floated in Internet Explorer 7

Question

Odd issue with hr element width inside a div that is floated in Internet Explorer 7

Encountered a peculiar issue with IE7. I have multiple divs floated to the left with no specified width. In IE7, the `hr` element seems to stretch 100% of the width of the container holding these columns. Additionally, the CSS rules for `hr` are not being applied properly - background image looks odd and borders are not being removed:

hr.style3{background:url(../images/backgrounds/hr1.gif) repeat-x;border: 0 none;height:3px;margin:15px 0;}

<div class="column last">
    <div class="title">Useful information</div>
    <hr class="style3" />
    <ul class="links line_height3">
         <li>
             <a href="#">sample link</a>
         </li>
    </ul>
</div>

html css internet-explorer-7

Answer 1

Answer №1

After trying the technique suggested by tw16 at and running into some issues, I decided to take a different approach for my specific case.

Instead of using the suggested method, I used a hidden hr element wrapped inside a div to achieve a similar effect:

CSS:

.hr hr {
    display:none
}

HTML:

<div class="hr"><hr /></div>

However, I ran into an issue with floated containers (nested inside another floated container) in IE7, where I had to assign a fixed width to the div.hr. To address this, I utilized the modernizr plugin:

.ie7 .hr {width:100px}

This method allowed me to:

Easily style the "hr" using background images for cross-browser compatibility
Maintain the hr element's presence for accessibility purposes

Answer 2

After trying the technique suggested by tw16 at and running into some issues, I decided to take a different approach for my specific case.

Instead of using the suggested method, I used a hidden hr element wrapped inside a div to achieve a similar effect:

CSS:

.hr hr {
    display:none
}

HTML:

<div class="hr"><hr /></div>

However, I ran into an issue with floated containers (nested inside another floated container) in IE7, where I had to assign a fixed width to the div.hr. To address this, I utilized the modernizr plugin:

.ie7 .hr {width:100px}

This method allowed me to:

Easily style the "hr" using background images for cross-browser compatibility
Maintain the hr element's presence for accessibility purposes

Odd issue with hr element width inside a div that is floated in Internet Explorer 7

Answer №1

Similar questions

Adapting the Homepage Based on User Authentication

TinyMCE toolbar missing the "hr" option

Strategies for minimizing the amount of columns in a responsive design

One method for activating a second Select>Option with the use of a first Select>Option in an HTML form

How can I extract targeted information post login on a webpage through Google Apps Script?

Verify the functionality of the input fields by examining all 6 of them

Proper sequencing of functions within a JavaScript file

Export asp tables filled with dynamic data directly to Excel format

Python allows for the color coding of numbers using a method that is comparable to the conditional

Attempting to transmit multiple variables

Using jQuery to alter the attributes of a hover class

I have come across this building error, what do you think is the cause of it?

Assistance required in forming a Button Group featuring a Pointer Shape

Is there a way to create a shadow effect using css?

Ways to center text vertically using CSS

Enhance the worth of text box

Transforming Json strings with html tags into usable html with Firebase

What is the best way to intelligently cache specific segments of a page in PHP?

What is the best way to create a unique shadow effect for a container in Flutter?

Sending information from a dynamic table to a database using PHP