5 replies [Last post]
Tomek
Offline
newbie
France
Last seen: 14 years 20 weeks ago
France
Joined: 2006-04-20
Posts: 5
Points: 0

Hello all,

the display of the text (between span) is ok - in one line with FF, Opera, Netscape and Safari - and in several lines with IE6 (seems IE7 is ok too).

I searched for several possibilities, such as haslayout of course, but found nothing close to this problem...
A tip, maybe the width:29px in the ul#menu li seems important... ?

http://lefrankendriksite.free.fr/temp/

the concerned css :

ul#menu { background: #FFD7AE; border: 2px solid #FFDAB5; display: block; height: 42px; margin: 10px auto; padding: 0 0 15px 20px; position: relative; width: 300px; }

ul#menu li {
background: transparent url(images/boutonmenu.jpg) no-repeat 0 -6px;
float: left;
font: bold 13px trebuchet ms,verdana,arial;
letter-spacing: 2px;
list-style-type: none;
margin: 5px 20px;
width: 29px;
}

ul#menu li a#cur {
background: transparent url(images/boutoncur.jpg) no-repeat 0 -3px;
color: #ffbd7b;
font: bold italic 13px verdana,arial,sans-serif;
letter-spacing: 2px;
padding: 0;
}

ul#menu li a:link, ul#menu li a:visited {
background: transparent;
color: #C33;
display: block;
height: 35px;
margin: 0;
padding: 0;
}

ul#menu li a:hover, ul#menu li a:active {
background: transparent url(images/boutonmenu.jpg) no-repeat 0 0;
color: #C33;
}

ul#menu a span { display: none; }

ul#menu a:hover span {
display: inline;
left: 80px;
position: absolute;
top: 37px;
z-index: 1;
}

ul#menu a#cur span {
display: inline;
left: 30px;
position: absolute;
top: 37px;
z-index: 0;

}

the concerned xhtml :

Thanx a lot for help !

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 13 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

You may need to explain a

You may need to explain a little more literally what the actual problem is, guessing somewhat are you referring to the fact that on pages with a current link state text displayed the hover state text is rendered in the same position? if so then you may need to do something along these lines, modified of course to suit.
Edit/ Sorry didn't check in IE you need to state a width and or height in IE when using position absolute, width:~300px should sort things out

ul#menu li a#cur span { position:absolute; text-align:center; top:50px; width:300px; }

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Tomek
Offline
newbie
France
Last seen: 14 years 20 weeks ago
France
Joined: 2006-04-20
Posts: 5
Points: 0

Sorry

well it seems I was not clear at all, sorry for that.

So, the fact is when you hover the image button in the navbar, the display of the text must appear just below, in one single line, within the menu div, which is not the case under IE6 only.
the current state has the same problem though. The display is ok (and placed as I want to) but still not in IE6.

Oh, a simple way to explain :
what it should be everywhere :

and what it is in IE6 :

Thanx !

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 13 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

My fault, apologies. Didn't

My fault, apologies. Didn't take in IE6 in the title, see my edited original post.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Tomek
Offline
newbie
France
Last seen: 14 years 20 weeks ago
France
Joined: 2006-04-20
Posts: 5
Points: 0

thanx a lot !

Well it seems I was searching for much more complicated...
Thanx for the quickness of the solution ! Smile

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 13 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Good stuff. Again apologies

Good stuff. Again apologies for my misunderstanding. Thanks for marking the thread as 'Resolved'.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me