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

Nav shows different in Firefox and Internet Explorer EXAMPLE
 
Andrea, Argentina
Sr. Member
 
Total Posts:  164
Joined:  2007-12-05
Buenos Aires, Argentina
 

Here you have one html with a stylesheet because I am trying each part of page to see where discrepancy appears.
You have one html file with one header and the css file that I attached to it.

If you preview in FF, you will see that the navigation (the part with the background buttons) is up in FF and more low in IE.
I don’t know how to fix because don’t know where is the problem in the CSS styles. Really I want the nav to be more like you see this in FF.

Any help?
I am really interesting because I’m a designer and don’t get yet the complex CSS files in Magento.

Thank you very much

File Attachments
boxesAndrea.css  (File Size: 3KB - Downloads: 96)
pruebaConBoxesAndrea.htm  (File Size: 2KB - Downloads: 131)
 
Magento Community Magento Community
Magento Community
Magento Community
 
alistek
Sr. Member
 
Total Posts:  293
Joined:  2008-04-02
Normal, IL
 

If you use padding or margins in CSS there can be a problem due to the way that IE and Firefox interpret the box model.  If I recall IE will include the margin within the box while Firefox will add it to the outside.  Firefox is correct in this respect due to the W3C spec but still you need to account for the way IE works.  There are a few ways to handle this, you can use some CSS hacks or rather Magento allows you to conditionally load a CSS sheet specifically for IE which can override the CSS in your main one.  I think it is addCSSIE.  Anyways give that a shot and look up border box model in wikipedia to get a better description of the problem.  That might be it.

-Adam

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

Adam, thank you very much for your answer. I’ve read articles with hacks y that stuff but I have to be exactly where my code generate the differents views.
In the other hand, it seems that to get the same view within both explorers we have to hack all magento stylesheets?

 
Magento Community Magento Community
Magento Community
Magento Community
 
alistek
Sr. Member
 
Total Posts:  293
Joined:  2008-04-02
Normal, IL
 

That’s the state of CSS these days although it is far better then it used to be.  If you plan to support IE 6.0 and all other modern browsers and ignore IE 5.5 and down then you can get away with a lot more.  I’ve still seen about 3-5% of users coming to my companies website as IE 5.0-5.5 users so depending on who you decide to cater to then you can design for them.  If I were you I would design my website the way I want it to support the majority and then look at the entire site in IE 5.0-6.0 (whatever you want to support) and note down all of the places where things are different.  Usually it will pertain to the box model but there are other quirks and differences that crop up.  Then I would find all the classes/id’s that are being affected and create a new stylesheet that is specifically for IE.  Create the code that would make it appear correct in IE and use the addCSSIE function in the layout to load the correct stylesheets in the header.  A word of warning for testing though is that if you have multiple IE’s installed on your computer for testing, conditional stylesheet commands will only show the newest browser version (windows doesn’t correctly use the right rendering engine for multiple IE’s installed, only the newest).  You might have to use several computers or one of the few sites that let you get a screenshot of your website.  Hope this helps!

-Adam

P.S. You will run into this problem on any website you design, not just Magento’s.  They may have taken the approach with the default stylesheet that since it is a demo they will support only IE 6.0 and up or 7.0 and up.  It is left up to you to create your own design, etc.

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

Ok, Adam, thank you again.

Then, I must to take a course or something about CSS particulary. I am an oldfashion designer :(

 
Magento Community Magento Community
Magento Community
Magento Community
 
Laren
Jr. Member
 
Total Posts:  1
Joined:  2008-09-03
 

IE6 es un viejo navegador, lamentablemente sigue siendo popular y como diseñadores debemos hacer el gran esfuerzo de soportarlo. Por tanto tenemos dos opciones:

1. Nos rompemos la cabeza para intentar que todo quede lo más parecido entre navegadores sin usar ningun “truco"(esto toma mucho tiempo pero es una opción, para los amantes de los estándares).

2. Usamos algún truco que permita arreglar el diseño para IE6. Ojo que para IE7, Firefox, Opera y otros modernos, no tendremos mayor problema. Asi que si eliges este camino el cual NO ES INCORRECTO tienes un par de alternativas:

2.1. Le añades una pequeña hoja de estilos extra(aparte del css original) para corregir ciertos errores que muestre IE6, como el boxmodel. Luego con un condicional lo llamas en cada archivo. No te preocupes ya que solo se cargará si el usuario usa IE6 y obviamente esa hoja de estilos contiene solo correcciones extras, no contiene toda tu hoja de estilos original. 
Aqui puedes leer más sobre condicionales en HTML.

2.2.Usas javascript para mejorar la interpretación que hace IE6 hacia el css. Muchos te van a decir que no es bueno depender de un JS para que tu página se muestre correctamente y es cierto. Pero eso es en el caso de navegadores modernos. Como diseñadores hacemos un gran esfuerzo para soportar IE6 con Js incluido, y personalmente no pretendo hacer lo mismo para soportar IE6 sin Js
Si optas por esta opcion, usa este JS

Saludos

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