Hi everyone!

 

 

Had some problems with my site with IE6, normally I wouldn't care but the people I need to show it to use IE6 as they part of an evil corporation.

 

After some searching and kind help from the great people here I've discovered it is partly to do with IE not liking all my transparent .png files.

 

I've had a look at a JavaScript, and changing to .gifs so far. I am unsure how I can produce the multi colour background for the logo.png main file (the waving bird logo) as a .gif and ahve it all line up.

 

It's based on a template that has been played with using Dreamweaver, I know I know, this is the second site I have thrown together since I was 14 making a I love Jennifer Aniston page!

 

Here is the pic of the layout:

 

The train wreck

 

The 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="assets/style.css" type="text/css" media="all"  />
<title>Free Soft Skills and Advice for New Graduates - Business Bird</title>
<meta name="Description" content="New to business job? A gradautes guide to learning business soft skills such as giving presentations, creating rapport, understanding a business and much more" />
<link rel="shortcut icon" href="http://www.businessbird.co.uk/favicon.ico" type="image/vnd.microsoft.icon" /> 
<link rel="icon" href="http://www.businessbird.co.uk/favicon.ico" type="image/vnd.microsoft.icon" /> 
</head>
<body>
<div id="topbg">
 <div id="wrap">
   <div id="header">
     <div id="header-wrap">
     <h1 id="blogtitle">Business Bird</h1>
     <div id="banner"><span><a href="submit.html"><img src="assets/banner.png" alt="banner" /></a></span></div>
     <div id="divBr"></div>
     </div>
     <div id="tagline"><em>Your guide on <strong>how to start and survive in business..</strong></em></div>
    <form class="search" method="get" action="http://www.businessbird.co.uk/search.php">
       <p>
         <input class="textbox" type="text" name="zoom_query" value="Search" onfocus="if (this.value == 'Search') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search';}" />
         <input class="button" type="submit" name="Submit" value="" />
       </p>
     </form>
     <a href="database.html"><div id="userpic"></div></a>
     <div id="userpic2"></div>
     <div id="welcome"><strong>Business Bird</strong> is a<em> <strong>free</strong></em> community based resource that aims to bring together a set of   experience   based tips for those new to the business world!</div>
   </div>
   <div id="content-wrap-top">
     <div id="nav">
       <div id="nbar">
         <ul>
           <li id="selected"><a href="index.html">Home</a></li>
           <li><a href="database.html">Pick a Topic</a></li>
           <li></li>
           <li></li>
           <li><a href="submit.html">Submit your Tip!</a></li>
           <li><a href="about.html">About Us</a></li>
         </ul>
       </div>
       <div id="apDiv2"><a href="#" onmousedown="addBookmark('Business Bird','http://www.businessbird.co.uk/')" onmouseover="return overlib('Bookmark us.')" onmouseout="return  overlib('www.businessbird.co.uk',DELAY, 1000);"><img  src="assets/pin.png" alt="Bookmark" width="23" height="24" />Bookmark  </a>
