decalage banniere entre FF et IE

Marsh Posté le 10-07-2010 à 12:13:45

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

Reply

Marsh Posté le 10-07-2010 à 12:13:45

Reply

Marsh Posté le 10-07-2010 à 13:59:45

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

Reply

Marsh Posté le 10-07-2010 à 14:06:11

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.

Reply

Marsh Posté le 10-07-2010 à 14:06:44

www.fancy-boobs.com pardon !!

Reply

Marsh Posté le 10-07-2010 à 14:24:31

ok :jap:

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

Reply

Marsh Posté le 10-07-2010 à 14:35:44

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

Reply

Marsh Posté le 10-07-2010 à 14:36:47

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

Reply

Marsh Posté le 10-07-2010 à 19:21:26

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

Reply

Marsh Posté le 10-07-2010 à 19:58:25

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

Reply

Marsh Posté le 10-07-2010 à 20:02:32

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

Reply

Marsh Posté le 10-07-2010 à 20:02:32

Reply

Marsh Posté le 10-07-2010 à 20:14:54

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

Reply

Marsh Posté le 10-07-2010 à 20:21:34

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

Reply

Marsh Posté le 10-07-2010 à 20:30:37

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

Reply

Marsh Posté le 10-07-2010 à 20:41:45

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 ?

Reply

Marsh Posté le 10-07-2010 à 20:43:16

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

Reply

Marsh Posté le 10-07-2010 à 21:43:24

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

Reply

Marsh Posté le 11-07-2010 à 07:59:55

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

Reply

Marsh Posté le 11-07-2010 à 11:43:35

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

Reply

Marsh Posté le 11-07-2010 à 11:50:59

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

Reply

Marsh Posté le 11-07-2010 à 11:54:24

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.

Reply

decalage banniere entre FF et IE

Sujets relatifs:

Leave a Replay