Solved

IE6 banner heading alignment

Posted on 2009-07-03
1
420 Views
Last Modified: 2012-06-27
Could you please help me out to resolve this issue?
I am facing this strange issues in IE6. Any Ideas?

Thanks in advance


<div class="banner">
<div class="hd">
<div class="c">Morbi lacus felis, euismod at, pulvinar sit amet</div>
</div>
</div>
 
.banner {
	width:100%;
	background-color:#a6c289;
	margin-bottom: 20px;
}
.banner .hd {
 background:transparent url(banner_l.png) no-repeat 0px 0px;
 margin-right:33px; /* space for right corner */
 height:31px
}
 
.banner .hd .c {
	background:transparent url(banner_r.png) no-repeat right 0px;
	margin-right:-33px; /* pull right corner back over "empty" space (from above margin) */
	height:31px;
	text-align: center;
	padding-top: 8px;
	text-transform: uppercase;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 15px;
	color: #FFFFFF;
	font-weight: bold;
}

Open in new window

ie7-firefox.png
ie6.png
0
Comment
Question by:eChalk
1 Comment
 
LVL 30

Accepted Solution

by:
Britt Thompson earned 100 total points
ID: 24773171
Is the banner image a .png using transparency? If so, IE6 doesn't support this and you'll need to use different CSS or an IEPNGFIX to get it to work properly.

see here:
http://www.twinhelix.com/css/iepngfix/
http://renazonse.com/stage/iepng.htm
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

831 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question