Hi all,
Does anyone here know why in IE8 there is an additional top margin/padding appearing causing the H2 title to appear lower than the below CSS suggests (about 10px or so)?
It’s just IE8, in IE7 and all other major browsers the below works 100% fine.
h2.title {
/* Sliding right image */
background: transparent url("../images/page_title_right.png") no-repeat scroll top right;
display: block;
float: left;
height: 45px; /* CHANGE THIS VALUE ACCORDING TO IMAGE HEIGHT */
padding-right: 15px; /* CHANGE THIS VALUE ACCORDING TO RIGHT IMAGE WIDTH */
margin: 10px 0px -1px 0px;
/* FONT PROPERTIES */
font-size: 24px;
text-transform: capitalize;
color: #C00000;
font-weight: bold;
}
h2.title span {
/* Background left image */
background: transparent url("../images/page_title_left.png") no-repeat;
display: block;
line-height: 45px; /* CHANGE THIS VALUE ACCORDING TO IMAGE HEIGHT */
padding: 0px 0px 0px 57px;
}
Thanks in advance,