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: http://everychildcounts.info

This site's design has been adapted from this prototype: http://www.everychildcounts.org.nz/new-website/index.php so this is ideally how I'd like the navigation, welcome message and footer to appear. 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?

Also in Firefox and IE8 the whole page seems to have taken on the block colour for a reason that I can't work out.

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!

[TheJoshMan]

I'm not sure if this covers ALL the issues you were having, but it covers all the ones that I noticed when I viewed the site...

You need to add the following to your CSS file.


ul.links li a{
color:#ffffff;
}
ul.links li a:hover{
color:#F17E01;
}
.taxonomy, .node_read_more first last, .inline a{
color:#330066 !important;
}
.taxonomy, .node_read_more first last, .inline a:hover{
color:#F17E01 !important;
}

That will change the color of the links on the purple bar so that they are visible. It will also change the color of the links on the main body of the page so that they are visible on the background color used as well.

Then you need to change some of the following items...

Change this:


#sidebar-wrapper {
background:#FFFFFF none repeat scroll 0 0;
float:right;
margin-top:20px;
width:200px;
}

#sidebar {
background:#FFFFFF none repeat scroll 0 0;
width:200px;
}


To this:


#sidebar-wrapper {
background:#F5F6CE none repeat scroll 0 0;
float:right;
margin-top:20px;
width:200px;
}

#sidebar {
background:#F5F6CE none repeat scroll 0 0;
width:200px;
}


That will fix the sidebar issues with the white background showing through.

Also, I don't know if this is "intended" to be white, but seeing as how you were having issues with white in the sidebar, I'm assuming you want this to match as well... So to change the white background for the headers,

Change this:


#latestNewsmediaEvents {
background:#FFFFFF none repeat scroll 0 0;
height:40px;
padding-left:5px;
width:550px;
}


To this:


#latestNewsmediaEvents {
background:#F5F6CE none repeat scroll 0 0;
height:40px;
padding-left:5px;
width:550px;
}


Hope all this helped!

[intenziti]

Hi there, thanks for the advice, however the page background is supposed to be white. What's happening is that something is making it the block colour (but only in Firefox and IE8) in all other browsers it's appearing white as it should be.

I have a feeling that it could be 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. As a result the orange square is making the footer two lines when it should only be one.

Any suggestions?

[TheJoshMan]

The entire page is supposed to be white? I see that the entire "content" div is a yellowish color... so that's supposed to be white as well? I'll take another look at it when I get home. Also, I viewed in FF3 and I'm not seeing any "style" to the list items. (no circles, discs, squares, etc...)

[TheJoshMan]

well, if you want EVERYTHING to have a white background... Then the following two classes are the culprits for changing the colors to a yellowish background...



.block {
background:#F5F6CE none repeat scroll 0 0;
margin:0 0 20px;
}


#sidebarContent {
background:#F5F6CE none repeat scroll 0 0;
height:670px;
}


Change those and you should be good on the background color... As for the misalignment, I'll check it out in a bit.

[TheJoshMan]

As far as to get rid of the orange squares, you need to put this in your CSS file...




ul li, ul.menu li, .item-list ul li, li.leaf {
background: transparent none no-repeat 1px .35em !important;
list-style-image: none;
list-style-type: none;
padding: 0 0 .2em 1.5em;
}

[intenziti]

Hey there,

Thanks for that code to fix the footer issue! I only want the orange square to disappear from the footer so I took that code you gave me and applied it to my footer class:

.footer ul{

margin-right:-6px;
list-style-image: none;
list-style-type: none;
background: transparent none no-repeat 1px .35em
}

Unfortunately it doesn't appear to work. It doesn't seem to be overiding:

ul li, ul.menu li, .item-list ul li, li.leaf {
background: transparent url('images/orangeSquare.gif') no-repeat 1px .35em;
list-style-image: none;
list-style-type: none;
padding: 0 0 .2em 1.5em;
}

I seem to be having issues with some of my styles & classes not overiding the main ones. I think this is what's causing the IE problem with the second level nav text links as well, see below:

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

is not overriding the main style:

a:link, a:visited {/*style.css (line 48)*/
color:#330066;
font-weight:normal;
text-decoration:none;
}

Am I doing something wrong, or do i need to put an additional style in to overide the main ones?

I really appreciate all your assistance!

Thanks so much!

:)

[intenziti]

In regards to the white page issue in Firefox & IE 8. The only parts of the page I do want coloured that peachy colour are in fact the two parts you quoted ie. the side bar and all blocks:

.block {
background:#F5F6CE none repeat scroll 0 0;
margin:0 0 20px;
}


#sidebarContent {
background:#F5F6CE none repeat scroll 0 0;
height:670px;
}

I can't see why in Firefox and IE 8 the rest of the page is adopting that peachy colour inseatd of white, when in all other browsers it appears as it should be? Do you think it could be the issue with the footer running across two lines may be causing it? This problem only started when I put the footer in.

Thanks :)

[TheJoshMan]

I'm not too sure, I didn't notice any color specifications in the footer which match that color.