homepage Welcome to WebmasterWorld Guest from 54.227.146.68
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
css menu not working in at least one blackberry
helenp




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

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

 

rocknbil




msg:4346742
 4:50 pm on Aug 2, 2011 (gmt 0)

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; */

helenp




msg:4346811
 7:21 pm on Aug 2, 2011 (gmt 0)

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

alt131




msg:4346949
 2:49 am on Aug 3, 2011 (gmt 0)

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.

helenp




msg:4347076
 10:26 am on Aug 3, 2011 (gmt 0)

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.

helenp




msg:4347247
 4:29 pm on Aug 3, 2011 (gmt 0)

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....

alt131




msg:4351172
 4:05 pm on Aug 13, 2011 (gmt 0)

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?

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved