FRIHOST • FORUMS • SEARCH • FAQ • TOS • BLOGS • COMPETITIONS
You are invited to Log in or Register a free Frihost Account!


CSS problem in IE 6

   Frihost Forum Index -> Scripting -> Html, CSS and Javascript
 




Relentless
Hi I made a wicked looking website and was testing it in IE 7 and Firefox and in both looked identical.

so carried on designing.

little did I know that IE 6 Evil or Very Mad was laughing at me! coz when I finally tested it in IE 6 the nav bar went down instead of across.

Not I have tried with my knowlage of CSS and nothing and it is like 4am and cannot be bother to search.

So was wondering if anybody had the time to look at my code

CSS
Code:
#navigator {
   width: 792px;
   font-family: Verdana, sans-serif;
   height: 20px;
   font-size: 12px;
   padding-left:8px;
}
#navigator ul {
   list-style: none;
   margin: 0;
   padding: 0;
   border: none;
   height: 20px;
}
#navigator li {
   float:left;
   margin: 0;
   height: 40px;
   text-align: right;
   width: auto;
}
#navigator li a {
   padding-top:10px;
   padding-left:5px;
   padding-right:5px;
   display: block;
   text-decoration: none;
   color: #003;
   height: 30px;
   border-right-width: 1px;
   border-left-width: 1px;
   border-right-style: solid;
   border-left-style: solid;
   border-right-color: #CCCCCC;
   border-left-color: #CCCCCC;
   width: auto;
}
#navigator li a:hover {
   background-color:#6699FF;
   color: #fff;
}


HTML
Code:
<div id="navigator">
<ul>
  <li> <a href="index.php">Home Page</a></li>
  <li> <a href="help.php">How to Use</a></li>
  <li> <a href="usernames.php">What's My Username?</a></li>
  <li> <a href="Forgotpass.php">Forgot My Password</a></li>
 </ul>
</div>


If you don't have IE 6 then you can download it at http://tredosoft.com/Multiple_IE

Advanced thanks
Dan
Relentless
Ok I have temporaly solved it by using <inline style="width:xxpx"> on each <li> tag...
and removing the width: auto; on CSS for #navigator li

But would be nice if sombody could figureout an alternative....

Cheers dan.
sonam
Just display: block; from #navigator li a move one level up in definiton #navigator li

Sonam
Phil
It seems to me that explorer6 goes bonkers if you don't specify a width for elements, especially if you are floating <li>'s.
Width: auto; just never seems to work for me.
Relentless
Phil wrote:
It seems to me that explorer6 goes bonkers if you don't specify a width for elements, especially if you are floating <li>'s.
Width: auto; just never seems to work for me.


Yeah every browser has an issue... for example...

Firefox doesn't like heights lol

IE6 doesn't like margins (margins double in float)

IE7 ... (I donno havn't found one yet....)

And cheers sonam.

It worked but need to transfer more than that the 'disply' need width ect...

Dan...
Zuex
Usually when i make a website, i dont think about what it looks like in another browser till the end, then resolve the problems lol, so gay and long! There should be a program like dreamweaver that'll make your code correct for all browsers Cool
Azmo
Relentless wrote:
Phil wrote:
It seems to me that explorer6 goes bonkers if you don't specify a width for elements, especially if you are floating <li>'s.
Width: auto; just never seems to work for me.


Yeah every browser has an issue... for example...

Firefox doesn't like heights lol

IE6 doesn't like margins (margins double in float)

IE7 ... (I donno havn't found one yet....)

And cheers sonam.

It worked but need to transfer more than that the 'disply' need width ect...

Dan...


IE6 floats are easily solved with display:inline; in each element that has the float option.

IE7 has major problems with javascript..

I have never had any problem with heights in Firefox.. however, I do know that safari sometimes gives you a hard time with pictures Smile
Relentless
Azmo wrote:

IE6 floats are easily solved with display:inline; in each element that has the float option.

IE7 has major problems with javascript..

I have never had any problem with heights in Firefox.. however, I do know that safari sometimes gives you a hard time with pictures Smile


Well Firefox has a problem with heights: auto;

--
Dan
Related topics
IE 7 to take a cue from Firefox
IE 6 problem (bugs me off)
CSS Problem
Different View CSS Problem with Firefox, opera, IE , mozilla
links dont work in IE from frihost hosted site		Copy of IE 6
Page Display in IE
Help me design this footer in css (for IE)
Why does Pixels double in IE 6?
IE 6 Display Error		Slight css problem in IE [SOLVED]
PHP imagecreate + CSS problem.
PHP imagecreate + CSS problem.
HTML Layout Problem whith variouse Browsers
Reply to topic    Frihost Forum Index -> Scripting -> Html, CSS and Javascript

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2011 Frihost, forums powered by phpBB.