img float bug and mouse over

Hi.

On the http://skroc.pl/69d8 are images in the body (# singlepage), which
are given to float. The problem is that after mouse is over on them if
they flee the mouse (browser IE6 and 7). I tried to give elements of the
overriding zoom:1, but it does not give effect. How do I resolve this
problem? Maybe this particular bug in IE is something called.

--
Best regards,
Peter

Peter May wrote:

On the http://skroc.pl/69d8 are images in the body (# singlepage), which
are given to float. The problem is that after mouse is over on them if
they flee the mouse (browser IE6 and 7).

Part of the problem may be floating the image, but not the containing
<a> element. In Firefox, a mouseover on the image shows the :hover
colors in a narrow block within the text, between the words where the
<a> markup is. That can't be what you intended:
http://www.bergamotus.ws/screenshots/powiatdrawski.png

I'm curious why those floated images are links in the first place - they
just link to themselves, not enlargements as I expected.

So first, try floating the <a>, not just <img>. IE has plenty of bugs
where it comes to floats, so that may not resolve this particular issue.
Adding position:relative to the floated element often helps.

You should also try simplifying the CSS. 41KB is a massive stylesheet.
You'll have a much easier task debugging a smaller file. KISS rules.

--
Berg

Bergamot pisze:

Peter May wrote:
On the http://skroc.pl/69d8 are images in the body (# singlepage), which
are given to float. The problem is that after mouse is over on them if
they flee the mouse (browser IE6 and 7).

Part of the problem may be floating the image, but not the containing
a> element. In Firefox, a mouseover on the image shows the :hover
colors in a narrow block within the text, between the words where the
a> markup is. That can't be what you intended:
http://www.bergamotus.ws/screenshots/powiatdrawski.png

Indeed, not noticed this effect.

I'm curious why those floated images are links in the first place - they
just link to themselves, not enlargements as I expected.

It is very simple. A friend, who introduced the content, probably
brought bad image, because I agree with you that you should direct link
to original size image. Pay attention to it.

So first, try floating the <a>, not just <img>. IE has plenty of bugs
where it comes to floats, so that may not resolve this particular issue.
Adding position:relative to the floated element often helps.

No to a small problem because the content is placed directly attributed
class alignright and alignleft to the image. You have to pay attention
to the fact that sometimes there is a picture alone, and sometimes as a
link.

Currently, I do not know what this can be done. I tried many methods
with position: relative, zoom: 1 and the other, but over my ideas.

You should also try simplifying the CSS. 41KB is a massive stylesheet.
You'll have a much easier task debugging a smaller file. KISS rules.

I do not know what else can I shorten in the style sheet, but I can
always go further compressed. Consolation may be that CSS is loaded only
once, rather than every time you review the website.

--
Best regards,
Peter

Bergamot pisze:

Peter May wrote:
On the http://skroc.pl/69d8 are images in the body (# singlepage), which
are given to float. The problem is that after mouse is over on them if
they flee the mouse (browser IE6 and 7).

Part of the problem may be floating the image, but not the containing
a> element. In Firefox, a mouseover on the image shows the :hover
colors in a narrow block within the text, between the words where the
a> markup is. That can't be what you intended:
http://www.bergamotus.ws/screenshots/powiatdrawski.png

Still not solved this problem :-(

I'm curious why those floated images are links in the first place - they
just link to themselves, not enlargements as I expected.

So first, try floating the <a>, not just <img>. IE has plenty of bugs
where it comes to floats, so that may not resolve this particular issue.
Adding position:relative to the floated element often helps.

I managed to fix the problem. It turned out that the removal of
position: relative to <a> solved the problem. Strange, but it works
properly in IE.

--
Best regards,
Peter

Peter May wrote:

Bergamot pisze:
Peter May wrote:
http://skroc.pl/69d8

In Firefox, a mouseover on the image shows the :hover
colors in a narrow block within the text, between the words where the
a> markup is. That can't be what you intended:
http://www.bergamotus.ws/screenshots/powiatdrawski.png

Still not solved this problem :-(

That's because you're still floating just the image, not the <a>. Your
stylesheet adds padding and colored parts to the <a>, which don't go
away just because you floated the image. Float the <a>, not the image.

--
Berg

Bergamot pisze:

Peter May wrote:
Bergamot pisze:
Peter May wrote:
http://skroc.pl/69d8
In Firefox, a mouseover on the image shows the :hover
colors in a narrow block within the text, between the words where the
a> markup is. That can't be what you intended:
http://www.bergamotus.ws/screenshots/powiatdrawski.png
Still not solved this problem :-(

That's because you're still floating just the image, not the <a>. Your
stylesheet adds padding and colored parts to the <a>, which don't go
away just because you floated the image. Float the <a>, not the image.

As I wrote, do not always do I add a float for <a>, because it is not
possible. It is placed on the content using CMS. In addition, the
picture is sometimes alone, sometimes as a link. Nevertheless, surely it
would be better if the link was set to float.

--
Best regards,
Peter