Curvycorners and IE8

LATER

I’ve just realized that I was updating the live page, rather than the test one. Give me some minutes to try and work it out.

No IE8 doesn’t support media queries and you would need to use a script to add that support.

or

https://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js

(I am away for a couple of days now so may not reply until later in the week.)

Hi Paul

Well, after some deep thinking I came to the (wrong?) conclusion that none of the devides that would need media queries (tablets and mobiles) use IE8. So, nothing to worry about.

Now, after appllying your latest code, the inside panels (.dest1, .dest2, .dest3, and .dest4) continue to be a different width from the rest. I tried everything, including styling from the head of the html as an IE8 conditional but for reasons that are beyond me I cannot get anything in the #left sidebar to move…

Other than that I am now happy with the page. http://pintotours.net/Work/BCN/sightsPunta.html

Many thanks

Hello. Fun thing for you. Disable Javascript in IE8 (Refresher here)

Look at this screenshot with IE8 JS disabled:

Curvy corners appears to be screwing with your widths and what not. It sets a bunch of styles.

When you do your IE8 rules, try throwing on !important to override the higher specificity that inline styling gives.

Or, you know, just say screw it for rounded corners and don’t give IE8 special curvy borders.

Hi Ryan

Thank you for dropping in!

I tried in both IE8 and IE9 without java. The xpected happened: scripts like the clock aand curvycorners did not show up; however, I thought the panels would all line up, but they didn’t. I’ve tries margin-right and padding-right and cannot get .dest1, .dest2, .dest3, and .dest4 to line up with the rest in IE8, with or without !important.

In fact, panelL6 for the main browsers needed extra margin-right to line up too, even if identical panels above did not. Strange!

I know you probably know this but Java !=== Javascript. </ocd> .

You don’t get my above screenshot in IE8 without Javascript enabled? Javascript was adding inline styling messing with the widths and what not (on my IE8) and rendering should have been fine once that was removed (i.e. Javascript disabled.)

Hi Ryan

Even being a ployglot I’m at a loss with the IE8 computer I have here. It is in Portuguese, a language I speak well, but I wish MS had a dictionary of terms. I disabled what appears to be the translation of active scripts ans the scipts don’t show, but my sidebar is as before; not like the one you sent me. So, maybe I have not recovered from the trip, or my IE8 is different from yours, or I ticked the wrong box!

But I get your point. However, is there a way of salvaging this sidebar using the curvycorners?

Ok go to your page we are talking about and just comment out all the <script> tags (i.e. same as disabling Javascript for our purposes.)

Then screenshot the paeg and get back to me.

Hi

Life is very complicated…

I had to take a photo of the other IE8 computer and now I cannot upload it…

Before taking the photo I dis the following in the html:

<!--
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="/Pinto/scripts/curvycorners.js"></script>

<style>
.column-wrapper{
    display:block;
}
#left{
width:165px !important;
}

.dest1, .dest2, .dest3, .dest4 {  
margin-right:40px !important;
}

</style>

 <![endif]-->
-->

and after that refereshed the page.
My sidebar is the same as before. NO IT IS BNOT!!! I’ve just cleared the cache and YES it is like yours.

Conclusion:

I’, going to see if I can keep the header and footer with the curvycorners and leave the rest alone, for whai I guess, I will have to apply the curvycorners code inside the header…

Why do I always make things as complicated as possible>?..

Many thanks.Ryan

KISS :wink:

When you set your widths and whatnot for the different panels inside the #left element, throw on !important on.

The curvy corners Javascript is just setting inline CSS which is overriding what you set. That can easily be triumphed if you just put !important on the end of your rules.

Hi thanks

Do you mean in the html conditional or generally in the css?

I’d do it in your conditional comments. It will be easy to throw away your IE8 code in the future when you decide to stop supporting it. No point tainting your current modern-browser CSS with !important when it doesn’t need it.

Hi Ryan

My original code, which I believe was needed for curvycorners had a lot of this:

 -moz-border-radius-bottomleft: 10px;
        border-bottom-left-radius: 10px;  
        -moz-border-radius-bottomright: 10px;
        border-bottom-right-radius: 10px;  
        -moz-border-radius-topleft: 10px;
        border-top-left-radius: 10px;  
        -moz-border-radius-topright: 10px;
        border-top-right-radius: 10px;

If I am to transfer the code to the <head> I expect I mus substitute the code in the css with something curvycorners will not react to. Should it be this?:

I addressed those issues in post #18 and the reasons for the differences and the last version I gave was a fully working version (apart from one inner corner IIRC). Of course the original code has probably changed by now :slight_smile:

Unfortunately I don’t have time today to go back through it all as I am away for two day now but the issue you need to look at are all the oversize elements in that left column which get pushed wide when curvy corners are added.

Hi Paul

I spent the last hour or so looking at your original code http://Work/Paul/New.html

As I said before I needed to do a few minor changes and some BIG ones because of curvy corners. Now, I’ve come round to accept your idea of leaving the curvy corners just for the header and footer, but strange things are happening:

I’ve put the script back after disabling javascript and the #left mysteriously seems to have fallen vback into place. Well. nearly. The only problem that I have now is with panelL6. For the main browsers I had to give it margin-right 5px, even all the others only needed 1px. And now in the IE8 conditional I played around with all possibilities and the panel refuses to budge!

Aye, aye, Sir!

May I have the answer now?

Pretty please - fix this link :slight_smile: .

Javascript!

…I amended, above…

Still does not work :stuck_out_tongue:

PanelL6 both appear to be horizonally the SAME in IE8 and Chrome. Could you clear your cache? If that doesn’t fix it, could you screenshot what you are seeing? Right now the only difference for PanelL6 in IE8 and Chrome is the rounded borders not being set (on purpose.)

http://pintotours.net/Work/Paul/New.html

…I could have sworn… It did not work a moment ago, and now with clearing thr cache everything is in place.

I’m starting to think that there is some witchcraft going on here… Are you sorting these things out magically just to get rid of me? It’s not easy, you know?

PS . many thanks. if it’s all still in place by morning, I’ll move to the next problem: a javascript (not java script, as I’ve been told)

BTW: the url is not as you wrote above but http://pintotours.net/Work/BCN/sightsPunta.html