PDA

View Full Version : problem with PNG [background in DIVs]



mostafa megahed
Dec 23rd, 2008, 01:50 AM
hello, i have a problem with Div !!!

i can't create a backround using PNG image ...

look at here:

http://www.codingforums.com/attachment.php?attachmentid=6966&stc=1&d=1229993327

Note: with pictures it's work by Using the File pngfix (http://www.vb.fokakmena.com/pngfix.js)

TheTVStop
Dec 23rd, 2008, 01:59 AM
Post your code inside the code tags.

mostafa megahed
Dec 23rd, 2008, 02:06 AM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<style type="text/css">
body, html {
font: 10px Geneva, Arial, Helvetica, sans-serif;
color: #cecece;
background: #141414 url(http://www.chadmorris.net/Samples/test/images/backgrounds/bg_page_green.png);
}
.content_body {
width:900px;
margin: 0 auto 10px auto;
}
.div_body_top {
background:url(http://www.chadmorris.net/Samples/test/images/backgrounds/bg_dark_body_top1.png) no-repeat;
width:900px;
height:20px;
}
.div_body_middle {
background:url(http://www.chadmorris.net/Samples/test/images/backgrounds/bg_dark_body_middle1.png) repeat-y;
overflow: auto;
}
.logo_banner {
background:url(http://www.chadmorris.net/Samples/test/images/new/logo_web1.png) no-repeat 20px top;
height:158px;
width: 900px;
padding-top: 1px; /*hack to eliminate uncolapsing margin*/
}
#menu {
height:50px;
margin: 110px 0 0 230px;
overflow: auto;
}
#home_btn { background:url(http://www.chadmorris.net/Samples/test/images/new/home_btn_web.png); height:50px; width: 120px; float: left; }
#home1_btn { background:url(http://www.chadmorris.net/Samples/test/images/new/home_btn_web.png); height:50px; width: 120px; float: left; }
#home2_btn { background:url(http://www.chadmorris.net/Samples/test/images/new/home_btn_web.png); height:50px; width: 120px; float: left; }
#home3_btn { background:url(http://www.chadmorris.net/Samples/test/images/new/home_btn_web.png); height:50px; width: 120px; float: left; }
#home4_btn { background:url(http://www.chadmorris.net/Samples/test/images/new/home_btn_web.png); height:50px; width: 120px; float: left; }
.spacer_dotted_line {
width:860px;
height:2px;
margin: 10px auto 40px auto;
background: url(http://www.chadmorris.net/Samples/test/images/new/dotted_line.png) repeat-x;
}
.text_style_body {
text-align:left;
padding: 10px 20px;
}
.spacer_40px { height:40px; }
.spacer_50px { height:50px; }
.div_body_bottom {
background:url(http://www.chadmorris.net/Samples/test/images/backgrounds/bg_dark_body_bottom1.png) no-repeat;
width:900px;
height:20px;
}
.footer_bar {
background: #2B2D20;
height: 60px;
line-height: 60px;
text-align: center;
}
.footer_text {
color: #FFFFFF;
}
</style>
</head>
<body>
<div id="container">
<div class="content_body">
<div class="div_body_top"></div>
<div class="div_body_middle">
<div class="logo_banner">
<div id="menu">
<div id="home_btn"></div>
<div id="home1_btn"></div>
<div id="home2_btn"></div>
<div id="home3_btn"></div>
<div id="home4_btn"></div>
</div>
<!--end logo_banner--></div>
<div class="spacer_dotted_line"></div>
<div class="text_style_body">
Here is some content. Love that content. One day this text will actually say something.
...
<br/>
<br/>
Here is some content. Love that content. One day this text will actually say something.
Here is some content. Love that content. One day this text will actually say something.
Here is some content. Love that content. One day this text will actually say something.
...
</div>
<div class="spacer_50px"></div>
<div class="spacer_40px"></div>
<!--end div_body_middle--></div>
<div class="div_body_bottom"></div>
<!--end content_body--></div>
<!--end container--></div>
<div class="footer_bar footer_text">Copyright 2008</div>
</body>
</html>

Excavator
Dec 23rd, 2008, 02:45 AM
YAY!!!:thumbsup::thumbsup:

Links to the images and attached CSS! All I had to do was copy/paste to a new .html file and there's your website!! VALID code inside code tags and an intelligently worded/presented question - If only everyone could ask for help like that :)

I'm looking at it now...

Excavator
Dec 23rd, 2008, 02:53 AM
Hmm, pngfix works on images in your markup. Background images are a different story.
Some options might be...

nesting divs so you can present the image via your markup
using a transparent .gif


Not sure what else you can do. Maybe just don't worry about that little corner in the hopes that most people are starting to upgrade from IE6? That code works fine in IE7, IE8, FF3...
I am starting to ignore little things like that where IE6 is concerned. For a bigger issue that really affect useability I might be a little more worried but this is only cosmetic.

mostafa megahed
Dec 23rd, 2008, 07:35 PM
thank u ......