473,404 Members | 2,213 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,404 software developers and data experts.

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.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
10 1709
henryrhenryr
103 100+
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
7,435 Expert 4TB
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
"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
*{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
7,435 Expert 4TB
Ok, but did it remove the gap from the top?
Mar 20 '08 #6
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
7,435 Expert 4TB
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
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
Bishal,
If you have your own question, submit your own thread. Do not hijack others.
Mar 27 '08 #10
Death Slaught
1,137 1GB
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

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

Similar topics

21
by: Applebrownbetty | last post by:
Hi, I've run into a problem with IE 6 vs. Mozilla when displaying a completely CSS positioned page, and was wondering if any resident CSS guru might quickly be able to find the problem(s). Thank...
21
by: Florian Brucker | last post by:
Hi! With the help of this group I finally managed to transfer my website from table layout to CSS layout. The site is now online and I would really appreciate comments about it. I'm...
26
by: Spondishy | last post by:
Hi, I have a problem with divs and padding in IE6 and Firefox. Basically my example that I have attached works exactly how I want in IE6, but padding is treated differently in Firefox. My...
1
by: Steven (remove wax and invalid for reply) | last post by:
Hello to all. I'm a member of this non-profit organization: http://www.hitagroup.org/ For several reasons, we need to move our web host and I got volunteered. The person who created it is no...
71
by: Murray R. Van Luyn | last post by:
Hi, Since I have made changes to my website it's been a complete flop. According to the logs, as soon as visitors have downloaded the index page they are off. I can't figure out why? ...
4
by: JJA | last post by:
Previously, anything IE did not like threw some sort of error like "object expected", etc. Now all I get is "Done" on the status bar... I am suddenly having trouble with Internet Explorer. Both...
6
by: smoitra | last post by:
Hi All, I am new here.I have a textbox in my form where user is supposed to enter zip codes and as soon they enter that and press tab or click elsewhere on the form it is supposed to go to...
1
by: littlealex | last post by:
IE6 not displaying text correctly - IE 7 & Firefox 3 are fine! Need some help with this as fairly new to CSS! In IE6 the text for the following page doesn't display properly - rather than being...
17
tharden3
by: tharden3 | last post by:
Alrighty, well I've posted many questions in several forums to help me get this far. I've changed many things that all of you at Bytes have suggested to make my Web Page Better. I need your opinion...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
0
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
0
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.