Eystein Alnaes wrote:
> <http://www.eystein.no/test/osloreg2/>
>
> 1. When hovering the "Les mer" links, or any other <a> tag within a <p>, the
> lines around it, and/or the background image (green bullet) jumps to the
> left. Which I've traced down to be related to this <
> http://www.positioniseverything.net/explorer/percentages.html>, however I
> can't fix the problem. Well, setting IE in quirks mode does it, but it then
> creates more other problems.
.column-two-content { padding-right: 3%; padding-left: 3%;}
The padding quirky percentages miscalculation has two faces, depending
on the haslayout-status of the element:
- False (like in your case): the initial calculation is wrong, but on
hover, it will jump to a corrected position.
- True (by adding zoom:1): the initial calculation is correct, but on
hover, it will jump to a wrong position.
Both are wrong. There is no fix as far as I know. Omit padding
percentages. Alternatively, use them with haslayout, but without a hover
effect.
> 2. In the right column bottom box the bottom border skips when hovering the
> bottom <li>, and resets when hovering the <a> ("Motearkiv") below it.
This is a rare bug in haslayout by height: 1% (+ position:relative, I
think).
You have a very long list of fixes
body,
...
...
a.readmore,
...
...
.article h3 a:hover {
p\osition: relative;
heigh\t: 1%;
}
Use zoom:1 /instead/ of height:1% for
a.readmore
Further, there are
.meetings p a.readmore { width: 100%; }
p a.readmore, .meetings p a.readmore { ... padding-left: 15px; ... }
I don't know exactly what you want to achieve, since a width does not
apply to the inline link in standards mode IE.
In case you need it:
With the zoom:1 fix above, the inline link will now behave like
inline-block, and being inline-block internally, silly IE will apply a
width. Since the width of 100% will add to the 15px padding, this will
expand the .meetings box
You could exchange width + padding-left with
display: block;
text-indent:15px;
As I wrote, I don't know if you want that underline being 100%.
> 3. The menybar at the top - when clicking a menyitem it jumps to the end of
> the the menybar, and resets when hovering it at the new location.
Again, your long list
.box-header #navlist li a:hover,
.box-header #navlist li#active, /* not this one */
.box-header #navlist li#active a,
.box-header #navlist li#active a:hover
{ position: relative; height:1% }
but
.box-header #navlist li a {... float: left; ...}
Another rare haslayout bug. The links are having layout due to the
float, and an additional height:1% causes this jump on hover.
Delete the height:1% for these links.
-------------------------
In conclusion, split off the long list into separate rules. Check for
/each/ rule if
a) zoom:1
or
b) no haslayout trigger next to position: relative
does the fix here.
Why? In case you did not see your page in IE7: major parts of the page
are collapsing into one pixel line due to the height:1%, which is
respected in IE7.
On the other hand, simply removing the hacks here does not help much
(they did not fix all the bugs), so you have to use zoom:1 instead
sometimes.
Once you have this list ready, you should decide whether a Conditional
Comment would better suit your hacks.
Ingo
--
http://www.satzansatz.de/css.html
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
