Closed Bug 1090773 Opened 10 years ago Closed 10 years ago

Firefox browser displays menu items in the web page unaligned, but in IE and Chrome menu items displayed correct.

Categories

(Core :: Layout, defect)

Product:
Core
Component:
Layout
Platform:
x86
Windows 7
Type:
defect
Priority:
Not set
Severity:
normal

Tracking

()

Status:
RESOLVED DUPLICATE of bug 488725

People

(Reporter: nadunperera, Unassigned)

Details

Attachments

(1 file)

firefoxerror.jpg
128.25 KB, image/jpeg
Details
Attached image firefoxerror.jpg — 
User Agent: Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/38.0.2125.111 Safari/537.36

Steps to reproduce:

Code:


<ul id="css3menu0" class="topmenu" style="position:absolute; left:4%; top:28%; width:12%; height:auto; -webkit-box-shadow: 2px 2px 2px #5D2E11;">

<input type="checkbox" id="css3menu-switcher" class="switchbox"><label onclick="" class="switch" for="css3menu-switcher" ></label>	<li class="topfirst"><a href=" index.html" style=" text-shadow:  4px 4px 5px #847878;"> HOME <img src="/images/home.gif" width="18" height="18" align="right" /></a></li>

  <li class="topmenu"><a href="" style="text-shadow:  4px 4px 5px #847878; ">DEPARTMENT <img src="/images/department.gif" width="18" height="18"  align="right" /></a>

	<ul>

		<li><a href="" style="text-shadow:  4px 4px 5px #625656;">Laboratories</a> 

