Background Images vertically cut by IE

Forum Moderators: not2easy

Message Too Old, No Replies

Background Images vertically cut by IE

Css sprites problem in IE, no problem with mozilla firefox

mrnabla

3:01 pm on Jun 18, 2008 (gmt 0)

Hello everybody,

I'm new in posting in this forum.

My website uses css sprites to manage background images. (One of) the bigger problem I have is the cut of images by IE. In my homepage I have a table structure, in wich I used CSS sprites.

If you open the homepage with mozilla firefox and internet explorer, you will see the thing I'm trying to explain: the images at the top of the tables in main body are cutted.

(Lateral images are OK because I have not yet managed it with css sprites, but I would like to do this in future, in order to increase opening page speed)

Surely I tried to spend many saturday evenings trying to solve this but I failed. Could somebody help me?

thanks

lore

(sorry for my english, I posted from Italy.)

[edited by: tedster at 3:12 pm (utc) on June 18, 2008]
[edit reason] personal domain name removed [/edit]

4css

3:26 pm on Jun 18, 2008 (gmt 0)

Hi mrnabla

Welcome to WebmasterWorld!

If you do a google (sorry but I'm not familiar with css sprites) on your problem you will find a few articles that might help you out.

A list apart has an article on css sprites and images, so you might want to read that one.

btw, your English is fine ;)

mrnabla

9:40 pm on Jun 18, 2008 (gmt 0)

Hi, thanks for your answer.
i read a list apart, to learn how to use css sprites.
But now the problem I have to solve is another.
To avoid to seem I want to promote my site, I cut & paste my
css here.
Thanks to everybody.
In a special way to everybodi will help me in solve this boring problem.
Thanks.

lore

/* CSS Document */
/*
Current Sub-Domains
...
*/

html {
height: 100%;
}

body {
height: 100%;
margin-bottom: 1px;
}

.clr {
clear: both;
}

.outline { /*stile contorno sito*/
/* border: 1px solid #cccccc; */
background: #ffffff;
padding-left: 0px;
padding-right: 0px;
margin: 0px;
}

#buttons_outer { /*stile bottoni menu top esterno*/
width: 100%;
margin-bottom: 2px;
margin-right: 2px;
float: left;
}

#buttons_inner { /*stile bottoni menu top interno*/
border-top: 0px solid #000000;
border-bottom: 0px solid #bfbfbf;
height: 18px !important;
/*background: url(../images/menu_top_bg.png) no-repeat;*/
}

#path_inner { /*stile path interno*/
padding-left: 16px;
}

#pathway_text { /*stile percorso*/
overflow: hidden;
display: block;
height: 25px;
line-height: 25px !important;
line-height: 22px;
padding-left: 4px;
/*border: 1px solid #ccc;*/
margin-bottom: 2px;
}

#pathway_text img { /*stile percorso immagine*/
margin-left: 5px;
margin-right: 5px;
margin-top: 6px;
}

#buttons { /*stile bottoni scritte*/
float: left;
margin: 0px;
padding: 0px;
width: auto;
}

ul#mainlevel-nav {
list-style: none;
padding-left: 0px;
margin: 0;
font-size: 0.8em;
}

ul#mainlevel-nav li { /*stile pulsanti di navigazione*/
background-image: none;
padding-left: 0px;
padding-right: 0px;
float: left;
margin: 0;
font-size: 11px;
line-height: 19px;
white-space: nowrap;
border-top: 1px solid #ffffff;
border-left: 1px solid #ffffff;
border-right: 1px solid #666666;
}

ul#mainlevel-nav li a {
display: block;
padding-left: 15px;
padding-right: 15px;
text-decoration: none;
color: #333333;
background: transparent;
}

#buttons>ul#mainlevel-nav li a { width: auto; }

ul#mainlevel-nav li a:hover { /**/
color: #B80101;
background: url(../images/menutop_bg_02_over.png) repeat-x;
}

#search_outer { /*stile ricerca esterno*/
float: left;
width: 165px;
}

#search_inner { /*stile ricerca interno*/
border: 1px solid #cccccc;
padding: 0px;
height: 21px !important;
height: 23px;
overflow: hidden;
}

#search_inner form {
padding: 0;
margin: 0;
}

#search_inner .inputbox {
border: 0px;
padding: 3px 3px 3px 5px;
font-family: arial, helvetica, sans-serif;
font-size: 11px;
color: #B80101;
}