<script type="text/javascript" src="http://w.sharethis.com/button/sharethis.js#publisher=496afb48-ba4b-464d-8174-29ddda56c034&type=website"></script>
<a href="javascript:void(0);" onclick="window.open('http://www.supergreenhosting.com/ecertified?domain='+document.domain+'','SuperGreenHosting','toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=0,width=570,height=680,left=300,top=200');"></a>	  </div>
     </div>
   </div>
   <div id="wrap2">
     <div id="content-wrap">
       <div id="sidebar">
         <div class="sidetop"></div>
         <div class="widgetspace">
           <h1>Skills  Quick Links</h1>
           <ul class="menu">
             <li><a href="database.html">Database Index</a></li>
             <li>
               <div align="left"><a href="understanding.html">Understanding a Business</a></div>
             </li>
             <li><a href="rapport.html">Creating 'Rapport'</a></li>
             <li><a href="presentation.html">Presentation Skills</a></li>
             <li><a href="project.html">Project Management</a></li>
             <li><a href="report.html">Writing a Report</a></li>
             <li>
               <div align="left"><a href="time.html">Managing Time</a></div>
             </li>
             <li>
               <div align="left"><a href="stress.html">Managing Stress</a></div>
             </li>
             <li><a href="outlook.html">Making Outlook Work For You</a></li>
             <li>
               <div align="left"><a href="socialmedia.html">Social Media in Business</a></div>
             </li>
             <li>
               <div align="left"><a href="submit.html">Submit or suggest an article!</a></div>
             </li>
           </ul>
         </div>
         <div class="sidebot"></div>
         <div class="sidetop"></div>
         <div class="widgetspace">
           <h1>Useful Resources</h1>
           <ul class="menu">
             <li><a href="http://www.ft.com/home/uk">Financial Times</a></li>
             <li><a href="http://www.businesslink.gov.uk">Business Link</a></li>
             <li>
               <div align="left"><a href="http://business.timesonline.co.uk/tol/business/">The Times Business Page</a></div>
             </li>
             <li><a href="http://www.oanda.com/">Oanda</a></li>
             <li><a href="http://www.timeanddate.com/date/duration.html">Useful Day Counter</a></li>
             <li><a href="http://www.hmrc.gov.uk/index.htm">HMRC Website</a></li>
             <li>
               <div align="left"><a href="disclaimer.html">Our Disclaimer</a></div>
             </li>
           </ul>
         </div>
         <div class="sidebot"></div>
         <div class="sidetop"></div>
         <div class="widgetspace">
           <h1><strong>Motivational Quotes</strong></h1>
           <p>"<em>Success                             in life, in anything, depends upon the number of persons that one can make himself agreeable to.</em>"<br />
           -Thomas Carlyle</p>
</div>
         <div class="sidebot"></div>
<div class="sidetop"></div>
         <div class="widgetspace">
           <h1>Doing our bit</h1>
           <br><center><p><a href="javascript:void(0);" onclick="window.open('http://www.supergreenhosting.com/ecertified?domain='+document.domain+'','SuperGreenHosting','toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=0,width=570,height=680,left=300,top=200');"><img src="http://jdimg.com/supergreen/greenbadges/badge4.gif" alt="Green Web Hosting" style="border:0px;" /></a></p></center>
</div>
         <div class="sidebot"></div>
       </div>
       <div id="content">
         <h1>Welcome to Business Bird!</h1>
         <p><strong>Let's get going</strong></p>
         <p> </p>
         <blockquote>
           <p><a href="database.html"><img src="assets/1b.gif" width="170" height="140" alt="Pick" /></a><a href="database.html"><img src="assets/2b.gif" width="170" height="140" alt="Read" /></a><a href="submit.html"><img src="assets/3b.gif" width="170" height="140" alt="Submit" /></a></p>
         </blockquote>
