CODEWITHSUNDEEP
htmlcsscross-browser
LCJ
LCJ

Reputation: 22652

Border-bottom doers not come as underline in Chrome and Firefox; works in IE

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

enter image description here

IE

enter image description here

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

profile for Lijo at Stack Overflow, Q&A for professional and enthusiast programmers

Upvotes: 0

Views: 263

Answers (1)

Blender
Blender

Reputation: 298106

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/

Upvotes: 3

Related Questions