Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
2069 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  decalage banniere entre FF et IE

 



 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

decalage banniere entre FF et IE

n°2008571
euzene
Posté le 10-07-2010 à 12:13:45  profilanswer
 

J'ai un petite soucis de léger décalage de bannière entre Firefox et IE, je n'arrive pas à résoudre le soucis .
voici la page sous Firefox/safari (affichage correct) :
http://img651.imageshack.us/img651/1041/image2ra.png
 
sous IE la bannière de droite est trop basse de quelques pixels, se retrouve alignée avec l'image centrale et donc dépasse du cadre en bas
c'est pour un site de e-commerce j'utilise bigcartel.
 
voici le code de la page "home" concernée :
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 
 
<div>
<a target='_blank' title='home' href='http://fancyboobs.bigcartel.com/products'><img src='http://fancy-boobs.com/images/images-site/home%231.jpg' 'border:0px '></a>
</div>
 
 
<div id="bannhome">
<a target='_blank'href='http://fancyboobs.bigcartel.com/lookbook#http://fancy-boobs.com/lookbook/01.jpg'><img src='http://fancy-boobs.com/images/images-site/BANNIEREGIF.gif' border='0'/></a></div>
 
voici le css du site:
 
"/*============================================================
Theme Styles - contains all the base styles for the theme.
To receive automatic updates and bug fixes, we recommend
leaving this import and overriding specific styles below.
============================================================*/
 
@import url(/themes/blocks/stylesheets/styles.css);
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 
/*============================================================
Basic Styles - used for the simple controls.
============================================================*/
 
 
/* @gui Font */
@font-face {
font-family: Futura;
text-transform: uppercase;
src: url(http://fancy-boobs.com/images/Futura.ttf);
}
 
body
{font-family: Futura, Helvetica, sans-serif;}
 
/* @gui Background */
body {
background-color: #ffffff;
background-image: url(http://fancy-boobs.com/images/bg.gif)
}
 
a {
color: red;
}
 
#store{
width: 1000px;
}
 
#header{
/*border: 1px solid red;*/
height: 157px;
}
 
#logo{
height: 170px;
}
 
#menutop{
width: 100%;
height: 31px;
font-family: Futura;
text-transform: uppercase;
font-size: 10pt;
background-image: url(http://fancy-boobs.com/images/bg-menutop.png);
/*border: green 1px solid;*/
}
 
#menutop td {
vertical-align: middle !important;
}
 
#menuleft{
width: 165px;
height: 530px;
float: left;
font-family: Futura !important;
text-transform: uppercase;
font-size: 8pt;
background-image: url(http://fancy-boobs.com/images/bg-menuleft.gif);
/*border: blue 1px solid;*/
}
 
#product_price {
font-family: Futura !important;
text-transform: uppercase;
}
 
#page_name{
height: 26px;
text-align: center;
padding-top: 8px;
font-family: Futura;
text-transform: uppercase;
font-size: 10pt;
background-repeat: no-repeat;
background-position: center center;
background-image: url(http://fancy-boobs.com/images/bg-page_name.gif);
}
 
html #main {
height:450px;
background-color: #e9e9e9;
width: 554px;
padding: 35px 50px;
}
 
#main{
*padding: 15px 50px;
}
 
#main .general a {
height:122px !important;
width:175px;
 
}
 
#main .general {
float:left;
height:130px;
width:181px;
 
}
 
#main .featured {
height:216px;
 
}
 
#bannhome {
border:0px solid grey;
height:487px;
width:219px;
float:left;
margin-top: -435px;
margin-left: 655px;
}
 
#product_info {
font-size: 12pt;
margin-top:0px;
padding-top:0px;
position:relative;
}
 
#product_price {
font-size: 8pt;
background-color: #e9e9e9;
}
 
#product_description {
font-size: 12pt;
border-top:1px dotted #4B4B4B;
}
 
#main .featured a img, #main .general a img {
display:inline;
vertical-align:top;
}
 
#main .featured a {
height:207px;
width:300px;
}
 
#contact_form dt label{
color: grey;
}
,
 