<ul>

			<li><a href=" spinning.html" style="text-shadow:  4px 4px 5px #625656;" >Spinning Laboratory</a></li>

			<li><a href=" weaving.html" style="text-shadow:  4px 4px 5px #625656;">Weaving Laboratoy</a></li>

			<li><a href=" knitting.html" style="text-shadow:  4px 4px 5px #625656;">Knitting Laboratory</a></li>

			<li><a href=" physical.html" style="text-shadow:  4px 4px 5px #625656;">Physical Testing and Quality</a></li>

			<li><a href=" chemical.html" style="text-shadow:  4px 4px 5px #625656;">Chemical Testing Laboratory</a></li>

			<li><a href=" wetlab.html" style="text-shadow:  4px 4px 5px #625656;">Wet Processing Laboratory</a></li>

			<li><a href=" design.html" style="text-shadow:  4px 4px 5px #625656;">Design Studio</a></li>

			<li><a href=" cadcam.html" style="text-shadow:  4px 4px 5px #625656;">CAD CAM Laboratory</a></li>

			<li><a href=" clothing.html" style="text-shadow:  4px 4px 5px #625656;">Clothing Laboratory</a></li>

			<li><a href=" computer.html" style="text-shadow:  4px 4px 5px #625656;">Computer Laboratory</a></li>

			<li><a href=" lectra.html" style="text-shadow:  4px 4px 5px #625656;">Lectra Laboratory</a></li>

		</ul></li>

		<li><a href="/docs/Testing Charges-stds-1.pdf" style="text-shadow:  4px 4px 5px #625656;">Testing Facilities</a></li>

		<li><a href=" community.html" style="text-shadow:  4px 4px 5px #625656;">Community Outreach</a></li>

	</ul></li>

	<li class="topmenu"><a href="" style="text-shadow:  4px 4px 5px #847878;">STAFF  <img src="/images/staff.gif" width="18" height="18"  align="right" /></a>

	<ul>

		<li><a href=" astaff.html" style="text-shadow:  4px 4px 5px #625656;">Academic Staff</a></li>

		<li><a href=" nastaff.html" style="text-shadow:  4px 4px 5px #625656;">Non Academic Staff</a></li>

	</ul></li>

	<li class="topmenu"><a href="" style="text-shadow:  4px 4px 5px #847878;">COURSES <img src="/images/courses.gif" width="18" height="18" align="right" /></a>

	<ul>

		<li><a href="" style="text-shadow:  4px 4px 5px #625656;">Undergraduate</a>

		<ul>

			<li><a href=" bsceng.html" style="text-shadow:  4px 4px 5px #625656;">B.Sc.(Eng.)</a></li>

			<li><a href=" bdesign.html" style="text-shadow:  4px 4px 5px #625656;">B. Design</a></li>

		</ul></li>

		<li><a href="" style="text-shadow:  4px 4px 5px #625656;">Postgraduate</a>

		<ul>

			<li><a href=" msccl.html" style="text-shadow:  4px 4px 5px #625656;">M.Sc. in Textile Mgmt.</a></li>

		</ul></li>

		<li><a href="info.html" style="text-shadow:  4px 4px 5px #625656;">Extension Courses</a>

		<ul>

			<li><a href=" textec.html" style="text-shadow:  4px 4px 5px #625656;">Tex. Tech. for the Gar. Ind.</a></li>

			<li><a href=" merch.html" style="text-shadow:  4px 4px 5px #625656;">Merchandising</a></li>

			<li><a href=" production.html" style="text-shadow:  4px 4px 5px #625656;">Production Org. &amp; Mgmt</a></li>

			<li><a href=" qty.html" style="text-shadow:  4px 4px 5px #625656;">Quality Management for Apparel Manufacture</a></li>

			<li><a href=" workstudy.html" style="text-shadow:  4px 4px 5px #625656;">Work Study</a></li>

			<li><a href=" womenw.html" style="text-shadow:  4px 4px 5px #625656;">Fl. Pa.Cu. for Men's wear</a></li>

			<li><a href=" menw.html" style="text-shadow:  4px 4px 5px #625656;">Pattern Designing for Apparel</a></li>

			<li><a href=" New Application.doc" style="text-shadow:  4px 4px 5px #625656;">Downloads</a></li>

		</ul></li>

		<li><a href="" style="text-shadow:  4px 4px 5px #625656;">Special Training Courses</a>

		<ul>

			<li><a href=" garmentw.html" style="text-shadow:  4px 4px 5px #625656;">Garment Washing and Fini...</a></li>

			

		</ul></li>

	</ul></li>

	<li class="topmenu"><a href="" style="text-shadow:  4px 4px 5px #847878;">RESEARCH<img src="/images/research.gif" width="18" height="18"  align="right" /></a>

	<ul>

		<li><a href=" research.html" style="text-shadow:  4px 4px 5px #625656;">Student Projects</a></li>
        <li><a href=" research.html" style="text-shadow:  4px 4px 5px #625656;">Current Researches</a></li>

  </ul></li>

	<li class="topmenu"><a href="news.html" style="text-shadow:  4px 4px 5px #847878;">NEWS  <img src="/images/news.gif" width="18" height="18"  align="right" /></a></li>

	<li class="topmenu"><a href="" style="text-shadow:  4px 4px 5px #847878;">DOWNLOADS  <img src="/images/downloads.gif" width="18" height="18" align="right" /></a>
        <ul>
    <li><a href="docs/Handbook-2008.pdf" style="text-shadow:  4px 4px 5px #625656;">University Hand Book</a></li>
       <li><a href=" New Application.doc" style="text-shadow:  4px 4px 5px #625656;">Short Course Application Form</a></li>
       <li><a href="docs/Extension_courses%20brochure.pdf" style="text-shadow:  4px 4px 5px #625656;">Brochure</a></li>
          <li><a href="docs/Extension_Course_Schedule.pdf" style="text-shadow:  4px 4px 5px #625656;">Extension Course Time Table</a></li></ul>
    </li>

	<li class="topmenu"><a href="" style="text-shadow:  4px 4px 5px #847878;">LINKS  <img src="/images/links.gif" width="18" height="18"  align="right" /></a>
    <ul>
    <li><a href="http://www.mrt.ac.lk/web/" style="text-shadow:  4px 4px 5px #625656;">University</a></li>
       <li><a href="" style="text-shadow:  4px 4px 5px #625656;">Telephone Directory</a></li>
  <li><a href="" style="text-shadow:  4px 4px 5px #625656;">Moratuwa University Textile Association</a></li></ul></li>

	<li class="toplast"><a href="" style="text-shadow:  4px 4px 5px #847878;">GALLERY <img src="/images/gallary.gif" width="18" height="18" align="right"  /></a>

	<ul>

		<li><a href="http://www.textile.mrt.ac.lk/images/stories/fashion%20show/2011/gallery_002.swf" style="text-shadow:  4px 4px 5px #625656;">Fashion Show</a></li>

		<li><a href="http://www.textile.mrt.ac.lk/images/stories/inaug/gallery_002.swf" style="text-shadow:  4px 4px 5px #625656;">Silver Jubilee Celebrations</a></li>

	</ul></li>
    
    
	<li class="topmenu"><a href="contacts.html" style="text-shadow:  4px 4px 5px #847878;">CONTACT US  <img src="/images/contact.gif" width="18" height="18"  align="right" /></a>
