[REOPEND] Small but irritating problem landzilla template

[as-lahaye]

Hi,

check: www.studio-lahaye.nl/sbwb

When moving the mouse over the menu it shifts (just by a few pixels) but it is enough to move some text on the page "Zwangerschapsfoto's"

I guess it has something to do with the margins and sizes but I can't figure out wich I should edit in the CSS...

Somebody an idea?

[aldus]

the only css i see is in line 323 - there is no rule "word-wrap" afask.
you will have to declare it like this:

Code: [Select]

white-space: nowrap;

maybe you are also in the need of declare "overflow: hidden" ... don't know.

Regards
Aldus

[as-lahaye]

do i have to place 1 of them or both?

so the line "word-wrap" on line 323 has to be replaced with "white-space: nowrap;" or is this an addition?

same goes for overflow: hidden replace or add?

thnx for the quick responce


update:

Placed both, overflow and white-space
still the same problem..

[aldus]

not both ... replace, as for the overflow: hidden add ...

as for the pixel-dance it has to do within the following rules:

Code: [Select]

#navi li a:hover, #navi li a.current {
border-bottom:1px solid #9A6717;
border-left:5px solid #9A6717;
color:#505050;
}
The border left steps all 5 pixel to right ... hm


Edit:

Got it work here:

Code: [Select]

#navi li a:hover, #navi li a.current {
border-bottom:1px solid #9A6717;
border-left:5px solid #9A6717;
color:#505050;
display:block;
margin-left:-5px;
padding-left:6px;
}

Declare as block, move to right left and adjust the left-padding ...

Regards
Aldus

[Ruud]

It is much simpler than that.

The #navi li a tag has a 4 pixel left border,  the #navi li a:hover tag has a 5 pixel left border.

Just make them both the same and you're done.

Ruud

[aldus]

Ruud - you nailed it! 
That's the simples one ... cool!

Regards
Aldus

[as-lahaye]

Indeed, Ruud did it again!

I knew it was a border problem, only not enough experience to find out wich border I had to change..
Now I read it, it sounds perfectly logical..

Before I ask anything else I will put more effort into it.

thank you guys!

[as-lahaye]

I'm sorry to report that both suggested sollutions did not work.

I thought it did but after adding a submenu item all problems began again..

[Ruud]

Well, you should not do both fixes.

Now, when you hover the menu, it jumps left.
Don't do the fix Aldus suggested.

So remove this part:
display:block;
margin-left:-5px;
padding-left:6px;

Ruud

[as-lahaye]

As mentioned to Ruud in a PM:

I restored the CSS file as original and replaced only the colortags and I still have the problem.

move the mouse over the menu: it jumps bij 12px.
take the mouse of the menu, press F5 and move it over again, you'll see what I mean.

Using Ie6 and 7

FF not tested.

[Ruud]

Ok, now I see what you mean.

It is not the normal hovering, but the first time, after (re)loading a page your mouse hits a menu item.

It is probably caused by the table you use.

The left <td> element is set to 210 pixels.
The menu div inside it is 218 pixes, wiith the submenu expanded 228 pixels.
Set the left td to 230 pixels, and you should not see it anymore.


Ruud

[as-lahaye]

this fixes the menu, now i have to look for the text not to shift.

but this is it, thanks Ruud!

[Ruud]

Maybe also size the right <td> element?
The whole thing is 770px. So the right one should be set at 540px.

Ruud

Edit: The problem is you are mixing table and div layouts.
You can size the table, but you must be very careful using things like margins in the div styles.
Now the #navi style has a 15px right-margin. That could very well cause the problem in IE.

[as-lahaye]

i deleted the margins on Navi and Navi div

altough the whole content moved to the left, the menu does not shift anymore.
Now the space between text and menu is permanent 15px or so.
So I have to alter this also..