Hi,

My first attempt at skinning, and IE is giving me grief.

I've put the logo in a three column table so I have the logo on the left, a repeating spacer in the middle, and an image to the right. The middle cell needs to be variable based on the width of the browser/monitor.

The skin is based on the default skin for DNN5.1

I've added the following to the skins.css file:

.call_1300{padding:0;margin:0; background:url(images/Call1300737907.gif) no-repeat;height:100px;width:200px; background-position:"right"}
.banner_spacer{padding:0;margin:0; background:url(images/BannerSpacer.gif)repeat-x;height:100px; }
.logo_width{padding:0;margin:0; width:429px; }

and the following to the index.ascx file:

                    <div class="logo_left">
                        <div class="logo_right">
                            <div class="logo_pad">
                                <table width="100%" cellpadding="0" cellspacing="0">
                                    <tr>
                                        <td class="logo_width" <dnn:LOGO runat="server" id="dnnLOGO"  /></td>
                                        <td class="banner_spacer"></td>
                                        <td class="call_1300"></td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>
 

This all works fine in Firefox.

However in IE8 (on Vista) the spacer image doesn't show at all, and the right side image is not all the way to the right.

Any ideas on how or I can fix this, or achieve the same result some other way. This all looks really simple, except it doesn't work...

First mistake, thought I'd already upgraded to IE8... duh... was IE7.

I put on IE8 and with the developer tools discovered that IE8 liked a space before the repeat-x. Second duh!!!!

However IE7 still causes grief.

When it renders the table, it totally ignores the width attirbutes and just seems to make it up as it goes along, so the middle column doesn't display at all.

I then found a post that specified the table-layout attribute.... so it now works...

Add the bannertable class

.call_1300{padding:0; margin:0; background:url(images/Call1300737907.gif) no-repeat; height:100px; width:200px; background-position:"right"}
.banner_spacer{padding:0; margin:0; background:url(images/BannerSpacer.gif) repeat-x; height:100px; }
.logo_width{padding:0; margin:0; width:429px; }
.bannertable { table-layout:fixed; }

                    <div class="logo_left">
                        <div class="logo_right">
                            <div class="logo_pad">
                                <table class="bannertable"  width="100%" cellpadding="0" cellspacing="0">
                                    <tr>
                                        <td class="logo_width" <dnn:LOGO runat="server" id="dnnLOGO"  /></td>
                                        <td class="banner_spacer"> </td>
                                        <td class="call_1300"></td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>

Hope this is helpful to someone else...

JJ