Not signed in (Sign In)
SkillShare - A place to discuss Web Standards and Web Design topics
Categories
Vanilla 1.1.4 is a product of Lussumo. More Information: Documentation, Community Support.
-
Hi,
I am currently working on this site ( http://www.undyinglegends.com/ ).
I have used the Mootools.net (javascriptframework) for the menu.
I think that the .js doesn't have anything to do with this bug/problem but who knows?
So... Every browser displays the site right only IE can't do it.
I want to solve the porblem that IE is displaying the menu like an staircase...
Firefox for example:
And IE:
Do you know how I can fix this problem?
The menu is spreading over almost the whole site. Instead of stringing together in one line.
( valid XHTML, valid CSS: http://www.undyinglegends.com/style.css, JS ) -
-
CommentAuthorkari.patila
- CommentTimeMay 25th 2008
Try setting the UL to width: auto; or width: 100% or something like that. I can't remember exactly what to do at the moment, but this is caused by not setting the width on a certain element. -
-
So I tried as you said following two settings
ul {width:auto;}
and
ul {width:100%;}
aswell as #kwicks_container {width:100%;} / {width:auto;}.
None fixed the problem except getting one more design prob.
As you can see http://mootools.net/
don't have set the width of ul as well. And it works in the IE. (another demo: http://demos.mootools.net/Fx.Elements) -
- CommentAuthoraxe_sosharp
- CommentTimeMay 25th 2008
I think IE needs the list container as well as the a tag to be floated to stop it from stepping.
Try adding
#kwicks li {
float:left;
display:block;
width:178px;
} -
axe_sharp has nailed it - IE is missing the widths. I'm fairly certain it'll work with the fixed width, but everything I've done with it I've applied the class to the LI not the Anchor tag itself (like here: http://ikeif.net/mootools/kwik.html)
-
Thank you for your comments. I fixed the problem.
First I added the #kwicks li {...width:178;}. Yes it fixed the “staircase effect” but brought up new issues.
Then I remembered kari.patila’s comment in which he told me to set the ul {width:100% or auto} which didn’t work.
But now I have tried #kwicks li {...width:auto;} which is working perfectly in Firefox and IE.
Thank you kari.patila, axe_sosharp and keif!Solution:
ol, ul {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
}#kwicks li {
float:left;
display:block;
width:auto;
}Website: Undying Legends
1 to 6 of 6