<div align="center"></div>
         <h1>Your Guide to Starting and Surviving in Business..          </h1>
         <p> </p>
         <table width="624" border="0">
           <tr>
             <td width="63" height="259"> </td>
             <td width="503"><p>Hi there</p>
               <p> </p>
               <p>Why not  browse some of the tips in our <a href="Database.html">Skills Database</a>? Our aim is to help everyone pick up those tricky business skills that can prove so elusive.</p>
               <p>If you have an idea or experience you would like to share with Business Bird, simply complete the quick form at the '<a href="submit.html">Submit your Tip</a>' link and we will be in your debt!</p>
               <p> We are very interested on how you have dealt with client situations, any general advice you can give- and of course pitfalls to avoid!</p>
             <p></p></td>
             <td width="44"> </td>
           </tr>
 <tr>
   <td height="61"> </td>
   <td>kind regards and best of luck,</td>
   <td> </td>
 </tr>
 </table>
         <table width="623" border="0">
           <tr>
             <td width="50" height="62"> </td>
             <td width="563"><img src="assets/oee.jpg" alt="bird is the word" /></td>
           </tr>
         </table>
         <p> </p>
         <p> </p>
         <p> </p>
         <p> </p>
         <p> </p>
       </div>
     </div>
   </div>
   <!-- End Wrap2 -->
   <div id="content-wrap-bottom"><br />
     <br />
     <div id="navdeck">
       <div class="old"><A HREF="javascript:history.go(-1)">Previous</a></div>
       <div class="home"><a href="index.html">            </a></div>
       <div class="new"><a href="#">Next</a></div>
     </div>
   </div>
   <div id="footer"> © 2009<strong> Business Soft</strong>| Valid <a href="http://validator.w3.org/check?uri=referer">XHTML</a> | <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> | Design by: <a href="http://www.themebin.com/">ThemeBin</a>
     <!-- Please Do Not remove this link, thank u -->
         <a href="#">Home</a> | <a href="database.html">Business Skills Database</a>| <a href="disclaimer.html">Disclaimer (Please read)</a></div>
 </div>
 <!-- End Wrap -->
</div>
<!-- End Top BG -->
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));

</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-11802600-1");
pageTracker._trackPageview();
} catch(err) {}</script></body>
</html>

 

 

The .css

 

@charset "utf-8";
/*-------------------------------------------------------------*/
/* CSS Document                                                */
/* Template Name: High5		                               */
/* Designed By: Santhosh                                       */
/* Homepage: www.themebin.com                                  */
/*-------------------------------------------------------------*/

body {
font: 75%/150% Verdana, Arial, Helvetica, sans-serif; 
background: url(body.png);
text-align: justify;
margin: 0;
}

#topbg {
background: url(topbg.png) repeat-x;
}

#wrap {
width: 1000px;
margin: 0 auto;
}

#header {
height: 162px;
}

a, a:visited {
color: #003366;
}

a:hover {
color: #336699;
text-decoration: none;
font-size: larger;
font-family: Verdana, Arial, Helvetica, sans-serif;
}

h1 {
font-size: 31px;
font-weight: bold;
}

h2 {
color: #336699;
font-size: 16px;
background: url(h2.png) no-repeat;
padding-left: 26px;
height: 26px;
padding-top: 3px;
}

h3 {
color: #000066;
font-size: 12px;
background: url(write.png) no-repeat;
padding-left: 17px;
}

#blogtitle {
color: #EFEFEF;
margin: 0;
padding: 20px 0 0 50px;
float: left;
padding-top: 30px;
}

#tagline {
color: #fff;
padding: 12px 0 0 50px;
}


#wrap2 {
background: url(wrap.png) center repeat-y;
margin: 0;
}

#welcome {
height: 90px;
width: 635px;
padding-left: 20px;
color: #000;
margin-top: 28px;
font-size: 11px;
}
#bubble {
width: 75px;
height: 75px;
margin-left: 50px;
margin-right: 05px;
margin-top: 10px;
float: left; 
}
#userpic {
width: 75px;
height: 75px;
margin-left: 50px;
margin-right: 10px;
margin-top: 15px;
float: left;
background: url(user_pic.png) no-repeat; 
}

/* Search */ 

form.search {
position: relative;
background: url(searchbg.png) center no-repeat;
width: 264px;
border: none;
float: right;
margin-top: 16px;
margin-right: 30px;
height: 74px;
}

form.search input.textbox {
margin: 0;
padding: 15px 2px;
padding-left: 30px;
width: 160px;
background: none;
border: none;
color: #fff;
}

form.search input.button {
background : url(search-button.png) no-repeat;
color: #333;
border: none;
width: 25px;
height: 20px;
cursor: pointer;
margin-left: 15px;
}


/* Nav */

#nav {
padding-top: 10px;
background: none;
height : 25px;
position: relative;
margin-left: 40px;
width: 865px;
}

#nbar a {
font-weight: normal;
}

