Problems with scrolling using Google Maps and IE7

Hi,
I'm working on a new web project and had discovered another problem with IE7 browsing a page with a DIV containing a Google Map.
The issue was, that the map did not scroll. The maps container DIV was staying in the same place, while the text, which should be under the map scrolled behind it.

So i searched the web and found some answers. Well, there was one answer present, at least I found just one, which states that, if you have a nested DIV you should set the style position:relative; for that DIV and all anchestors until BODY.

This sounds stupid (no offense intended), but it kind of worked. But I wasn't satisfied with that, so I was trying and trying to get it fixed differently.

Long story short:
In my almost 4 hours searching and trying I found out, that simply deleting the following style anotation solved the problem:body {
font-size: 14px;
background: #fefefe;
overflow: auto;
text-align: center; /* IE hack for centering the main-wrapper */
}Maybe this helps some of you. Please leave me a comment if it did, or if you know why this happens at all.

wish nice coding
Pawel

Firefox for Mac: margin problem with floats

Hi,

another Problem while doing a website. This time Firefox bothered me, but only the Mac version.
The Problem looks like that:
What would you expect with this html and css code

HTML:

...
<body>
<div id="wrapper">
<img id="floated" src="image.png" alt="some image"
height="100" width="80" />
<div id="unfloated">
lorem ipsum dolor sit amet...
</div>
</div>
</body>


CSS:

#wrapper {
width: 400px;

}
#floated {
float: left;
}
#unfloated {
margin-left: 90px;
height: 300px;
overflow: auto;
}


So, what will you expect? It's clear.
An image on the left wich is floated left and has a width of 80px.
The div-box is on the right side of the image with 10px away from it. It has a height set, with overflow auto, so that all text which does not fit in this size will invoke a scrollbar. All that is wrapped in a div which width is set to 400px so that the text which should invoke the scrollbar does not need to be that long.

Ok, this should happen, but in Firefox for Mac you can see another effect. The margin starts at the right edge of the image, which makes the distance between image and div#unfloated 90px instead of 10px. The cause of that behavior is the attribute overflow. Without overflow you have your 10px distance, but then the div#unfloated will be extendet for the text and we don't want to have that.
It's a Bug, and I don't know if it's reported on bugzilla, but here the solution how you can still get your 10px distance.

You have to wrap the div#unfloated in another div box, let's say div#foo. Which has no overlow attribute set. Here the solution:

HTML:

...
<body>
<div id="wrapper">
<img id="floated" src="image.png" alt="some image"
height="100" width="80" />
<div id="foo">
<div id="unfloated">
lorem ipsum dolor sit amet...
</div>
</div>
</div>
</body>


CSS:

#wrapper {
width: 400px;

}
#floated {
float: left;
}
#foo {
margin-left: 90px;
height: 300px;
}
#foo #unfloated {
margin-left: 0;
}
#unfloated {
margin-left: 90px;
height: 300px;
overflow: auto;
}


This should work just fine. The definition "#foo #unfloated" is, because I don't want to always wrap the div#unfloated box, but when it's floated, then the left margin should be set to "0".

Hope it helps someone out there.

greez

iFrame Scroll to Anchor Problem

Hi,

I, as many others, discovered the iFrame Scroll to Anchor Problem. What's that?
Usually, when you write a long text, which is structured somehow, like headlines and so, and you have a index at the top of the page with which you can go directly to the headline you want by simply clicking at an index item you solve it with an Anchor.

<a href="headline42">Headline 42</a>
... [somewhere down the page]...
<h1 id="headline42">Headline 42</h1>


This works fine, but, when you load your page with that long text in an iframe with some margin to the top, all this changes a bit.
In IE the outer page jumps to the top of the window when you click on a headline, instead of the text inside just scrolling in the iFrame. FF and others do exactly what we want, but this ******* IE does it wrong, and unfortunately it is IE which 90% users use for browsing the web.

Well, here my solution until now, inspirated by this blog and some others linked in this blog.

I wrote this small function:

function anchorJump () {
setTimeout(function() {window.top.scrollTo(0,0)}, 0);
}

And the A-Tags calling the Anchors looks like that

<a href="#headline42" onclick="anchorJump();">Headline 42</a>


It works, but it flickers, as for an instant you see the scrolled page which is scrolled back not instantly enough. I don't like it, but for now it's the best I found to solve this.

If someone has a better solution, I would like to see it

greez