Layout difference in IE7 and Firefox

[Lisa J]

http://franklyjason.com/fjgallery/

------

In Firefox, the gallery looks like how it's suppose to, but in IE7, the sub categories and the titles of the albums in the sub categories are centering themselves. Here are the screenshots:

Firefox: [Edit GauGau] Replaced hotlinked image with attachment "firefox.jpg" [/Edit]

IE7: [Edit GauGau] Replaced hotlinked image with attachment "ie7.jpg" [/Edit]

And here is the CSS:

Code Select Expand

/*************************
  Coppermine Photo Gallery
  ************************
  Copyright (c) 2003-2006 Coppermine Dev Team
  v1.1 originally written by Gregory DEMAR

  This program is free software; you can redistribute it and/or modify
  it under the terms of the GNU General Public License as published by
  the Free Software Foundation; either version 2 of the License, or
  (at your option) any later version.
  ********************************************
  Coppermine version: 1.4.10
  $Source$
  $Revision: 3275 $
  $Author: gaugau $
  $Date: 2006-09-03 12:10:47 +0200 (So, 03 Sep 2006) $
**********************************************/

/* Colors used:                                */
/* --------------------------------------------*/
/* Hex 000000 = RGB   0,  0,  0 = black        */
/* Hex 5F5F5F = RGB  95, 95, 95 = light black  */
/* Hex BDBEBD = RGB 189,190,189 = dark grey    */
/* Hex D1D7DC = RGB 209,215,220 = medium grey  */
/* Hex CCD7E0 = RGB 204,215,224 = light grey   */
/* Hex CBD7DE = RGB 203,215,222 = steel grey   */
/* Hex F2F5F7 = RGB 242,245,247 = dark white   */
/* Hex EFEFEF = RGB 239,239,239 = dark white   */
/* Hex FFFFFF = RGB 255,255,255 = white        */
/* Hex 000666 = RGB   0,  6,102 = dark blue    */
/* Hex 0033CC = RBG   0, 91,104 = medium blue  */
/* Hex 718EA5 = RGB 113,142,165 = light blue   */
/* Hex 8AA5B5 = RGB 138,165,181 = light blue   */
/* if you don't like a color, just do a search */
/* and replace on the hex color...             */

body {
        background-imgae: url("http://franklyjason.com/help/fj7bg.jpg");
        font-family: Verdana;
        font-size : 11px;
        color: #FFFFFF;
        margin: 0px;
}

table {
        font-size : 11px;
}

h1{
       
        font-weight: normal;
        font-size: 21px;
        font-family: Verdana;
        text-decoration: none;
        line-height : 120%;
        color: #718EA5;
        margin: 2px;
}

h2 {
        font-family: Verdana;
        background-image : url(images/box_left_icon.gif);
        background-repeat : no-repeat;
        background-position : left;
        padding-left : 18px;
        font-size: 18px;
        margin: 0px;
}

h3 {
        font-weight: normal;
        font-family: Verdana;
        font-size: 11px;
        margin: 2px;
}

p {
        font-family: Verdana;
        font-size: 11px;
        margin: 2px 0px;
}

ul {
        margin-left: 5px;
        padding: 0px;
}

li {
        margin-left: 10px;
        margin-top: 4px;
        margin-bottom: 4px;
        padding: 0px;
        list-style-position: outside;
        list-style-type: disc;
}

.textinput {
        font-family: "Trebuchet MS", Verdana, Geneva, Arial, sans-serif;
        font-size: 100%;
        border: 1px solid #D1D7DC;
        padding-right: 3px;
        padding-left: 3px;
}

.listbox {
        font-family: "Trebuchet MS", Verdana, Geneva, Arial, sans-serif;
        font-size: 100%;
        border: 1px solid #D1D7DC;
        vertical-align : middle;
}

.button {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 100%;
        border: 1px solid #CCD7E0;
        background-image : url(images/button_bg.gif);
        background-position : bottom;
}

.comment_button {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 100%;
        border: 1px solid #CCD7E0;
        background-image : url(images/button_bg.gif);
        background-position : bottom;
        padding-left: 3px;
        padding-right: 3px;
}

.radio {
        font-family: "Trebuchet MS", Verdana, Geneva, Arial, sans-serif;
        font-size: 100%;
        vertical-align : middle;
}

.checkbox {
        font-family: "Trebuchet MS", Verdana, Geneva, Arial, sans-serif;
        font-size: 100%;
        vertical-align : middle;
}



.maintable {
       
        background-color: #b2b2b2;
        margin-top: 1px;
        margin-bottom: 1px;
}