/* @gui Blocks background */
a#website_back,
#search,
#footer
{background-color: #e9e9e9;}
#nav li
{border-left-color:#e9e9e9;}
 
 
/* @gui Blocks links */
a,
#main a#keep_shopping,
#pod_rss p
{color: #666666;}
 
 
/* @gui Main block background */
#adding_to_cart,
#added_to_cart
{background-color: #e9e9e9;}
#products_h3 extra
 
 
 
/* @gui Main block titles */
 
#minicart_count,
#main h1,{color: #FFFFFF;}
#main h2,
#main h3,
#main dt,
#product_list li a:hover .product_price,
#product_list li a,
.pagination span,
#main .pagination a,
#main .pagination a:hover,
#product_info,
#adding_to_cart h4,
#added_to_cart h4,
ul#option li label,
ul#cart_contents,
.cart_total H2 ,
#contact_form dt label,
#main #error li,
#main #error_noscript li,
#product_inventory h3
{color: #000000;}
 
 
/* @gui Main block text */
#main p,
#main dd,
#main label,
#main li,
#main #product_status,
.pagination span.current,
.pagination span.yadda,
#product_inventory .inventory_option,
.item_total,
#cart_discount .optional,
#shipping_entry,
#discount_entry,
#shipping_total,
#discount_total,color:
#products_extra h3
{color: #FFFFFF;}
 
 
 
/* @gui Main block links */
#main a
{color: #666666;border-bottom-color: #666666;}
 
 
/* @gui Main block lines */
#product_inventory li.sold_out .inventory_option,
#product_inventory span.inventory_sold
{color: #000000;}
#product_description,
#product_inventory,
#product_inventory li,
#contact_form dt,
#contact_form dd
{border-top-color: #999999;}
#cart_shipping,
#cart_discount
{background-color:#FFFFFF;}
 
 
/* @gui Inner blocks */
#minicart a {background-color: #e9e9e9;}
{color: #000000;}
#main .featured a,
#main .general a,
#main .thumbnail a,
.product_price,
#products_extra,
.pagination span,
#main .pagination a,
#cart_contents .item_wrap
{background-color: #ffffff;}
#main .featured a,
#main .general a,
#main .thumbnail a
{border-color: #ffffff;}
 
 
/* @gui Footer titles */
#footer h4,
#footer h4 a
{color: #666666;}
 
 
/* @gui Link rollovers */
a:hover,
#main a:hover,
#main a#keep_shopping:hover,
#footer h4 a:hover
{color: #00B8ED;}
#minicart a:hover,
{border-bottom-color: #00B8ED;}
#main .featured a:hover,
#main .general a:hover,
#main .thumbnail a:hover,
a#website_back:hover,
.product_price span.on_sale,
#product_inventory .inventory_bar,
#main .pagination a:hover,
#error,
#error_noscript
{background-color: #ffffff;}
#main .featured a:hover,
#main .general a:hover,
#main .thumbnail a:hover
{border-color: #ffffff;}
 
 
/*============================================================
Custom Styles - add and override styles below.
============================================================*/
 
 
 
 
 
 
on m'a indiqué les hacks css mais ca ne fonctionne pas..
 
merci!!

mood
Publicité
Posté le 10-07-2010 à 12:13:45  profilanswer
 

n°2008581
toum_toum
Vivons masqués
Posté le 10-07-2010 à 13:59:45  profilanswer
 

Salut.  
 
Pourrais-tu remettre en ligne ta page http://fancyboobs.etc/ 2-3 heures ?


Message édité par toum_toum le 10-07-2010 à 14:00:04
n°2008582
euzene
Posté le 10-07-2010 à 14:06:11  profilanswer
 

oui c'est fait www.fancyboobs.com est en ligne.
sous ie la bannière à droite ds la page  home est mal placée contrairement à firefox qui est bien.
merci.

n°2008583
euzene
Posté le 10-07-2010 à 14:06:44  profilanswer
 
n°2008584
toum_toum
Vivons masqués
Posté le 10-07-2010 à 14:24:31  profilanswer
 


ok :jap:

n°2008585
toum_toum
Vivons masqués
Posté le 10-07-2010 à 14:35:44  profilanswer
 

euzene a écrit :

J'ai un petite soucis de léger décalage de bannière entre Firefox et IE, je n'arrive pas à résoudre le soucis .
 
sous IE la bannière de droite est trop basse de quelques pixels, se retrouve alignée avec l'image centrale et donc dépasse du cadre en bas
c'est pour un site de e-commerce j'utilise bigcartel.
 
merci!!


 
Perso je ne vois pas le même probleme : ton logo, sous IE(7), est "poussé" vers le bas d'environ 150 pixels, et entraîne tout le reste des autres blocs dans sa "descente"...
 
 
 
PS : je vois 2 fois une div #logo dans ton css. Si tu regardais ça déjà ?
 
#logo  {
height:170px;
}
styles.css (ligne 46)
 
#logo {
font-size:15px;
font-weight:bold;
height:110px;
margin-bottom:0;
margin-left:0;
margin-right:0;
margin-top:0;
position:absolute;
width:255px;
z-index:1;
}
styles.css (ligne 284)
 
 
?

n°2008586
toum_toum
Vivons masqués
Posté le 10-07-2010 à 14:36:47  profilanswer
 

C'est ce  
 
#logo  {  
height:170px;  
}  
styles.css (ligne 46)  
 
...qui te "fout dedans" je pense, et te decale le tout de 170 pixels (ca rejoint ce que je disais un peu avant).  
 
Supprime cette div et rajoute la ligne height : etc... sur l'autre div "logo". C'est bon là ?


Message édité par toum_toum le 10-07-2010 à 14:37:25
n°2008611
euzene
Posté le 10-07-2010 à 19:21:26  profilanswer
 

voilà j'ai remis le css comme ceci:
 
"/*============================================================
  Theme Styles - contains all the base styles for the theme.
  To receive automatic updates and bug fixes, we recommend
  leaving this import and overriding specific styles below.
============================================================*/
 
@import url(/themes/blocks/stylesheets/styles.css);
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 
/*============================================================
  Basic Styles - used for the simple controls.
============================================================*/
 
 
/* @gui Font */
@font-face {
font-family: Futura;
text-transform: uppercase;
src: url(http://fancy-boobs.com/images/Futura.ttf);
}
 
body
{font-family: Futura, Helvetica, sans-serif;}
 
/* @gui Background */
body {
background-color: #ffffff;
background-image: url(http://fancy-boobs.com/images/bg.gif)
}
 
a {
color: red;
}
 
#logo {
font-size:15px;
font-weight:bold;
height:110px;
height:170px;
margin-bottom:0;
margin-left:0;
margin-right:0;
margin-top:0;
position:absolute;
width:255px;
z-index:1;
}  
 
#store{
width: 1000px;
}
 
#header{
/*border: 1px solid red;*/
height: 157px;
}
 
 
#menutop{
width: 100%;
height: 31px;
font-family: Futura;
text-transform: uppercase;
font-size: 10pt;
background-image: url(http://fancy-boobs.com/images/bg-menutop.png);
/*border: green 1px solid;*/
}
 
#menutop td {
vertical-align: middle !important;
}
 
#menuleft{
width: 165px;
height: 530px;
float: left;
font-family: Futura !important;
text-transform: uppercase;
font-size: 8pt;
background-image: url(http://fancy-boobs.com/images/bg-menuleft.gif);
/*border: blue 1px solid;*/
}
 
#product_price {
font-family: Futura !important;
text-transform: uppercase;
}
 
#page_name{
height: 26px;
text-align: center;
padding-top: 8px;
font-family: Futura;
text-transform: uppercase;
font-size: 10pt;
background-repeat: no-repeat;
background-position: center center;
background-image: url(http://fancy-boobs.com/images/bg-page_name.gif);
}
 
html #main {
height:450px;
background-color: #e9e9e9;
width: 554px;
padding: 35px 50px;
}
 
#main{
*padding: 15px 50px;
}
 
#main .general a {
height:122px !important;
width:175px;
 
}
 
#main .general {
float:left;
height:130px;
width:181px;
 
}
 
#main .featured {
height:216px;
 
}
 
#bannhome {
border:0px solid grey;
height:487px;
width:219px;
float:left;
margin-top: -435px !important;
margin-left: 655px !important;
}
 
#product_info {
font-size: 12pt;
margin-top:0px;
padding-top:0px;
position:relative;
}
 
#product_price {
font-size: 8pt;
background-color: #e9e9e9;
}
 
#product_description  {
font-size: 12pt;
border-top:1px dotted #4B4B4B;
}
 
#main .featured a img, #main .general a img {
display:inline;
vertical-align:top;
}
 
#main .featured a {
height:207px;
width:300px;
}
 
#contact_form dt label{
color: grey;
}
,
 
