a div with height:1px appears very thicker in internet explorer 6. How to reduce it?


Tags: html,css,internet-explorer,internet-explorer-6

Problem :

This is my css properties:

.line-separator {
height: 1px;
background: #d2d2d2;
border-bottom: 0px solid WindowFrame;
color: #d2d2d2;
width: 984px;
    }

this is my DIV: (i use one more like this for the bottom one.)

<div class="line-separator" style="margin-left: 3px;">
</div>

IE 7 : This is the required look

 IE 7 : This is the required look .

IE 6 : It appears very thick. It should not be the case.  IE 6 : It appears very thick. It should not be the case.

Please avoid comments like dont use ie6 or move on etc., I am aware its going extinct. I have a requirement in ie6. How to solve it ?



Solution :

Add line-height: 1px or overflow: hidden. That will do the trick.


    CSS Howto..

    how to place the images exactly in menu position

    How to set fixed base to calculate vh unit in css on mobile?

    jQuery how to rapidly change color on divs with click

    How to convert a rectangle to TRBL CSS rect value?

    HTML/CSS: How to make a bar on the side to take you to a certain part of the page

    How do I stop Bootstrap Input Boxes and Buttons from overlapping the header and footer of a page when scrolling?

    How does free hosting website work? [closed]

    How to use array so i will get value either x[0] or x[1]

    How to add border to a container with transparent gaps in between

    Jquery Dropdownlist not shows the selected item.?

    How to create a frosted glass effect using CSS?

    How to use css media query to switch animations

    How to adjust 100% browser height and width with CSS?

    How to get the effect not to add one more div?

    How to override css img properties?

    How to target CSS class names that start with digit

    CSS, knockout.js : how to dynamically assign id to checkbox with foreach data-bind

    Phonegap : how Control the font size of the Mobile?

    Showing hidden divs element using jQuery show() not working in IE7

    How to fix clipped text over 3D transform image on Safari?

    How to centre fluid image and a caption using CSS Flexbox?

    How to check if a css/js resource is included in head

    How to Draw Kundli Design (diamonds and triangles in square) using HTML and CSS?

    How to achieve MS word tab function in html/ css?

    how to align div's horizontally in CSS

    How can I center an image with text that follows it using CSS?

    How to draw a dotted line with css?

    How to centre a
    within several other
    s (using a mixture of w3.css and css)

    How to formatting a simple
      in columns and bolding the first item on its own line

    How to send HTML to an embedded WebView without running a local webserver?