.tableh1 {
        font-family:  Verdana, Geneva, Arial, sans-serif;
        background : #b2b2b2 ;
        color: #FFFFFF;
        padding-top: 3px;
        padding-right: 10px;
        padding-bottom: 3px;
        padding-left: 10px;
}

.tableh1_compact {
        font-family:  Verdana, Geneva, Arial, sans-serif;
        background : #b2b2b2 ;
        color: #FFFFFF;
        padding-top: 2px;
        padding-right: 5px;
        padding-bottom: 2px;
        padding-left: 5px;
}

.tableh2 {
        background: #444444 ;
        color : #b2b2b2;
        padding-top: 3px;
        padding-right: 10px;
        padding-bottom: 3px;
        padding-left: 10px;
}

.tableh2_compact {
        background: #444444 ;
        color : #b2b2b2;
        padding-top: 2px;
        padding-right: 5px;
        padding-bottom: 2px;
        padding-left: 5px;
}

.tableb {
        background: #b2b2b2 ;
        padding-top: 3px;
        padding-right: 10px;
        padding-bottom: 3px;
        padding-left: 10px;
}

.tableb_compact {
        background: #b2b2b2 ;
        padding-top: 2px;
        padding-right: 5px;
        padding-bottom: 2px;
        padding-left: 5px;
}

.tablef {
        background: #b2b2b2 ;
        padding-top: 10px;
        padding-right: 10px;
        padding-bottom: 10px;
        padding-left: 10px;
}

.catrow_noalb {
        background: #b2b2b2 ;
        color : #000000;
        padding-top: 3px;
        padding-right: 10px;
        padding-bottom: 3px;
        padding-left: 10px;
}

.catrow {
        background: #b2b2b2 ;
        padding-top: 3px;
        padding-right: 10px;
        padding-bottom: 3px;
        padding-left: 10px;
}

.album_stat {
        font-size : 85%;
        margin: 5px 0px;
}

.thumb_filename {
        font-size: 80%;
        display: block;
}

.thumb_title {
        font-weight : bold;
        font-size: 80%;
        padding: 2px;
        display : block;
}

.thumb_caption {
        font-size: 80%;
        padding: 1px;
        display : block;
}

.thumb_caption a {
        text-decoration: underline;
        color: #000000;
}


.thumb_num_comments {
        font-weight: normal;
        font-size: 85%;
        padding: 2px;
        font-style : italic;
        display : block;
}

.user_thumb_infobox {
        margin-top: 1px;
        margin-bottom: 1px;
}

.user_thumb_infobox th {
        font-weight : bold;
        font-size: 100%;
        margin-top: 1px;
        margin-bottom: 1px;
        text-align : center;
}

.user_thumb_infobox td {
        font-size: 85%;
        margin-top: 1px;
        margin-bottom: 1px;
        text-align : center;
}

.user_thumb_infobox a {
        text-decoration: none;
        color: #000000;
}

.user_thumb_infobox a:hover {
        color: #FFFFFF;
        text-decoration: none;
}

.sortorder_cell {
        background : #b2b2b2 ;
        color: #FFFFFF;
        padding-top: 0px;
        padding-bottom: 0px;
        padding-left: 0px;
        padding-right: 20px;
        margin: 0px;
}

.sortorder_options {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        background : #b2b2b2 ;
        color: #FFFFFF;
        padding: 0px;
        margin: 0px;
        font-weight: normal;
        font-size: 80%;
        white-space: nowrap;
}

.navmenu {
        font-family: "Trebuchet MS", Verdana, Geneva, Arial, sans-serif;
        color: #FFFFFF;
        font-weight: bold;
        background : #b2b2b2 ;
        border-style: none;
}

.navmenu img {
        margin-top: 1px;
        margin-right: 5px;
        margin-bottom: 1px;
        margin-left: 5px;
}

.navmenu a {
        display: block;
        padding-top: 2px;
        padding-right: 5px;
        padding-bottom: 2px;
        padding-left: 5px;
        text-decoration: none;
        color: #FFFFFF;
}

.navmenu a:hover {
        background : #F2F5F7 ;
        text-decoration: none;
        color:         #FFFFFF;
}

.admin_menu_thumb {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 90%;
        border: 1px solid #CCD7E0;
        background-image : url(images/button_bg.gif);
        background-position : bottom;
        color: #000000;
        font-weight: bold;
        margin-top: 0px;
        margin-bottom: 0px;
        width: 85px;
}

.admin_menu_thumb a {
        color: #000000;
        text-decoration: none;
        display: block;
        position: relative;
        padding-top: 1px;
        padding-bottom: 1px;
        padding-left: 10px;
        padding-right: 10px;
}


.admin_menu_thumb a:hover {
        color: #000000;
        text-decoration: underline;
}

