Many Browsers' Problem-It bothers me.

[likigoldenstar]

Hi,

I am a poor developer.

I made a split menu using html tag <Ul> and <LI>, but I have some problems..
I use the style property as followed by...

.li{
,,,,
display:block;
.....
}

But it works well in IE 6.0, but doesn't work well in IE 7.0 and Firefox.

I 'll explain about that in detail.

Let's assume the munus are followed by:

- AAAAAAAAA AAAAAAAAAAaaa
- BBBBBBBBBBBBBBB BBBBBBBBB

Then, in IE 6.0 result is the same above...
But in other browsers such as IE 7.0 and Mozila Firefox not so good like

- AAAAAAA
AA AAAAAAAAAAaaa
- BBBBBBBB
BBBBBBBBBBBBBBB B

For solving it, I used the style property: {display:outsid e} but it is useless.

Please help me!!!

Menus in my product are "broken" because of this problem.
Perhaps, experts must know why and how..

regards/likigoldenstar

[gits]

hi ...

welcome to TSDN ... i deleted your email address from your post for your own security ... i think you don't want to get spammed :) ... and at least its against the posting guidelines ... so please DON'T post your email address in the forums.

to your problem ... could you please post an code-example (html/css) so that we may have a closer look at your problem? in case we couldn't help i'll send this over to the html/css-forum where the experts certainly may help you with your problem ...

kind regards

[mrhoo]

display:block is not permitted for an li element
display:outside is not recognized in any html element

[phvfl]

I suspect that part of the problem is that the line in the list item is longer than the containing element and so the line is wrapping at a space in the string.

[likigoldenstar]

I suspect that part of the problem is that the line in the list item is longer than the containing element and so the line is wrapping at a space in the string.

hello,

You're right.
when the line in the list item is longer than width of div tag, style of the list items is broken.

I'll send you some parts of css file and html file.
Css is followed by:

[HTML]/* othermenu */
div#othermenu div.module div div div {
padding: 10px 15px 15px 15px;
}

div#othermenu ul {
padding: 0px;
margin: 0px;
width: 158px;
overflow: hidden;
list-style: decimal-leading-zero;
background: #f5f5f5;
}

div#othermenu li {
display: block;
}

div#othermenu li a{
height: 25px;
display: ;
line-height: 25px;
text-decoration: none;
color: #646464;
}

div#othermenu li span {
height: 25px;
display: block;
line-height: 25px;
text-decoration: none;
color: #646464;
}

div#othermenu a:link, div#othermenu a:visited {
color: #646464;
}

div#othermenu li#current a {
font-weight: bold;
}

div#othermenu li#current li a {
font-weight: normal;
}

div#othermenu li a:hover, div#othermenu li span:hover, div#othermenu li span.sfhover {
color: #000000;
}

div#othermenu li.level1 {
background: #f5f5f5 url(../images/othermenu_level 2_item.png) 0 0 no-repeat;
}

div#othermenu li.level1 a, div#othermenu li.level1 span {
padding: 0px 0px 0px 10px;
}

div#othermenu li.parent {
background: #f5f5f5 url(../images/othermenu_level 2_item_parent.p ng) 0 0 no-repeat;
}

div#othermenu li.parent span {
cursor: pointer;
}

div#othermenu li.active, div#othermenu li.active:hover {
background-color: #969696;
}

div#othermenu li.active a, div#othermenu li.active span, div#othermenu li.active a:hover {
color: #ffffff;
}

#left div#othermenu li.level1 ul, div#othermenu li.level1 li, #left div#othermenu li.level1 li.active {
background: #ffffff;
}

#left div#othermenu li.level1 li a:hover, #left div#othermenu li.level1 li.active a:hover {
color: #000000;
}

#left div#othermenu li.level2 a {
background: url(../images/othermenu_level 3_item_bg.png) 10px 2px no-repeat;
padding: 0px 0px 0px 30px;
width: 128px;
color: #646464;
height: 20px;
line-height: 20px;
}

#left div#othermenu li.level2 a:hover {
background: #ffffaa url(../images/othermenu_level 3_item_bg.png) 10px 2px no-repeat;
}