</li>

</ul><p class="_css3m"><a href="">css menu</a> </p>


Actual results:

Firefox browser displays menu items in the web page unaligned,  but in IE and Chrome menu items displayed correct. 


Expected results:

Menu items should align
Is this the page you're referring to:
http://www.textile.mrt.ac.lk/index.php?option=com_content&view=article&id=55&Itemid=72
The navigation menu doesn't look like the one in your screenshot though,
maybe it was redesigned?

Also, which version of Firefox are you using?
Group: core-security
Flags: needinfo?(nadunperera)
Version: 1.0 Branch → unspecified
Hi, 

Appreciate your quick response. 
The page is redesigned and not yet published due the issue.
The screen shots were taken using Firefox 33.0.2.  

Thanks.
Nadun Perera
Flags: needinfo?(nadunperera)
+ Also there are some CSS coding in the navigation menu. I can send the codings if needed.

Thanks
Component: General → Layout
(In reply to nadun from comment #3)
> + Also there are some CSS coding in the navigation menu. I can send the
> codings if needed.

We would need to see all the content to be able to say if it's a bug or not.
The best would be if you could make a small standalone testcase that
shows the problem in Firefox but works fine in other browsers.
Or you can put the new site on a public URL so we can have a look at it.
Flags: needinfo?(nadunperera)
Hi,

I also check with Safari and Opera and there was no issue. 
I'll paste the CSS coding below. Still the site is not published and therefor I cannot give the URL.
Appreciate your help.

CSS Code:


ul#css3menu0,ul#css3menu0 ul{
	margin:0;list-style:none;padding:0;background-color:rgba(242, 102,32, 0.85);border-width:1px;border-style:solid;border-color:#rgba(242, 102,32, 0.85);-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;}
ul#css3menu0 ul{
	display:none;
	position:absolute;
	left:100%;
	top:0;
	-moz-box-shadow:3.5px 3.5px 5px #000000;
	-webkit-box-shadow:3.5px 3.5px 5px #000000;
	box-shadow:3.5px 3.5px 5px #000000;
	background-color: rgba(242, 102,32, 0.85);
	border-width:2px;
	border-radius:6px;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-color:#FFF;
	padding:0 10px 10px;
}
ul#css3menu0 li:hover>*{
	display:block;}
ul#css3menu0 li{
	position:relative;display:block;white-space:nowrap;font-size:0;}
ul#css3menu0 li:hover{
	z-index:1;}
ul#css3menu0 ul ul{
	position:absolute;left:100%;top:0;}
ul#css3menu0{
	font-size:0;z-index:999;position:relative;display:block;float:left;padding:0;}
ul#css3menu0>li{
	margin:0;}
ul#css3menu0 a:active, ul#css3menu0 a:focus{
	outline-style:none;}
