Posting in the Magento forums has been disabled pending the implementation of a new and improved forum solution which should better serve the community.

For new questions please post at magento.stackexchange.com, the community-run support site for the Magento community. We will be providing updates on the new forum solution soon. For questions or concerns please email community@magento.com.

Magento Forum

IE7 - Firefox 2.0 display discrepancy - help needed. 
 
paul@moodandmind.com
Member
 
Avatar
Total Posts:  65
Joined:  2008-01-13
 

I can’t figure out why my height on my NavBar (category menu bar) is getting displayed different in IE7 and Firefox 2.0.  The bar looks to be about 2-3 pixels taller in IE7, and it’s also justified about 1 pixel higher than Firefox.  If someone could help me figure out how to iron this out, that would be most appreciated.  You can view my site at: http://www.moodandmind.com

 
Magento Community Magento Community
Magento Community
Magento Community
 
paul@moodandmind.com
Member
 
Avatar
Total Posts:  65
Joined:  2008-01-13
 

I just came across another display discrepancy that is also showing up on another Magento store.  At :http://64.69.44.85/furniture-collection/dining-room/tables and at my site - http://www.moodandmind.com - for some reason IE7 displays a second background image (stovestop divider) at the end of the nav-bar, whereas Firefox 2.0 does not, and displays as intended.

 
Magento Community Magento Community
Magento Community
Magento Community
 
lotusseedsD
Mentor
 
Avatar
Total Posts:  1144
Joined:  2007-08-31
 

IE 7 is far from a good browser. If you want your site displays in IE likes the Firefox, the best is to use Conditional Comment for IE browsers (6 and 7).

http://www.google.com/search?client=safari&rls;=en-us&q;=ie+conditional+comments&ie;=UTF-8&oe;=UTF-8

I can’t figure out why my height on my NavBar (category menu bar) is getting displayed different in IE7 and Firefox 2.0.  The bar looks to be about 2-3 pixels taller in IE7, and it’s also justified about 1 pixel higher than Firefox. 

I wouldn’t worry about this at all. It’s impossible to achieve pixel perfect across browsers as it’s a very complex issues that not just the browser itself can control but the user’s system default font size, screen resolutions and browser (default) font size.

 
Magento Community Magento Community
Magento Community
Magento Community
 
paul@moodandmind.com
Member
 
Avatar
Total Posts:  65
Joined:  2008-01-13
 

Well, I guess between the two issues, the more serious one is the display of the extra background divider because that just looks plain ugly. Also, although IE7 is not a good browser, a huge number of people use it, and so I would like my site to look good (that is, for my nav bar to not appear off center) if possible.

 
Magento Community Magento Community
Magento Community
Magento Community
 
lotusseedsD
Mentor
 
Avatar
Total Posts:  1144
Joined:  2007-08-31
 
paul@moodandmind.com - 18 March 2008 05:38 PM

Well, I guess between the two issues, the more serious one is the display of the extra background divider because that just looks plain ugly. Also, although IE7 is not a good browser, a huge number of people use it, and so I would like my site to look good (that is, for my nav bar to not appear off center) if possible.

I must be missing something. Your menu bar looks exactly the same in IE7, Firefox and Safari, that the background runs edge to edge from left to right across browser. I thought you were talking about the 2/3 vertical pixel differences in IE7 (that maybe cause my IE default line-height).

 
Magento Community Magento Community
Magento Community
Magento Community
 
paul@moodandmind.com
Member
 
Avatar
Total Posts:  65
Joined:  2008-01-13
 

See the little | dividers in the menu? For some reason, there is an extra one (two in a row) at the right end in IE7. The same thing happens with the other Magento web site I linked in my original post. Admittedly, I copied the CSS from that site to use on mine, so it makes sense that they are both doing it. Ideally I would like a setup where the last menu category doesn’t have a divider on the right side at all, but I’m not savvy enough to figure out how to code the CSS for it (I’m a store owner, not a prof. designer). However, just getting rid of the 2nd | divider at the end on IE7 would be awesome, but I can’t figure out why it is there at all. It doesn’t appear in Firefox.

 
Magento Community Magento Community
Magento Community
Magento Community
 
paul@moodandmind.com
Member
 
Avatar
Total Posts:  65
Joined:  2008-01-13
 

Whoops, here is the other web site where it happens in IE7 http://64.69.44.85/furniture-collection/dining-room/tables

 
Magento Community Magento Community
Magento Community
Magento Community
 
petertufan
Sr. Member
 
Avatar
Total Posts:  93
Joined:  2007-08-31
Ashburn, VA
 

IE 7 is not the browser you want to have as default for your testing ... I do a lot of my design and testing under UNIX/Linux or MAC OS X and my favorite browsers are Firefox 3 BETA 4 on UNIX and Safari/Firefox 2.0.12 on MAC OSX ...
Good luck.

Peter
http://www.asktp.com

 
Magento Community Magento Community
Magento Community
Magento Community
 
paul@moodandmind.com
Member
 
Avatar
Total Posts:  65
Joined:  2008-01-13
 
petertufan - 19 March 2008 11:53 AM

IE 7 is not the browser you want to have as default for your testing ... I do a lot of my design and testing under UNIX/Linux or MAC OS X and my favorite browsers are Firefox 3 BETA 4 on UNIX and Safari/Firefox 2.0.12 on MAC OSX ...
Good luck.

Peter
http://www.asktp.com

I must be missing something - wouldn’t I want my web site to display properly in one of the most used browsers out there? Sure, I personally use Firefox, but a ton of my customers are going to be using Internet Explorer. I would really rather the menu not display messed up on their browser.
 
Magento Community Magento Community
Magento Community
Magento Community
 
lotusseedsD
Mentor
 
Avatar
Total Posts:  1144
Joined:  2007-08-31
 

What Peter said, is that you should get your site works for advanced browsers such as FF, Safari and Opera first, then use IE conditional Comments to tackle any problem that may occurs in IE browsers.

I suggest you run a validation check. The white line (divider) is a background image, it appears that you have extra tags:

tp://64.69.44.85/furniture-collection/bedroom"><span>bedroom</span></a>
<ul class="level1">

<li class="level2 last">
<a href="http://64.69.44.85/furniture-collection/bedroom/beds"><span>beds</span></a>
</li>
</ul></li>
</ul></li> shouldn’t be here

and this:

<a href="http://64.69.44.85/showcase-1"><span>SHOWCASE</span></a>
</li>
<li>shouldn’t be here - I reckon this is causing the extra background showing up in IE

 
Magento Community Magento Community
Magento Community
Magento Community
 
Andrea, Argentina
Sr. Member
 
Total Posts:  164
Joined:  2007-12-05
Buenos Aires, Argentina
 

I have a serious discrepancy problem too. Between Firefox and Explorer 6. I am in Argentina and both browsers are very used. Then, I need my store shows the same in both.
If you enter to http://www.vinosyplaceres.com/magento2 you can see the difference. All content (main) goes below the two columns in IE6 and the page is not useful in that way.
Maybe the width is the problem? Can you imagine what’s the matter?
I really need help with these, i drive crazy with all this stuff.

Thank you very much

 
Magento Community Magento Community
Magento Community
Magento Community
Magento Community
Magento Community
Back to top