#left div#othermenu li.level3 a {
background: url(../images/othermenu_level 4_item_bg.png) 20px 2px no-repeat;
padding: 0px 0px 0px 40px;
width: 118px;
}

#left div#othermenu li.level3 a:hover {
background: #ffffaa url(../images/othermenu_level 4_item_bg.png) 20px 2px no-repeat;
}

#left div#othermenu li.level4 a {
background: url(../images/othermenu_level 5_item_bg.png) 30px 2px no-repeat;
padding: 0px 0px 0px 50px;
width: 108px;
}

#left div#othermenu li.level4 a:hover {
background: #ffffaa url(../images/othermenu_level 5_item_bg.png) 30px 2px no-repeat;
}


Menu structure is followed by:
<div id="middle">
<div class="backgrou nd layoutleft">
<div id="left">
<div id="left_contai ner" class="clearing fix">
<div id="othermenu" >
<div class="module"> <div><div><di v>
<ul class="othermen u">
<li class="level1 item9 parent toggler"><span >Maklumat Korporat</span><ul class="othermen u accordion">
<li class="level2 item1"><a href="http://localhost/kkdn/index.php?optio n=com_content&a mp;task=view&am p;id=12&amp;Ite mid=86">Perutus an Menteri</a></li>
<li class="level2 item12"><a href="http://localhost/kkdn/index.php?optio n=com_content&a mp;task=view&am p;id=13&amp;Ite mid=80">Perutus an KSU</a></li>
<li class="level2 item13"><a href="http://localhost/kkdn/#">Teraju Utama</a></li>
<li class="level2 item14"><a href="http://localhost/kkdn/index.php?optio n=com_content&a mp;task=view&am p;id=14&amp;Ite mid=81">Visi &amp; Misi</a></li>
<li class="level2 item15"><a href="http://localhost/kkdn/index.php?optio n=com_content&a mp;task=view&am p;id=15&amp;Ite mid=82">Fungsi / Obkjektif</a></li>
<li class="level2 item16"><a href="http://localhost/kkdn/index.php?optio n=com_content&a mp;task=view&am p;id=16&amp;Ite mid=83">Piagam Pelanggan</a></li>
<li class="level2 item17"><a href="http://localhost/kkdn/#">Lagu KKDN</a></li>
<li class="level2 item18"><a href="http://localhost/kkdn/index.php?optio n=com_content&a mp;task=view&am p;id=18&amp;Ite mid=85">Carta Organisasi KKDN</a></li>
<li class="level2 item19"><a href="http://localhost/kkdn/index.php?optio n=com_content&a mp;task=view&am p;id=17&amp;Ite mid=84">Akta KKDN</a></li>
<li class="level2 item20"><a href="http://localhost/kkdn/#">Bahagian</a></li>
<li class="level2 item21"><a href="http://localhost/kkdn/index.php?optio n=com_content&a mp;task=view&am p;id=5&amp;Item id=78">test</a></li>
</ul>
</li>[/HTML]

[likigoldenstar]

display:block is not permitted for an li element
display:outside is not recognized in any html element

Thanks for your help....

I post some part of css and html file as reply text. Please find it and consult.
And then, please give me solution..

I am very fretful because for menu.


In IE 6.0
menu are the same as:

#-- AAAA AAAAAAAA
###AAAAAAAAAAA

#-- BBBBBBB BBBBB
###BBBBBBBBB

But, in IE 7.0 and Mozila Firefox
menu are the same as:

#-- AAAA AAAAAAAA
AAAAAAAAAAA

#-- BBBBBBB BBBBB
BBBBBBBBB

symbol '#' is space. Space key is ignored in edit, so I replaced.
So, menu breaks our hompage...

I think you have no time to take care of me, but please help me....


Regards/

[likigoldenstar]

hi ...

welcome to TSDN ... i deleted your email address from your post for your own security ... i think you don't want to get spammed :) ... and at least its against the posting guidelines ... so please DON'T post your email address in the forums.

to your problem ... could you please post an code-example (html/css) so that we may have a closer look at your problem? in case we couldn't help i'll send this over to the html/css-forum where the experts certainly may help you with your problem ...

kind regards

Thanks for preventing my mail box.