ul#css3menu0 a{
	display:block;
	vertical-align:middle;
	text-align:left;
	text-decoration:none;
	font:bold 14px Calibri;
	color:#000;
	text-shadow:#FFF 0 0 1px;
	cursor:auto;
	padding:8px;
	background-color:#ffffff;
	background-image:url("mainbk.png");
	background-repeat:no-repeat;
	background-position:0 0;
	border-width:1px 0 0 0;
	border-style:solid;
	border-color:rgba(108, 103, 93, 0.5);
} /*border*/
ul#css3menu0 ul li{
	float:none;margin: 2px 0 0;}
ul#css3menu0 ul a{
	text-align:left;
	padding:2px;
	background-color: rgba(242, 102, 32, 0); /*1 n 2 sub box 2 boxes displayed*/
	background-image:none;
	border-width:0;
	border-radius:0px;
	-moz-border-radius:0px;
	-webkit-border-radius:0px;
	font:14px Calibri;
	font-weight:bolder;
	font-stretch:condensed;
	color:#000000;
	text-decoration:none;
	text-shadow:#FFF 0 0 0;
}
ul#css3menu0 li:hover>a,ul#css3menu0 li a.pressed{
	background-color: rgba(242, 102, 32, 0.85);  /*1 box*/
	border-color:rgba(108, 103, 93, 0.5);
	border-style:solid;
	color:#ffffff;
	text-shadow:#FFF 0 0 2px;
	background-image:url("mainbk.png");
	background-position:0 100px;
	text-decoration:none;
}
ul#css3menu0 span{
	display:block;overflow:visible;background-position:right center;background-repeat:no-repeat;padding-right:0px;}
ul#css3menu0 ul span{
	background-image:url("arrowsub.png");padding-right:8px;}
ul#css3menu0 > label.switch{
	display:none;cursor:pointer;width:25px;height:20px;padding:10px;}
ul#css3menu0 > label.switch:before{
	content:"";position:absolute;display:block;height:4px;width:25px;border-radius:4px;background:#000;-moz-box-shadow:0 8px #000, 0 16px #000;-webkit-box-shadow:0 8px #000, 0 16px #000;box-shadow:0 8px #000, 0 16px #000;}
ul#css3menu0 > label.switch:hover:before{
	background:#ffffff;-moz-box-shadow:0 8px #ffffff, 0 16px #ffffff;-webkit-box-shadow:0 8px #ffffff, 0 16px #ffffff;box-shadow:0 8px #ffffff, 0 16px #ffffff;}
ul#css3menu0 > .switchbox{
	display:none;}
ul#css3menu0 ul li:hover>a,ul#css3menu0 ul li a.pressed{
	background-color:#fffffff;background-image:none;color:#ffffff;text-decoration:none;text-shadow:#FFF 0 0 0;}
ul#css3menu0 li.topfirst>a{
	border-width:0;border-radius:4px 4px 0 0 ;-moz-border-radius:4px 4px 0 0 ;-webkit-border-radius:4px;-webkit-border-bottom-right-radius:0;-webkit-border-bottom-left-radius:0;}
ul#css3menu0 li.toplast>a{
	border-radius:0 0 4px 4px;-moz-border-radius:0 0 4px 4px;-webkit-border-radius:0;-webkit-border-bottom-right-radius:4px;-webkit-border-bottom-left-radius:4px;}
@media screen and (max-width: 768px) {
	ul#css3menu0 > li {
		position: initial;}
	ul#css3menu0 ul .submenu,ul#css3menu0 li > ul {
		left: 0; right:auto; top: 100%;}
	ul#css3menu0 .submenu,ul#css3menu0 ul,ul#css3menu0 .column {
		-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;padding-right: 0;width: 100% !important;}
}
@media screen and (max-width: 736px) {
	ul#css3menu0 {
		width: 100%;}
	ul#css3menu0 > li {
		display: none !important;		position: relative;		width: 100% !important;}
	ul#css3menu0 > label.switch,ul#css3menu0 .switchbox:checked ~ li {
		display: block !important;}
}


Thanks,

