CSS working on Chrome but not on FireFox and IE

HTML & CSS
1

Hi,

I’ve created a HTML tab panel using CSS. It is working fine in chrome but is jumbled up a bit in FireFox (if tabs are more than 3, they are misaligned.
Whereas in IE, it’s totally screwed up (in addition to the above problem, even the absolute positioning of logo mage doesn’t work.

Please check the app here - http://nttodo.appspot.com; username is nttodo@zoho.com and password is test_1234.

Please help.

Regards

Nitin

2

Hi Paul,

I notices the “,” later. Made than change, and now it’s working on IE 6 as well.

Thanks.

Nitin

3

It worked. Thanks :slight_smile:

It’s already there. Check screen.css, line no. 147. Or do you mean something else?

I did this, but even this couldn’t make it work for IE 6 :frowning:

Thanks and Regards

Nitin

4

Hi,

First and most importantly add a doctype which will fix IE8 straight away. As you are using old fashioned deprecated elements you will need a transitional doctype as follows.


<!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>
<title>ToDo MyCloudList</title>

IE6 and 7 need haslayout on the header so change this as follows:


/* hasLayout */
    [B].header,[/B] 
    .logo {
    zoom:1;
}

The navigation left co-ordinate needs to be set for IE6 or it will center it with the text.


#theader ul#primary{left:0}

That seems to fix most issues.