Jump to content

Cross Browser Help

jonathanellis

By jonathanellis
in CSS Help

 Share

Recommended Posts

jonathanellis Newbie

jonathanellis

Posted
Posted

Hello:

 

I am having a problem with a web site that i built not showing up properly in IE6. I haven't tested it in IE7, but I have tested it in Firefox and Safari. Both Firefox and Safari show the website perfectly. Can anyone help with this? I have attached the source code for the index.html file and the style.css file. In addition to the script, I also have this uploaded to my server. It can be found at: http://www.versionthree.ca/staging/incomesupport07

 

Thanks!

 

index.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=iso-8859-1" />
<title>Income Support Class Action</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="home">
  <div id="header">
  	<img src="images/bgTop.jpg" alt="" width="808" height="33" border="0" class="bgTop" />
    <img src="images/header.jpg" alt="Income Support Class Action Header" width="778" height="151" border="0" class="header" />
    <ul>
      <li><a href="#">Home   <span style="color:#5A5A5A;">|</span></a></li>
      <li><a href="#">Button 1   <span style="color:#5A5A5A;">|</span></a></li>
      <li><a href="#">Button 2   <span style="color:#5A5A5A;">|</span></a></li>
      <li><a href="#">Button 3   <span style="color:#5A5A5A;">|</span></a></li>
      <li><a href="#">Button 4</a></li>
    </ul>
  </div>
  <div id="threeColumns">
    <div id="columnLeft">
      <h2>platea dictumst</h2>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been <span>the industry's standard dummy text ever since the 1500s,</span> when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin eleifend, eros pulvinar ultricies bibendum, diam quam vehicula risus, ut hendrerit risus nisi vel leo. Ut consectetuer mollis enim. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque dapibus cursus ante. Nullam imperdiet bibendum est. Cras nec lacus a orci laoreet volutpat. Phasellus pharetra. Nam non lacus.</p>
      <p>Donec cursus, odio at aliquam condimentum, elit tortor pretium nulla, eget rutrum sapien elit a tellus. Sed ligula augue, molestie vestibulum, lobortis et, luctus at, massa. Morbi orci arcu, ultrices vel, scelerisque vitae, eleifend eget, augue. Donec nec urna. Pellentesque eget tellus.</p>
      <p class="more"><a href="#">more</a></p>
    </div>
    <div id="columnRight">
      <h2>phasellus viverra nisl</h2>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been <span>the industry's standard dummy text ever since the 1500s,</span> when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
      <p><span>Lorem ipsum</span> dolor sit amet, consectetuer adipiscing elit. Proin eleifend, eros pulvinar ultricies bibendum, diam quam vehicula risus, ut hendrerit risus nisi vel leo. Ut consectetuer mollis enim. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque dapibus cursus ante. Nullam imperdiet bibendum est. Cras nec lacus a orci laoreet volutpat. Phasellus pharetra. Nam non lacus.</p>
      <p>Donec cursus, odio at aliquam condimentum, elit tortor pretium nulla, eget rutrum sapien elit a tellus. Sed ligula augue, molestie vestibulum, lobortis et, luctus at, massa. Morbi orci arcu, ultrices vel, scelerisque vitae, eleifend eget, augue. Donec nec urna. Pellentesque eget tellus.</p>
      <p class="more"><a href="#">more</a></p>
    </div>
    <div id="columnMiddle">
      <h2>faucibus arcu risus</h2>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been <span>the industry's standard dummy text ever since the 1500s,</span> when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
      <p><span>Lorem ipsum</span> dolor sit amet, consectetuer adipiscing elit. Proin eleifend, eros pulvinar ultricies bibendum, diam quam vehicula risus, ut hendrerit risus nisi vel leo. Ut consectetuer mollis enim. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque dapibus cursus ante. Nullam imperdiet bibendum est. Cras nec lacus a orci laoreet volutpat. Phasellus pharetra. Nam non lacus.</p>
      <p>Donec cursus, odio at aliquam condimentum, elit tortor pretium nulla, eget rutrum sapien elit a tellus. Sed ligula augue, molestie vestibulum, lobortis et, luctus at, massa. Morbi orci arcu, ultrices vel, scelerisque vitae, eleifend eget, augue. Donec nec urna. Pellentesque eget tellus.</p>
      <p class="more"><a href="#">more</a></p>
    </div>
  </div>
  <img src="images/bgBottom.jpg" alt="" width="808" height="33" border="0" class="bgBottom" />
</div>
<div id="footer">
  <div id="footerSubNav">
    <ul>
      <li><a href="#">Home</a>|</li>
      <li><a href="#">Button 1</a>|</li>
      <li><a href="#">Button 2</a>|</li>
      <li><a href="#">Button 3</a>|</li>
      <li><a href="#">Button 4</a></li>
    </ul>
    <ul class="info">
      <li class="address">#55 Death Row<br />
        Edmonton, AB<br />
        CANADA</li>
      <li class="phone"><span>PH: </span><br />
        555-555-5555 <br />
        555-555-5555</li>
      <li class="fax"><span>FAX:</span> <br />
        555-555-5555 <br />
        555-555-5555</li>
    </ul>
  </div>
</div>
</body>
</html>

 

style.css

