Question

I have HTML code as given in http://jsfiddle.net/Lijo/FRBqJ/. In internet explorer it works fine – the header text comes with an underline. But in Firefox and Chrome the line is not coming as underline.

1. What is the reason for this incorrect behavior?

2. How can we correct it (using CSS) ?

Firefox

IE

HTML

    <div id="searchContainer" class="searchContainer">
                        <div id="searchHeader" class="searchHeader">
                            <span id="detailContentPlaceholder_lblSearchHeading" class="searchContentHeadingText">
                                Business Testing Act</span>
                            <img alt="Expand" src="Images/PlusIcon.GIF" class="expandSearchIcon" />
                            <img alt="Collapse" src="Images/MinusIcon.GIF" class="collapseSearchIcon" />
                        </div>
   </div>

CSS

.searchHeader
{
width:100%; 
border-bottom:2px solid #fcda55;
padding:0 0 2px 0;
margin:0 0 0 0px;
font:bold 13pt Arial;
line-height:10pt;
color:#00A6B5;
}

REFERENCE:

1. CSS text-underline rendering difference between FF/IE and Chrome

Answer 1

Since you’re using float, you should also addoverflow: auto; to the parent element so that it accounts for the floated element:

.searchHeader
{
    width:100%; 
    border-bottom:2px solid #fcda55;
    padding:0 0 2px 0;
    margin:0 0 0 0px;
    font:bold 13pt Arial;
    line-height:10pt;
    color:#00A6B5;
    overflow: auto;  /* Right here */
}

Demo: http://jsfiddle.net/FRBqJ/1/