Nadun
Flags: needinfo?(nadunperera)
I'm sorry, I can't just guess at what the problem is from large chunks markup/styles.
You have to make a testcase that I can load in my browser that shows the problem.
Can you copy the HTML+CSS above into a local .html file and make sure is shows
the problem when you load that file, and then upload it as you did with the
screenshot please?  Or provide a public URL to the site or testcase.
Hi,

Thanks for the reply.
Please find the HTML and CSS code. I have simplified the code.
You can load the files into a browser and see the results.


********************************************************************************************

HTML:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>

	<!-- Start css3menu.com HEAD section -->

	<link rel="stylesheet" href="../../../wamp/Textile/index_files/css3menu0/style.css" type="text/css" /><style type="text/css">._css3m{display:none}</style>

	<!-- End css3menu.com HEAD section -->
    
   
</head>

<body topmargin="0" leftmargin="0" bottommargin="0" rightmargin="0" padding="0">



<!-- Start css3menu.com BODY section -->


<ul id="css3menu0" class="topmenu" style="position:absolute; left:4%; top:28%; width:12%; height:auto; -webkit-box-shadow: 2px 2px 2px #5D2E11;">

<input type="checkbox" id="css3menu-switcher" class="switchbox"><label onclick="" class="switch" for="css3menu-switcher" ></label>	<li class="topfirst"><a href="../../../wamp/Textile/ index.html" style=" text-shadow:  4px 4px 5px #847878;"> HOME <img src="/images/home.gif" width="18" height="18" align="right" /></a></li>

  <li class="topmenu"><a href="" style="text-shadow:  4px 4px 5px #847878; ">DEPARTMENT <img src="/images/department.gif" width="18" height="18"  align="right" /></a>

	<ul>

		<li><a href="" style="text-shadow:  4px 4px 5px #625656;">Laboratories</a> 

