IE fixes for beginner css

[bwaydba]

I looked for similar topics but didn't find what I was looking for. I'm new to css and have been using a lot of different sources/books to complete my first design/coding project. I would appreciate any feedback on this.

I have a few problems. When I view my page in FF (where I did all the development) everything looks perfectly like I want it. Then I go to IE and it's all messed up.
1) The header block is much taller than I intended for it to be in IE. The navigation should be resting on the bottom of the header block like it does in IE. Not sure what I'm doing there to cause that.

2) I'm using Rachel Andrew's method I found on the sitepoint site as well as in her book. The book gives a disclaimer that it won't work in IE. I've seen other sites that are using pure CSS to do it and am trying to figure out how they do it. Any thoughts as to why it doesn't work and what I can change to get it working?

3) My graphics like the logo at the bottom as well as the arrow that appears next to the navigation have a white background in IE where it should be transparent. Why?

Any help would be appreciated.

I've attached the css and html pages with .txt extensions. Is that what most people do?

[ShaneRiley]

Hello bwaydba, welcome to the forums! First off, could you post a link to a live version of your example or copy/paste the html and css in this post? This way you don't have to wait for the moderators to approve the attachments. Second, concerning the images, are you using transparent PNGs and viewing the site in IE6? IE6 does not natively support transparent PNGs, and requires adding alpha transparency to simulate the transparency.

[bwaydba]

Thanks for the help. Here's my css code:

body {
   background-color: #6D9199;
   text-align: center;
   min-width: 702px;
}
p {
   font-family: Atlanta, Verdana, sans-serif;
   color: #CCFFFF;
}
h1 {
   font-family: Papyrus, fantasy;
   font-size: 2.5em;
   color: #CCFFFF;
   margin-left: 8px;
   background-color: transparent;
}
h2 {
   font-family: Papyrus, fantasy;
   color: #CCFFFF;
   font-size: 125%;
}
h2 a {
   text-decoration: none;
   color: #CCFFFF;
}
#page {
   position: relative;
   margin: 0 auto;
   text-align: left;
   width: 702px;
   height: 615px;
   background-color: #6D9199;
   background-image: url(images/bg_grad1.png);
   background-repeat: repeat-x;
}
#header {
   position: relative;
   top: 0;
   left: 0;
   background-color: #000000;
   margin-right: 8px;
   margin-left: 8px;
   margin-bottom: 0px;
   width: 686px;
   height: 75px;
}
#header h1 {
   position: relative;
   /*top: -30px;*/
}
#navigation {
   background-color: transparent;
   position: absolute;
   top: 45px;
   right: 8px;
   font-family: Verdana, sans-serif;
   font-size: 84%;
   color: #FF6DFF;
}
#navigation, #navigation ul {
   list-style: none;
}
#navigation li {
   float: left;
}
#navigation a:link, #navigation a:visited {
   display: block;
   text-decoration: none;
   color: #FF6DFF;
}
#navigation a:hover {
   /*width: 100%; causes links to move around*/
   /*background-color: #CCFFFF;*/
   background-image: url(images/tri_right_pink.png);
   background-repeat: no-repeat;
   background-position: left;
   padding-left: 10px;
}
#navigation ul {
   display: none;
   position: absolute;
   padding: 0;
}
#navigation ul li {
   float: none;
   padding-left: 1em;
   width: 9em;
   background-color: #000000;
}
#navigation li:hover ul {
   display: block;
   z-index: 10;
}
#navigation ul li a:hover {
   padding-left: 15px;
   border-top: solid #FF6DFF 1px;
   border-bottom: solid #FF6DFF 1px;
}
#collage {
   position: absolute;
   top: 85px;
   left: 0;
   margin-left: 8px;
}
#welcome {
   position: absolute;
   top: 274px;
   left: 0;
   margin-left: 8px;
   width: 392px;
   height: 306px;
   background-color: #000000;
}
#welcome h2 {
   text-indent: .5em;
   margin-bottom: 4px;
}
#welcome p {
   margin-left: 8px;
   margin-right: 8px;
   margin-top: 2px;
   margin-bottom: 2px;
   text-indent: 2em;
   line-height: 1.04em;
   letter-spacing: 0.04em;
   font-size: 98%;
}
#column2 {
   position: absolute;
   top: 274px;
   left: 400px;
   margin-left: 6px;
   width: 154px;
   height: 306px;
   background-color: #000000;
}
#column2 h2 {
   text-align: center;
   margin-bottom: 5px;
   line-height: 1em;
}
#column2 p {
   margin-left: 8px;
   margin-right: 8px;
   margin-top: 2px;
   margin-bottom: 2px;
   line-height: 1em;
   letter-spacing: 0.04em;
   font-size: 94%;
   word-spacing: -0.1em;
}
#column2 img {
   float: left;
   margin: 2px 2px 0px 6px;
}
#column3 {
   position: absolute;
   top: 80px;
   left: 565px;
   width: 129px;
   height: 500px;
   background-color: #000000;
   text-align: center;
}
#column3 h2 {
   margin-bottom: 1px;
   margin-top: 5px;
   line-height: 1em;
   letter-spacing: -0.02em;
}
#column3 p {
   margin-left: 4px;
   margin-right: 4px;
   margin-top: 0px;
   margin-bottom: 0px;
   text-align: left;
   line-height: .85em;
   letter-spacing: 0.04em;
   font-size: 85%;
   word-spacing: -0.1em;
}
#column3 .info, #column3 .info a{
   text-align: right;
   font-size: 85%;
   margin-top: 2px;
}
#column3 .info a {
   text-decoration: none;
   color: #CCFFFF;
}
#column3 .info a img {
   border: none;
   margin-left: 4px;
   vertical-align: bottom;
}
#column3 .displaypic {
   margin-top: 4px;
   margin-bottom: 0px;
}
#footer {
   position: absolute;
   top: 590px;
   left: 0;
   margin-right: 8px;
   margin-left: 8px;
   width: 686px;
   height: 40px;
   background-color: #000000;
   
}
#footer .sbimage {
   margin: 2px 6px;
   float: left;
}
#footer .sbtext {
   float: left;
   margin-top: 7px;
   width: 18em;
   font-size: 78%;
   letter-spacing: 0.05em;
   line-height: 0.9em;
}
#footer .copyright {
   margin-top: 18px;
   margin-right: 8px;
   float: right;
   font-size: 75%;
   letter-spacing: 0.01em;
}

