[SOLVED] Transparent corners (IE6+7 problem)

[Andy17]

Hey guys,

 

I really wanted to have "transparent" corners because of my gradient background. I quickly realized that I was not experienced enough to do it myself, so I found a tutorial and had to edit some things to make it work. It works beautifully in Firefox 2 & 3 + Internet Explorer 8, but in IE7 (and I assume 6 too), it cuts off the bottom of my container and doesn't display the round corners. The top corners are still working. Here is my CSS (yes, the method is a little tricky but it was the best I could find):

 

div.Article {
background: url("images/corners_topleft.gif") top left no-repeat;
width:99%;
}

div.Article h1 {
background: url("images/corners_topright.png") top right no-repeat;
font-size:1.3em;
padding:15px;
padding-left:10px;
padding-bottom:24px;
margin:0;
position:relative;
right:-14px;
color:#789d00;
}

div.ArticleBody {
background: url("images/corners_right.png") top right repeat-y;
margin:0;
margin-top:-2em;
padding:15px;
padding-left:0;
position:relative;
right:-14px;
}

div.ArticleFooter {
background: url("images/corners_bottomleft.png") bottom left no-repeat;
position:relative;
top:11px;
}

div.ArticleFooter p {
background: url("images/corners_bottomright.png") bottom right no-repeat;
padding:15px;
padding-left:0;
display:block;
margin:-2em 0 0 0;
position:relative;
right:-14px;
}

div.ArticleLongContent {
background: url("images/corners_leftborder.png") top left repeat-y;
}

#maincontainer {
float:left;
margin-left:18px;
width:auto;
max-width:74%;
}

 

And the HTML (the #maincontainer is just there for positioning)

 

<div id="maincontainer">

<div class="Article">
	<h1>Headline</h1>

	<div class="ArticleLongContent">
	<div class="ArticleBody">
	<p>

                A paragraph

	</p>

	</div>

	<div class="ArticleFooter">
	<p></p>

	</div>
</div>

</div>

</div>

 

Preview: http://test.jokeheaven.eu

 

Images used:

http://test.jokeheaven.eu/images/corners_topleft.gif

http://test.jokeheaven.eu/images/corners_topright.png

http://test.jokeheaven.eu/images/corners_right.png

http://test.jokeheaven.eu/images/corners_bottomleft.png

http://test.jokeheaven.eu/images/corners_bottomright.png

http://test.jokeheaven.eu/images/corners_leftborder.png

 

Does anyone know of an IE7 "hack" to make this work? Thank you very much in advance!

[noober]

Try setting the height to the divs which contain your images.

 

I'm not sure why you chose to use transparent pngs in this case, but IE6 and 7? doesn't support them anyway. Try using jpgs or a possibly a css hack, *html, or seperate stylesheets for ie.

[haku]

It's only IE6 that cannot handle the transparency in .png files. And a pngfix fixes that.

[Andy17]

Try setting the height to the divs which contain your images.

 

What do you mean exactly? I tried playing around with the heights, but without success. I might not have done what you were thinking, though.

[noober]

It's only IE6 that cannot handle the transparency in .png files. And a pngfix fixes that.

 

Sure, but why use something that wont work in IE6, then having to implement a hack that won't work without javascript when there doesn't seem to be a valid argument to why he's using pngs to begin with. That's my theory. Simple is better.

 

Andy, let's start off by going to w3.org, validating the site and fixing the errors.

 

I'm seeing the tabs now in IE, but the positioning is off.

 

If I can remember correctly, I was having problems with the same type of thing about a year ago. If you can't get the images to position correctly, which I'm pretty sure you can, instead of background images, put the images in the actual html and see what happens.

 

To be honest, if it seems like I don't have the perfect fix is because I'm not going to spend the time to download the files, do it for you, test it out, etc... I'll give suggestions and you'll have to do the leg-work. The site is about specializing in design, xhtml, and css services afterall.

[Andy17]

Sure, but why use something that wont work in IE6, then having to implement a hack that won't work without javascript when there doesn't seem to be a valid argument to why he's using pngs to begin with. That's my theory. Simple is better.

 

If I use the images in the JPG format, the size is much bigger and GIF files don't give me the colors I want.

 

Andy, let's start off by going to w3.org, validating the site and fixing the errors.

 

http://validator.w3.org/check?uri=http%3A%2F%2Ftest.jokeheaven.eu%2F&charset=(detect+automatically)&doctype=Inline&group=0&user-agent=W3C_Validator%2F1.654

 

The site is about specializing in design, xhtml, and css services afterall.

 

Just because I am making the design doesn't automatically make me the owner of the website. And in my opinion, this is a little different since we're dealing with an outdated browser here. IE6+7 are and always will be a pain in the ass for designers. That doesn't make people bad coders when it works in all new browsers. Yes, a website should look decent in all browsers, but it's not easy to be new with designing and having to make "hacks" for old browsers - I'd say that requires experience.

[noober]

You stated you're pretty much a beginner at html and css. Well, I guess I shouldn't be asking why you're making the website in the first place, nevertheless actually trying to fix these problems when the owner could do it in little to no time at all. I also might question why you want your content divs to adjust to browser width, and if so, what's the benefit of doing it when your navigation doesn't adjust at the same time?

 

And I apologize. You'll probably need transparent corners with your gradient background. The difference in file size is minute, but you're corners are 1 color, grey. You can save it as a gif and get the same color.

[haku]

Sure, but why use something that wont work in IE6, then having to implement a hack that won't work without javascript when there doesn't seem to be a valid argument to why he's using pngs to begin with. That's my theory. Simple is better.

 

Because sometimes .pngs are the right tool for the job.