<ul>

			<li><a href="../../../wamp/Textile/ spinning.html" style="text-shadow:  4px 4px 5px #625656;" >Spinning Laboratory</a></li>

			<li><a href="../../../wamp/Textile/ weaving.html" style="text-shadow:  4px 4px 5px #625656;">Weaving Laboratoy</a></li>

			<li><a href="../../../wamp/Textile/ knitting.html" style="text-shadow:  4px 4px 5px #625656;">Knitting Laboratory</a></li>

			<li><a href="../../../wamp/Textile/ physical.html" style="text-shadow:  4px 4px 5px #625656;">Physical Testing and Quality</a></li>

			<li><a href="../../../wamp/Textile/ chemical.html" style="text-shadow:  4px 4px 5px #625656;">Chemical Testing Laboratory</a></li>

			<li><a href="../../../wamp/Textile/ wetlab.html" style="text-shadow:  4px 4px 5px #625656;">Wet Processing Laboratory</a></li>

			<li><a href="../../../wamp/Textile/ design.html" style="text-shadow:  4px 4px 5px #625656;">Design Studio</a></li>

			<li><a href="../../../wamp/Textile/ cadcam.html" style="text-shadow:  4px 4px 5px #625656;">CAD CAM Laboratory</a></li>

			<li><a href="../../../wamp/Textile/ clothing.html" style="text-shadow:  4px 4px 5px #625656;">Clothing Laboratory</a></li>

			<li><a href="../../../wamp/Textile/ computer.html" style="text-shadow:  4px 4px 5px #625656;">Computer Laboratory</a></li>

			<li><a href="../../../wamp/Textile/ lectra.html" style="text-shadow:  4px 4px 5px #625656;">Lectra Laboratory</a></li>

		</ul></li>

		<li><a href="/docs/Testing Charges-stds-1.pdf" style="text-shadow:  4px 4px 5px #625656;">Testing Facilities</a></li>

		<li><a href="../../../wamp/Textile/ community.html" style="text-shadow:  4px 4px 5px #625656;">Community Outreach</a></li>

	</ul></li>

	<li class="topmenu"><a href="" style="text-shadow:  4px 4px 5px #847878;">STAFF  <img src="/images/staff.gif" width="18" height="18"  align="right" /></a>

	<ul>

		<li><a href="../../../wamp/Textile/ astaff.html" style="text-shadow:  4px 4px 5px #625656;">Academic Staff</a></li>

		<li><a href="../../../wamp/Textile/ nastaff.html" style="text-shadow:  4px 4px 5px #625656;">Non Academic Staff</a></li>

	</ul></li>

	<li class="topmenu"><a href="" style="text-shadow:  4px 4px 5px #847878;">COURSES <img src="/images/courses.gif" width="18" height="18" align="right" /></a>

	<ul>

		<li><a href="" style="text-shadow:  4px 4px 5px #625656;">Undergraduate</a>

		<ul>

			<li><a href="../../../wamp/Textile/ bsceng.html" style="text-shadow:  4px 4px 5px #625656;">B.Sc.(Eng.)</a></li>

			<li><a href="../../../wamp/Textile/ bdesign.html" style="text-shadow:  4px 4px 5px #625656;">B. Design</a></li>

		</ul></li>

		<li><a href="" style="text-shadow:  4px 4px 5px #625656;">Postgraduate</a>

		<ul>

			<li><a href="../../../wamp/Textile/ msccl.html" style="text-shadow:  4px 4px 5px #625656;">M.Sc. in Textile Mgmt.</a></li>

		</ul></li>

		<li><a href="../../../wamp/Textile/info.html" style="text-shadow:  4px 4px 5px #625656;">Extension Courses</a>

		<ul>

			<li><a href="../../../wamp/Textile/ textec.html" style="text-shadow:  4px 4px 5px #625656;">Tex. Tech. for the Gar. Ind.</a></li>

			<li><a href="../../../wamp/Textile/ merch.html" style="text-shadow:  4px 4px 5px #625656;">Merchandising</a></li>

			<li><a href="../../../wamp/Textile/ production.html" style="text-shadow:  4px 4px 5px #625656;">Production Org. &amp; Mgmt</a></li>

			<li><a href="../../../wamp/Textile/ qty.html" style="text-shadow:  4px 4px 5px #625656;">Quality Management for Apparel Manufacture</a></li>

			<li><a href="../../../wamp/Textile/ workstudy.html" style="text-shadow:  4px 4px 5px #625656;">Work Study</a></li>

			<li><a href="../../../wamp/Textile/ womenw.html" style="text-shadow:  4px 4px 5px #625656;">Fl. Pa.Cu. for Men's wear</a></li>

			<li><a href="../../../wamp/Textile/ menw.html" style="text-shadow:  4px 4px 5px #625656;">Pattern Designing for Apparel</a></li>

			<li><a href="../../../wamp/Textile/ New Application.doc" style="text-shadow:  4px 4px 5px #625656;">Downloads</a></li>

		</ul></li>

		<li><a href="" style="text-shadow:  4px 4px 5px #625656;">Special Training Courses</a>

		<ul>

			<li><a href="../../../wamp/Textile/ garmentw.html" style="text-shadow:  4px 4px 5px #625656;">Garment Washing and Fini...</a></li>

			

		</ul></li>

	</ul></li>

	<li class="topmenu"><a href="" style="text-shadow:  4px 4px 5px #847878;">RESEARCH<img src="/images/research.gif" width="18" height="18"  align="right" /></a>

	<ul>

		<li><a href="../../../wamp/Textile/ research.html" style="text-shadow:  4px 4px 5px #625656;">Student Projects</a></li>
        <li><a href="../../../wamp/Textile/ research.html" style="text-shadow:  4px 4px 5px #625656;">Current Researches</a></li>

  </ul></li>

	<li class="topmenu"><a href="../../../wamp/Textile/news.html" style="text-shadow:  4px 4px 5px #847878;">NEWS  <img src="/images/news.gif" width="18" height="18"  align="right" /></a></li>

	<li class="topmenu"><a href="" style="text-shadow:  4px 4px 5px #847878;">DOWNLOADS  <img src="/images/downloads.gif" width="18" height="18" align="right" /></a>
        <ul>
    <li><a href="../../../wamp/Textile/docs/Handbook-2008.pdf" style="text-shadow:  4px 4px 5px #625656;">University Hand Book</a></li>
       <li><a href="../../../wamp/Textile/ New Application.doc" style="text-shadow:  4px 4px 5px #625656;">Short Course Application Form</a></li>
       <li><a href="../../../wamp/Textile/docs/Extension_courses brochure.pdf" style="text-shadow:  4px 4px 5px #625656;">Brochure</a></li>
          <li><a href="../../../wamp/Textile/docs/Extension_Course_Schedule.pdf" style="text-shadow:  4px 4px 5px #625656;">Extension Course Time Table</a></li></ul>
    </li>

	<li class="topmenu"><a href="" style="text-shadow:  4px 4px 5px #847878;">LINKS  <img src="/images/links.gif" width="18" height="18"  align="right" /></a>
    <ul>
    <li><a href="http://www.mrt.ac.lk/web/" style="text-shadow:  4px 4px 5px #625656;">University</a></li>
       <li><a href="" style="text-shadow:  4px 4px 5px #625656;">Telephone Directory</a></li>
  <li><a href="" style="text-shadow:  4px 4px 5px #625656;">Moratuwa University Textile Association</a></li></ul></li>

	<li class="toplast"><a href="" style="text-shadow:  4px 4px 5px #847878;">GALLERY <img src="/images/gallary.gif" width="18" height="18" align="right"  /></a>

	<ul>

		<li><a href="http://www.textile.mrt.ac.lk/images/stories/fashion%20show/2011/gallery_002.swf" style="text-shadow:  4px 4px 5px #625656;">Fashion Show</a></li>

		<li><a href="http://www.textile.mrt.ac.lk/images/stories/inaug/gallery_002.swf" style="text-shadow:  4px 4px 5px #625656;">Silver Jubilee Celebrations</a></li>

	</ul></li>
    
    
	<li class="topmenu"><a href="../../../wamp/Textile/contacts.html" style="text-shadow:  4px 4px 5px #847878;">CONTACT US  <img src="/images/contact.gif" width="18" height="18"  align="right" /></a>
