Welcome to WebmasterWorld Guest from 54.145.167.92

Forum Moderators: not2easy

Message Too Old, No Replies

css menu not working in at least one blackberry

   
7:18 pm on Aug 1, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Hi
I have not checked my site in mobiles, and one person said that my css menu dont appear at all on her blackberry.....not that its not working, it just dont appear.
The css menu is Peterned whatever hover, I dont know if the problem could be in the menu or the surrounding css.
This is my doctype:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

This is the menus css:
#menu {
float: left;
margin:0;
padding:0 5px 0 5px;
\width: 778px;
w\idth: 756px;}



#menu ul {
list-style: none;
margin: 0;
padding: 0;
width: 108px;
float: left;
}
#menu ul ul ul .level3{
\width: 350px;
w\idth: 325px;
}
#menu ul ul .level4{
\width: 275px;
w\idth: 235px;}
#menu ul ul .level5{
\width: 260px;
w\idth: 220px;}
#menu ul ul .level6{
width: 195px;
}
#menu ul ul .level7{
\width: 123px;
w\idth: 113px;}

#menu p {
display: block;
border: 1px solid;
border-color: #ccc #888 #555 #bbb;
margin: 0;
padding: 2px 3px;
color: #000099;
text-align:center;
background:url("background5.gif");
font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; font-weight:bold;
}

#menu ul ul .level2{
display: block;
border: 1px solid;
border-color: #ccc #888 #555 #bbb;
margin: 0;
color: #000099;
background: #FFFFFF;
text-align:left;
font-family: Verdana, Arial, Helvetica, sans-serif; font-size:11px; font-weight:bold; padding-left:1px; padding-top:3px; padding-bottom:3px;
text-decoration:none;
\width: 285px;
w\idth: 245px;}

#menu a{
display: block;
border: 1px solid;
border-color: #ccc #888 #555 #bbb;
margin: 0;
color: #000099;
background: #FFFFFF;
font-family: Verdana, Arial, Helvetica, sans-serif; font-size:11px; font-weight:bold; padding-left:1px; padding-top:3px; padding-bottom:3px;
text-decoration:none;
}
#menu ul ul .level2:hover {
color: #000099;
background: #FFFF99;
}

#menu a:hover {
color: #000099;
background: #FFFF99;
}
#menu li:hover {
position: relative;
z-index: 500;
}
#menu ul ul {
position: absolute;
}
#menu ul ul ul {
top: -1px;
left: 100%;
}
div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul
{display: none;}
div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}

The menu itself is nothing strange, just a list,
a piece of the menu:
<ul>
<li><p>Home&nbsp;<img src="new_arrow_down.gif" alt="Arrow down" border="0"></p>
<ul>
<li><a class="nivel1" href="index.htm">Homepage</a></li>
</ul>
</li>
</ul>
<ul>
<li><p>About Us&nbsp;<img src="new_arrow_down.gif" alt="Arrow down" border="0"></p>
<ul>
etc....

If somebody please can help, thanks in advance.
Helen
4:50 pm on Aug 2, 2011 (gmt 0)

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Don't know if it's the cause but might be . . . try validating the document [validator.w3.org]. I would also remove the <p> inside the li's - give the li whatever style you need for spacing.

<li class="image-list"><p>About Us&nbsp;<img src="new_arrow_down.gif" alt="Arrow down" border="0"></p>
<!-- obviously nested ul's here -->
</li>

.image-list { padding: 9px 0; }
.image-list img { display: block; margin-left: 14px; } /* or whatever, don't need &nbsp; */
7:21 pm on Aug 2, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Dear Rocknbil,
Just validated only the .css document as the site has 500 pages, and the menu are on all....and the css dont have any errors.

I know its not necesarry, but I put the p many years ago, as I needed #menu p,
the menu was complicated and it worked using p, and if I take it away, everything change, not only the style of the word. Anyway dont think that the p is the reason for not being able to view the menu.

I also did a full test on the homepage,
and I had 10 errors and 1 warning, however all the errors is due to a marquee I have since many year, and the other error are due to a chatprogram I installed.
Dont think these thing can make the menu not to work?

However will do a test page eliminating these things to see if she still cant see the menu.
Thanks
2:49 am on Aug 3, 2011 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



Hi helenp, have you looked at the blackberry web development documentation [docs.blackberry.com] ? There are also device simulators [blackberry.com], and I believe some open source ones as well.
10:26 am on Aug 3, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Thanks alt, that was exactly what I was looking for,
Installed the last version of simulator, and got a lot of errors when opening it.
However I did see the menu, but it did not work well, especially level 3 of the menu that just closed.
4:29 pm on Aug 3, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Does somebody have experience? Installed plugin for firefox, change user agent, and I added one of many blackberries, and I tested it with facebook and look like it worked as a window came up saying install android, blackberry etc for facebook. However when I entered my page, it looked just the same on all devices...if it works ok, my site is ok....
4:05 pm on Aug 13, 2011 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



Hi helenp, I was hoping someone would have experience specific to this as I don't, but been wondering how this worked out in the end.

I'm sure you've already thought of this, but my general thoughts are that as support for html and css has improved, it would be necessary to identify which version was having trouble with the menu, and/or check all earlier versions yourself.

I haven't used the simulator myself, so not sure how it works: Does the most recent version of the simulator allow you to check all previous versions of the browser - or do you have to download older versions of the simulator to check older versions of the browser?