Curvycorners and IE8

HTML & CSS
1

Hi

Some of my pages no longer display the rounded corners in IE8

This is porbably due to a change from

-moz-border-radius-bottomleft: 20px;
 border-bottom-left-radius: 20px; 
  -moz-border-radius-bottomright: 20px;
 border-bottom-right-radius: 20px;

to

 -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;

which curvycorners does not recognize.

I’ve played around changing the new code to the old one but can’t get it to work. I’m also limited because my IE8 is still a steam contraption and you have to clear the cache for every single css change and it takes hours!

2

IE8 doesn’t support border-radius in general.

Unless you want a workaround dealing with images, I’d just let this be.

I wouldn’t worry too much about IE8, it’s in retirement and it’s quietly living out its days until its death.

3

Hi Brian

Up already?

All my main pages work fine with corners in IE8 and I would like them to continue working.

I use curvycorners. For the new sights pages I had help (that’s a big understatement…) from Paul, and he probably did not know that I wanted to keep the corners with curvycorners.

Look at, for instance, in IE8 at pintotours.net/Europe/Spain/Barcelona.html

4

Sorry Ryan, not Brian!

5

Who?

[quote=“qim, post:3, topic:112832”]
Up already?
[/quote]Who says I sleep!?

And oh ok curvycorners (never heard of it) is apparently based in Javascript.

That page you gave me seems to have curvycorners working though?

6

Hi Byron, sorry Brian, ok Ryan

(sorry…)

Using the curvycorners script by Google (I believe) http://code.google.com/p/curvycorners/ and with the sort of code I had in Barcelona page which was the basis for the sightsPunta page I should get rounded corners in IE8

However, there is now different code and new divs which I have been unable to decipher and modify like

.column-wrapper {
    display:table;
    width:100%;
    border-spacing:10px 0;
    border-radius:20px;
    background:#910000;
    margin:10px auto;
    table-layout:fixed;
    padding:0 30px 0 0;
        -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
}
7

Hi Ryan

The fire is out!

I’ve managed to sort out most of the page and I believe I can finish it, all on my own!

It’s here, if you are interested.

http://pintotours.net/Work/BCN/sightsPunta.html

I’m also going to give you some time off as I’m flying over to sunny England tomoorow and wil be away fo a whole week

(did I hear a sigh of relief?..)

Thanks for everything

8

Is it safe to come out of hiding now :smile:

2 Likes
9

I’m coming to see you…

Paul. I may be back in a few moms. because I screwed it up…

LATER:::

Everything was going well until I touched the

.column-wrapper {
    display:table;
    width:100%;
    border-spacing:10px 0;
  
    background:#910000;
    margin:10px auto;
    table-layout:fixed;
    padding:0 30px 0 0;
    -moz-border-radius-topleft:20px;
    border-top-left-radius:20px;
     -moz-border-radius-bottomleft:20px;
    border-bottom-left-radius:20px;
    -moz-border-radius-topright:20px;
    border-top-right-radius:20px;
     -moz-border-radius-bottomright:20px;
    border-bottom-right-radius:20px;
}

What I think is happening is the the 20px corners are increasing the width of the column.wrapper, by increasing the width of the left sidebar, and the right hand side has gone wild, and the bottom does not ook too good either…

I have a similar, but much smaller problem in mos modern browswers, except Safari, as the left “sidebar” is about 20/30 px out of the page.

Do you ahve access to IE8 browser? http://pintotours.net/Work/BCN/sightsPunta.html

10

Forgive me from being blind but what is wrong with this page exactly? It seems to match up with Chrome fairly well.

1629×971 561 KB

11

HY Ryan (not HI Brian)

You are not blind, you just need new specs…

look where the right “sidebar”, which is actually the body of the page has gone, along with the navbar. And I assume that is a screenshot from IE8, where the left sidebar has grown fatter an dthat is why the rest is being pushed out, I think. If you ahve the same results as me the bottom has shrunk upwards leaving the winy background totally visible.

You thought you had got rid of me, no?..

PS -

Look at the coorect page which is online. That’s what it should look like:

http://pintotours.net/Americas/DomRepublic/sightsPunta.html

12

Hi,

Try adding this rule:

.column-wrapper {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;

}
13

Thank you Paul

That solved the sidebars , but the bottom is still out of place in IE8. It look ok in IE9

Sorry…

UPDATE

In the very slow computer with IE8 hat I have here, the page looks fine when it loads everything except the clock and the curvycorners which come quite a few seconds later, And it is when the corners are put in that the bottom rises. Up until then everything looks fine.

14

Hi,

It looks like the curvy corners don;t work on display:table elements.

Try adding this ie8 rule inside your CC comments.

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://pintotours.net/Pinto/scripts/curvycorners.js"></script>
<style>
.column-wrapper{
    display:block;
}
</style>
<![endif]-->

I can’t guarantee that it may not cause problems later in IE8 but it seems to fix the corner problem.

15

Hi Paul

Sorry, I had to go out. … to buy an unbrella. I’m going to England tomorrow!

Slowly, slowly we’ll get there. The main problem with the height has gone, but now I have problems with the left sidebar. The bottom corner has disappeared and most of the panels are all over the place. The sidebar is much wider than it should be but I could leave it like that. That is not a problem.

Regards

16

It’s the curvy corners again breaking the layout. They were never very effective and often broke the layout which is why I never used them (or other similar routines). I suggest you omit the routine from the middle columns and just apply the corners to the header and footer.

IE8 usage is down to about 3% so square corners are fine especially when your curvy corners are making the page sluggish and also makes it jump around when loading.

17

Hi Paul

I guess you’re right, but all my main pages work with curvycorners, e.g. http://pintotours.net/Europe/Spain/Barcelona.html and I never had the slightest problem. of course, thos pages don’t move up and down like these, and there has to be a compromise somewhere.

I read online that you are in England. if that is anywhere near Oxford, let me know, as I owe you a drink or two, or maybe even three!

Many thanks for all your help.

Regards

18

The problem with the left column is the same problem that I fixed in my original code but you took out all my corrections and used your original broken code.

You have list elements that are set to 170px wide which is wider than you have made the column plus they have padding and silly negative margins when they don’t need them. I fixed all that and removed a couple of hundred lines of duplicated code but you inserted it all back in again :smile:

IE8 sees the larger list elements and so does the curvy corners and pushes the column wide.

This should get it back on track and allow the corners to work (along with the fix I already gave for column-wrapper).

.dest ul, .dest1 ul, .dest2 ul, .dest3 ul, .dest4 ul, .destx ul {
  padding:0 0 0 5px!important;
  width:auto;
}
.dest ul li, .dest1 ul li, .dest2 ul li, .dest3 ul li, .dest4 ul li, .destx ul li {
  margin-left:0;
  padding: 5px 5px 5px 0;
}
#left{border-radius:20px 0 0 20px}
19

oh, oh… in your bad books now!

I’m sorry. Yes, I do remember. I was a bit lost with new code and tried to get back on firm soil. I will apply these changes, but it has to wait until I get back from the UK. I don’t have an IE8 computer there, and right now I must go to bed as I need to get up at the crack of dawn.

I will get back on this when I return.

Once again, my apolgies and thanks.

Regards

20

Hi Paul

I apologized for changing your code but I should explain why. From waht I remember the left column narrowed along with the rest and I wanted it to stay the same width until it was taken out in media queries. I had also the problem with curvycorners.

Now, that I am back I found some other problems: IE8 apparently does not accept media queries and so the left column does not disappera when it should…

Also, I don’t know what I have changed but the curvycorners in the header also stopped working even if I tried all the code that I have in other pages.

Then, panelL6 is wider then the others even if the 95% width is the same, and the last dest4 which I had fixed to the bottom of the column has now moved up.

Sorry, but these days away cleaned my brain of all past memories, an despite a few hours trying to tidy up things nothing works!