</li>

</ul><p class="_css3m"><a href="http://css3menu.com/">css menu</a> by Css3Menu.com</p>
<!-- End css3menu.com BODY section -->



</body>
</html>

************************************************************************************************

CSS:



ul#css3menu0,ul#css3menu0 ul{
	margin:0;list-style:none;padding:0;background-color:rgba(242, 102,32, 0.85);border-width:1px;border-style:solid;border-color:#rgba(242, 102,32, 0.85);-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;}
ul#css3menu0 ul{
	display:none;
	position:absolute;
	left:100%;
	top:0;
	-moz-box-shadow:3.5px 3.5px 5px #000000;
	-webkit-box-shadow:3.5px 3.5px 5px #000000;
	box-shadow:3.5px 3.5px 5px #000000;
	background-color: rgba(242, 102,32, 0.85);
	border-width:2px;
	border-radius:6px;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-color:#FFF;
	padding:0 10px 10px;
}
ul#css3menu0 li:hover>*{
	display:block;}
ul#css3menu0 li{
	position:relative;display:block;white-space:nowrap;font-size:0;}
ul#css3menu0 li:hover{
	z-index:1;}
ul#css3menu0 ul ul{
	position:absolute;left:100%;top:0;}
ul#css3menu0{
	font-size:0;z-index:999;position:relative;display:block;float:left;padding:0;}
ul#css3menu0>li{
	margin:0;}
ul#css3menu0 a:active, ul#css3menu0 a:focus{
	outline-style:none;}
ul#css3menu0 a{
	display:block;
	vertical-align:middle;
	text-align:left;
	text-decoration:none;
	font:bold 14px Calibri;
	color:#000;
	text-shadow:#FFF 0 0 1px;
	cursor:auto;
	padding:8px;
	background-color:#ffffff;
	background-image:url("mainbk.png");
	background-repeat:no-repeat;
	background-position:0 0;
	border-width:1px 0 0 0;
	border-style:solid;
	border-color:rgba(108, 103, 93, 0.5);
} /*border*/
ul#css3menu0 ul li{
	float:none;margin: 2px 0 0;}
