hello guys i've been making my web actually its my first web building and i dont have any idea whats going on ie. i've been reading notes and other stuffs surfing on the net for answers but still i cant get it..any suggestions or answers to this?to make my png be visible in ie?
androidz
-2
Junior Poster in Training
Recommended Answers
Jump to PostWell, without a site to look at it's hard to tell what's going on - The problem could be with your version of MSIE (which may or may not support what you're trying to do.)
It could be the code you're using. MSIE does support PNG (although there may …
Jump to PostWell, first - unless things have changed with the newest release of IE, it doesn't support CSS defined rounded corners.
As for the png issue, I see these are all backgrounds - what happens if you convert them to jpegs?
And lastly, does the CSS and html validate?
All 8 Replies
Dandello
8
Posting Whiz in Training
Well, without a site to look at it's hard to tell what's going on - The problem could be with your version of MSIE (which may or may not support what you're trying to do.)
It could be the code you're using. MSIE does support PNG (although there may be issues depending on the file.)
But again, without seeing a page or some code, there's not a lot we can do.
androidz
-2
Junior Poster in Training
and here is my css codes...
/**********reset***************/
*{margin:0;border:0;padding:0;list-style:none;outline:none;}
/*****************************/
/********starts of classes*****/
.fright{float:right;}
.fleft{float:left;}
.clear{clear:both; heigth:10px;}
/*******sprites***************/
ul#menu{margin:0; padding:0; list-style:none; clear:both;}
#menu li{overflow:hidden; text-indent:-9999px; display:inline; float:left; margin-right:10px;}
#menu li a{background:url(image/menubtn_01_01.png) no-repeat; width:100%; height:100%; display:block;transition:width 2s, height 2s;-moz-transition:width 2s, height 2s, -moz-transform 2s;-webkit-transition:width 2s, height 2s, -webkit-transform 2s;-o-transition:width 2s, height 2s, -o-transform 2s;}
/* Home Button */
#menu li.home{width:115px; height:60px;}
#menu li.home a{background-position:14px 7px;}
#menu li.home a:hover{background-position:8px -49px;transform:rotate(10deg);-moz-transform:rotate(10deg);-webkit-transform:rotate(10deg);-o-transform:rotate(10deg);}
#menu li.home a.selected{background-position:7px -119px;transform:rotate(-10deg);-moz-transform:rotate(-10deg);-webkit-transform:rotate(-10deg);-o-transform:rotate(-10deg);}
/* About Button */
#menu li.about{width:105px; height:60px;}
#menu li.about a{background-position:-130px 7px;}
#menu li.about a:hover{background-position:-126px -50px;transform:rotate(9deg);-moz-transform:rotate(9deg);-webkit-transform:rotate(9deg);-o-transform:rotate(9deg);}}
#menu li.about a.selected{background-position:-125px -119px;}
/* Portfolio Button */
#menu li.portfolio{width:110px; height:60px;}
#menu li.portfolio a{background-position:-273px 7px;}
#menu li.portfolio a:hover{background-position:-266px -50px; transform:rotate(-10deg);-moz-transform:rotate(10deg);-webkit-transform:rotate(10deg);-o-transform:rotate(10deg);}
#menu li.portfolio a.selected{background-position:-256px -119px;}
/******************************/
/*********main*****************/
body{width:0 auto;height:auto;background: url(image/bg.jpg)no-repeat;overflow:hidden;}
p{font-family:"John Handy LET", Arial, Helvetica, sans-serif;}
h1,h2,h3{font-family: Calibri, "Calligraph421 BT", "Century Gothic", "Courier New";}
h1{ font-size: 1.5em;}
h2{ font-size: 1.3em;}
h3{ font-size: 1.1em;}
#wrapper{background:url(image/bg1.png)fixed top center; height: 0 auto; margin: 0 0 0 46px; width: 90%;}
/*****************************/
/*************starts of header***********/
#header{background:url(image/header.png)100% no-repeat;height:204px; width:100%; margin:0 20px 0 0; float:none;}
.logo{background:url(image/weblogo.png)no-repeat;float:left; margin: 25px 0 0 -20px; width:194px; height:156px; cursor:pointer;}
.title{float: left; margin: 105px 0 0 -100px; font-family:"John Handy LET", Arial, Helvetica, sans-serif; font-size:30px; color: #666699;}
#navbar{width: 500px;float: right;}
/***************************************/
/***************starts of content*************/
#content{width: 500px; height: 300px;margin: 20px 0 0 10px; background: url(image/content.png)no-repeat;}
.topbar{width:500px; height: 30px; background-color:#5a5a5d;-moz-border-radius:15px;-khtml-border-radius:15px;-webkit-border-radius: 15px;border-radius:15px; border-bottom-left-radius: 1px;border-bottom-right-radius: 1px;border-top-right-radius: 5px;border-top-left-radius: 7px;}
#sidebar{width: 320px; height: 300px;margin: -300px 10px 0 10px; float: right;}
.topsidebar{width:320px; height: 30px; background-color:#5a5a5d;-moz-border-radius:15px;-khtml-border-radius:15px;-webkit-border-radius: 15px;border-radius:15px; border-bottom-left-radius: 1px;border-bottom-right-radius: 1px;border-top-right-radius: 7px; border-top-left-radius: 5px;}
.round{text-align: center; background-color:#FFFFFF; padding-top: 6px;-moz-border-radius:15px;-khtml-border-radius:15px;-webkit-border-radius: 15px;border-radius:15px; border-top-left-radius: 240px;margin: 2px 0 0 20px; width:278px; heigth: 220px;border:2px solid white;transform:rotate(-10deg);-moz-transform:rotate(-10deg);-webkit-transform:rotate(-10deg);-o-transform:rotate(-10deg);}
.rndbox{width: 250px; height: 240px; margin:0 0 10px 10px;}
.box{ width: 250px; height: 219px; margin:5px 0 0 4px;-moz-border-radius:15px;-khtml-border-radius:15px;-webkit-border-radius: 15px;border-radius:15px;}
.trndbar{width:250px; height: 30px; background-color:#5a5a5d;-moz-border-radius:15px;-khtml-border-radius:15px;-webkit-border-radius: 15px;border-radius:15px; border-bottom-left-radius: 1px;border-bottom-right-radius: 1px;}
p.content{ font-family:Verdana, Arial, Helvetica, sans-serif; color:#FFFFFF;}
h1.content{color:#999900;text-align: center;}
h2.content{color:#999900;text-align: center;}
h3.content{color:#999900;text-align: center;}
/**********************************************/
#btbgleft{background:url(image/btbgleft.png)no-repeat;height: 200px;overflow: hidden; width: 150px;float: left;margin: 150px 0 200px 0;}
#btbgright{background:url(image/btbgright.png)no-repeat;height: 200px;overflow: hidden; width: 150px;float: right;margin: 150px -345px 200px 0;}
#footer{background:url(image/sidebar-list-line.gif)fixed top center;clear:both;width:auto; height: 200px; margin-right: 0 250px 0 0;float: none;}
androidz
-2
Junior Poster in Training
actually my website is not yet finished but as i said i am still practicing www.etolf.110mb.com as you can see there its just a simple personal homepage..and heres the code.of my html
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<html>
<head>
<title>Chu-is-Online</title>
<link rel = "stylesheet" href = "style.css" type = "text/css" media = "screen"/>
<link rel="stylesheet" href= "slidesheet.css" type="text/css" media = "screen"/>
<link type="text/css" href="css/themename/jquery-ui-1.8.12.custom.css" rel="Stylesheet" />
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.12.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.pngFix.pack.js"></script>
<script type="text/javascript" src="js/fadeSlideShow.js"></script>
<script type="text/javascript" src="js/pluginpage.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(document).pngFix();
});
</script>
<script type="text/javascript">
jQuery(function(){jQuery(document).pngFix();
});
</script>
<script type="text/javascript">
$(function(){$('#body').pngFix();
});
</script>
<script type="text/javascript">
$(function(){$('div.examples').pngFix( { blankgif:'ext.gif' } );
});
</script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#slideshow').fadeSlideShow();
});
</script><!--end script for slideshow--->
<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="png_fix.css" />
<![endif]-->
<!--[if lte IE 6]>
<script type="text/javascript" src="js/supersleight-min.js"></script>
<![endif]-->
<link rel="shortcut icon" href="favicon.ico" >
<link rel="icon" type="image/gif" href="images/animated_favicon1.gif" >
</head>
<body>
<div id = "wrapper">
<div id = "header">
<div class = "logo"></div>
<div class = "title">CHU-IS-ONLINE</div>
<div id = "navbar">
<ul id="menu">
<li class="home"><a class="selected" href="#">Home</a></li>
<li class="about"><a href="#">About</a></li>
<li class="portfolio"><a href="#">Portfolio</a></li>
</ul>
</div><!---end of navbar--->
</div><!---end of header--->
<div id = "content">
<div class = "topbar">
<h1 class = "content">Welcome to my website</h1>
<pre>Lorem ipsum dolor sit amet, consectetur adipisicing elit, </pre>
<pre>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</pre>
<pre>Ut enim ad minim veniam,</pre>
<pre>quis nostrud exercitation ullamco laboris nisi</pre>
<pre>ut aliquip ex ea commodo consequat.</pre>
</div><!---end of topbar--->
</div><!---content--->
<div id = "sidebar">
<div class = "topsidebar">
<h2 class = "content">MESSAGE BOARD</h2>
</div><!---end of topbar--->
<div class = "round">
<div class = "rndbox">
<div class = "box">
<div class = "trndbar">
<h3 class = "content">ONLINE</h3>
</div><!---end of trndbar--->
<div id="slideshowWrapper">
<ul id="slideshow">
<li><img src="images/7.jpg" width="244" height="181" border="0" alt="" /></li><!-- This is the last image in the slideshow -->
<li><img src="images/6.jpg" width="244" height="181" border="0" alt="" /></li>
<li><img src="images/5.jpg" width="244" height="181" border="0" alt="" /></li>
<li><img src="images/4.jpg" width="244" height="181" border="0" alt="" /></li>
<li><img src="images/3.jpg" width="244" height="181" border="0" alt="" /></li>
<li><img src="images/2.jpg" width="244" height="181" border="0" alt="" /></li>
<li><img src="images/1.jpg" width="244" height="181" border="0" alt="" /></li> <!-- This is the first image in the slideshow -->
</ul><br clear="all" />
</div><!---end of slideshowwrapper--->
</div><!---end of box--->
</div><!---end of rndbox--->
</div><!---end of round--->
</div><!---end of sidebar--->
</div><!---end of wrapper--->
<div id = "footer"
</div>
</body>
</html>
Dandello
8
Posting Whiz in Training
Well, first - unless things have changed with the newest release of IE, it doesn't support CSS defined rounded corners.
As for the png issue, I see these are all backgrounds - what happens if you convert them to jpegs?
And lastly, does the CSS and html validate?
androidz
-2
Junior Poster in Training
how can i validate them?ok i will try to change them into jpeg
Dandello
8
Posting Whiz in Training
Go to http://validator.w3.org/ Fix any errors. Make sure all the links inside your css file are valid.
androidz
-2
Junior Poster in Training
i have validated my codes but they will erase all the -moz in my css codes.and the other thing i already use jpg on my background but still it doesn't work on ie
Dandello
8
Posting Whiz in Training
Okay - now you know where the errors are in the html and those have been fixed. Now those rounded corners created by the -moz just don't work in IE. They just don't.
I assume all those backgrounds work under Firefox and Chrome?
What happens (aside from square corners) in IE when you use a CSS sheet that doesn't have the rounded corner code in it?
Be a part of the DaniWeb community
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.