#header_outer {
text-align: left;
border: 0px;
margin: 0px;
}

#header { /*stile header*/
float: left;
padding: 0px;
margin-right: 0px; /*2*/
width: 100%;
height: 120px;
background: url(../images/logo_banner_bg.png) repeat-x;
}

#top_outer{ /*stile esterno tabella top*/
float: left;
width: 802px;
}

#top_inner { /*stile interno tabella top*/
/*border: 1px solid #ffffff;*/
padding: 0px; /*2*/
height: 120px !important;
height: 802px;
overflow: hidden;
float: none !important;
float: left;
}

#left_outer { /*stile esterno tabella sinistra*/
float: left;
margin-top: 2px;
width: 165px;
}

#left_inner { /*stile esterno tabella destra*/
/*border: 1px solid #cccccc;*/
padding: 0px;
float: none !important;
float: left;
}

#content_outer { /*stile esterno tabella contenuti*/
padding: 0px;
margin-top: 10px;
margin-left: 0px;
/** border: 1px solid #cccccc; **/
float: left;
width: 100%; /*width: 635px;*/
max-width: 100%;
}

#content_inner { /*stile interno tabella contenuti*/
float: none !important;
float: left;
padding: 0;
padding-top: 2px;
margin: 0;
}

table.content_table {
max-width:100%; /*Correzione IE*/
/*padding: 0px;
margin: 0px;*/
}

table.content_table td {
max-width:100%; /*Correzione IE*/
/*padding: 0px;
margin: 0px;*/
}

#banner_inner { /*stile interno banner*/
float: left;
padding: 0px;
height: 70px;
}

#poweredby_inner {
float: right;
padding: 0px;
margin-left: 0px;
height: 70px;
}

#right_outer { /*stile esterno tabella destra*/
margin-left: 2px;
width: 165px;
}

#right_inner { /*stile interno tabella destra*/
float: none !important;
float: left;
/*border: 1px solid #cccccc;*/
padding: 2px;
}

.user1_inner { /*stile interno ultime news*/
/*border: 1px solid #cccccc;*/
float: none !important;
float: left;
margin: 0px;
padding: 2px;
}

.user2_inner { /*stile interno i pi� letti*/
/*border: 1px solid #cccccc;*/
float: none !important;
float: left;
margin: 0px;
padding: 0px;
}

table td.body_outer { /*stile tabella centrale*/
max-width:100%;
/*Correzione IE*/
/*padding: 2px;*/
/*border: 1px solid #cccccc;*/
}

.maintitle {
color: #ffffff;
font-size: 40px;
padding-left: 15px;
padding-top: 20px;
}

.error {
font-style: italic;
text-transform: uppercase;
padding: 5px;
color: #cccccc;
font-size: 14px;
font-weight: bold;
}

/** old stuff **/

.back_button { /*bottone torna indietro mod ;-)*/
float: left;
text-align: center;
font-size: 11px;
font-weight: bold;
background: url(../images/button.png);
/*padding: 0px 10px;*/
height: 28px;
line-height: 28px;
width: 83px;
margin: 1px;
}

.pagenav {
text-align: center;
font-size: 11px;
font-weight: bold;
background: url(../images/button.png);
/*padding: 0px 10px;*/
height: 28px;
line-height: 28px;
width: 83px;
margin: 1px;
}

.pagenavbar {
margin-right: 0px; /*10*/
float: right;
}

#footer {
text-align: center;
padding: 3px;
}

ul {
margin: 0;
padding: 0;
list-style: none;
}

li {
line-height: 15px;
padding-left: 15px;
padding-top: 0px;
background-image: url(../images/arrow.png);
background-repeat: no-repeat;
background-position: 0px 2px;
}

td {
text-align: left;
font-size: 13px; /*Correzione IE font-size = body.font_size*/
}

body {
margin: 0px;
height: 100%;
padding: 0px;
font-family: Arial, Helvetica, Sans Serif;
font-size: 13px;
line-height: 120%;
color: #333333;
background: #e0e0e0; /*Sfondo Pagina*/
}

/* Joomla core stuff */
a:link, a:visited {
color: #B80101; text-decoration: none;
font-weight: bold;
}

a:hover {
color: #B80101;
text-decoration: underline;
font-weight: bold;
}