ul#css3menu0 ul a{
	text-align:left;
	padding:2px;
	background-color: rgba(242, 102, 32, 0); /*1 n 2 sub box 2 boxes displayed*/
	background-image:none;
	border-width:0;
	border-radius:0px;
	-moz-border-radius:0px;
	-webkit-border-radius:0px;
	font:14px Calibri;
	font-weight:bolder;
	font-stretch:condensed;
	color:#000000;
	text-decoration:none;
	text-shadow:#FFF 0 0 0;
}
ul#css3menu0 li:hover>a,ul#css3menu0 li a.pressed{
	background-color: rgba(242, 102, 32, 0.85);  /*1 box*/
	border-color:rgba(108, 103, 93, 0.5);
	border-style:solid;
	color:#ffffff;
	text-shadow:#FFF 0 0 2px;
	background-image:url("mainbk.png");
	background-position:0 100px;
	text-decoration:none;
}
ul#css3menu0 span{
	display:block;overflow:visible;background-position:right center;background-repeat:no-repeat;padding-right:0px;}
ul#css3menu0 ul span{
	background-image:url("arrowsub.png");padding-right:8px;}
ul#css3menu0 > label.switch{
	display:none;cursor:pointer;width:25px;height:20px;padding:10px;}
ul#css3menu0 > label.switch:before{
	content:"";position:absolute;display:block;height:4px;width:25px;border-radius:4px;background:#000;-moz-box-shadow:0 8px #000, 0 16px #000;-webkit-box-shadow:0 8px #000, 0 16px #000;box-shadow:0 8px #000, 0 16px #000;}
ul#css3menu0 > label.switch:hover:before{
	background:#ffffff;-moz-box-shadow:0 8px #ffffff, 0 16px #ffffff;-webkit-box-shadow:0 8px #ffffff, 0 16px #ffffff;box-shadow:0 8px #ffffff, 0 16px #ffffff;}
ul#css3menu0 > .switchbox{
	display:none;}
ul#css3menu0 ul li:hover>a,ul#css3menu0 ul li a.pressed{
	background-color:#fffffff;background-image:none;color:#ffffff;text-decoration:none;text-shadow:#FFF 0 0 0;}
ul#css3menu0 li.topfirst>a{
	border-width:0;border-radius:4px 4px 0 0 ;-moz-border-radius:4px 4px 0 0 ;-webkit-border-radius:4px;-webkit-border-bottom-right-radius:0;-webkit-border-bottom-left-radius:0;}
ul#css3menu0 li.toplast>a{
	border-radius:0 0 4px 4px;-moz-border-radius:0 0 4px 4px;-webkit-border-radius:0;-webkit-border-bottom-right-radius:4px;-webkit-border-bottom-left-radius:4px;}
@media screen and (max-width: 768px) {
	ul#css3menu0 > li {
		position: initial;}
	ul#css3menu0 ul .submenu,ul#css3menu0 li > ul {
		left: 0; right:auto; top: 100%;}
	ul#css3menu0 .submenu,ul#css3menu0 ul,ul#css3menu0 .column {
		-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;padding-right: 0;width: 100% !important;}
}
@media screen and (max-width: 736px) {
	ul#css3menu0 {
		width: 100%;}
	ul#css3menu0 > li {
		display: none !important;		position: relative;		width: 100% !important;}
	ul#css3menu0 > label.switch,ul#css3menu0 .switchbox:checked ~ li {
		display: block !important;}
}


****************************************************************************************************

Thanks,

Nadun
You can work around the bug by removing the "white-space:nowrap" on the <li>s.
Status: UNCONFIRMED → RESOLVED
Closed: 10 years ago
Resolution: --- → DUPLICATE
Thanks.
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: