Page 1 of 1

My Drop Down menu gets white whit some browsers...

Posted: Fri Jun 30, 2006 10:10 am
by Leon
I implanted a drop down menu that is 100% in the overall_header.tpl file.
But for some reasons it gets white for some users.

I know that some whit firefox gets a white Drop Down List :?

http://www.volunteerforum.se/testpage.php
(The testpage has its own test header)

anyone that knows what the problem can be ?
(Can it be a conflict whit the forum's code somehow ?)

If you take "View Sorce" you can see the full drop down menu code:

Code: Select all


<style type="text/css">

#csstopmenu, #csstopmenu ul{
padding: 0;
margin: 0;
list-style: none;
}

#csstopmenu li{
float: left;
position: relative;
}

#csstopmenu a{
text-decoration: none;
}

.mainitems{
border: 0px solid blue;
border-left-width: 0;
background-color: #EFF3F6;
}

.headerlinks a{
margin: auto 9px;
font-weight: bold;
color: white;
}

.submenus{
display: none;
width: 13em;
position: absolute;
top: 1.2em;
left: 0;
background-color: #FAFAFA;
border: 1px solid silver;
}

.submenus li{
width: 100%;
}

.submenus li a{
display: block;
width: 100%;
text-indent: 3px;
border: 1px solid white;
}

html>body .submenus li a{ /* non IE browsers */
width: auto;
}

.submenus li a:hover{
background-color: #EFEFEF;
color: black;
}

#csstopmenu li>ul {/* non IE browsers */
top: auto;
left: auto;
}

#csstopmenu li:hover ul, li.over ul {
display: block;
}

html>body #clearmenu{ /* non IE browsers */
height: 3px;
}

</style>

<script type="text/javascript">




startMenu = function() {
if (document.all&&document.getElementById) {
cssmenu = document.getElementById("csstopmenu");
for (i=0; i<cssmenu.childNodes.length; i++) {
node = cssmenu.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function(){                  
this.className=this.className.replace(" over", "")
}
}
}
}
}

if (window.attachEvent)
window.attachEvent("onload", startMenu)
else
window.onload=startMenu;

</script>


<ul id="csstopmenu">


<li class="mainitems">
<div class="headerlinks"><a href="http://www.volunteerforum.se/portal.php">•Portal</a></div>
</li>


<li class="mainitems">
<div class="headerlinks"><a href="http://www.volunteerforum.se/index.php">•Forum</a></div>
</li>



<li class="mainitems">
<div class="headerlinks"><a href="#"><IMG SRC="http://www.volunteerforum.se/overallheader/ar1.gif">Navigation</a></div>
<ul class="submenus" style="width: 14em">
<DIV align=left>
<li><a href="http://www.volunteerforum.se/portal.php">Portal</a></li>
<li><a href="http://www.volunteerforum.se/index.php">Forum</a></li>
<li><a href="http://www.volunteerforum.se/blog">Blog</a></li>
<li><a href="http://www.volunteerforum.se/links.php">Links</a></li>
<li><a href="http://www.volunteerforum.se/search.php">Search</a></li>
<li><a href="http://www.volunteerforum.se/websiteindex.php">Website</a></li>
<li><a href="http://www.volunteerforum.se/album.php">Photo Album</a></li>
<li><a href="http://www.volunteerforum.se/general.php">General Content</a></li>
</DIV>
</ul>
</li>


<!-- BEGIN switch_user_logged_in -->
<li class="mainitems">
<div class="headerlinks"><a href="#"><IMG SRC="http://www.volunteerforum.se/overallheader/ar1.gif">User Menu</a></div>
<ul class="submenus">
<DIV align=left>
<li><a href="http://www.volunteerforum.se/portal.php">Portal</a></li>
<li><a href="http://www.volunteerforum.se/index.php">Forum</a></li>
<li><a href="http://www.volunteerforum.se/profile.php?mode=editprofile">Profile</a></li>
<li><a href="http://www.volunteerforum.se/search.php">Search</a></li>
<li><a href="http://www.volunteerforum.se/memberlist.php">Memberlist</a></li>
<li><a href="http://www.volunteerforum.se/groupcp.php">User Groups</a></li>
<li><a href="http://www.volunteerforum.se/privmsg.php?folder=inbox">Private Messeges</a></li>
</DIV>
</ul>
</li>
<!-- END switch_user_logged_in -->


<!-- BEGIN switch_user_logged_out -->
<li class="mainitems">
<div class="headerlinks"><a href="#"><IMG SRC="http://www.volunteerforum.se/overallheader/ar1.gif">Guest Menu</a></div>
<ul class="submenus">
<DIV align=left>
<li><a href="http://www.volunteerforum.se/profile.php?mode=register">Register</a></li>
<li><a href="http://www.volunteerforum.se/portal.php">Portal</a></li>
<li><a href="http://www.volunteerforum.se/index.php">Forum</a></li>
<li><a href="http://www.volunteerforum.se/search.php">Search</a></li>
<li><a href="http://www.volunteerforum.se/whatis.php">What is a volunteer ?</a></li>
</DIV>
</ul>
</li>
<!-- END switch_user_logged_out -->


<li class="mainitems">
<div class="headerlinks"><a href="#"><IMG SRC="http://www.volunteerforum.se/overallheader/ar1.gif">General</a></div>
<ul class="submenus">
<DIV align=left>
<li><a href="http://www.volunteerforum.se/faq.php">FAQ</a></li>
<li><a href="http://www.volunteerforum.se/profile.php?mode=register">Register</a></li>
<li><a href="http://www.volunteerforum.se/sitemap.php">Site Map</a></li>
<li><a href="http://www.volunteerforum.se/aboutus.php">About Us</a></li>
<li><a href="http://www.volunteerforum.se/contact_form.php">Contact Us</a></li>
<li><a href="http://www.volunteerforum.se/whatis.php">What is a volunteer ?</a></li>
</DIV>
</ul>
</li>


<li class="mainitems">
<a href="{U_LOGIN_LOGOUT}"><B><FONT COLOR="#2355C0">•{CA_L_LOGIN_LOGOUT}</FONT></B></a>
</li>


<!-- BEGIN switch_user_logged_out -->
<li class="mainitems">
<a href="http://www.volunteerforum.se/profile.php?mode=register"><B><FONT COLOR="#2355C0">&nbsp; •Register</FONT></B></a>
</li>
<!-- END switch_user_logged_out -->



</ul>
<div id="clearmenu" style="clear: left"></div>

And here is the full test_header code from the testpage
http://www.volunteerforum.se/Minmapp/Te ... header.zip

Posted: Fri Jun 30, 2006 10:29 am
by battye
CSS and Javascript aren't my areas of specialty I'm afraid. Grinch knows CSS though, possibly he will know the answer :)

Posted: Fri Jun 30, 2006 10:33 am
by Leon
Aha.. ok..
well lets see what he says then
(If he says something at all)

This new header has taken ALOT more time to create
then i tought it would...

BTW battye what colour is the Drop Down list for you ?
http://www.volunteerforum.se/testpage.php
(Dont say it is white plxor) :wink:

Posted: Fri Jun 30, 2006 10:40 am
by battye
Attached

Posted: Fri Jun 30, 2006 10:42 am
by Leon
As i have seen and heard its ONLY the main text that gets white for some ppl..
The submenu is not affected at all

Posted: Fri Jun 30, 2006 10:46 am
by battye
Leon wrote:As i have seen and heard its ONLY the main text that gets white for some ppl..
The submenu is not affected at all
That's what I see *see above*

Posted: Fri Jun 30, 2006 10:48 am
by Leon
As i said the submenu is not affected for you eighter.
Only the main text for the menu, that is white for you is affected :(

Posted: Fri Jun 30, 2006 12:38 pm
by Grinch

Code: Select all

.headerlinks a{
margin: auto 9px;
font-weight: bold;
color: white;
} 
color: white turns your text white. Try using a different color.

Posted: Fri Jun 30, 2006 2:27 pm
by Leon
Yep that was the problem, but why the *beeping* was it blue in
explorer and maxton then as it should have been :?

Well i have changed it.
Is it blue for you now battye ?


Thanks grinch2171 :D

Posted: Fri Jun 30, 2006 2:29 pm
by battye
Yep, blue for me now.

As for it not working in Internet Explorer, I can say that next to nothing works in Internet Explorer :lol:

When I have done things in CSS (which as I said above is very limited) IE has always been a hurdle.

Posted: Fri Jun 30, 2006 2:32 pm
by Leon
battye wrote: As for it not working in Internet Explorer, I can say that next to nothing works in Internet Explorer :lol:
But it did work in explorer. and Maxton the only once they worked in..
So in this case explorer worked better then firefox 8)

Posted: Fri Jun 30, 2006 2:58 pm
by Grinch
It has to do with how FireFox and IE interpret CSS. If you need to change the background use background-color: white or just background: white

FF is more standards compliant than IE6. So I usually design for FF and then apply "hacks" to make it work in IE6. IE7 is better but no where near where it should be.

Now I noticed that in FF you navigation gets bunched up and in IE it is spread out.

Posted: Fri Jun 30, 2006 3:00 pm
by Grinch
Looks llike you already fixed the bunch up.

Posted: Fri Jun 30, 2006 3:21 pm
by Leon
Yes i have found out that i do have some kind of bug still

insted of going in a row:
•Portal •Forum Navigation User Menu

Sometimes it gets like this instead:
•Portal
•Forum
Navigation
User Menu

etc. and messing up the layout :?

Its like once every 15-20 times or so