Hi all...

 

I have got the following site : http://www.acuitydesigns.net/data/clients/anc/index.html

 

to look as I want it in FF/Saf and Opera and now IE is killing me!

 

1) You will notice when vieiwng the site in IE that the site doesn't line up with the background repeating image? how and why?

 

2) If you could view the site in IE - you will notice the drop down menu appears to the right of its respective activating link in the main nav

 

3) A lesser problem but why is my site on the index page producing a huge white space underneath the footer?

 

How some of you do this full time , I don't know, you are gods maybe - I fix one thing and it starts another problem!

hellllp! lol

It's quite difficult to pin point the exact reason why your drop down is displaying to the right.

 

Whilst this may be more effort than its worth at this stage many cross browser issues can be solved by resetting CSS properties before you start, e.g. using this This leaves, more or less, every browser at a level peg.

I viewed your site in IE6 and looks fine except the dropdown menu does not work here. Not sure what version of IE are you using, usually IE6 does not support CSS based dropdown menus; IE6 is an eight year old browser and it's not standard web compliant.

 

For the big space at the bottom of your site, have you tried setting the height of your container div to "auto" or just leaving it blank? Not sure about this here.

If you have a difference between IE and Firefox, code for Firefox first (as you have done), then use a conditional comment applicable only to IE.

 

I can move the drop down menus in IE7 with this code placed just before the </head> closing tag:-

 

<!--[if ie]>

<style type="text/css">

.menu li ul { margin-left: -75px; }

</style>

<![endif]-->

 

I can get the drop down menus to work in IE6 with a behavior file from here:-

http://www.xs4all.nl/~peterned/csshover.html

at the bottom of its page, version 1.42.060206 (there are newer versions 2 and 3 of the same file).

Download the file, no need to look in it, and put it in the same folder as the html file and then add a conditional comment at the end of the head section after the previous conditional comment (lt ie 7 means less than IE7):-

<!--[if lt ie 7]>

<style type="text/css" media="screen">

body{behavior:url(csshover.htc);}

</style>

<![endif]-->

 

However, it still doesn't work properly in IE6. The drop downs show but are all in a fixed position instead of being under their relevant top level tabs. Did the original menu work properly wherever you got it from?

 

Most css menus don't need a .htc file because they have a series of small tables inside IE6 conditional comments in the body markup, see almost any menu from cssplay

http://www.cssplay.co.uk/menus/

but your coding doesn't use that method so a .htc file will be the only way.

 

There must be some other error in your code that's affecting IE6 positioning. Go back to your original code, make sure it works in IE6, then edit one item at a time, checking in IE6 until it breaks, then think about it.

 

EDIT: I cured IE6 by editing this:-

.menu li ul { left: auto; }

to the IE6 conditional comment which is now like this:-

<!--[if lt ie 7]>

<style type="text/css" media="screen">

body{behavior:url(csshover.htc);}

.menu li ul { left: auto; }

</style>

<![endif]-->

Thankyou wickham! and the rest f you for the points in the right direction and the instructions! Saving me as my knowledge on how to troubleshoot this had reached its peak!

Hey Guys,

 

I know this problem and how annoying it can be!

 

So I downloaded this css page called reset.css which basically makes all browsers work the same.

 

All you need to do is upload this page before your style.css and that will make all browsers the same.

 

Hence:

 

<link rel="stylesheet" type="text/css" href="xxx/reset.css" />
<link rel="stylesheet" type="text/css" href="xxx/style.css" />

 

Here is a link to one:

 

http://meyerweb.com/eric/tools/css/reset/

 

Hope I helped!

 

Nowy

All you need to do is upload this page before your style.css and that will make all browsers the same.

 

It might help, but it's not a total solution.

Thankyou wickham! and the rest f you for the points in the right direction and the instructions! Saving me as my knowledge on how to troubleshoot this had reached its peak!

 

 

f you? i think you meant thank you... haha took me a second read to make sure it wasn't an insult

haha the joy of typing too quickly... was meant to read

 

 

'the rest OF you'