table.contentpaneopen { /*Stile Tabella Contenuto Centrale*/
max-width:100%; /*Correzione IE*/
width: 100%;
padding: 0px;
border-collapse: collapse;
border-spacing: 0px;
margin: 0px;
}

table.contentpaneopen td {
max-width:100%; /*Correzione IE*/
padding-right: 5px;
}

table.contentpaneopen td.componentheading {
max-width:100%; /*Correzione IE*/
padding-left: 4px;
}

table.contentpane {
max-width:100%; /*Correzione IE*/
width: 100%;
padding: 0px;
border-collapse: collapse;
border-spacing: 0px;
margin: 0px;
}

table.contentpane td {
max-width:100%; /*Correzione IE*/
margin: 0px;
padding: 0px;
}

table.contentpane td.componentheading {
max-width:100%; /*Correzione IE*/
padding-left: 4px;
}

table.contentpaneopen fieldset {
max-width:100%; /*Correzione IE*/
border: 0px;
border-bottom: 1px solid #eee;
}

.button { /*Stile Bottoni*/
/*color: #B80101;*/
font-family: Arial, Hevlvetica, sans-serif;
text-align: center;
font-size: 11px;
font-weight: normal;
/*padding: 0px 10px;*/
/*border: 3px double #cccccc;
width: auto;
background: url(../images/button_bg.png) repeat-x;
padding: 0px 5px;
line-height: 18px !important;
line-height: 16px;
height: 26px !important;
height: 24px;
margin: 1px; */
}

.inputbox {
padding: 2px;
border:solid 1px #cccccc;
background-color: #ffffff;
}

.componentheading {
height: 21px; /*21*/
font-weight: bold;
font-size: 11px;
font-weight: bold;
color: #333333;
text-transform: uppercase;
background: url(../images/subhead_bg.png) no-repeat;
height: 21px;
padding-left: 8px;
padding-top: 4px;
/*subhead_bg.png*/
text-align: left;
/*padding-top: 0px; /*4*/
/*padding-left: 0px; /*4*/
/*height: 21px; /*21*/
/*font-weight: bold;
font-size: 10px;
text-transform: uppercase;*/
}

.contentcolumn {
padding-right: 5px;
}

.contentheading {
height: 30px;
color: #B80101;
font-weight: bold;
font-size: 14px;
white-space: nowrap;
}

.contentpagetitle {
font-size: 13px;
font-weight: bold;
color: #cccccc;
text-align:left;
}

table.searchinto {
max-width:100%; /*Correzione IE*/
width: 100%;
}

table.searchintro td {
max-width:100%; /*Correzione IE*/
font-weight: bold;
}

/*------------------------------------Bordatura tonda moduli sinistra e destra*/

#left_inner div.moduletable {
max-width:100%; /*Correzione IE*/
margin: 0 0 10px 0;
padding: 0 0 10px 0;
background: url(../images/module_bottom.png) bottom left no-repeat;
}

#left_inner div.moduletable h3 {
max-width:100%; /*Correzione IE*/
padding: 5px 0px 0px 0px;
margin-bottom: 0px;
text-align: center;
color: #fff;
background: url(../images/module_top.png) top left no-repeat;
font-weight: bold;
}

#right_outer div.moduletable {
max-width:100%; /*Correzione IE*/
margin: 0px 0px 10px 0px;
padding: 0px 0px 0px 0px;
background: url(../images/module_bottom.png) bottom left no-repeat;
}

#right_outer div.moduletable h3 {
max-width:100%; /*Correzione IE*/
padding: 5px 0px 0px 0px;
margin-bottom: 0px;
text-align: center;
color: #fff;
background: url(../images/module_top.png) top left no-repeat;
font-weight: bold;
}

#left_inner div.corpo {
max-width:100%; /*Correzione IE*/
margin: 0 0 10px 0;
padding: 0 0 10px 0;
background: url(../images/module_bottom.png) bottom left no-repeat;
}

/*------------------------------------Bordatura tonda moduli sinistra e destra*/

table.moduletable {
max-width:100%; /*Correzione IE*/
width: 100%;
margin-bottom: 5px;
padding: 0px;
border-spacing: 0px;
border-collapse: collapse;
}

div.moduletable {
max-width:100%; /*Correzione IE*/
padding: 0;
margin-bottom: 2px;
}

