Why my page doesn't display correctly in every browser?
I'm having a problem with a page. Basically what happens is that the code below in firefox it doesn't 开发者_JAVA技巧display the images, in Chrome it shows the images, but sometimes it doesn't show anything.
The code below should display like an image of a product and below of it, show the name of the product, for example with this:
<div class="bloque_prod">
<a class="texto_bloque_prod" href="<? echo (ROOT.'/respiratoria"')?>"><img style="display: block !important; margin: auto;" src="mw\imagen\productos\categorias\respiratoria.gif" /></a>
<div class="texto_bloque_prod"><a class="texto_bloque_prod" href="<? echo (ROOT.'/respiratoria"')?>">Protección Respiratoria</a></div>
</div>
It should show the "respiratoria.gif" and below it show the text "Protección Respiratoria". And all the products in the code below show be display like in a table.
<div class="cont_menu_izq">
<!-- <a name="Safety" id="ramas" style="color:#D82C17;">Safety:</a> -->
<div class="mini_space"></div>
<!-- LINEA 1 -->
<div class="linea_prod">
<!-- Producto -->
<div class="bloque_prod">
<a class="texto_bloque_prod" href="http://www.elexsa.com/P/respiratoria""><img style="display: block !important; margin: auto;" src="mw\imagen\productos\categorias\respiratoria.gif" /></a>
<div class="texto_bloque_prod"><a class="texto_bloque_prod" href="http://www.elexsa.com/P/respiratoria"">Protección Respiratoria</a></div>
</div>
<!--Fin producto-->
<div class="espacio_bloque_prod"></div>
<!--Producto-->
<div class="bloque_prod">
<a class="texto_bloque_prod" href="http://www.elexsa.com/P/caidas""><img style="display: block; margin: auto;" src="mw\imagen\productos\categorias\caidas.gif" /></a>
<div class="texto_bloque_prod"><a class="texto_bloque_prod" href="http://www.elexsa.com/P/caidas"">Protección Contra Caídas</a></div>
</div>
<!--Fin producto-->
<div class="espacio_bloque_prod"></div>
<!--Producto-->
<div class="bloque_prod">
<a class="texto_bloque_prod" href="http://www.elexsa.com/P/guantes""><img style="display: block; margin: auto;" src="mw\imagen\productos\categorias\guantes.gif" /></a>
<div class="texto_bloque_prod"><a class="texto_bloque_prod" href="http://www.elexsa.com/P/guantes"">Protección para Manos</a></div>
</div>
<!--Fin producto-->
<div class="espacio_bloque_prod"></div>
<!--Producto-->
<div class="bloque_prod">
<a class="texto_bloque_prod" href="http://www.elexsa.com/P/visual""><img style="display: block; margin: auto;" src="mw\imagen\productos\categorias\visual.gif" /></a>
<div class="texto_bloque_prod"><a class="texto_bloque_prod" href="http://www.elexsa.com/P/visual"">Protección Visual</a></div>
</div>
<!--Fin producto-->
</div>
In addition to the other answers posted, I see doubled double quotes on some attributes:
href="http://www.elexsa.com/P/visual"">
http://validator.w3.org/
The W3C Validator service is your friend in cases like this.
Edit: after seeing your PHP code, the aforementioned error is caused by this line:
BAD
<a class="texto_bloque_prod" href="<? echo (ROOT.'/respiratoria"')?>">
GOOD
<a class="texto_bloque_prod" href="<? echo (ROOT.'/respiratoria')?>">
Your src attributes on your image tags have backslashes. They should be using forward slashes. Some browsers handle this for you and others don't.
You have your slashes backwards on your image src
properties. Some browsers have tolerence for this, and others not. Either way, it's wrong. :)
src="mw\imagen\productos\categorias\visual.gif"
Should be
src="mw/imagen/productos/categorias/visual.gif"
...for all of your src
paths.
精彩评论