Site looks fine in Firefox, but needs tweaking for IE 5 & 6. Please help!

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • angelina18
    New Member
    • Mar 2008
    • 7
    #1

    Site looks fine in Firefox, but needs tweaking for IE 5 & 6. Please help!

    Hi. This is my first post here and my first css site. I read alot of the previous posts and therefore I did validate my code, but I couldn't find the answers to my 2 problems which are:

    1. When I position the nav bar absolute, the top and bottom borders disappear in IE 5 & 6. So, I changed the position to relative and the borders reappear in IE, but the position needs to be moved up like 1/4 inch.

    2. The text in the footer is centered in FF and Safari, but it is aligned at the top of the box in IE6.

    I would greatly appreciate any advice or help that anyone can offer! I'm pulling my hair out over this site! Thanks.

    ••••••HTML••••• ••••••••
    [html]
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt d">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <title>Untitl ed Document</title>
    <link rel="stylesheet " type="text/css" href="styles.cs s"/>

    </head>

    <body>

    <div id="container" >

    <div id="top"><img src="images/logo_06.jpg" alt="nysamp logo"/></div>

    <div>
    <ul id="navlist">
    <li id="active"><a href="#" id="current">Ho me</a></li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Contac t Us</a></li>
    <li><a href="#">Traini ng</a></li>
    <li><a href="#">Resour ces</a></li>
    </ul>
    </div>

    <div id="leftnav">
    <ul>
    <li>
    <div align="center"> <a href="#">Straig ht Talk,<br />
    Fair Solutions</a></div>
    </li>
    <li>
    <div align="center"> </div>
    </li>
    <li>
    <div align="center"> <a href="#"><br />
    <br />
    What Can <br />
    Be Mediated?</a></div>
    </li>
    <li>
    <div align="center"> </div>
    </li>
    <li>
    <div align="center"> <a href="#"><br />
    <br />
    Success Stories</a></div>
    </li>
    <li>
    <div align="center"> </div>
    </li>
    <li>
    <div align="center"> <a href="#"><br />
    <br />
    When To <br />
    Recommend Us</a></div>
    </li>
    <li>
    <div align="center"> </div>
    </li>
    <li><br />
    <br />
    <div align="center"> <a href="#">Find Your Local <br />
    Mediation Center</a></div>
    </li>
    </ul>

    </div>

    <div id="content">
    <h3>Thank you for your interest in the New York State Agricultural Mediation Program (NYSAMP). </h3>
    <p>Agricultur al mediation is a tool for farmers and others in the agricultural community to communicate clearly, negotiate effectively, and to find fair and workable solutions. Decisions are made by the people directly involved, and not by
    mediators or other outside authorities. </p>

    <p>NYSAMP services are usually free and always affordable, thanks to the generous support of our funders and the dispute
    resolution community.</p>

    <p>Mediation is confidential and voluntary. Research shows that over 80% of mediation results in agreements; NYSAMP
    mediations have an even higher resolution rate. </p>


    <p>NYSAMP works with affiliated mediation offices to provide services for every county in New York. Trained and
    experienced NYSAMP mediators provide a powerful way to solve problems between parties, and to avoid the high costs of
    escalating conflict or litigation. </p>

    <p> <img class="imageflo at" src="images/barn_sm.jpg" alt="barn" width="175" height="135" border="0"/> </p>
    <p> <img class="imageflo at" src="images/cherry_blossom_ sm.jpg" alt="cherry blossoms" width="203" height="135" border="0"/> </p>

    <p>NYSAMP staff is available for consultation about specific situations that may benefit from mediation, and to provide
    additional information about referrals.</p>
    <p>In addition to mediation services, NYSAMP also provides training opportunities in communication skills, negotiation,
    conflict management, mediation and facilitation. </p>

    </div>

    <div>
    <br />
    </div>

    <div id="footer">

    <p>255 River Street&nbsp;&nb sp;&nbsp;:&nbsp ;&nbsp;&nbsp;&n bsp;Troy, New York&nbsp; 12180
    &nbsp;&nbsp;&nb sp;&nbsp;:&nbsp ;&nbsp;&nbsp;&n bsp;Phone. 518.687.2246&nb sp;&nbsp;&nbsp; &nbsp;:
    &nbsp;&nbsp;&nb sp;Toll Free. 866.669.7267&nb sp;&nbsp;&nbsp; &nbsp;:&nbsp;&n bsp;&nbsp;&nbsp ;Fax. 518.687.2245
    </p>
    </div>

    </div>
    </body>
    </html>
    [/html]
    ••••••••CSS•••• •••••••••••••
    [code=css]
    #container
    {
    width: 90%;
    margin: 10px auto;
    background-color: #fff;
    color: #333;
    border: 1px solid gray;
    line-height: 90%;
    padding: 0;
    }

    #top
    {
    padding-left: 1em;
    background-color: white;
    position: relative;
    z-index: 1;
    width: 675px;
    height: 152px;
    }

    #navlist
    {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 0.8em;
    padding-left: 155px;
    padding-bottom: 20px;
    text-transform: capitalize;
    z-index: 2;
    position: relative;
    margin: 0;
    }

    #navlist li { margin: 0 1.6em 0 1.6em; }

    #navlist ul
    {
    margin-left: 0;
    padding-left: 0;
    white-space: nowrap;
    }

    #navlist li
    {
    display: inline;
    list-style-type: none;
    }

    #navlist a { padding: 2px 15px 2px 15px; }

    #navlist a:link, #navlist a:visited
    {
    color: #336600;
    border-style: solid;
    border-color: #336600;
    border-width: 2px;
    text-decoration: none;
    }

    #navlist a:hover
    {
    color: white;
    background-color: #336600;
    border-style: solid;
    border-color: #336600;
    border-width: 2px;
    text-decoration: none;
    }

    #leftnav
    {
    float: left;
    width: 140px;
    margin: 0;
    padding: 0;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    color: #666666;
    font-size: 0.7em;
    line-height: 130%;
    }


    #leftnav li {margin: 0 0 .5em 0;}

    #leftnav ul
    {
    margin-left: 0;
    padding-left: 0;
    white-space: nowrap;
    }

    #leftnav li {list-style-type: none;}

    #leftnav a:link, #leftnav a:visited
    {
    color: #666666;
    text-decoration: none;
    }

    #leftnav a:hover
    {
    color: #336600;
    text-decoration: none;
    }

    #leftnav p
    {
    color: #336600;
    font-size: 1.3em;
    padding-top: 34px;
    padding-left: 90px;
    }

    #content
    {
    margin-left: 150px;
    border-left: 2px solid gray;
    padding: 1.5em;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: .7em;
    }

    #content h3
    {
    margin: 0 0 .5em 0;
    font-family: Georgia, "Times New Roman", Times, serif;
    color: #336600;
    font-size: 1.2em;
    }

    .imagefloat
    {
    float: right;
    height: 135px;
    padding: 2px;
    border: 1px solid black;
    margin: 10px 1px 5px 10px;
    display: inline;
    }


    #footer
    {
    clear: both;
    margin-left: 2em;
    margin-right: 2em;
    padding-bottom: .6em;
    color: #333;
    background-color: white;
    border-top: 1px solid gray;
    border-right: 1px solid gray;
    border-left: 1px solid gray;
    text-align: center;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 0.7em;
    width: 95%;
    height: 25px;
    letter-spacing: .02em;
    }[/code]
    Last edited by drhowarddrfine; Mar 20 '08, 04:34 PM. Reason: Please use code tags
    Tags: None
    • henryrhenryr
      New Member
      • Jun 2007
      • 103
      #2
      Try negative margins or fiddling with line-height. I find those are regular culprits.

      You should be aware of the doctype - the browsers behave differently depending on your choice. You have Transitional - I believe that means quirks mode for IE - that might be what you want but it's a factor.

      http://www.google.com/search?hl=en&q= ie+quirks+mode+ doctype&btnG=Se arch

      Then I would either use a specific IE stylesheet

      ie styles_ie.css

      Include that only when IE is your browser and have special styles to fix those little errors or present a slightly different page. Normally you don't need too many extra styles to fix those little errors.

      Or use conditional comments

      http://www.google.com/search?hl=en&q= conditional+com ments&btnG=Goog le+Search

      Or use CSS expressions

      http://www.google.com/search?hl=en&q= ie+css+expressi ons&btnG=Google +Search

      Or use CSS hacks

      http://www.google.com/search?hl=en&q= css+hacks&btnG= Google+Search

        Comment

        • drhowarddrfine
          Recognized Expert Expert
          • Sep 2006
          • 7434
          #3
          See if just adding *{margin:0} fixes this for IE. IE likes to add margin where there is none. Whether this complicates other things, we'll have to see.

          Transitional will not put IE into quirks. Only an incorrect doctype will, or if anything is placed before the doctype.

            Comment

            • angelina18
              New Member
              • Mar 2008
              • 7
              #4
              "Then I would either use a specific IE stylesheet ie styles_ie.css

              Include that only when IE is your browser and have special styles to fix those little errors or present a slightly different page. Normally you don't need too many extra styles to fix those little errors."
              ••••••••••••••• ••••••••••••••• ••••••••••••••• ••••••••••••••• ••••••••••

              Thank you for your quick response!
              That makes perfect sense, but I dont understand how to apply the ie style sheet. Is there a specific code, so that the browser knows which style sheet to choose?
              (sorry if the terminology is not correct!)

                Comment

                • angelina18
                  New Member
                  • Mar 2008
                  • 7
                  #5
                  *{margin:0} didnt work. It threw everything else on the page out of whack.
                  Thank you for your quick response, though!




                  Originally posted by drhowarddrfine
                  See if just adding *{margin:0} fixes this for IE. IE likes to add margin where there is none. Whether this complicates other things, we'll have to see.

                  Transitional will not put IE into quirks. Only an incorrect doctype will, or if anything is placed before the doctype.

                    Comment

                    • drhowarddrfine
                      Recognized Expert Expert
                      • Sep 2006
                      • 7434
                      #6
                      Ok, but did it remove the gap from the top?

                        Comment

                        • angelina18
                          New Member
                          • Mar 2008
                          • 7
                          #7
                          No, the text was still aligned at the top of the footer box and it moved the entire footer box to the left.

                            Comment

                            • drhowarddrfine
                              Recognized Expert Expert
                              • Sep 2006
                              • 7434
                              #8
                              I meant the navbar, not the footer. I don't have IE on this box so I can't check right now.

                                Comment

                                • angelina18
                                  New Member
                                  • Mar 2008
                                  • 7
                                  #9
                                  I already have the navbar set to {margin:0;}.


                                  Originally posted by drhowarddrfine
                                  I meant the navbar, not the footer. I don't have IE on this box so I can't check right now.

                                    Comment

                                    • bishal33
                                      New Member
                                      • Mar 2008
                                      • 1
                                      #10
                                      Bishal,
                                      If you have your own question, submit your own thread. Do not hijack others.
                                      Last edited by drhowarddrfine; Mar 27 '08, 04:52 AM. Reason: Hijacked thread

                                        Comment

                                        • Death Slaught
                                          Top Contributor
                                          • Aug 2007
                                          • 1137
                                          #11
                                          Add this and your footer problem will be fixed.

                                          Code:
                                          #footer p {
  margin:1em;
}
                                          I'm still working on the nav. Do you want the entire nav to be pushed up or just the links themselves?

                                          Thanks, Death

                                            Comment

                                            Previous template Next
                                            Working...