CODEWITHSUNDEEP
cssinternet-explorer-7
alexvance
alexvance

Reputation: 1124

Button text and button don't display in IE7

Link: http://hyperiontx.cbstage.com/ [note: I didn't make a fiddle because jsfiddle no longer seems to be IE7 compatible]

So, open this site up in IE7 using compatibility mode. The top right "Search" button's text isn't displaying, and the "Read More" button in the hero area isn't displaying at all. I've looked at the CSS on both and just have no idea what the issue might be - can anyone with some IE7 experience, tease out the issue?

Relevant CSS

Top right search button:

.block-search input[type="submit"] {
height: 26px;
width: auto;
padding: 0 6px;
color: white;
font-family: 'CantarellBold';
font-size: 12px;
font-weight: normal;
line-height: 0;
text-shadow: none;
text-transform: uppercase;
border-radius: 0;
border: none;
background: #71A655;
}

Hero area "Read More" button:

.section-content a.button, .section-content input[type="reset"], .section-content input[type="submit"], .section-content input[type="button"] {
padding: 10px 12px;
color: white;
font-weight: normal;
line-height: 0;
text-shadow: none;
text-transform: uppercase;
background: #8cc65d;
background-image: -moz-linear-gradient(left top,#8cc65d 0%,#71a655 100%);
background-image: -webkit-gradient(linear,left top, right bottom,color-stop(0, #8cc65d),color-stop(1, #71a655));
background: -webkit-linear-gradient(left top, #8cc65d 0%, #71a655 100%);
background: -o-linear-gradient(left top, #8cc65d 0%, #71a655 100%);
background: -ms-linear-gradient(left top, #8cc65d 0%, #71a655 100%);
background: linear-gradient(left top, #8cc65d 0%, #71a655 100%);
border: none;
border-radius: 0;
}

Upvotes: 1

Views: 86

Answers (1)

Billy Moat
Billy Moat

Reputation: 21050

Remove the css property line-height:0 from both buttons and they should display in IE7.

Upvotes: 1

Related Questions