.admin_menu {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 90%;
        border: 1px solid #CCD7E0;
        background-image : url(images/button_bg.gif);
        background-position : bottom;
        background-repeat: repeat-x;
        background-color: #FFFFFF;
        color: #000000;
        margin-top: 0px;
        margin-bottom: 0px;
        text-align: center;
}

.admin_menu a {
        color: #000000;
        text-decoration: none;
        display: block;
        position: relative;
        padding-top: 1px;
        padding-bottom: 1px;
        padding-left: 2px;
        padding-right: 2px;
}

.admin_menu a:hover {
        color: #000000;
        text-decoration: underline;
}

td #admin_menu_anim {
        background-image : url(images/button_bg_anim.gif);
}

.comment_date{
        color : #5F5F5F;
        font-size: 90%;
        vertical-align : middle;
}

.image {
        border-style: solid;
        border-width:1px;
        border-color: #000000;
        margin: 2px;
}

.imageborder {
        border: 1px solid #000000;
        background-color: #b2b2b2;
        margin-top: 30px;
        margin-bottom: 30px;
}

.display_media {
        background: #b2b2b2 ;
        padding-top: 3px;
        padding-right: 10px;
        padding-bottom: 3px;
        padding-left: 10px;
}

.thumbnails {
        background: #b2b2b2 ;
        padding: 5px;
}

.footer {
        font-size : 9px;
}

.footer a {
        text-decoration: none;
        color: #FFFFFF;
}

.footer a:hover {
        color: #FFFFFF;
        text-decoration: none;
}

.statlink {
        color: #FFFFFF;
}

.statlink a {
        text-decoration: none;
        color: #FFFFFF;
}

.statlink a:hover {
        color: #FFFFFF;
        text-decoration: none;
}

.alblink a {
        text-decoration: none;
        color: #FFFFFF;
}

.alblink a:hover {
        color: #FFFFFF;
        text-decoration: none;
}

.catlink {
        display: block;
        margin-bottom: 2px;
}

.catlink a {
        text-decoration: none;
        color: #FFFFFF;
}

.catlink a:hover {
        color: #FFFFFF;
        text-decoration: none;
}

.topmenu {
        font-family: "Trebuchet MS", Verdana, Geneva, Arial, sans-serif;
        line-height : 130%;
        font-size : 110%;
}

.topmenu a {
        color : #FFFFFF;
        text-decoration : none;
}

.topmenu a:hover  {
        color : #FFFFFF;
        text-decoration : none;
}

.img_caption_table {
        border: none;
        background-color: #FFFFFF;
        width : 100%;
        margin : 0px;
}

.img_caption_table th {
        background: #D1D7DC ;
        font-size : 100%;
        color : #000000;
        padding-top: 4px;
        padding-right: 10px;
        padding-bottom: 4px;
        padding-left: 10px;
        border-top : 1px solid #FFFFFF;
}

.img_caption_table td {
        background: #F2F5F7 ;
        padding-top: 6px;
        padding-right: 10px;
        padding-bottom: 6px;
        padding-left: 10px;
        border-top : 1px solid #FFFFFF;
        white-space: normal;
}

.debug_text {
        border: #BDBEBD;
        background-color: #EFEFEF;
        width : 100%;
        margin : 0px;
}

.clickable_option {
        cursor : default;

}

.listbox_lang {
        color: #000666;
        background-color: #F2F5F7;
        border: 1px solid #F2F5F7;
        font-size: 80%;
        font-family: Arial, Helvetica, sans-serif;
        vertical-align : middle;
}

a:link {
font-weight: bold;
text-decoration: none;
color: #508597;
}
a:visited {
font-weight: bold;
text-decoration: none;
color: #508597;
}
a:hover, a:active {
text-decoration: none;
color: #FFFFFF;
}


Help appreciated greatly!

[Starlight]

I have exactly the same problem. Sad that nobody answered...

[Joachim Müller]

No, you have a different issue, as you have a different site with a different theme and a different stylesheet. You shouldn't have tried to hijack this thread in the first place, but anyway: what help do you expect if you fail to post a link to your gallery? What should we advise?

[Starlight]

http://www.starlights-graphics.de/screencaps/index.php

I think, it's something about the catrow noalb part...

[Joachim Müller]

The layout doesn't differ in IE7 and Firefox: both display a blank screen when going to the URL you posted . But before making up your mind about layout differences, I rather suggest to upgrade: you're running cpg1.4.16 (which contains a security flaw that actively is being exploited), while the most recent stable release currently is cpg1.4.18. Upgrading instantly is mandatory.

[Starlight]

Blank screen? What do you mean? I don't see a blank screen... 
And thanks. I didn't know about the latest upgrade.