GALLERY HEADER

[dang]

You should be able to add a center tag toward the beginning of the description html like such after the breaks:

Code: Select all

<br>
<br>

<center><table border="0" cellpadding="0" cellspacing="0" width="800">

I'm not sure if this will do it or not, since I haven't an editor for IE and can't check. So, you might need to try a few different things. I'll look in again later, if it doesn't.

[xcreach]

it doesn´t work but thanks for the help. will also try to find a solution. cheers

[dang]

Sorry,
Pmail coming your way.

[flemmingbo]

Hello !

Tom asked me to have a look at this, here's a quick suggestion and explanation.

The best way is to center the whole DIV called galleryheader in the css. To do that you must add:

Firefox - this makes Firefox center a DIV (but not IE)
margin-right:auto;
margin-left:auto;

IE - IE interprets text-align in the wrong way and centers the whole div
text-align:center;

You already have the margin-right and left : auto bit in DIV.galleryheader so you need to add text-align:center in your css to DIV.galleryheader and hopefully that should do it for IE!

Hope this works.

regards,

Flemming

[dang]

Thanks Flemming,

IE - IE interprets text-align in the wrong way and centers the whole div
text-align:center;

I had no idea!

[flemmingbo]

Thanks Flemming,

IE - IE interprets text-align in the wrong way and centers the whole div
text-align:center;

I had no idea!

Glad to help It's one of the many many bugs in IE !

Btw this will center all text in IE as well inside this DIV, so you may need to add text-align:left to some of the text inside the DIV to keep it left centered.

[xcreach]

Thanks Flemming and Tom, regretfully it still doesn't work on IE. Really annoying. (Tom, I even spent sometime ready quite a lot about CSS, learnt a lot but not on this specific issue).

Just to make sure I got it right in my Home page style sheet, the CSS codes of the gallery header are now:


DIV.galleryheader {
width: 800px;
margin-left: auto;
margin-right: auto;
text-align: center;
background: <getvar color4>;
MARGIN-TOP: 20px;
MARGIN-BOTTOM: 60px;
border-style : solid;
border-color : <getvar color17>;
border-width : 2px;
PADDING-TOP: 30px;
PADDING-BOTTOM: px;
PADDING-LEFT: 20px;
PADDING-RIGHT: 22px;
}

[dang]

After trying what I believe Flemming said, I still can't get it working either so I removed it and the auto margins. Still can't get it to work properly with 800 resolution. If Flemming, or someone has another idea maybe they'll add it. So far, the best I've been able to get is for it to display with Firefox & IE at all resolutions above 800 (which is where we started!) but fixed a couple of small things.
Note that I've replace your background, banner & slide show photos so they'd display in a hidden gallery for me, so you'll need to change your url's so I can delete them from my site. The banner is resized down a little. For some reason, I'm having a problem getting things to update, even though I'm closing my browser & deleting cookies with each change. Not sure why.... Here's the code:

<Center><img src="http://www.pbase.com/dang/image/93403204/original.jpg">
<br><br><br>
<TABLE cellSpacing=0 cellPadding=0 width=800 border=0>

<TBODY>

<TR>

<TD vAlign=bottom colSpan=3>

<!--- menu starts here --->

<TABLE class=luis cellSpacing=0 cellPadding=0 width=800 border=0>

<TBODY>

<TR>

<TD><IMG height="10" src="http://www.pbase.com/image/56552555/original.jpg"></TD></TR>

<TR align=middle>

<TD><A href="http://upload.pbase.com/edit_gallery/xcreacj/root"><h3>EDIT</h3></A></TD>

<TD><IMG src="http://www.pbase.com/image/56552555/original.jpg" width="8"></TD>

<TD><A href="http://www.pbase.com/xcreach/guestbook"><h3>Guestbook</h3></A></TD>

<TD><IMG src="http://www.pbase.com/image/56552555/original.jpg" width="8"></TD>

<TD><A href="http://www.pbase.com/xcreach/root&view=recent"><h3>Recent</h3></A></TD>

<TD><IMG src="http://www.pbase.com/image/56552555/original.jpg" width="8"></TD>

<TD><A href='/xcreach#galerias'><h3>Galleries</h3>

</A></TD><TD><IMG src="http://www.pbase.com/image/56552555/original.jpg" width="8"></TD>


