CSS Forum

**zum** · 06-10-2007, 08:42 PM

Hi all,

Everything works well when previewing on Mac (Safari, Firefox, or Opera), cause i work & code on Mac. But when tested on Windows (IE & Firefox) everything screw up

Are IE6 can't render transparancy image (.PNG)?

What happen to my CSS? does any wrong in it? Please help me these problem.

Live preview: Here

Thanks

**ADAM Web Design** · 02:19 AM

No, IE6 cannot render PNG transparencies in and of themselves (IE7 can, however). You'll need the PNG Hack for that (sucks, but it's a necessary evil).

Site loads slowly at this end. Are you having hosting issues, perhaps?

**ForrestCroce** · 06-11-2007, 03:00 AM

Microsoft used to do that as a sales and marketing gimmick ... if we're really bad, you'll have to use our stuff. Apparently it didn't work out all that well. They've put png support into IE 7, although it's still not perfectly comfortable.

But FireFox on Windows can display pngs, and I think that goes all the way back to the first version. I'm seeing "Firefox can't find the server at ..."

**zum** · 06-12-2007, 12:20 AM

Quote:

Originally Posted by ADAM Web Design

Site loads slowly at this end. Are you having hosting issues, perhaps?

Well, nope. But in from here (indonesia) it doesnt take a long time for loading page, really....

anyway, for png's problem are done.. it great looks on IE. But i need help too for CSS, it seems my CSS works properly on mac. But when previewing on Windows IE or Firefox it really-really bad, some height doesnt looks like on Mac. Whats going on?

HTML code:

Code:

<!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=ISO-8859-1" />
<title>Bogalakon Pictures</title>
<style type="text/css" media="screen">
@import url("boga/theme/v1/assets/stylesheet/master.css");
</style>
<script src="boga/theme/v1/assets/other/fader.js" type="text/javascript"></script>
</head>    
<body id="index-body">
<div id="header">
    <div class="header-container">
        <h1><a href="index.html" title="Bogalakon Pictures"><img src="boga/theme/v1/assets/images/logo_bl.png" alt="Bogalakon Pictures" width="176" height="48" /></a></h1>
    </div>
    <!-- HEADER CONTAINER -->
</div><!-- HEADER -->
<div id="wrap">
    <div id="sideleft">
        <ul id="nav">
            <li><a href="#" title="Portfolio">Work</a></li>
            <li><a href="#" title="About us">About</a></li>
            <li><a href="#" title="Client's area">Login</a></li>
            <li><a href="#" title="Contact us">Contact</a></li>
        </ul>
    </div><!-- SIDELEFT -->
    <div id="sideright" class="clearfix">
        <div class="inner">
            <h2>News</h2>
                <div class="date">
                    <p><span class="style2"><strong>New project</strong></span> &Iota; <span class="style1">12 May</span></p>
                </div>
                <p>I am happy to announce the <a href="#">onedia</a> website being featured at their media promotion. I'd like to say many thanks to <a href="#">Elance</a> for being my &quot;middle man&quot;.</p>
                <div class="date">
                    <p><span class="style2"><strong>New project</strong></span> &Iota; <span class="style1">12 May</span></p>
                </div>
                <p>I am happy to announce the <a href="#">onedia</a> website being featured at their media promotion. I'd like to say many thanks to <a href="#">Elance</a> for being my &quot;middle man&quot;.</p>
        </div><!-- INNER -->
    </div><!-- SIDELEFT --> </div><!-- WRAP -->
<div id="footer" class="clearfix">
    <div class="footerinner">
        <div class="address">
            <p>Bogalakon Pictures</p>
            <p>3rd and 4th floors</p>
            <p>County House</p>
            <p>33 - 34 Rathbone Place</p>
            <p>London W1T 1JN</p>
            <p>tel: +XX (X) XX XXXX</p>
            <p>fax: +XX (X) XX XXXX</p>
            <p><a href="mailto:info@bogalakonpics.com">info@bogalakonpics.com</a></p>
        </div>
        <p class="copy">&copy; 2007 Bogalakon Pictures.</p>
    </div><!-- FOOTERINNER -->
</div>
<!-- FOOTER -->
</body>
</html>

CSS Code:

Code:

.style1 {color: #666666}
.style2 {letter-spacing:0.1em;}

* html body{ /*IE6 hack*/
padding: 0 0 130px 0; /*Set value to (0 0 HeightOfFrameDiv 0)*/
}
* html #footer{ /*IE6 hack*/
height: 100%; width: 100%; }

:link,:visited {text-decoration:none }
ul,ol {list-style:none }
h1,h2,h3,h4,h5,h6,pre,code {font-size:1em; }
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input {margin:0; padding:0 }
a img,:link img,:visited img {border:none}
a {text-decoration:none;}
address {font-style:normal }

.clearfix:after {content: "."; display:block; height:0; clear:both;  visibility:hidden;}

/* Hides from IE-mac \*/

* html .clearfix {height:1%;}

.clearfix {display: block; display:inline-block;}

/* End hide from IE-mac */

body {padding-bottom:50px; font:11px "Trebuchet MS"; background:url(../images/site_bg.png) repeat-x;}
body#index-body {background-image: url(../images/site_bg800.png); background-repeat: repeat-x;}
#container { }
#header {background:url(../images/header_bg.png) 50% top no-repeat; margin-top:14px;}
#index-body #header {margin-bottom:0;}
.header-container {width:780px; height:105px; margin:0 auto; text-align:center; padding-top: 35px; position: relative;}
#wrap {width: 740px; margin:0 auto; height:200px;}
#sideleft {height: 137px; width:154px;float: left; background-image:url(../images/nav_bg.png); background-repeat:repeat-x;}
#nav {padding-top: 6px;}
#nav li a {display: block; font-size:1.9em; margin-left:14px; margin-top:1px; width:58px; color:#FFFFFF; letter-spacing:0.1em;}
#sideright {width:200px; float:right; height:200px; background-image:url(../images/news_bg.png); background-repeat:repeat-x; margin-top:15px;}
.inner {padding-left:12px; padding-top:9px; padding-right:8px;}
.date {margin-bottom:0.3em; margin-top:0.5em;}
.inner h2 {font-size:1.2em; margin-bottom:0.3em;}
.inner p {margin-bottom: 0.3em;}
.style1 {color: #666666}
.style2 {letter-spacing:0.1em;}
#footer {position:absolute; bottom:0; left:0px; width:100%; height:237px; overflow:hidden; color:white; background-image:url(../images/footer_bg3.png); background-repeat:repeat-x; background-position:left bottom;}
#index-body #footer {margin-bottom:0px;}
.footerinner {margin:0 auto; width:740px;}
.address {float:left; margin-top:25px; width:150px; padding-top:55px;}
.address p {font-size:1em;}
.address a {color:#ff6600;}
#index-body .address {float:left; margin:0;}
.copy {float:left; position:absolute; bottom:2.5em; letter-spacing:0.1em; font-size:0.9em;}

**HighVoltage123** · 06-12-2007, 07:14 AM

why don't you just replace .PNG with .GIF images...

**zum** · 06-14-2007, 02:24 AM

Quote:

Originally Posted by HighVoltage123

why don't you just replace .PNG with .GIF images...

it takes low res if i use .gif file