Cross browser compatability issues - namely IE 5,6 & 7

[intenziti]

Hi there,

I recently adapted a site template I made to fit a Drupal theme. However I am having a couple of design issues in IE.

If you view http://everychildcounts.info in firefox you'll see how ideally I would like the site to appear. This site's design has been adapted from this prototype: http://www.everychildcounts.org.nz/new-website/index.php - to give you an idea. This version was fine in both firefox and IE.

The issues in IE are namely:

1). Menu: The menu tabs are a different colour to the second level block when rolled over, also there is a gap between the purple second level nav bar and the top level tabs. The second level links are not displaying as white, for some reason they have assumed the background colour.

2). Sidebar/Blocks: The background colour is overshooting the title block and or not sitting in the correct position in relation to its copy.

Could anyone suggest any code which would make it appear like the Firefox version and work accross IE 5,6 & 7? I know the basics of CSS however these cross browser issues have me dumbfounded as it seems fixing an issue for one browser creates another for one of the others. I don't yet have the experience to trouble shoot effectively

There is another issue I am having with the footer. I am unable to remove/hide the orange square in the list item. I have tried playing around with list-item-type: none; but it doesn't seem to do anything. Any suggestions on how I could resolve this.

As this site is for a charity I would really appreciate it if somebody would be able to help me in any way?

Thanks a lot in advance! :thumbsup:

[abduraooft]

There are a lot of markup errors including "multiple use of the same id", see http://validator.w3.org/check?uri=http%3A%2F%2Feverychildcounts.info%2F&charset=%28detect+automatically%29&doctype=Inline&group=0
Fix them all first.

[intenziti]

Hi there, I've fixed all the errors but still getting the same IE issues and now the background colour of the whole page seems to have changed. Seems to be something to do with the footer but I can't understand what's happening?

[abduraooft]

a:link, a:visited {/*style.css (line 48)*/
color:#330066;
font-weight:normal;
text-decoration:none;
} this rule is getting applied to your sub menu links.
And why do you need to split your submenu from the main menu? You could easily nest any number of list blocks inside the main list items.

PS: It'd be a great idea to cure the divitis (http://csscreator.com/?q=divitis).

[intenziti]

OK thanks for the advice. Basically I used Firebug when putting the heading nav together so everything looked fine until viewing in IE. Should this code not overide the rule in line 48?:

#nav2 li a:active,
#nav2 li a:visited {
text-decoration: none;
font: 10pt arial;
color: #FFFFFF;
}


You mentioned I could easily nest the blocks in the main list item. Would you be able to please show me what you mean? I thought that they'd need to be totally seperate as the top menu's background changes as opposed to the text colour. I guess that would also solve the issue of the white gap between the two menus in IE?

[abduraooft]

There is no such selectors/rules applied to the links (#nav li a .... is there)