</A></TD></TR></TBODY></TABLE></TD></TR><!--- menu ends here --->

<TR>

<TD vAlign=top>

<br><br>

SLIDESHOW(83484550,79241217,64261048,84078641,79951655size=medium, delay=3, loop=yes)

</TD>

<TD><IMG src="http://www.pbase.com/image/56552555/original.jpg" width="15"></TD>

<TD vAlign=top bgColor=#333333><!--- right column --->

<TABLE cellSpacing=0 cellPadding=19 border=0>

<TBODY>

<TR>

<TD><TD align=text>

<P> <a ="" /a>

<br><br>Appreciation of a photo is sometimes purely aesthetic. Other times, it touches something deeper within. Photography, for me, is not about technical perfection. I see it more as a way of communicating emotions. Emotions can be drawn from the subject of the photo or from the photographer who projects his own feelings. Emotions can also come from the viewer interpreting the image. A mix of all three should make a great photo.

<br><br><br>

Be informed of gallery updates via: <br><a href="http://feeds.feedburner.com/xcreach-pbase"><img src="http://i.pbase.com/o6/37/739937/1/74153173.sw6PPY8Q.feedicon16x16.jpg" /> RSS feed</a>.

</TD></TR></TBODY></TABLE></TD><!--- end right column --->

</TBODY></TABLE></CENTER>

<a name="galerias"></a>

<br><br>

=================================================================

DIV.galleryheader {
background: #000000;
MARGIN-TOP: 20px;
MARGIN-BOTTOM: 60px;
MARGIN-RIGHT: 150px;
MARGIN-LEFT: 150px;
border-style : solid;
border-color : #2C2931;
border-width : 2px;
PADDING-TOP: 30px;
PADDING-BOTTOM: px;
PADDING-LEFT: 0px;
PADDING-RIGHT: 0px;
}

TD.thumbnail {
vertical-align : middle;
background: #000000;
min-width : 160px;
height : 160px;
border-style : solid;
border-color : #2C2931;
border-width : 2px;
}

A {
COLOR: #999999;
TEXT-DECORATION: none
}

A:link {
COLOR: #CCCCFF;
TEXT-DECORATION: none
}

A:visited {
COLOR: #CCCCFF;
TEXT-DECORATION: none
}

A:active {
COLOR: #999999;
TEXT-DECORATION: none
}

A:hover {
COLOR: #2c2931;
TEXT-DECORATION: none
}

A.thumbnail {
BORDER-RIGHT: #000000 1px solid;
BORDER-TOP: #000000 1px solid;
DISPLAY: block;
BACKGROUND: #232323;
FILTER: progid:DXImageTransform.Microsoft.Alpha(Opacity=90);
MARGIN-BOTTOM: -45px;
BORDER-LEFT: #000000 1px solid;
WIDTH: 172px;
PADDING-TOP: 5px;
BORDER-BOTTOM: #000000 1px solid;
HEIGHT: 197px
}

A.thumbnail:link {
BORDER-RIGHT: #000000 1px solid;
BORDER-TOP: #000000 1px solid;
DISPLAY: block;
BACKGROUND: #000000;
FILTER: progid:DXImageTransform.Microsoft.Alpha(Opacity=90);
MARGIN-BOTTOM: -45px;
BORDER-LEFT: #000000 1px solid;
WIDTH: 172px;
PADDING-TOP: 5px;
BORDER-BOTTOM: #000000 1px solid;
HEIGHT: 197px
}

A.thumbnail:visited {
BORDER-RIGHT: #000000 1px solid;
BORDER-TOP: #000000 1px solid;
DISPLAY: block;
BACKGROUND: #000000;
FILTER: progid:DXImageTransform.Microsoft.Alpha(Opacity=90);
MARGIN-BOTTOM: -45px;
BORDER-LEFT: #000000 1px solid;
WIDTH: 172px;
PADDING-TOP: 5px;
BORDER-BOTTOM: #000000 1px solid;
HEIGHT: 197px
}

A.thumbnail:active {
BORDER-RIGHT: #000000 1px solid;
BORDER-TOP: #000000 1px solid;
DISPLAY: block;
BACKGROUND: #232323;
FILTER: progid:DXImageTransform.Microsoft.Alpha(Opacity=90);
MARGIN-BOTTOM: -45px;
BORDER-LEFT: #000000 1px solid;
WIDTH: 172px;
PADDING-TOP: 5px;
BORDER-BOTTOM: #000000 1px solid;
HEIGHT: 197px
}