table.moduletable th, div.moduletable h3 { /*stile titolo user1 user2*/
max-width:100%; /*Correzione IE*/
background: url(../images/user_bg_01.png) repeat-x;
color: #666666;
text-align: left;
/*padding-left: 4px;*/
height: 21px;
line-height: 21px;
font-weight: bold;
font-size: 10px;
text-transform: uppercase;
margin: 0 0 2px 0;
}

/*-----------------------------------------Spaziatura interna contenuti moduli*/
div.moduletable td {
max-width:100%; /*Correzione IE*/
font-size: 11px;
padding-left: 5px;
padding-right: 5px;
margin: 0px;
font-weight: normal;
}

div.moduletable h3 {
max-width:100%; /*Correzione IE*/
font-size: 11px;
padding-left: 5px;
padding-right: 5px;
margin: 0px;
font-weight: bold;
}
/*----------------------------------------------------------------------------*/

table.moduletable td {
max-width:100%; /*Correzione IE*/
font-size: 11px;
padding: 0px;
margin: 0px;
font-weight: normal;
}

table.pollstableborder td { /*Stile Sondaggio*/
max-width:100%; /*Correzione IE*/
padding: 2px;
background: #DCDCDC;
}

.sectiontableheader {
max-width:100%; /*Correzione IE*/
font-weight: bold;
background: #f0f0f0;
padding: 4px;
}

.sectiontablefooter {
max-width:100%; /*Correzione IE*/
}

.sectiontableentry1 {
max-width:100%; /*Correzione IE*/
background-color : #ffffff;
}

.sectiontableentry2 {
max-width:100%; /*Correzione IE*/
background-color : #f9f9f9;
}

.small {
color: #999999;
font-size: 11px;
}

.createdate {
height: 15px;
padding-bottom: 10px;
color: #999999;
font-size: 11px;
}

.modifydate {
height: 15px;
padding-top: 10px;
color: #999999;
font-size: 11px;
}

table.contenttoc {
max-width:100%; /*Correzione IE*/
border: 1px solid #cccccc;
padding: 2px;
margin-left: 2px;
margin-bottom: 2px;
}

table.contenttoc td {
max-width:100%; /*Correzione IE*/
padding: 2px;
}

table.contenttoc th {
max-width:100%; /*Correzione IE*/
background: url(../images/subhead_bg.png) repeat-x;
color: #333333;
text-align: left;
padding-top: 2px;
padding-left: 4px;
height: 21px;
font-weight: bold;
font-size: 10px;
text-transform: uppercase;
}

a.mainlevel:link, a.mainlevel:visited { /*stile menu principale*/
display: block;
background: url(../images/menu_bg.png) no-repeat;
vertical-align: middle;
font-size: 11px;
font-weight: bold;
color: #333333;
text-align: left;
padding-top: 5px;
padding-left: 0px;
padding-left: 18px;
height: 20px !important;
height: 25px;
width: 149px;
text-decoration: none;
}

a.mainlevel:hover {
background-position: 0px -25px;
text-decoration: none;
color: #B80101;
}

a.mainlevel#active_menu {
color:#B80101;
font-weight: bold;
}

a.mainlevel#active_menu:hover {
color: #B80101;
}

a.sublevel:link, a.sublevel:visited {
padding-left: 1px;
vertical-align: middle;
font-size: 11px;
font-weight: bold;
color: #B80101;
text-align: left;
}

a.sublevel:hover {
color: #900;
text-decoration: none;
}

a.sublevel#active_menu {
color: #333;
}

.highlight {
background-color: Yellow;
color: Blue;
padding: 0;
}
.code {
background-color: #ddd;
border: 1px solid #bbb;
}

form {
/* removes space below form elements */
margin: 0;
padding: 0;
}

div.mosimage {
border: 1px solid #ccc;
}

.mosimage {
border: 1px solid #cccccc;
margin: 5px
}

.mosimage_caption {
margin-top: 2px;
background: #efefef;
padding: 1px 2px;
color: #666;
font-size: 10px;
border-top: 1px solid #cccccc;
}

span.article_seperator {
display: block;
height: 1.5em;
}

h1 {
font-size: 20px;
color: #000000;
font-weight: normal;
}

h2 {
font-size: 15px;
color: #B80101;
font-weight: normal;
}

h3 {
font-size: 15px;
color: #000000;
font-weight: normal;
}