#nbar {
position: relative;
width: auto;
height: 24px;
margin: 0;
padding : 0 0 0 0;
font: 12px/25px Verdana, Arial, Tahoma, Sans-serif;
visibility: visible;
}

#nbar ul {
float: left;
list-style : none;
margin: 0;
padding: 0;
}

#nbar ul li {
display: inline;
}

#nbar ul li a {
display: block;
float: left;
padding: 0 10px;
color: #222;
text-decoration: none;
border: solid 1px #E7E7E7;
background: url(gradbot.gif) bottom repeat-x;
margin-left: 5px;
}

#nbar ul li a:hover {
color: #000;
background: url(gradtop.gif) top repeat-x;	
}

#nbar ul li#selected a {
color: #000000;
background: url(gradtop.gif) top repeat-x;
font-weight: bold;
}


/* Content */

#content-wrap {
padding: 0 40px 10px 50px;
}

#content-wrap-top {
background: url(nav.png) center no-repeat;
height: 63px;
/*width: 900px;*/
}

#content-wrap-bottom {
background: url(content-bottom.png) center no-repeat;
height: 121px;
}

#content {
width: 645px;
padding: 5px 5px 5px 5px;
font-size: 14px;
}

#content h1 {
color: #336699;
font-size: 18px;
background: url(h1.png) no-repeat;
padding-left: 39px;
height: 36px;
border-bottom: dotted 1px #000066;
padding-top: 10px;
}

.post-footer {
background: url(post-footer.png) center no-repeat;
height: 35px;
font-size: 10px;
padding: 10px 10px 0 10px;
text-align: right;
}


.dated {
padding-top: 2px;
background: url(calendar.png) left no-repeat;
padding-left: 20px;
float: left;
}

.category {
background: url(category.png) left no-repeat;
padding-left: 20px;
margin-left: 10px;
float: left;
height: 16px;
}

.author {
padding-left: 20px;
padding-bottom: 5px;
background: url(user.png) no-repeat;
}

.more {
padding-right: 20px;
margin-left: 20px;
padding-bottom: 5px;
background: url(more.png) right no-repeat;
}

/* Images */

img {
border: none;
background: none;
}

img.float-right {
margin : 5px 0 10px 10px;
padding: 2px;
}

img.float-left {
margin : 5px 10px 10px 0;
padding: 2px;
}

/* Addition Stuffs */

blockquote {
background: #F8F8F8 url(quotebg.png) left repeat-y;
border: dotted 1px #D7D7D7;
padding: 5px 5px 5px 25px;
}

code {
margin : 4px 8px;
padding : 10px;
text-align : left;
display : block;
overflow : auto;
font : 500 1em/1.5em 'Lucida Console', 'courier new', monospace;
background: #F8F8F8 url(quotebg.png) left repeat-y;
border : 1px dashed #D7C3C3;
}

ul, ol {
margin: 5px 20px;
padding: 0 20px;
color: #333333;
}

ul span, ol span {
color: #333333;
}


/* Sidebar */

#sidebar {
width: 230px;
float: right;
margin-right: 2px;
padding: 5px 7px 5px 7px;
text-align: justify;
}

#sidebar a{
font-weight: normal;
}

#sidebar h1 {
color: #333;
font-size: 14px;
background: url(h2.png) no-repeat;
padding-left: 26px;
height: 24px;
padding-top: 3px;
border-bottom: dotted 1px #666;
}

#sidebar .widgetspace {
padding: 5px 5px 0 10px;
margin: 0px;
background: url(sbar.png) repeat-y;
padding-bottom: 28px;
}

.sidetop {
background: url(sbar-top.png) no-repeat;
height: 14px;
}

.sidebot {
background: url(sbar-bot.png) top no-repeat;
height: 20px;
}

#sidebar ul.menu {
list-style: none;
text-decoration: none;
margin : 3px 0 2px 0;
padding: 0;
}

#sidebar ul.menu li {
background: url(bullet.gif) no-repeat;
padding : 2px 0 0px 25px;
margin : 0 2px;
}

#sidebar ul.menu a {
text-decoration : none;
background-image : none;
}


#sidebar ul.menu a:hover {
padding-left: 2px;
}

/* Page Navigation */

#navdeck {
width: 235px;
margin: 0 auto;
height: 40px;
padding: 10px 20px 10px 20px; 
}

#navdeck a {
text-decoration: none;
}

.old {
width: 60px;
margin: 10px 0 20px 10px;
float: left;
background: url(prev.png) left no-repeat;
padding-left: 18px;
}

.new {
width: 45px;
float: right;
margin: 10px 20px 20px 0px;
background: url(next.png) right no-repeat;
}

.home {
width: 50px;
height: 24px;
float: left;
margin: 8px 0 20px 7px;
background: url(home.png) center no-repeat;
}



/* Forms and Text Fields */

form {
margin : 10px;
padding : 0 5px;
border: solid 1px #D7D7D7;
background: #F8F8F8 url(formbg.png) right repeat-y;
}

label {
display : block;
font-weight : bold;
margin : 5px 0;
color: #333333;
}

input {
padding : 2px;
border : 1px solid #C6D9E9;
font : normal 1em Verdana, sans-serif;
color : #000000;
background:#fff url(gradtop.gif) repeat-x top;
background-color : #ffffff;
}

textarea {
width : 400px;
padding : 2px;
font-family : Verdana, sans-serif;
border : 1px solid #C6D9E9;
background-color : #ffffff;
height : 100px;
display : block;
background:#fff url(gradtop.gif) repeat-x top;
color : #000;
}
#footer {
text-align: center;
font-size: 10px;
}

#footer a {
font-weight: normal;
}

.clearfix {
clear:both;
overflow: hidden;
}
a {
text-decoration: none;
}

#apDiv1 {
position:absolute;
width:315px;
height:34px;
z-index:1;
left: 551px;
top: 15px;
}
#apDiv2 {
float: right;
}
#banner {
float: right;
margin-right: 100px;
margin-top: 5px;
}
#divBr {
clear: both;
}

 

And finally the link!!! Business Bird

 

 

I would really appreciate your thoughts on this, I would like to go on writing more content!! I do hope that I am not duplicating my posts- I thought here would be more appropriate.

 

Best Wishes !!

 

Leon

Hi

We put this at the top of the css to cope with different browsers, don't know if it will help

 

/*
* Reset to known state - to make compatible
* across all browsers
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6,
p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td
{
 margin: 0;
 padding: 0;
 border: 0;
 outline: 0;
 font-size: 100%;
 vertical-align: baseline;
 background: transparent;
}

Have a look here for transparency fixes for IE6.

I generally use SuperSleight.

It's JavaScript based - but seriously, using IE6 AND having JavaScript off?!? Get the f*** off my site!

Have a look here for transparency fixes for IE6.

I generally use SuperSleight.

It's JavaScript based - but seriously, using IE6 AND having JavaScript off?!? Get the f*** off my site!

 

Cool, thanks for your comments. the .css fix doesn't seem to sort things I am afraid, the same with the (albeit cool) Js fix. I will check tomorrow if my work browsers support JavaScript...

 

Would it be difficult to sort things or better trying a new layout?

 

Dare I ask how much it would cost to put this right if I asked a nice person from this forum to help me out?

 

I know it seems insane but getting the site to work on the supported browsers is quite an important step in my view

 

Cool beans and keep on trucking

 

 

Leon

Try using a different stylesheet for ie6 then set your float elements to display: block; it might do something!

Try using a different stylesheet for ie6 then set your float elements to display: block; it might do something!

 

 

Cheers Lee!! I will investigate

sorry i meant display: inline

hmm still a bit mentalist, found out the js png fix helps some of the images on my work IE6 (but not all), a step forward!