Help in sorting some display issues please?

[GlynH]

After attempting to hijack David's iPhone thread and turning it into a 'please-help-me-fix-my-website-that-has-nothing-to-do-with-the-iphone-whatsoever' I thought I would post in the appropriate place!

Many thanks for those of you who have taken the time & trouble to point out some issues on what I thought in my ignorance was a perfectly working website - especially Beteljuice. Much appreciated.

Leaving aside the MesoMap Live issues that I have emailed the author about I have noticed another anomoly with my website that shows up in IE8 & Chrome with regard to the positioning of my Moon Phase box.

I had an idea this would cause problems because when I originally included it I struggled to find out how best to position it and finally managed to cobble it in the right place - or so I thought.

Using IE8 in normal mode (not compatability mode) the moon box is way over there on the right instead of being in the gap where it should be (and appears to be under IE7 and IE8 in compatability mode).

In Chrome it displays on the left...God only knows where it is under Safari or Firefox...

What is the correct way to display this box in the existing gap to the right of the text and right justified so it will automatically move to the correct position for different size screens please?

See here; http://www.glyn.me/weather

Something else I have noticed on this & other forums with IE8 in normal mode - when you get to the bottom of this message body box for some reason I lose track of what I am typing - the screen only briefly jumping when I input a character and then jumping immediately back again.

If I hit compatability mode then all of the text I posted disappears for good!

Grrr...so much for the latest & greatest browser update...

Thanks & kind regards,
-=Glyn=-

[steve]

Something else I have noticed on this & other forums with IE8 in normal mode - when you get to the bottom of this message body box for some reason I lose track of what I am typing - the screen only briefly jumping when I input a character and then jumping immediately back again.

If I hit compatability mode then all of the text I posted disappears for good!

Yes, it seems there is an incompatibility between PHPBB3 themes and IE8. I don't really understand the fixes that I've seen posted (and they seem to contradict each other), but a suggested work around is to set the site for IE7 compatibility mode?

[steve]

I've just tried in IE8 and it works fine for me - but I'm using the version of IE8 in the Windows 7 RTM, so it looks like they've fixed the problem in IE8 now.

[steve]

Your moon is in a table without any rows defined; that may be the problem.

[daj]

here is one way to fix you moon phase display problem.

delete the <table align="right" border="0"> and </table> tags before and after the Moon Phase code

In the first <div> tag on the moon phase code that sets the width we will tell it to put on the right of the page and also leave a small gap on the right so that it is not hard up against the edge of the page....


<!-- // Begin Current Moon Phase HTML (c) CalculatorCat.com // --><div style="width:223px;float:right;padding-right:20px"><div style="......

my additions are shown in blue

Is this the position you want it in?

[GlynH]

You guys are great!

Your theories/diagnoisis was spot on...you know I almost feel like I know what I am doing when I can cut & paste html code and it works...

Well very nearly anyway...it seems to have solved the IE8 issue of positioning the moon box although it would be good to have it a little higher that it is actually is...but in Chrome (and I am guessing Safari & Firefox also) it is much too low and impacts on the date part of my title/heading for the table underneath.

I hate to ask again but does anyone have a quick fix for that please?

Thanks & kind regards,
-=Glyn=-

[daj]

Move the Moon Phase div up above the text and add a padding at the top. ....

<!-- // Begin Current Moon Phase HTML (c) CalculatorCat.com // --><div style="width:223px;float:right;padding-right:10px;padding-top:20px;">...........<!-- // end moon phase HTML // -->

<p>Live weather information from Banbury, Oxfordshire, United Kingdom


Think of a <div> as a container -- it creates an invisible box around anything (text, images, flash, etc). Using "styles" you can then put this div anywhere on the page. It can either follow the flow of the HTML (reading top to bottom, left to right) or you can actually position it in an exact position on the page or relative to something else.

What we are doing here is placing the container on the page just after we complete the Weather Summary table. Because we then Float it to the right, we are telling the browser (with the 'float') that text can use the space to the side of the Div/Container. We then tweak it a little by adding a padding (some white space) to the top and right to get a better position.

To show you the DIV, add a border just to see how it works.....

<div style="width:223px;float:right;border:solid;padding-right:10px;padding-top:20px;">

Remember to remove the border again!

[GlynH]

You know I very nearly thought of that myself David...

That particular moon thing had been bugging me for ages - I knew it was not right although in my ignorance I wasn't aware that it didn't display properly in other browsers.

All sorted now...that would taken me many hours of research and even more attempts at hacking the code around until I found something that worked by accident...just like last time...

Very much appreciated.

Thanks & regards,
-=Glyn=-

[daj]

No problems - happy to help anytime

If I was to offer one tip, it would be to use Firefox rather than IE. If it works in FF then it will more than likely look good in Safari, Chrome, Opera and others. IE is a law unto itself and in the past has tried to do it's own standard. Only now is it catching up with the agreed standards for HTML & CSS. FF is not perfect either but it's nearly there and has a huge following so is well supported. If you want almost perfect compliance you need Chrome or Safari but they are new and less well supported with add-ons.

When I design a website, I always do it for FF first, then check what I need to tweak just for IE

Just my two pence worth -- everyone has an opinion on the best browser

[GlynH]

Hi David,

I know what you are saying about IE and I have to say that it has been said before and I fully agree.

So much for the 'standard' Microsoft standard...

Sometimes however it is better the devil you know and as I have never really had the need to change and I don't like installing software unless absolutely necessary so I have fought shy of it.

I never even went over to IE7 until a looong time after it was released because my IE6 seemed to be slowing down and causing problems.

Similar story with IE7->IE8...I would have stayed with IE7 but a short time after IE8 was released my browser appeared to get slow & buggy so I reluctantly upgraded.

Anyway many thanks for sorting out my wayward website - a good job done at last!

Thanks & regards,
-=Glyn=-