h4 {
font-size: 10px;
color: #000000;
}

table.ldgtable { /*Stile Tabella generica LDG*/
max-width:100%; /*Correzione IE*/
width: 100%;
padding: 0px;
border-collapse: collapse;
border-spacing: 0px;
margin: 0px;
border-color: #ffffff;

}
table.ldgtable td{
padding: 1px;
}
.testata{ /*correzione altezza immagine header tabella*/
height: 39px;
}

.LDG-MEDIUM {display:block; max-width:100%; background-color:#FFF; background-image:url(../images/medium/ldg_medium_small.png); background-repeat:no-repeat; overflow:hidden;}
.ldg-medium-spacer_bad { width:1px; height:1px; background-position: -312px -1297px; }
.ldg-medium-advertisement { width:468px; height:8px; border:0px; background-position: 0px -2px; }
.ldg-medium-cerca_box_bg_02 { height:39px; width:272px; border:0px; background-position: 0px -12px; }
.ldg-medium-logo_banner { width:445px; height:120px; border:0px; background-color:#000; border:0px; background-position: 0px -53px; }
.ldg-medium-logo_banner_orig { width:445px; height:120px; border:0px; background-color:#000; border:0px; background-position: 0px -175px; }
.ldg-medium-segnala_box_bg_02 { height:39px; width:272px; border:0px; background-position: 0px -297px; }
.ldg-medium-stat_bg_02_01 { width:270px; height:39px; border:0px; background-position: 0px -361px; }
.ldg-medium-stat_bg_02_02 { width:270px; height:39px; border:0px; background-position: 0px -402px; }
.ldg-medium-stat_bg_02_03 { width:270px; height:39px; border:0px; background-position: 0px -443px; }
.ldg-medium-stat_bg_02_04 { width:270px; height:39px; border:0px; background-position: 0px -484px; }
.ldg-medium-subhead_bg { width:500px; height:21px; border:0px; background-position: 0px -338px; }
.ldg-medium-abbigliamento_altro {width:64px; height:64px; background-position: 0px -525px; }
.ldg-medium-abbigliamento_scarpe {width:64px; height:64px; background-position: 0px -591px; }
.ldg-medium-abbigliamento_vestiario {width:64px; height:64px; background-position: 0px -657px; }
.ldg-medium-alimentari_acque {width:64px; height:64px; background-position: 0px -723px; }
.ldg-medium-alimentari_alcolici {width:64px; height:64px; background-position: 0px -789px; }
.ldg-medium-alimentari_altro { width:64px; height:64px; background-position: 0px -855px; }
.ldg-medium-alimentari_bibite { width:64px; height:64px; background-position: 0px -921px; }
.ldg-medium-alimentari_caffete { width:64px; height:64px; background-position: 0px -987px; }
.ldg-medium-alimentari_condimenti { width:64px; height:64px; background-position: 0px -1053px; }
.ldg-medium-alimentari_dolci { width:64px; height:64px; background-position: -198px -525px; }
.ldg-medium-alimentari_infanzia { width:64px; height:64px; background-position: -198px -591px; }
.ldg-medium-alimentari_pastariso { width:64px; height:64px; background-position: -198px -657px; }
.ldg-medium-alimentari_salatini { width:64px; height:64px; background-position: -198px -723px; }
.ldg-medium-alimentari_salumi { width:64px; height:64px; background-position: -198px -789px; }
.ldg-medium-alimentari_scatolame { width:64px; height:64px; background-position: -198px -855px; }
.ldg-medium-alimentari_sottoliosottaceti { width:64px; height:64px; background-position: -198px -921px; }
.ldg-medium-alimentari_surgelati { width:64px; height:64px; background-position: -198px -987px; }
.ldg-medium-animali_altro { width:64px; height:64px; background-position: -198px -1053px; }
.ldg-medium-animali_mangimi { width:64px; height:64px; background-position: -330px -393px; }
.ldg-medium-audiovideo_altro { width:64px; height:64px; background-position: -330px -459px; }
.ldg-medium-audiovideo_fotocamere { width:64px; height:64px; background-position: -330px -525px; }
.ldg-medium-audiovideo_hifi { width:64px; height:64px; background-position: -330px -591px; }
.ldg-medium-audiovideo_memorie { width:64px; height:64px; background-position: -330px -657px; }
.ldg-medium-audiovideo_mp3 { width:64px; height:64px; background-position: -330px -723px; }
.ldg-medium-audiovideo_tv { width:64px; height:64px; background-position: -330px -789px; }
.ldg-medium-audiovideo_videocamere { width:64px; height:64px; background-position: -330px -855px; }
.ldg-medium-audiovideo_videoregistratorivhsdivx { width:64px; height:64px; background-position: -330px -921px; }
.ldg-medium-automoto_altro { width:64px; height:64px; background-position: -330px -987px; }
.ldg-medium-automoto_audio { width:64px; height:64px; background-position: -330px -1053px; }
.ldg-medium-bricolage_altro { width:64px; height:64px; background-position: -198px -1119px; }
.ldg-medium-bricolage_elettroutensili { width:64px; height:64px; background-position: -66px -525px; }
.ldg-medium-bricolage_vernicisolventi { width:64px; height:64px; background-position: -66px -591px; }
.ldg-medium-casa_altro { width:64px; height:64px; background-position: -66px -657px; }
.ldg-medium-casa_condizionatorifissi { width:64px; height:64px; background-position: -66px -723px; }
.ldg-medium-curadelcorpo_altro { width:64px; height:64px; background-position: -66px -789px; }
.ldg-medium-curadelcorpo_dentifrici { width:64px; height:64px; background-position: -66px -855px; }
.ldg-medium-curadelcorpo_detergenti { width:64px; height:64px; background-position: -66px -921px; }
.ldg-medium-curadelcorpo_infanzia { width:64px; height:64px; background-position: -66px -987px; }
.ldg-medium-curadelcorpo_phon { width:64px; height:64px; background-position: -66px -1053px; }
.ldg-medium-curadelcorpo_rasoiepilatori { width:64px; height:64px; background-position: -264px -525px; }
.ldg-medium-curadelcorpo_spazzolini { width:64px; height:64px; background-position: -264px -591px; }
.ldg-medium-elettrodomestici_altro { width:64px; height:64px; background-position: -264px -657px; }
.ldg-medium-elettrodomestici_aspirapolvere { width:64px; height:64px; background-position: -264px -723px; }
.ldg-medium-elettrodomestici_condizionatorimobili { width:64px; height:64px; background-position: -264px -789px; }
.ldg-medium-elettrodomestici_ferridastiro { width:64px; height:64px; background-position: -264px -855px; }
.ldg-medium-elettrodomestici_frigoriferi { width:64px; height:64px; background-position: -264px -921px; }
.ldg-medium-elettrodomestici_lavatrici { width:64px; height:64px; background-position: -264px -987px; }
.ldg-medium-elettrodomestici_microonde { width:64px; height:64px; background-position: -264px -1053px; }
.ldg-medium-puliziadellacasa_bucato { width:64px; height:64px; background-position: -264px -1119px; }
.ldg-medium-farmaci_altro { width:64px; height:64px; background-position: -396px -459px; }
.ldg-medium-informatica_altro { width:64px; height:64px; background-position: -396px -525px; }
.ldg-medium-informatica_cddvd { width:64px; height:64px; background-position: -396px -591px; }
.ldg-medium-informatica_memorieusb { width:64px; height:64px; background-position: -396px -657px; }
.ldg-medium-informatica_monitor { width:64px; height:64px; background-position: -396px -723px; }
.ldg-medium-informatica_navigatorigps { width:64px; height:64px; background-position: -396px -789px; }
.ldg-medium-informatica_palmari { width:64px; height:64px; background-position: -396px -855px; }
.ldg-medium-informatica_pcdesktop { width:64px; height:64px; background-position: -396px -921px; }
.ldg-medium-informatica_pcnotebook { width:64px; height:64px; background-position: -396px -987px; }
.ldg-medium-informatica_stampanti { width:64px; height:64px; background-position: -396px -1053px; }
.ldg-medium-puliziadellacasa_altro { width:64px; height:64px; background-position: -396px -1119px; }
.ldg-medium-puliziadellacasa_detergenti { width:64px; height:64px; background-position: -132px -525px; }
.ldg-medium-sport_altro { width:64px; height:64px; background-position: -132px -591px; }
.ldg-medium-telefonia_altro { width:64px; height:64px; background-position: -132px -657px; }
.ldg-medium-telefonia_cellulari { width:64px; height:64px; background-position: -132px -723px; }
.ldg-medium-telefonia_telefonifissi { width:64px; height:64px; background-position: -132px -789px; }
.ldg-medium-videogiochi_accessori { width:64px; height:64px; background-position: -132px -855px; }
.ldg-medium-videogiochi_altro { width:64px; height:64px; background-position: -132px -921px; }
.ldg-medium-videogiochi_console { width:64px; height:64px; background-position: -132px -987px; }
.ldg-medium-videogiochi_giochi { width:64px; height:64px; background-position: -132px -1053px; }
.ldg-medium-espandi { width:57px; height:11px; background-position: 0px -1119px; }
.ldg-medium-prezzomax { width:64px; height:21px; background-position: 0px -1131px; }
.ldg-medium-prezzomin { width:64px; height:21px; background-position: 0px -1154px; }
.ldg-medium-prezzomedio { width:64px; height:21px; background-position: 0px -1177px; }
.ldg-medium-prezzounico { width:64px; height:21px; background-position: -66px -1131px; }
.ldg-medium-prezzomax2 { width:26px; height:15px; background-position: -66px -1154px; }
.ldg-medium-prezzomin2 { width:26px; height:15px; background-position: -66px -1171px; }
.ldg-medium-prezzomedio2 { width:26px; height:15px; background-position: -94px -1154px; }
.ldg-medium-prezzounico2 { width:26px; height:15px; background-position: -94px -1171px; }
.ldg-medium-audiovideo_lettori_multimediali { width:64px; height:64px; background-position: -447px -53px; }
.ldg-medium-informatica_hard_disk_esterni { width:64px; height:64px; background-position: -447px -119px; }

.LDG-LARGE {display:block; max-height:100%; max-width:100%; width:1848px; background-color:#FFF; background-image:url(../images/large/csg-482c9f2adbb43.png); background-repeat:no-repeat; overflow:hidden;}
.ldg-large-logo_banner_bg { height:120px; width:1848px; background-position: 0px -2px; }
.ldg-large-progetto_box_bg_02 { height:39px; width:534px; background-position: 0px -124px; }
.ldg-large-progetto_box_ultime_notizie { height:39px; width:1090px; background-position: 0px -448px; }
.ldg-large-spesa_box_bg_02 { height:39px; width:1848px; background-position: 0px -165px; }
.ldg-large-spesa_box_bg_05 { height:39 px; width:1848px; background-position: 0px -206px; }
.ldg-large-ultime_segnalazioni_box_bg_02 { height:39px; width:1848px; background-position: 0px -408px; }
.ldg-large-bordo_inferiore_cornice { height:4px; width:1848px; background-position: 0px -409px; }
.ldg-large-banner_statistiche_prodotti_negozi { height:39px; width:1848px; background-position: 0px -340px; }
.ldg-large-banner_segnala_offerte { height:39px; width:1848px; background-position: 0px -300px; }
.ldg-large-banner_trova_offerte { height:39px; width:1848px; background-position: 0px -488px; }
.ldg-large-bordo_superiore_cornice { height:14px; width:1848px; background-position: 0px -286px; }
.ldg-large-bordo_inferiore_pagina_cornice { height:26px; width:1848px; background-position: 0px -528px; }

4css

1:29 pm on Jun 19, 2008 (gmt 0)

Hi mrnabla;

You mentioned that you have another problem, and maybe I am missing it? But could you explain what the new problem is so we can assist you?

Thanks!
4~css

mrnabla

7:01 pm on Jun 19, 2008 (gmt 0)

Thanks a lot, 4css!
The width of the pages is not always the same.
Sometimes, the central part of the page permits the see
also the right column.
In other moments The center is too large, so I can't view the
right side of the page.
If I reload the page (without browser resize, note) the page width id ok.
But when I navigate into my site's pages, this beaviour
seems to be almost random.
I think it depends on the width of the elements (sprites, images, or,...?) drawn into the page where I arrive by.
This beavior is present in both Firefox/Explorer browsers.
Thanks for your support.
Lore

4css

1:16 am on Jun 20, 2008 (gmt 0)

Hi Lore,

It is a bit late now, but I'll copy and paste your code on my pc tomorrow and see if I can find anything. You have a good bit of code there, so it might take a bit to go through it.

One thing I see that might be an issue is the following:
.LDG-MEDIUM {display:block; max-width:100%; background-color:#FFF; background-image:url(../images/medium/ldg_medium_small.png); background-repeat:no-repeat; overflow:hidden;}

You have your class all in caps. do you have it like this in your (x)html code as well? This could be a typo maybe?

Another suggestion is for you to try to validate the page with your (x)html and css to see if you have any errors, as well as what is the doctype that you are using?

Maybe you could give us a toned down version of your (x)html code as well? Sometimes you need both to be able to locate a problem.

mrnabla

12:48 pm on Jun 20, 2008 (gmt 0)

Sorry but I don't understand what are you asking for me...

My poor english and my relatively recent experience in website development are the only responsible of this.
Do you have some idea (at least) about resizing in vertical images
in internet explorer?
I put tag title to images so, if the browser cuts the image,
an user can understand what the image represents.
My site is protected in many aspects and updated everyday,(redirect and query string hashed and so on...) but the early impression,
when a site appears bad in layout is of a dust-site.
I'm exagerating, but I want to obtain to give a solid impression on my potential users, in order to increase the number of potential ones.
Thanks 4css.

lore

4css

1:16 pm on Jun 20, 2008 (gmt 0)

Ok,

Do you know what the html is on the page? If you could let me know exactly how much you know with all of this, it might help. :)

And how are you designing the site? Are you using a program like dreamweaver or frontpage?

Also, is this a template that you are working off of? And putting in your own information?

One thing with the css is that if you view what you posted,
.LDG-MEDIUM {display:block; max-width:100%; background-color:#FFF; background-image:url(../images/medium/ldg_medium_small.png); background-repeat:no-repeat; overflow:hidden;}

See how you have the LDG-MEDIUM, all in capitol letters? Try to put them in lower case like this .ldg-medium

And please, you are doing fine with your english, so don't worry about it! ;)

mrnabla

1:44 pm on Jun 20, 2008 (gmt 0)

Thanks 4css.
As soon as I'll arrive at home, I'll try this.
Thank you so much.
But...tu understand well... what does it changes between
capital and non capital letters?
When I use (for example) an image the class is viewed, and the css image
is correctly loaded.
I'm developing a site based on Joomla CMS, with custom modules, components, mambots, cron scripts.
I know a little of css, more of mysql, php and html.
I work as software developer, but in c, and web-oriented languages are a new experience for me.
Thanks.

lore

I put a cut& paste of the use of css sprite to load an image.
---------------------------C&P-----------------------------

or, again...

mrnabla

7:19 pm on Jun 20, 2008 (gmt 0)

Changed tag from capital to lowercase into css.
No result.
8-(

lore

4css

10:21 pm on Jun 20, 2008 (gmt 0)

Ok, I thought that maybe in your html code it was in small letters. Try changing it in your html code as well and see what happens.

mrnabla

10:27 am on Jun 21, 2008 (gmt 0)

I tried but nothing.
Thanks for your help.
Is there somebody other than could help me?
Thanks.

lore

4css

10:44 am on Jun 21, 2008 (gmt 0)

I'm sure someone will come along and help.

It could be any number of issues that are causing this.

Some of your custom modules could be causing a problem. You might need someone that is familiar with the CMS that you are using. I wish I could help you, but I"m not familiar with that CMS.

mrnabla

12:28 pm on Jun 21, 2008 (gmt 0)

Anyway thanks for your help,4css.

The efforts that somebody does in trying to help
somebody other is ALWAYS a thing that I apreciate.
If I reach to solve this, I will post the solution
on this forum, of course.
Thanks.
lore

:-)

4css

12:57 pm on Jun 21, 2008 (gmt 0)

Hi Lore,

Keep checking the thread, I'm sure that someone will post something to help you out.

and it is always a pleasure to help others. Makes life a little better to live doesn't it? ;)

mrnabla

1:57 pm on Jun 21, 2008 (gmt 0)

I agree with you.
My website is expression of this spirit.
Really!
Thanks,

lore

mrnabla

6:25 am on Jul 2, 2008 (gmt 0)

Image resizing By IE solved applying min-height tip
to images to force of a defined height:

.box {
min-height: 200px;
height: auto !important;
height: 200px;
}

Thanks to everibody tryed to help me.

lore

It remains the last trouble: firefox resizes in horizontal
randomly seems, the page showing and hiding the right column of the template and adding horizontal scrollbar.(explorer is ok, instead)