Display problem in Opera

I am having this same problem in Opera 9.50 Beta 2 for Linux.

Jugney

The same problem with Opera 9.62 for Linux and Konqueror 3.5.1 (KDE 3.5.1 Level "a", Linux), while Firefox 1.9 works all right. The same problem takes place in all of the 3 available layouts (960px, 98%, 100%). While using the first of them I put the following line into custom.css:

.bottom .middle {width:922px}

It worked for Opera, but broke display in Firefox.

hmm, I guess this needs some specific hacks or a new method... I'll have to think about this.

I can confirm this problem with Opera 9.63 on Windows XP.

I've found a fix that works in IE7 (Windows XP), FF2, Opera 9.63 and Google Chrome. It requires patching 2 files and adding one image file.

In page.tpl.php, change the "bottom" code to this:

<div class="bottom">
     <div class="fl">&nbsp;</div>
     <div class="fr">&nbsp;</div>
     <div class="middle">&nbsp;</div>
</div>

In style.css, replace all of the code necessary to create the rounded corners with this:

/* Rounded corners in footer */
.bottom {
position: relative;
clear: both;
float: left;
width: 100%;
line-height: 16px;
}

.bottom .fl {
background: url('images/corners.png') no-repeat left bottom;
float: left;
width: 16px;
}

.bottom .middle {
margin: 0 16px;
}

.bottom .fr {
background: url('images/corners.png') no-repeat right bottom;
width: 16px;
float: right;
}

Upload the image file "corners.png" to the "images" folder. This file includes both the left and right corners. By positioning it depending upon location, you can use the same file in both corners. It's a rough version of the original corner files so I would recommend a clean-up before that's added to theme. I've included my version for a template.

As an alternative, this also works with the existing corner images. The code for style.css in that case is this:

/* Rounded corners in footer */
.bottom {
position: relative;
clear: both;
float: left;
width: 100%;
line-height: 16px;
}

.bottom .fl {
background: url('images/bg-footer-bl.png') no-repeat left bottom;
float: left;
width: 16px;
}

.bottom .middle {
margin: 0 16px;
}

.bottom .fr {
background: url('images/bg-footer-br.png') no-repeat right bottom;
width: 16px;
float: right;
}

One last comment: The advantage to the corners.png solution is that it's much more forgiving when you use the fluid layouts. With the current code, when the browser width is less than around 900 px, you get horizontal scroll bars because the images that form the corners are each 450 px wide. You could achieve the same effect as corners.png by creating 2 images, one for each corner, that are 16 px wide. That would match what I was trying to achieve with the corners.png.

Patch and image file attached to fix this problem.

Hi,

the provided patch from #9 works perfectly. Thank you!

regards,
Oliver

I am sorry if this is a noob question, but I don't know how to apply a patch. I have a site running a customized version of this theme and I want to fix this error, but I don't want to override the changes I have made. Any suggestions?

@dang.artman:
download the three files from #9 and drop them into your sky-theme directory. On download the filenames get changes, so rename corners_0.png to corners.png and move it to the images directory.
Then patch the files.

I did it like this:

cd /var/www/html/magenbrot.net/themes/sky
wget http://drupal.org/files/issues/page.tpl_.php__12.patch
wget http://drupal.org/files/issues/style.css__5.patch
wget http://drupal.org/files/issues/corners_0.png
mv corners_0.png images/corners.png
patch -p0 < style.css__5.patch
patch -p0 < page.tpl_.php__12.patch

There are some notices on changed offsets while patching, because the patches were made for an older version of sky (if you are running the latest version) but it still works for me.

@Jacine: Could you include the patch in the official download?

regards,
magenbrot

Hi,

I've made a patch against the current version with the suggestions from #7. This comes without adding an additional file to sky. I couldn't see any problems with it, while using fluid width and shrinking the window below 400px.

To install do the following:

cd themes/sky
wget -O sky-opera-corners.patch http://drupal.org/files/sky-opera-corners.patch
patch -p1 < sky-opera-corners.patch

then check the result while using opera.

I spent some time on this over the weekend, and the only problem with this patch is that it doesn't work in IE6. I'm thinking about using jQuery to handle corners...

jQuery wont work with the sticky footer unfortunately, so that's out. I'm working on this.

Hi Jacine,

perhaps you should drop the support for ie6 http://iedeathmarch.org/ it will be eight years old this fall, so it isn't useful anymore for current tasks ;)

Hi, I actually dropped support for this entirely, because even though I had it working I was not happy with the code required to achieve it. Sorry.