Table width (too wide with IE; fine with firefox)

[stormtrooper]

as gaugau proposed here: http://forum.coppermine-gallery.net/index.php?topic=28979.0
I start a new thread.

Here's my problem:

I tried to change the table settings in the ACP (album and thumbnail-table), as well as in the template.html. even if I change everything to 50% or 300 px, so that I have lots of unused space around the table, IE displays me a horizontal scrollbar. This only happens, when I run the gallery in a frame. When running seperately, IE is displaying it correctly.
With Firefix I don't have any horizontal scrollbars (neither in a frame nor running seperately).

see the attached file for visualisation.
- left side is IE7 beta 2 (7.0.5296.0), right side is Firefox 1.5.0.3
- 1st row: gallery mainpage
- 2nd row: album overview
- 3nd row: thumbnail overview

direct link: www.unihockey-deitingen.ch/gallery/coppermine

in a frame: www.unihockey-deitingen.ch/enter.htm
(gallery is hidden for public: click on the"i"-dot of "Unihockey" at the top.

I also tried the original coppermine skin and the others included in the cpg 1.4.6-package. same result.
thanks for any feedback.

[Joachim Müller]

known issue in IE, try setting the width to 98% instead of 100%

[stormtrooper]

I've already tried this before posting here...
any other ideas?

[Joachim Müller]

Make sure to set margin and padding attributes for the body in your stylesheet. Browsers have silly defaults (not "zero") if you fail to define those attributes.

[stormtrooper]

your tip went into the right direction...
I googled
http://www.positioniseverything.net/explorer/doubled-margin.html (in english)
http://www.medani.at/news/2006/02/13/double-float-margin-bug-im-ie/ (in german)

and found out that the scrollbars disappear when

Code Select Expand

display: inline;

is added to the stylesheet.
new bug appears: the table is not centered anymore.
in firefox the table is still centered.

[stormtrooper]

fixed it somehow like this:

Code Select Expand


html, body {
        font-family : Verdana, Arial, Helvetica, sans-serif;
        font-size: 11px;
        background : #FFFFFF;
        color : #333333;
        margin-top:0px;
        margin-bottom:0px:
        margin-left:auto;
        margin-right:auto;
        width:98.4%;
        scrollbar-DarkShadow-Color:#FFFFFF; scrollbar-Track-Color:#FFFFFF;
        scrollbar-Face-Color:#1C5087; scrollbar-Shadow-Color:#FFFFFF;
        scrollbar-Highlight-Color:#FFFFFF; scrollbar-3dLight-Color:#FFFFFF;
        scrollbar-Arrow-Color:#FFFFFF

}

body{}
}


I know its not the nicest css, but at least the gallery is now almost centered. In firefox it look a little bit displaced, but acceptable due to the fact, that IE is still more used.