Newbie Problem: Menu not aligned in IE6

[abhishek3322]

it was perfectly in firefox but not getting right in IE.........
its css is.....
#region_header {
position:absolute;
left: 10px;
top: 2px;
margin: 0px;
padding: 0px;
width: 468px;
height: 20px;
border: none;
color: #fff;
}

[phvfl]

Hi,

This is possibly due to the differences in the box model between Firefox and IE. Check that the HTML validates and that you use a doctype so that IE is not in quirks mode.

If these do not help please submit either a URL where the problem can be seen or the HTML so that the problem can be reproduced

[abhishek3322]

http://ebizontech.vpsland.com/menu_t...efox/page.html in the link you can see the difference......................in firefox and IE.............please help me

[phvfl]

The page currently has 26 errors. The validation result can be seen here

The PHP script does not seem to be working and your server side code for the screen printing is being sent to the client.

Fix these issues first, I will continue looking at this to see if there are any other issues that I can see.

[phvfl]

Having looked at the source code, the reason that the PHP code is not executing is because the opening and closing tags ("<", ">") are being URL/HTML encoded so they are not being parsed correctly on the server side and therefore not being executed

[abhishek3322]

The page currently has 26 errors. The validation result can be seen here

The PHP script does not seem to be working and your server side code for the screen printing is being sent to the client.

Fix these issues first, I will continue looking at this to see if there are any other issues that I can see.

Thanks phpvfl. I have valided my html agains the validator of w3 and have also removed all php codes. Now please help to get the menu items working on IE. (it is working with firefox).
http://ebizontech.vpsland.com/menu_test/spreadfirefox/page.html

[phvfl]

Hi,

I have managed to determine that the absolute positioning on the ul is not being applied the same in FF and IE, however it is going to take some time to determine the active styles on the tabs due to the amount of CSS. There are 23 different selectors that match with the tabs (granted this is including inheritance), so it will take some time trying to get my head around this.

[JamieHowarth0]

Hi there,

This is a fairly simple solution which I use in my websites - I copy my base stylesheet (style.css) and rename it with a two-digit browser identifier (so style_ie.css would be for Internet Explorer, style_ff.css for Firefox etc.).

Then you use some Javascript to identify which browser the client is using and subsequently insert the relevant <link> tag into your page (like below:)

<script type="text/javascript">
<!--
switch (navigator.appName.substr(0,5)){
    case "Micro":    
        document.write('<link rel="stylesheet" type="text\/css" href="style_ie.css" \/>');
        break;
    case "Netsc":
        document.write('<link rel="stylesheet" type="text\/css" href="style_ff.css" \/>');
        break;
    case "Opera":
        document.write('<link rel="stylesheet" type="text\/css" href="style_op.css" \/>');    
        break;
    default:
        document.write('<link rel="stylesheet" type="text\/css" href="style.css" \/>');
        break;
}
//--></script>

The problem I generally find is that FF and IE are about 5 pixels horizontally and 3 pixels vertically out of sync with each other (which isn't surprising lol) - however Opera, funnily enough, is almost identical to IE!
If you're using script in your page, you should also export your JScript to separate files and use this section to import that script for different browsers (such as image/menu rollovers, AJAX etc.).

Note the default option - should your script not recognise the user's browser (for example, some specialist screen reading browsers - or maybe just Lynx lol), your page serves up a stylesheet (and JScript if you should so choose) that conforms to the W3C CSS2 classification, covering your bases.

Hope this helps!

medicineworker

[drhowarddrfine]

Differences in spacing around elements are sometimes caused by different default margin/padding between browsers. It is frequently best to set all margins/padding to zero in CSS and then set each element individually to what you want.

[phvfl]

Hi,

I think that the problem that you had was that each level of the DOM had positioning associated with it and due to the way that inheritance is applied in each level the outcome was very different in each browser.

When designing the CSS start with broad strokes and then fine tune individual elements. Also keep checking in different browsers so that if discrepancies do occur then you know exactly what is causing them. Setting all padding and margins to 0 is something that I do whenever I am using CSS as it gives more control over the page across browsers, I also tend to remove borders from images that are children of anchors as by default they get a blue border.

I have (almost) managed to recreate the page which is standard across all browsers. For comparison the size of the CSS is under 2K compared to 35K. The only difference to the HTML is that the tabbed links at the top are now:
[HTML]
<li class="navbut4"><span>&nbsp;</span><a class="b" href="popular-news">Popular News</a></li>
<li class="navbut3"><a class="b" href="upcoming">Upcoming News</a></li>
<li class="navbut3"><a class="b" href="node/add/storylink">Submit News</a> </li>
[/HTML]
The classes are on the list items instead of the anchors, the span on the first tab has been moved outside of the anchor and the spans of the other tabs have been removed. The span has a space in it so that it does not collapse to nothing.

The CSS used is:

/*Remove all padding and margins*/
*{padding:0;margin:0;}
 
/*general styles according to element types*/
a img{border:none;}
li{list-style-type:none;}
body{background:transparent url(http://ebizontech.vpsland.com/menu_test/spreadfirefox/images/bg_head.gif) repeat-x;font-family:verdana, sans-serif;font-size:76%;}
 
/*general classes for repeated use*/
.b{font-weight:bold;}
.hide{display:none;}
 
 
#wrapper{width:950px;margin:0 auto;}
 
/* top image styles*/
#site-name{font-size:2.5em;}
#site-name *{color:#FFFFFF;text-decoration:none;}
 
/*tabbed navigation styles*/
.cab li{float:left;margin:0 0.5em;}
.cab a{padding:0 0.5em;position:relative;top:8px;color:#666666;}
.cab a:hover{color:#774525;}
.navbut4{background:transparent url(http://ebizontech.vpsland.com/menu_test/spreadfirefox/images/tabrightB.png) no-repeat top right;height:32px;}
.navbut4 span{background:transparent url(http://ebizontech.vpsland.com/menu_test/spreadfirefox/images/tableftB.png) no-repeat;height:32px;float:left;}
 
.navbut3{background:transparent url(http://ebizontech.vpsland.com/menu_test/spreadfirefox/images/tabrB2.png) no-repeat top right;height:32px;}
.navbut3 span{background:transparent url(http://ebizontech.vpsland.com/menu_test/spreadfirefox/images/tablB2.png) no-repeat;height:32px;float:left;}
.navbut3:hover{background:transparent url(http://ebizontech.vpsland.com/menu_test/spreadfirefox/images/tabrightB.png) no-repeat top right;}
 
/*navigation styles*/
#navbar{border-top:8px solid #F74594;background-color:#FFC3DE;padding:8px 0 8px 30px;clear:left;}
/* Hack for IE6 position*/
* html #navbar{padding-top:0;}
 
/*add bullets back to list item*/
#navbar li{list-style-type:disc;padding:0;margin:0;}
 
/*footer styles*/
#footer{border-top:1px solid #666666;text-align:center;font-size:0.8em;margin:2em 0;padding:1em 0;}
#footer *{color:#666666;}
 

The URLs for the images are absolute at present so these could be made relative again. The main differences in style are that the tabbed navigation does not overlap the site logo and that the tabs do not change background colour when hovered on in IE6. This is because IE6 only applies :hover to anchors, this could be corrected using javascript or adding more styling but as it works correctly in IE7 I would say that it acceptable as it is.

The tabs could be made to overlap the images, but this would start the issue of positioning and inheritance being applied differently so hacks would be required to make all browsers render the same.