Here's the html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/shtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
        <title>Carol's Daylily Gardens</title>
    <meta http-equiv="Content-Type"
        content="text/html; charset=iso-8859-1" />
    <link href="sarginger.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div id="page">
      <div id="header">
        <span id="headcontent"><h1>Carol's Daylily Gardens</h1>
        <ul id="navigation">
          <li><a href="">About Us |</a></li>
          <li><a href="">&nbsp;Introductions |</a>
            <ul>
              <li><a href="">Most Recent</a></li>
              <li><a href="">Spring 2008</a></li>
              <li><a href="">Fall 2007</a></li>
              <li><a href="">All</a></li>
            </ul>
          </li>
          <li><a href="">&nbsp;Price List |</a>
            <ul>
              <li><a href="">Daylilies A-F</a></li>
              <li><a href="">Daylilies G-R</a></li>
              <li><a href="">Daylilies S-Z</a></li>
            </ul>
          </li>
          <li><a href="">&nbsp;Gallery |</a>
            <ul>
              <li><a href="">Daylilies A-F</a></li>
              <li><a href="">Daylilies G-R</a></li>
              <li><a href="">Daylilies S-Z</a></li>
              <li><a href="">Carol's Gardens</a></li>
              <li><a href="">Miscellaneous</a></li>
            </ul>
          </li>
          <li><a href="">&nbsp;Contact Us</a></li>
        </ul> <!-- navigation -->
        </span> <!-- headcontent -->
      </div> <!-- header -->

      <div id="collage">
         <img src="images/slices2.png" alt="Collage of daylilies available from 
         Carol's Daylily Gardens." height="181px" width="551px" />
      </div> <!-- collage -->
      <div id="welcome">
        <h2>Welcome to Carol's Daylily Gardens!</h2>
        <p>Carol’s is nestled among Virginia’s Blue Ridge Mountains, in 
           Ruckersville. Surrounded by natural beauty, this two acre treasure
           beckons visitors to discover all its delights.</p>
        <p>Pools of sunlight shine through the many mature oaks that offer
           welcoming shade. The 6000 gallon pond surrounded by miniature 
           hosta and a G-gauge railroad is breathtaking.</p>
        <p>Be sure to wander through Carol’s three seedling beds where her 
           hybridizing creations are grown. She focuses on big round and 
           ruffled, teeth and exotic edges and doubles.</p>
      </div> <!-- welcome -->
      <div id="column2">
        <h2><a href="">Fall Clearance Sale!</a></h2>
        <p>Over 50% off Eureka prices on select items.</p>
        <img src="images/TarAndFeathers.jpg" alt="Tar and Feather, on sale now at Carol's." height="58px" width="73px" />
        <p>See pricelist for updated sale prices. Place  your order 
           before 9/28/07 and receive 25% off US shipping. Fall or spring
           shipping available.</p>
      </div> <!-- column2 -->
      <div id="column3">
        <h2 class="introheader"><a href="">Carol's Spring 2008 Introductions</a></h2>
        <img src="images/CanadianBorderPatrol.jpg" alt"Canadian Border Patrol, on sale now at Carol's." height="70px" width="72px" />
        <p class="introname">Moonlit Masquerade</p>
        <p class="info"><a href="">info ...<img src="images/more-bullet2.png" alt="button link to more information" height="12px" width="12px" /></a></p>
        <img class="displaypic" src="images/StargatePortal.jpg" alt"Stargate Portal, on sale now at Carol's." height="63px" width="83px" />
        <p>Stargate Portal</p>
        <p class="info"><a href="">info ...<img src="images/more-bullet2.png" alt="button link to more information" height="12px" width="12px" /></a></p>
        <img class="displaypic" src="images/Seedling.jpg" alt"Lavender Watusi, on sale now at Carol's." height="66px" width="88px" />
        <p>Lavender Watusi</p>
        <p class="info"><a href="">info ...<img src="images/more-bullet2.png" alt="button link to more information" height="12px" width="12px" /></a></p>
        <img class="displaypic" src="images/MarginOfError.jpg" alt"Margin of Error, on sale now at Carol's." height="73px" width="72px" />
        <p>Margin of Error</p>
        <p class="info"><a href="">info ...<img src="images/more-bullet2.png" alt="button link to more information" height="12px" width="12px" /></a></p>
      </div> <!-- column3 -->
      <div id="footer">
          <img class="sbimage" src="images/SB_final_logo_white.png" alt="Silverbrooke Designs, LLC. logo" height="35px" width="173px" />
          <p class="sbtext">Site design, production and hosting by Silverbrooke Designs, LLC.</p>
          <p class="copyright">Copyright &copy; 2007. All Rights Reserved.</p>
      </div> <!-- footer -->
    </div> <!-- page -->
  </body>
</html>

I am using transparent .png files. How do I do alpha transparency? Or should I use another file type?

[Paul O'B]

Hi,

You need to control the default padding and margins for the elements you use as this varies between browsers.

[
#header h1 { margin:0}
#navigation{
    padding:10px 0 0 0;
    margin:0;
}

IE6 doesn't understand alpha transparency in pngs and the only solutions involve using the proprietary alpha image loader filter.

http://www.daltonlp.com/view/217
http://www.twinhelix.com/css/iepngfix/

[bwaydba]

Wow, thank you so much for pointing out the obvious. I've seen where some people use a clear.css to do the initial setup like this and then load their css after that.

My next question would be when do I need to do this? What type of elements do I need to put that in on so I don't spend hours searching and racking my brain next time?

Thank you again!

[Paul O'B]

My next question would be when do I need to do this?

Basically on all the elements you use. Especially block elements such as p,ul,form,dl,h1,hn....,

You can use the global reset instead :

* {margin:0;padding:0}

But that has issues with form controls so you could use a reset CSS such as this.

You never know what the browser has applied by default so you must take control.