473,598 Members | 3,344 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Newbie Problem: Menu not aligned in IE6

4 New Member
it was perfectly in firefox but not getting right in IE.........
its css is.....
#region_header {
position:absolu te;
left: 10px;
top: 2px;
margin: 0px;
padding: 0px;
width: 468px;
height: 20px;
border: none;
color: #fff;
Aug 21 '07 #1
9 2621
173 Recognized Expert New Member

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
Aug 21 '07 #2
4 New Member
http://ebizontech.vpsland.com/menu_t...efox/page.html in the link you can see the difference..... ............... ..in firefox and IE............. please help me
Aug 21 '07 #3
173 Recognized Expert New Member
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.
Aug 21 '07 #4
173 Recognized Expert New Member
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
Aug 21 '07 #5
4 New Member
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.vpsl and.com/menu_test/spreadfirefox/page.html
Aug 21 '07 #6
173 Recognized Expert New Member

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.
Aug 23 '07 #7
533 Recognized Expert Contributor
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:)
Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript">
  2. <!--
  3. switch (navigator.appName.substr(0,5)){
  4.     case "Micro":    
  5.         document.write('<link rel="stylesheet" type="text\/css" href="style_ie.css" \/>');
  6.         break;
  7.     case "Netsc":
  8.         document.write('<link rel="stylesheet" type="text\/css" href="style_ff.css" \/>');
  9.         break;
  10.     case "Opera":
  11.         document.write('<link rel="stylesheet" type="text\/css" href="style_op.css" \/>');    
  12.         break;
  13.     default:
  14.         document.write('<link rel="stylesheet" type="text\/css" href="style.css" \/>');
  15.         break;
  16. }
  17. //--></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!