A.thumbnail:hover {
BORDER-RIGHT: #2c2931 0px solid;
BORDER-TOP: #2c2931 0px solid;
DISPLAY: block;
BACKGROUND: #000000;
FILTER: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
MARGIN-BOTTOM: -45px;
BORDER-LEFT: #2c2931 0px solid;
WIDTH: 172px;
PADDING-TOP: 5px;
BORDER-BOTTOM: #2c2931 0px solid;
HEIGHT: 197px
}

BODY {
MARGIN-TOP: 0px;
BACKGROUND-IMAGE: URL(http://www.pbase.com/dang/image/93401961/original.jpg);
MARGIN-BOTTOM: 20px
text-align:center;
}

DIV {
BORDER-RIGHT: 0px;
BORDER-TOP: 0px;
FONT: 12px verdana, arial, sans-serif;
BORDER-LEFT: 0px;
COLOR: #5B5B65;
BORDER-BOTTOM: 0px
}

TH {
BORDER-RIGHT: 0px;
BORDER-TOP: 0px;
FONT: 12px verdana, arial, sans-serif;
BORDER-LEFT: 0px; COLOR: #5B5B65;
BORDER-BOTTOM: 0px
}

TR {
BORDER-RIGHT: 0px;
BORDER-TOP: 0px;
FONT: 12px verdana, arial, sans-serif;
BORDER-LEFT: 0px; COLOR: #5B5B65;
BORDER-BOTTOM: 0px
}

TABLE {
MARGIN-LEFT: 6px;
BORDER-RIGHT: 0px;
BORDER-TOP: 0px;
MARGIN-TOP: -27px;
MARGIN-BOTTOM: 7px;
FONT: 12px verdana, arial, sans-serif;
BORDER-LEFT: 0px;
COLOR: #5B5B65;
BORDER-BOTTOM: 0px
}

TABLE.luis {
BORDER-RIGHT: 0px;
BORDER-TOP: 0px;
MARGIN-TOP: 40px;
MARGIN-BOTTOM: 40px;
FONT: 12px verdana, arial, sans-serif;
BORDER-LEFT: 0px;
COLOR: #5B5B65;
BORDER-BOTTOM: 0px
}

FONT {
BORDER-RIGHT: 0px;
BORDER-TOP: 0px;
FONT: 12px verdana, arial, sans-serif;
BORDER-LEFT: 0px;
COLOR: #5B5B65;
BORDER-BOTTOM: 0px
}

LI {
BORDER-RIGHT: 0px;
BORDER-TOP: 0px;
FONT: 12px verdana, arial, sans-serif;
BORDER-LEFT: 0px;
COLOR: #5B5B65;
BORDER-BOTTOM: 0px
}

UL {
BORDER-RIGHT: 0px;
BORDER-TOP: 0px;
FONT: 12px verdana, arial, sans-serif;
BORDER-LEFT: 0px;
COLOR: #5B5B65;
BORDER-BOTTOM: 0px
}

FORM {
BORDER-RIGHT: 0px;
BORDER-TOP: 0px;
FONT: 12px verdana, arial, sans-serif;
BORDER-LEFT: 0px;
COLOR: #5B5B65;
BORDER-BOTTOM: 0px
}

BLOCKQUOTE {
BORDER-RIGHT: 0px;
BORDER-TOP: 0px;
FONT: 12px verdana, arial, sans-serif;
BORDER-LEFT: 0px;
COLOR: #5B5B65;
BORDER-BOTTOM: 0px
}

P {
BORDER-RIGHT: 0px;
BORDER-TOP: 0px;
FONT: 13px verdana, arial, sans-serif;
text-align:justify;
BORDER-LEFT: 0px;
COLOR: #BFBFC9;
BORDER-BOTTOM: 0px
}

B {
BORDER-RIGHT: 0px;
BORDER-TOP: 0px;
FONT: 12px verdana, arial, sans-serif;
BORDER-LEFT: 0px;
COLOR: #5B5B65;
BORDER-BOTTOM: 0px
}

I {
BORDER-RIGHT: 0px;
BORDER-TOP: 0px;
FONT: 12px verdana, arial, sans-serif;
BORDER-LEFT: 0px;
COLOR: #5B5B65;
BORDER-BOTTOM: 0px
}

FONT {
BORDER-RIGHT: 0px;
BORDER-TOP: 0px;
FONT: 12px verdana, arial, sans-serif;
BORDER-LEFT: 0px;
COLOR: #5B5B65;
BORDER-BOTTOM: 0px
}

CENTER {
BORDER-RIGHT: 0px;
BORDER-TOP: 0px;
FONT: 12px verdana, arial, sans-serif;
BORDER-LEFT: 0px;
COLOR: #5B5B65;
BORDER-BOTTOM: 0px
}

FONT {
DISPLAY: block;
FONT: 9px Verdana, Tahoma, Helvetica, sans-serif;
MARGIN-LEFT: 4px;
WIDTH: 170px;
COLOR: #5B5B65;
MARGIN-RIGHT: 4px;
LETTER-SPACING: 0px
}

H3 {
FONT-WEIGHT: normal;
FONT-SIZE: 16px;
BACKGROUND: #000000;
PADDING-BOTTOM: 5px;
BORDER-LEFT: 0px;
COLOR: #999999;
PADDING-TOP: 3px;
border-style : solid;
border-color : #2c2931;
border-width : 2px;
}

IMG {
BORDER-RIGHT: #000000 1px;
BORDER-TOP: #000000 1px;
BORDER-LEFT: #000000 1px;
BORDER-BOTTOM: #000000 1px
}

IMG.thumbnail {
BORDER-RIGHT: #000000 1px solid;
PADDING-RIGHT: 0px;
BORDER-TOP: #000000 1px solid;
PADDING-LEFT: 0px;
BACKGROUND: #000000;
PADDING-BOTTOM: 0px;
MARGIN: 0px;
VERTICAL-ALIGN: middle;
BORDER-LEFT: #000000 1px solid;
PADDING-TOP: 0px;
BORDER-BOTTOM: #000000 1px solid
}

INPUT {
BORDER-RIGHT: #000000 1px solid;
BORDER-TOP: #000000 1px solid;
BORDER-LEFT: #000000 1px solid;
BORDER-BOTTOM: #000000 1px solid
}

TABLE.thumbnail {
WIDTH: 10%
}

TD {
BORDER-RIGHT: 1px;
BORDER-TOP: 1px;
BACKGROUND: none transparent scroll repeat 0% 0%;
BORDER-LEFT: 1px;
BORDER-BOTTOM: 1px;
BORDER-COLLAPSE: collapse;
empty-cells: show
}

TD.message_body {
BORDER-RIGHT: 1px;
BORDER-TOP: 1px;
DISPLAY: block;
BACKGROUND: #282828;
BORDER-LEFT: 1px; BORDER-BOTTOM: #000000 1px dotted
}

.caption {
COLOR: #2c2931;
FONT-STYLE: italic
}

.display {
BORDER-RIGHT: #000000 1px solid;
BORDER-TOP: #000000 1px solid;
BACKGROUND: #000000;
FILTER: progid:DXImageTransform.Microsoft.Shadow(color="#141414",Direction=135,Strength=5);
BORDER-LEFT: #000000 1px solid;
BORDER-BOTTOM: #000000 1px solid
}

.lid {
BACKGROUND: #373737;
FONT: 11px Verdana, Tahoma, Helvetica, sans-serif;
COLOR: #666666;
TEXT-DECORATION: none
}

.message_body {
MARGIN: 5px 5px 10px;
FONT: 10px Verdana, Tahoma, Helvetica, sans-serif; COLOR: #5B5B65
}

.sb {
BACKGROUND: #5B5B65;
FONT: 12px Verdana, Tahoma, Helvetica, sans-serif;
COLOR: #CCCCFF;
TEXT-DECORATION: none
}

BODY {
MARGIN-TOP: 0px; TOP: 0px
}

BODY TABLE A IMG {
DISPLAY: inline
}

HR {
POSITION: relative
}


BODY { margin-top: 0px; top: 0px; }
BODY TABLE A IMG { display: inline; }
HR { position: relative; }

[dang]

One more option that you can do, since I can't get it working with the black table as a box background, is to remove the black and have the background gif with lines run the entire page. This works with all resolutions using IE & Firefox and gives you another option.

CSS:

Code: Select all

<setvar color4 = #cceedd>
<setvar color11 = #848484>
<setvar color8 = #898989>
<setvar color5 = #6b6b6b>
<setvar color10 = #ffffff>
<setvar color14 = #888888>
<setvar color2 = #080808>
<setvar color1 = #030303>
<setvar color6 = #29333d>
<setvar color15 = #191970>
<setvar color3 = #868686>
<setvar color12 = #080806>
<setvar color13 = #000000>


A {
   COLOR:  <getvar color10>; TEXT-DECORATION: none
}
A:link {
   COLOR:  <getvar color11>; TEXT-DECORATION: BOLD
}
A:visited {
   COLOR:  <getvar color10>; TEXT-DECORATION: none
}
A:active {
   COLOR:  <getvar color4>; TEXT-DECORATION: none
}
A:hover {
   COLOR:  <getvar color10>; TEXT-DECORATION: none
}
A.thumbnail {
   BORDER-RIGHT:  <getvar color2> 1px solid; BORDER-TOP:  <getvar color2> 1px solid;
   DISPLAY: block; BACKGROUND:  <getvar color2>;
   FILTER: progid:DXImageTransform.Microsoft.Alpha(Opacity=90);
   MARGIN-BOTTOM: -45px; BORDER-LEFT:  <getvar color2> 1px solid; WIDTH: 172px;
   PADDING-TOP: 5px; BORDER-BOTTOM:  <getvar color2> 1px solid; HEIGHT: 197px
}
A.thumbnail:link {
   BORDER-RIGHT:  <getvar color2> 1px solid; BORDER-TOP:  <getvar color2> 1px solid;
   DISPLAY: block; BACKGROUND:  <getvar color14>;
   FILTER: progid:DXImageTransform.Microsoft.Alpha(Opacity=90);
   MARGIN-BOTTOM: -45px; BORDER-LEFT:  <getvar color2> 1px solid;
   WIDTH: 172px; PADDING-TOP: 5px; BORDER-BOTTOM:  <getvar color2> 1px solid; HEIGHT: 197px
}
A.thumbnail:visited {
   BORDER-RIGHT:  <getvar color2> 1px solid; BORDER-TOP:  <getvar color2> 1px solid;
   DISPLAY: block; BACKGROUND:  <getvar color2>;
   FILTER: progid:DXImageTransform.Microsoft.Alpha(Opacity=90);
   MARGIN-BOTTOM: -45px; BORDER-LEFT:  <getvar color2> 1px solid; WIDTH: 172px;
   PADDING-TOP: 5px; BORDER-BOTTOM:  <getvar color2> 1px solid; HEIGHT: 197px
}
A.thumbnail:active {
   BORDER-RIGHT:  <getvar color2> 1px solid; BORDER-TOP:  <getvar color2> 1px solid;
   DISPLAY: block; BACKGROUND:  <getvar color2>;
   FILTER: progid:DXImageTransform.Microsoft.Alpha(Opacity=90);
   MARGIN-BOTTOM: -45px; BORDER-LEFT:  <getvar color2> 1px solid; WIDTH: 172px;
   PADDING-TOP: 5px; BORDER-BOTTOM:  <getvar color2> 1px solid; HEIGHT: 197px
}
A.thumbnail:hover {
   BORDER-RIGHT:  <getvar color4> 1px solid; BORDER-TOP:  <getvar color4> 1px solid;
   DISPLAY: block; BACKGROUND:  <getvar color5>;
   FILTER: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
   MARGIN-BOTTOM: -45px; BORDER-LEFT:  <getvar color4> 1px solid; WIDTH: 172px;
   PADDING-TOP: 5px; BORDER-BOTTOM:  <getvar color4> 1px solid; HEIGHT: 197px
}
BODY {
   MARGIN-TOP: 0px; BACKGROUND:  <getvar color6>; MARGIN-BOTTOM: 20px
}
DIV {
   BORDER-RIGHT: 0px; BORDER-TOP: 0px; FONT: 12px verdana, arial, sans-serif;
    BORDER-LEFT: 0px; COLOR:  <getvar color14>; BORDER-BOTTOM: 0px
}
TH {
   BORDER-RIGHT: 0px; BORDER-TOP: 0px; FONT: 12px verdana, arial, sans-serif;
    BORDER-LEFT: 0px; COLOR:  <getvar color14>; BORDER-BOTTOM: 0px
}
TR {
   BORDER-RIGHT: 0px; BORDER-TOP: 0px; FONT: 12px verdana, arial, sans-serif;
    BORDER-LEFT: 0px; COLOR:  <getvar color14>; BORDER-BOTTOM: 0px
}
TABLE {
   BORDER-RIGHT: 0px; BORDER-TOP: 0px; MARGIN-TOP: -27px; MARGIN-BOTTOM: 7px;
    FONT: 12px verdana, arial, sans-serif; BORDER-LEFT: 0px;
     COLOR:  <getvar color7>; BORDER-BOTTOM: 0px
}
TABLE.luis {
   BORDER-RIGHT: 0px; BORDER-TOP: 0px; MARGIN-TOP: 0px; MARGIN-BOTTOM: 0px;
    FONT: 12px verdana, arial, sans-serif; BORDER-LEFT: 0px;
     COLOR:  <getvar color7>; BORDER-BOTTOM: 0px
}
FONT {
   BORDER-RIGHT: 0px; BORDER-TOP: 0px; FONT: 12px verdana, arial, sans-serif;
    BORDER-LEFT: 0px; COLOR:  <getvar color14>; BORDER-BOTTOM: 0px
}
LI {
   BORDER-RIGHT: 0px; BORDER-TOP: 0px; FONT: 12px verdana, arial, sans-serif;
    BORDER-LEFT: 0px; COLOR:  <getvar color14>; BORDER-BOTTOM: 0px
}
UL {
   BORDER-RIGHT: 0px; BORDER-TOP: 0px; FONT: 12px verdana, arial, sans-serif;
    BORDER-LEFT: 0px; COLOR:  <getvar color14>; BORDER-BOTTOM: 0px
}
FORM {
   BORDER-RIGHT: 0px; BORDER-TOP: 0px; FONT: 12px verdana, arial, sans-serif;
    BORDER-LEFT: 0px; COLOR:  <getvar color14>; BORDER-BOTTOM: 0px
}
BLOCKQUOTE {
   BORDER-RIGHT: 0px; BORDER-TOP: 0px; FONT: 12px verdana, arial, sans-serif;
    BORDER-LEFT: 0px; COLOR:  <getvar color14>; BORDER-BOTTOM: 0px
}
P {
   BORDER-RIGHT: 0px; BORDER-TOP: 0px; FONT: 13px verdana, arial, sans-serif;
    BORDER-LEFT: 0px; COLOR:  <getvar color8>; BORDER-BOTTOM: 0px
}
B {
   BORDER-RIGHT: 0px; BORDER-TOP: 0px; FONT: 12px verdana, arial, sans-serif;
    BORDER-LEFT: 0px; COLOR:  <getvar color7>; BORDER-BOTTOM: 0px
}
I {
   BORDER-RIGHT: 0px; BORDER-TOP: 0px; FONT: 12px verdana, arial, sans-serif;
    BORDER-LEFT: 0px; COLOR:  <getvar color7>; BORDER-BOTTOM: 0px
}
FONT {
   BORDER-RIGHT: 0px; BORDER-TOP: 0px; FONT: 12px verdana, arial, sans-serif;
    BORDER-LEFT: 0px; COLOR:  <getvar color7>; BORDER-BOTTOM: 0px
}
CENTER {
   BORDER-RIGHT: 0px; BORDER-TOP: 0px; FONT: 12px verdana, arial, sans-serif;
    BORDER-LEFT: 0px; COLOR:  <getvar color2>; BORDER-BOTTOM: 0px
}
FONT {
   DISPLAY: block; FONT: 9px Verdana, Tahoma, Helvetica, sans-serif;
    MARGIN-LEFT: 4px; WIDTH: 170px; COLOR:  <getvar color7>; MARGIN-RIGHT: 4px;
     LETTER-SPACING: 0px
}
H3 {
   FONT-WEIGHT: normal; FONT-SIZE: 16px; BACKGROUND:  <getvar color2>;
    PADDING-BOTTOM: 8px; BORDER-LEFT: 0px; COLOR:  <getvar color10>;
     LINE-HEIGHT: normal; PADDING-TOP: 8px; FONT-STYLE: normal;
      LETTER-SPACING: 0px; TEXT-ALIGN: center; FONT-VARIANT: normal
}
IMG {
   BORDER-RIGHT:  <getvar color2> 1px; BORDER-TOP:  <getvar color2> 1px;
   BORDER-LEFT:  <getvar color2> 1px; BORDER-BOTTOM:  <getvar color2> 1px
}
IMG.thumbnail {
   BORDER-RIGHT:  <getvar color2> 1px solid; PADDING-RIGHT: 0px;
    BORDER-TOP:  <getvar color2> 1px solid; PADDING-LEFT: 0px;
    BACKGROUND:  <getvar color11>; PADDING-BOTTOM: 0px; MARGIN: 0px;
    VERTICAL-ALIGN: middle; BORDER-LEFT:  <getvar color2> 1px solid;
    PADDING-TOP: 0px; BORDER-BOTTOM:  <getvar color2> 1px solid
}
INPUT {
   BORDER-RIGHT:  <getvar color2> 1px solid; BORDER-TOP:  <getvar color2> 1px solid;
    BORDER-LEFT:  <getvar color2> 1px solid; BORDER-BOTTOM:  <getvar color2> 1px solid
}
TABLE.thumbnail {
   WIDTH: 10%
}
TD {
   BORDER-RIGHT: 1px; BORDER-TOP: 1px;
   BACKGROUND: none transparent scroll repeat 0% 0%; BORDER-LEFT: 1px;
   BORDER-BOTTOM: 1px; BORDER-COLLAPSE: collapse; empty-cells: show
}
TD.message_body {
   BORDER-RIGHT: 1px; BORDER-TOP: 1px; DISPLAY: block; BACKGROUND:  <getvar color1>;
    BORDER-LEFT: 1px; BORDER-BOTTOM:  <getvar color2> 1px dotted
}
.caption {
   COLOR:  <getvar color4>; FONT-STYLE: italic
}
.display {
   BORDER-RIGHT:  <getvar color2> 1px solid; BORDER-TOP:  <getvar color2> 1px solid;
    BACKGROUND:  <getvar color2>;
    FILTER: progid:DXImageTransform.Microsoft.Shadow(color="#141414",Direction=135,Strength=6);
    BORDER-LEFT:  <getvar color2> 1px solid; BORDER-BOTTOM:  <getvar color2> 1px solid
}
.lid {
   BACKGROUND:  <getvar color13>; FONT: 11px Verdana, Tahoma, Helvetica, sans-serif;
    COLOR:  <getvar color14>; TEXT-DECORATION: none
}
.message_body {
   MARGIN: 5px 5px 10px;
   FONT: 10px Verdana, Tahoma, Helvetica, sans-serif; COLOR:  <getvar color7>
}
.sb {
   BACKGROUND:  <getvar color14>; FONT: 14px Verdana, Tahoma, Helvetica, sans-serif;
    COLOR:  <getvar color8>; TEXT-DECORATION: bold
}
BODY {
   MARGIN-TOP: 0px; TOP: 0px
}


BODY TABLE A IMG {
   DISPLAY: inline
}
HR {
   POSITION: relative
}
BODY {
MARGIN-TOP: 0px;
BACKGROUND-IMAGE: URL(http://www.pbase.com/dang/image/93401961/original.jpg);
MARGIN-BOTTOM: 20px
text-align:center;
}

HTML:

Code: Select all

<center><img src="http://www.pbase.com/dang/image/93403204/original.jpg">
<br><br><br>
<TABLE cellSpacing=0 cellPadding=0 width=85% border=0>

<TBODY>

<TR>

<TD vAlign=bottom colSpan=3>

<!--- menu starts here --->

<TABLE class=luis cellSpacing=0 cellPadding=0 width=100% border=0>

<TBODY>

<TR>

<TD><IMG height="10" src="http://www.pbase.com/image/56552555/original.jpg"></TD></TR>

<TR align=middle>

<TD><A href="http://upload.pbase.com/edit_gallery/xcreach/root"><h3>EDIT</h3></A></TD>

<TD><IMG src="http://www.pbase.com/image/56552555/original.jpg" width="8"></TD>

<TD><A href="http://www.pbase.com/xcreach/guestbook"><h3>Guestbook</h3></A></TD>

<TD><IMG src="http://www.pbase.com/image/56552555/original.jpg" width="8"></TD>

<TD><A href="http://www.pbase.com/xcreach/root&view=recent"><h3>Recent</h3></A></TD>

<TD><IMG src="http://www.pbase.com/image/56552555/original.jpg" width="8"></TD>

<TD><A href='/xcreach#galerias'><h3>Galleries</h3>

</A></TD><TD><IMG src="http://www.pbase.com/image/56552555/original.jpg" width="8"></TD>


</A></TD></TR></TBODY></TABLE></TD></TR><!--- menu ends here --->

<TR>

<TD vAlign=top>

<br><br>

SLIDESHOW(83484550,79241217,64261048,84078641,79951655size=medium, delay=3, loop=yes)

</TD>

<TD><IMG src="http://www.pbase.com/image/56552555/original.jpg" width="15"></TD>

<TD vAlign=top bgColor=#333333><!--- right column --->

<TABLE cellSpacing=0 cellPadding=19 border=0>

<TBODY>

<TR>

<TD><TD align=text>

<P> <a ="" /a>

<br><br>Appreciation of a photo is sometimes purely aesthetic. Other times, it touches something deeper within. Photography, for me, is not about technical perfection. I see it more as a way of communicating emotions. Emotions can be drawn from the subject of the photo or from the photographer who projects his own feelings. Emotions can also come from the viewer interpreting the image. A mix of all three should make a great photo.


</TD></TR></TBODY></TABLE></TD><!--- end right column --->

</tr>
<tr>
<td colspan="5"><img onload="" src="http://www.pbase.com/image/56552555/original.jpg" height="6"></td></tr><!--- Elated credit <A HREF="http://www.elated.com">http://www.elated.com</A> --->
<tr>
<td colspan="5" align="center">
<p>Be informed of gallery updates via: <br><a href="http://feeds.feedburner.com/xcreach-pbase"><img src="http://i.pbase.com/o6/37/739937/1/74153173.sw6PPY8Q.feedicon16x16.jpg" /> RSS feed</a>.
</p>
<br>
</p></td></tr><!--- end elated credit---></tbody></table></center>
<a name="galerias"></a><br><br>

[xcreach]

Many thanks Dang for working so much on trying to find a solution.

I really prefer to keep a black frame despite the bugs encountered. what I will try to keep from your last option is to put the RSS below the slideshow. I really like that option.

I have updated part of the url as you suggested, will finish this tomorrow (i still have a pb updating the background url, not sure yet why it doesn't work.

I have made a mix of all yr options. Kept all yr codes (the option before the last). I have just changed a little bit the div.galleryheader not to have the original pb (size of black box depending on size of browser window.

The galleryheader is now:

DIV.galleryheader {
width: 800px;
MARGIN-LEFT: 195px;
MARGIN-RIGHT:30px;
MARGIN-TOP: 20px;
MARGIN-BOTTOM: 60px;
text-align: center;
background: #000000;
border-style: solid;
border-color: #2C2931;
border-width: 2px;
PADDING-TOP: 30px;
PADDING-BOTTOM: 0px;
PADDING-LEFT:20px;
PADDING-RIGHT:22px;
}

It seems to work pretty well, including with IE (the only thg with IE is that the blackframe is not perfectly centered but...)

many thanks again and again for the time dedicated to my pb.
Cheers

[dang]

Hey,
Glad to help, hope you can get it close. You might try changing the width to % instead of px , and see if that helps. Post the url you're using for the background so we can have a look. As I'd mentioned, you use the entire url as seen in the browser for background, and just add /original.jpg to the end.
Example:

Code: Select all

http://www.pbase.com/xcreach/image/11111111/original.jpg

If you're still using a png file, try adding /original.png to the end instead. Not sure why it works different at times, but it's best to convert to jpg since it might be a problem later on. jpg works fine in all codes.

And the image numbers in the slide show are just this section: 11111111

Hope that takes care of it for you, have fun.
tom

[xcreach]

Hi Dang,
I keep on doing small changes. As requested, the url of the image used as a background that I have now converted to a jpg is: http://www.pbase.com/xcreach/image/9344 ... iginal.jpg
all the best