/* @gui Blocks background */
a#website_back,
#search,
#footer
{background-color: #e9e9e9;}
#nav li
{border-left-color:#e9e9e9;}
 
 
/* @gui Blocks links */
a,
#main a#keep_shopping,
#pod_rss p
{color: #666666;}
 
 
/* @gui Main block background */
#adding_to_cart,
#added_to_cart
{background-color: #e9e9e9;}
#products_h3 extra
 
 
 
/* @gui Main block titles */
#minicart_count,
#main h1,{color: #FFFFFF;}
#main h2,
#main h3,
#main dt,
#product_list li a:hover .product_price,
#product_list li a,
.pagination span,
#main .pagination a,
#main .pagination a:hover,
#product_info,
#adding_to_cart h4,
#added_to_cart h4,
ul#option li label,
ul#cart_contents,
.cart_total H2 ,
#contact_form dt label,
#main #error li,
#main #error_noscript li,
#product_inventory h3
{color: #000000;}
 
 
/* @gui Main block text */
#main p,
#main dd,
#main label,
#main li,
#main #product_status,
.pagination span.current,
.pagination span.yadda,
#product_inventory .inventory_option,
.item_total,
#cart_discount .optional,
#shipping_entry,
#discount_entry,
#shipping_total,
#discount_total,color:
#products_extra h3
{color: #FFFFFF;}
 
 
 
/* @gui Main block links */
#main a
{color: #666666;border-bottom-color: #666666;}
 
 
/* @gui Main block lines */
#product_inventory li.sold_out .inventory_option,
#product_inventory span.inventory_sold
{color: #000000;}
#product_description,
#product_inventory,
#product_inventory li,
#contact_form dt,
#contact_form dd
{border-top-color: #999999;}
#cart_shipping,
#cart_discount
{background-color:#FFFFFF;}
 
 
/* @gui Inner blocks */
#minicart a {background-color: #e9e9e9;}
{color:  #000000;}
#main .featured a,
#main .general a,
#main .thumbnail a,
.product_price,
#products_extra,
.pagination span,
#main .pagination a,
#cart_contents .item_wrap
{background-color: #ffffff;}
#main .featured a,
#main .general a,
#main .thumbnail a
{border-color: #ffffff;}
 
 
/* @gui Footer titles */
#footer h4,
#footer h4 a
{color: #666666;}
 
 
/* @gui Link rollovers */
a:hover,
#main a:hover,
#main a#keep_shopping:hover,
#footer h4 a:hover
{color: #00B8ED;}
#minicart a:hover,
{border-bottom-color: #00B8ED;}
#main .featured a:hover,
#main .general a:hover,
#main .thumbnail a:hover,
a#website_back:hover,
.product_price span.on_sale,
#product_inventory .inventory_bar,
#main .pagination a:hover,
#error,
#error_noscript
{background-color: #ffffff;}
#main .featured a:hover,
#main .general a:hover,
#main .thumbnail a:hover
{border-color: #ffffff;}
 
 
/*============================================================
  Custom Styles - add and override styles below.
============================================================*/
 
 
 
 
"
 
je ne peux pas accéder à IE, est-ce résolu ? sous FF c'est bon!

n°2008613
toum_toum
Vivons masqués
Posté le 10-07-2010 à 19:58:25  profilanswer
 

euzene a écrit :


je ne peux pas accéder à IE, est-ce résolu ? sous FF c'est bon!


 
Non, desolé.
 
 
 

Code :
  1. #logo {
  2. font-size:15px;
  3. font-weight:bold;
  4. height:110px;
  5. height:170px;
  6. margin-bottom:0;
  7. margin-left:0;
  8. margin-right:0;
  9. margin-top:0;
  10. position:absolute;
  11. width:255px;
  12. z-index:1;
  13. }


 
Pourquoi tu écris 2 height ?!!! Enleve le 2nd !

n°2008616
euzene
Posté le 10-07-2010 à 20:02:32  profilanswer
 

voila j'ai mis une seule height . le décalage est-il encore là?

mood
Publicité
Posté le 10-07-2010 à 20:02:32  profilanswer
 

n°2008618
toum_toum
Vivons masqués
Posté le 10-07-2010 à 20:14:54  profilanswer
 


Oui. Essaie d'enlever l'autre "height" pour voir ?
 
Non ce n'est pas ça de toutes façons...


Message édité par toum_toum le 10-07-2010 à 20:15:50
n°2008620
euzene
Posté le 10-07-2010 à 20:21:34  profilanswer
 

ah ! impossible de trouver la solution à cette banniere trop basse aie ...

n°2008628
toum_toum
Vivons masqués
Posté le 10-07-2010 à 20:30:37  profilanswer
 


En fait tu as 2 feuilles css qui gerent ta page :
 
Une est celle-ci : tonsite/themes/blocks/stylesheets/styles.css
L'autre celle-là : tonsite/theme_stylesheets/3967101/styles.css
 
Jusqu'à présent tu bossais sur l'une des 2 (la 2eme), mais il faudrait que tu regardes l'autre aussi...
 
 
Ce qui me semble bizarre, c'est que dans la 1 tu as deja une declaration css du logo :
 
#logo {
 position: absolute;
 width: 255px;
 height: 110px;
 margin: 0;
 font-size: 15px;
 font-weight: bold;
 z-index: 1;
 }
 
 
Et dans la 2eme, tu en a une autre :
 
#logo {
font-size:15px;
font-weight:bold;
height:170px;
margin-bottom:0;
margin-left:0;
margin-right:0;
margin-top:0;
position:absolute;
width:255px;
z-index:1;
}  
 
 
Pourquoi 2 fois ? C'est toi qui a écrit cette 2nde ?  
En tous cas essaie de te régler par rapport aux 2 feuilles :o
 

n°2008631
euzene
Posté le 10-07-2010 à 20:41:45  profilanswer
 

en fait j'utilise bigcartel plateforme de e-commerce, j'ai effectue les modifications css et html du site via l'admin de mon compte big cartel. donc en effet je pense que la seconde est celle qui est présentée sur l'admin du site.
le but est en fait d'avoir les deux mêmes feuilles si je suis bien ?

n°2008632
euzene
Posté le 10-07-2010 à 20:43:16  profilanswer
 

mais le premiere page je ne peux pas la modifier...

n°2008637
toum_toum
Vivons masqués
Posté le 10-07-2010 à 21:43:24  profilanswer
 

Aie.. Oui, normal je pense...
 
Mais c'est toi qui a rajouté les infos "logo" dans l'autre page ?
 
 
 
Edit : suis désolé, je n'arrive pas à aller plus loin.  Tu n'as pas un forum  "bigcartel" ?


Message édité par toum_toum le 10-07-2010 à 22:36:47
n°2008661
gatsu35
Blablaté par Harko
Posté le 11-07-2010 à 07:59:55  profilanswer
 

remet en ligne ta page dans un endroit caché et file nous le lien, et met ton code entre balise [code ] [/code] (sans les espace hein dans la balise)
 
Tu fais n'importe quoi, pourquoi il y a un doctype dans ta CSS ???
ensuite, ton site une fois en ligne on aura moins de mal à trouver le pb. MERCI
 


---------------
Blablaté par Harko
n°2008681
euzene
Posté le 11-07-2010 à 11:43:35  profilanswer
 

si je donne l'acces à l'admin la où il y a toute les pages ?
ca serait plus claire non?

n°2008682
gatsu35
Blablaté par Harko
Posté le 11-07-2010 à 11:50:59  profilanswer
 

on veut juste voir au moins 1 page qui déconne, donc au pire tu sauvegarde le code HTML d'une page générée dans un fichier, tu la colle sur ton site et tu lances cette page et ensuite on verra.


---------------
Blablaté par Harko
n°2008683
euzene
Posté le 11-07-2010 à 11:54:24  profilanswer
 

alors je mets le site en ligne  
www.fancy-boobs.com
le pbl de la bannière de la page home à droite légèrement trop basse sous IE , il faut le même affichage que sur FF... tu as le css ds le premier post.


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  decalage banniere entre FF et IE

 

Sujets relatifs
Problème imbrication d'objet Jquery IEMauvais affichage menu SPRY sous IE
Image de bannière toujours en basbannière flash (blogger)
Probleme prise en charge Tableaux IE/Chrome/Firefox/Opera[Résolu] Positionnement d'une image/banniere dans le CSS
Macro Excel VBA IEDécalage de l'heure en php par rapport au serveur
Problème d'affichage diffèrent sur IE et ChromeFooter centré sous Mozilla mais excentré sous IE
Plus de sujets relatifs à : decalage banniere entre FF et IE


Copyright © 1997-2018 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR