By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,272 Members | 1,399 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,272 IT Pros & Developers. It's quick & easy.

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

P: 7
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.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="styles.css"/>

</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">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Training</a></li>
<li><a href="#">Resources</a></li>
</ul>
</div>

<div id="leftnav">
<ul>
<li>
<div align="center"><a href="#">Straight 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>Agricultural 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="imagefloat" src="images/barn_sm.jpg" alt="barn" width="175" height="135" border="0"/> </p>
<p> <img class="imagefloat" 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;&nbsp;&nbsp;:&nbsp;&nbsp;&nbsp;&nbsp;T roy, New York&nbsp; 12180
&nbsp;&nbsp;&nbsp;&nbsp;:&nbsp;&nbsp;&nbsp;&nbsp;P hone. 518.687.2246&nbsp;&nbsp;&nbsp;&nbsp;:
&nbsp;&nbsp;&nbsp;Toll Free. 866.669.7267&nbsp;&nbsp;&nbsp;&nbsp;:&nbsp;&nbsp;& nbsp;&nbsp;Fax. 518.687.2245
</p>
</div>

</div>
</body>
</html>
[/html]
••••••••CSS•••••••••••••••••
Expand|Select|Wrap|Line Numbers
  1. #container
  2. {
  3.     width: 90%;
  4.     margin: 10px auto;
  5.     background-color: #fff;
  6.     color: #333;
  7.     border: 1px solid gray;
  8.     line-height: 90%;
  9.     padding: 0;
  10. }
  11.  
  12. #top
  13. {
  14. padding-left: 1em;
  15. background-color: white;
  16. position: relative;
  17. z-index: 1;
  18. width: 675px;
  19. height: 152px;
  20. }
  21.  
  22. #navlist
  23. {
  24.     font-family: Verdana, Arial, Helvetica, sans-serif;
  25.     font-size: 0.8em;
  26.     padding-left: 155px;
  27.     padding-bottom: 20px;
  28.     text-transform: capitalize;
  29.     z-index: 2;
  30.     position: relative;
  31.     margin: 0;
  32. }
  33.  
  34. #navlist li { margin: 0 1.6em 0 1.6em; }
  35.  
  36. #navlist ul
  37. {
  38.     margin-left: 0;
  39.     padding-left: 0;
  40.     white-space: nowrap;
  41. }
  42.  
  43. #navlist li
  44. {
  45.     display: inline;
  46.     list-style-type: none;
  47. }
  48.  
  49. #navlist a { padding: 2px 15px 2px 15px; }
  50.  
  51. #navlist a:link, #navlist a:visited
  52. {
  53.     color: #336600;
  54.     border-style: solid;
  55.     border-color: #336600;
  56.     border-width: 2px;
  57.     text-decoration: none;
  58. }
  59.  
  60. #navlist a:hover
  61. {
  62.     color: white;
  63.     background-color: #336600;
  64.     border-style: solid;
  65.     border-color: #336600;
  66.     border-width: 2px;
  67.     text-decoration: none;
  68. }
  69.  
  70. #leftnav
  71. {
  72.     float: left;
  73.     width: 140px;
  74.     margin: 0;
  75.     padding: 0;
  76.     font-family: Verdana, Arial, Helvetica, sans-serif;
  77.     color: #666666;
  78.     font-size: 0.7em;
  79.     line-height: 130%;
  80. }
  81.  
  82.  
  83. #leftnav li {margin: 0 0 .5em 0;}
  84.  
  85. #leftnav ul
  86. {
  87.     margin-left: 0;
  88.     padding-left: 0;
  89.     white-space: nowrap;
  90. }
  91.  
  92. #leftnav li {list-style-type: none;}
  93.  
  94. #leftnav a:link, #leftnav a:visited
  95. {
  96.     color: #666666;
  97.     text-decoration: none;
  98. }
  99.  
  100. #leftnav a:hover
  101. {
  102.     color: #336600;
  103.     text-decoration: none;
  104. }
  105.  
  106. #leftnav p 
  107. {
  108.     color: #336600;
  109.     font-size: 1.3em;
  110.     padding-top: 34px;
  111.     padding-left: 90px;
  112. }
  113.  
  114. #content
  115. {
  116.     margin-left: 150px;
  117.     border-left: 2px solid gray;
  118.     padding: 1.5em;
  119.     font-family: Verdana, Arial, Helvetica, sans-serif;
  120.     font-size: .7em;
  121. }
  122.  
  123. #content h3 
  124. {
  125.     margin: 0 0 .5em 0;
  126.     font-family: Georgia, "Times New Roman", Times, serif;
  127.     color: #336600;
  128.     font-size: 1.2em;
  129. }
  130.  
  131. .imagefloat
  132. {
  133.     float: right;
  134.     height: 135px;
  135.     padding: 2px;
  136.     border: 1px solid black;
  137.     margin: 10px 1px 5px 10px;
  138.     display: inline;
  139. }
  140.  
  141.  
  142. #footer
  143. {
  144.     clear: both;
  145.     margin-left: 2em;
  146.     margin-right: 2em;
  147.     padding-bottom: .6em;
  148.     color: #333;
  149.     background-color: white;
  150.     border-top: 1px solid gray;
  151.     border-right: 1px solid gray;
  152.     border-left: 1px solid gray;
  153.     text-align: center;
  154.     font-family: Verdana, Arial, Helvetica, sans-serif;
  155.     font-size: 0.7em;
  156.     width: 95%;
  157.     height: 25px;
  158.     letter-spacing: .02em;
  159. }
Mar 20 '08 #1
Share this Question
Share on Google+
10 Replies


100+
P: 103
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=Search

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+comments&btnG=Google+Se arch

Or use CSS expressions

http://www.google.com/search?hl=en&q=ie+css+expressions&btnG=Google+Sear ch

Or use CSS hacks

http://www.google.com/search?hl=en&q=css+hacks&btnG=Google+Search
Mar 20 '08 #2

drhowarddrfine
Expert 5K+
P: 7,435
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.
Mar 20 '08 #3

P: 7
"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!)
Mar 20 '08 #4

P: 7
*{margin:0} didnt work. It threw everything else on the page out of whack.
Thank you for your quick response, though!




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.
Mar 20 '08 #5

drhowarddrfine
Expert 5K+
P: 7,435
Ok, but did it remove the gap from the top?
Mar 20 '08 #6

P: 7
No, the text was still aligned at the top of the footer box and it moved the entire footer box to the left.
Mar 20 '08 #7

drhowarddrfine
Expert 5K+
P: 7,435
I meant the navbar, not the footer. I don't have IE on this box so I can't check right now.
Mar 20 '08 #8

P: 7
I already have the navbar set to {margin:0;}.


I meant the navbar, not the footer. I don't have IE on this box so I can't check right now.
Mar 21 '08 #9

P: 1
Bishal,
If you have your own question, submit your own thread. Do not hijack others.
Mar 27 '08 #10

Death Slaught
100+
P: 1,137
Add this and your footer problem will be fixed.

Expand|Select|Wrap|Line Numbers
  1. #footer p {
  2.   margin:1em;
  3. }
I'm still working on the nav. Do you want the entire nav to be pushed up or just the links themselves?

Thanks, Death
Mar 27 '08 #11

Post your reply

Sign in to post your reply or Sign up for a free account.