Aug 23 '07 #8
7,435 Recognized Expert Expert
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.
Aug 23 '07 #9
173 Recognized Expert New Member

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:
<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">Subm it News</a> </li>
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:
Expand|Select|Wrap|Line Numbers
  1. /*Remove all padding and margins*/
  2. *{padding:0;margin:0;}
  4. /*general styles according to element types*/
  5. a img{border:none;}
  6. li{list-style-type:none;}
  7. 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%;}
  9. /*general classes for repeated use*/
  10. .b{font-weight:bold;}
  11. .hide{display:none;}
  14. #wrapper{width:950px;margin:0 auto;}
  16. /* top image styles*/
  17. #site-name{font-size:2.5em;}
  18. #site-name *{color:#FFFFFF;text-decoration:none;}
  20. /*tabbed navigation styles*/
  21. .cab li{float:left;margin:0 0.5em;}
  22. .cab a{padding:0 0.5em;position:relative;top:8px;color:#666666;}
  23. .cab a:hover{color:#774525;}
  24. .navbut4{background:transparent url(http://ebizontech.vpsland.com/menu_test/spreadfirefox/images/tabrightB.png) no-repeat top right;height:32px;}
  25. .navbut4 span{background:transparent url(http://ebizontech.vpsland.com/menu_test/spreadfirefox/images/tableftB.png) no-repeat;height:32px;float:left;}
  27. .navbut3{background:transparent url(http://ebizontech.vpsland.com/menu_test/spreadfirefox/images/tabrB2.png) no-repeat top right;height:32px;}
  28. .navbut3 span{background:transparent url(http://ebizontech.vpsland.com/menu_test/spreadfirefox/images/tablB2.png) no-repeat;height:32px;float:left;}
  29. .navbut3:hover{background:transparent url(http://ebizontech.vpsland.com/menu_test/spreadfirefox/images/tabrightB.png) no-repeat top right;}
  31. /*navigation styles*/
  32. #navbar{border-top:8px solid #F74594;background-color:#FFC3DE;padding:8px 0 8px 30px;clear:left;}
  33. /* Hack for IE6 position*/
  34. * html #navbar{padding-top:0;}
  36. /*add bullets back to list item*/
  37. #navbar li{list-style-type:disc;padding:0;margin:0;}
  39. /*footer styles*/
  40. #footer{border-top:1px solid #666666;text-align:center;font-size:0.8em;margin:2em 0;padding:1em 0;}
  41. #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.
Aug 26 '07 #10

Sign in to post your reply or Sign up for a free account.

Similar topics

by: Marek Mand | last post by:
How to create a functional *flexible* UL-menu list <div> <ul> <li><a href=""></li> <li><a href=""></li> <li><a href=""></li> </ul> </div> (working in IE, Mozilla1.6, Opera7 (or maybe even in Opera6))
by: Mark | last post by:
Ok, it is starting to get somewhere, but i am not sure what to do with the following problem: I designed "knobs". They are 90px in width and do have one border (right) of 1px. So i guess, within a container of 653px that leaves: 653px - 5 * (90px + 1px) = 198px to do something else. But, the 5 * (90px + 1px)= 455px are not enough to hold the buttons with border. Example: http://www.groningenbevrijd.nl/default1.asp
by: Adrian | last post by:
Hi simple question I hope!! Using the menu designer I have a file menu and an options menu with sub items... I have added a Help menu and want it on the right-hand side away from the other menu items, how do I do this? Thanks
by: DaveC | last post by:
Hi Folks, Trying to display a two tier menu horizontally but not having any luck with the new menu control. The First Tier should display static horizontal. The Second Tier should display dynamically as a horizonal row below the first. Both tiers should be left aligned. Item 1 | Item 2 | Item 3 | Item 4 Sub Item 1 | Sub Item 2 | Sub Item 3
by: töff | last post by:
On my site http://www.sjcga.com I have a javascript-generated navigation menu in the top right corner. The menu works great in IE and Opera ... but in FireFox, on the 1st click, the menu jumps to the right and doesn't follow the link. Then on the 2nd click, the link works. I've never seen anything like this, and I can't figure out what's wrong with my code. I get no javascript errors in the FireFox console, and my HTML and CSS have...
by: =?Utf-8?B?TWljaGFlbCBIYWJlcmljaHRlcg==?= | last post by:
Hi, I'm adding 5 ToolStrips to a ToolStripPanel (ToolStripContainer, TopContainer) and see them ordered in three rows, starting on the left side. I want to have it in one row all. Trying to join them using a new location (toolstrip.Location = new Point(x,y) does not work. Is there any property, which allows the Location setting not to be ignored or is there any property helping to get the result as described? In my special case the...
by: Daemach | last post by:
OK, it's time to try the experts :) I've been doing most of my development work in Firefox because of Firebug. Then, when my projects are fully debugged, sleek and refined I load them in IE and I am humbled without fail. This last project was/is especially painful ;) Please visit this site: IdeaMill: tableFilter This demo is a couple of months out of date, unfortunately, but it does demonstrate the specific problem I need your help...
by: Emil | last post by:
Hello, I'm using asp.net 2.0. I have a horizontal menu control. The children menu items are center aligned when shown. How can I change the alignment of the dynamic menu items to be left aligned? Thank you.
by: jch | last post by:
Sorry for the newbie question but I'm trying to learn Visual Studio. I've got VS Express 2008 and I'm using visual basic. I'm trying to learn how to deploy a program so I've written a very basic windows application (lets call it TWinApp1) with just a couple of buttons and a text box. It is very simple and runs fine in the debugger. Using TWinApp1 I'm trying to learn how to create a setup program to install an application on a system....
by: Jeff | last post by:
hi asp.net 2.0 I wan thte menu to be horizontally centered on the webpage, but I want the submenuitems to left aligned. So I created a table cell with HorizontalAlign set to Center. With this option set the menu was horizontaly centered as I wanted, except that also submenuitems was centered too (not what I wanted). So then I tryed to add a extra div around the menu (<div style="text-align:left; margin-left:auto;
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.