decalage banniere entre FF et IE

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : decalage banniere entre FF et IE

euzene

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!!

Message cité 1 fois

Publicité

toum_toum

Vivons masqués

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

---------------
“Et maintenant, la météo" - Soloviev 2022-2024

euzene

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.

euzene

www.fancy-boobs.com pardon !!

toum_toum

Vivons masqués

ok :jap:

---------------
“Et maintenant, la météo" - Soloviev 2022-2024

toum_toum

Vivons masqués

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)

?

---------------
“Et maintenant, la météo" - Soloviev 2022-2024

toum_toum

Vivons masqués

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

---------------
“Et maintenant, la météo" - Soloviev 2022-2024

euzene

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!

Message cité 1 fois

toum_toum

Vivons masqués

euzene a écrit :

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

Non, desolé.

Code :

#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;
}

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

---------------
“Et maintenant, la météo" - Soloviev 2022-2024

euzene

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

Publicité

toum_toum

Vivons masqués

~~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

---------------
“Et maintenant, la météo" - Soloviev 2022-2024

euzene

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

toum_toum

Vivons masqués

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

---------------
“Et maintenant, la météo" - Soloviev 2022-2024

euzene

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 ?

euzene

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

toum_toum

Vivons masqués

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

---------------
“Et maintenant, la météo" - Soloviev 2022-2024

gatsu35

Blablaté par Harko

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

euzene

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

gatsu35

Blablaté par Harko

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

euzene

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.

FORUM HardWare.fr

Programmation

HTML/CSS

decalage banniere entre FF et IE

Sujets relatifs
Problème imbrication d'objet Jquery IE	Mauvais affichage menu SPRY sous IE
Image de bannière toujours en bas	banniè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 IE	Décalage de l'heure en php par rapport au serveur
Problème d'affichage diffèrent sur IE et Chrome	Footer centré sous Mozilla mais excentré sous IE
Plus de sujets relatifs à : decalage banniere entre FF et IE

Page générée en 0.061 secondes