/* CSS Document */
body{padding:0px; margin:17px 0 0; color:#5b5e65; font:14px/18px Arial, Helvetica, sans-serif; background-color:#00294A;}
div, p, ul, li, h1, h2, h3, h4{padding:0px; margin:0px;}
ul{list-style-type:none;}

/*---CONTENT WRAPPER*/
#home{width:808px; position:relative; margin:0 auto; background:url(images/bgVertical.jpg) repeat-y #FFF; padding:0 0 20px 0;}
#home img.bgBottom{width:808px; height:33px; position:relative; bottom:-30px; margin:0 auto; background:url(images/bgBottom.jpg) no-repeat #FFF; z-index:0;}

/*---NAV + LOGO + HEADER IMAGE---*/
#header{width:808px; height:300px; position:relative; margin:0 auto;} 
#header img.bgTop{width:808px; height:33px; position:absolute; background:url(images/bgTop.jpg) 0 0 no-repeat #FFF; top:0px; left:0px;}
#header img.logo{width:230px; height:44px; position:absolute; top:48px; left:26px;}
#header img.header{width:778px; height:151px; display:block; background:url(images/header.jpg) 0 0 no-repeat #FFF; color:#fff; position:relative; top:84px; margin: 0 auto;}

#header ul{width:430px; height:16px; display:block; position:absolute; top:44px; right:10px;}
#header ul li{height:16px; float:left; padding:0 0 0 10px;}
#header ul li a{height:16px; display:block; background:url(images/navIcon.gif) 0px 3px no-repeat #fff; color:#5A5A5A; font-size:13px; text-decoration:none; padding:0 0 0 12px;}
#header ul li a:hover{background:url(images/navIcon_over.gif) 0px 3px no-repeat #fff; color:#DB7C02; text-decoration:none;}

/*---/NAV + LOGO + HEADER IMAGE---*/

/*---THREE COLUMNS---*/
#threeColumns{width:760px; height:auto; position:relative; margin:0 auto;}
#columnLeft h2, #columnMiddle h2, #columnRight h2{width:230px; height:25px; display:block; position:relative; top:-20px; left:0px; background:#fff; color:#db7c02; font:22px/25px Georgia, "Times New Roman", Times, serif; text-transform:capitalize;}

#columnLeft{width:30%; height:auto; float:left;}
#columnMiddle{width:30%; height:auto; margin:0 35% 0 35%;}
#columnRight{width:30%; height:auto; float:right;}
#columnLeft p, #columnMiddle p, #columnRight p{padding:15px 0; text-align:justify;}
#columnLeft p span, #columnMiddle p span, #columnRight p span{font-weight:bold;}
#columnLeft p.more, #columnMiddle p.more, #columnRight p.more{z-index:1000; width:73px; height:26px; background:url(images/morebg.gif) 0 0 no-repeat; position:relative; bottom:0px; left:70%; padding:0px;}
#columnLeft p.more a, #columnMiddle p.more a, #columnRight p.more a{display:block; width:48px; height:20px; background: url(images/arrow1.gif) 100% 50% no-repeat #fff; color:#DB7C02; font-size:13px; font-weight:bold; text-decoration:none; margin:3px 0 0 12px;}
#columnLeft p.more a:hover, #columnMiddle p.more a:hover, #columnRight p.more a:hover{background: url(images/arrow2.gif) 100% 50% no-repeat #fff; color:#00487b; text-decoration:none;}
/*---/THREE COLUMNS---*/

/*---FOOTER PANEL---*/
#footer{height:110px; background-color:#00294A; clear:both; margin:30px 0 0 0;}

#footerSubNav{width:400px; height:100px; display:block; position:relative; margin:0 auto; color:#969BA1; font-family:Tahoma,Arial, Helvetica, sans-serif;}
#footerSubNav p{padding:2px 0 0;}
#footerSubNav p span{background:#1C1B19; color:#AC2626; font-size:10px;}

#footerSubNav ul{width:424px; display:block; position:absolute; left:20px; top:-12px; padding:0; }
#footerSubNav li{float:left; font:13px/18px Arial, Helvetica, sans-serif; font-weight:normal;}
#footerSubNav ul li a{padding:0 12px 0 12px; color:#969BA1; text-decoration:none;}
#footerSubNav ul li a:hover{text-decoration:underline; color:#DB7C02;}
#footerSubNav ul.info{width:424px; height:45px; display:block; position:absolute; left:20px; top:26px; padding:0;}
#footerSubNav ul.info li{display:block; width:109px;}
#footerSubNav ul.info li.address{width:150px; font-size:10px; font-family:Tahoma,Arial, Helvetica, sans-serif;  font-weight:bold; padding:0 0 0 12px;}
#footerSubNav ul.info li.phone{width:80px; font-family:Tahoma,Arial, Helvetica, sans-serif; font-size:10px; padding:0 0 0 25px; font-weight:bold;}
#footerSubNav ul.info li.fax{width:80px; font-size:10px; padding:0 0 0 15px; font-family:Tahoma,Arial, Helvetica, sans-serif; font-weight:bold;}
#footerSubNav ul li span{ font-size:10px; font-weight:bold; line-height:18px;}
/*---/FOOTER PANEL---*/

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.