IE8 CSS Menu Fix

IE8 CSS Menu Fix - html

IE8 CSS Menu Fix
I have a website CSS menu that is not working on IE8.
Code working fine with Firefox.
<html>
<head>
<title>broken in ie8</title>
<style>
ul#mrmenu,ul#mrmenu ul{
margin:0;
list-style:none;
padding:0;
}
ul#mrmenuxx,ul#mrmenu .submenu{
border:1px solid yellow;
border-right:medium none;
}
ul#mrmenu .submenu{
background:black;
visibility:hidden;
position:absolute;
left:0;
top:100%;
opacity:0;
float:left;
padding:0 10px;
}
ul#mrmenu li:hover>.submenu{
visibility:visible;
opacity:1;
}
ul#mrmenu li{
position:relative;
display:block;
white-space:nowrap;
float:left;
}
ul#mrmenu li:hover{
z-index:1;
}
ul#mrmenu ul .submenu{
z-index:2;
position:absolute;
left:100%;
top:0;
}
ul#mrmenu{
z-index:999;
position:relative;
zoom:1;
padding:0 0;
margin:0;
display:block;
white-space: nowrap;
height:47px;
}
ul#mrmenu .column{
float:left;
}
* html ul#mrmenu li a, * html ul#mrmenu li label{
display:inline-block;
}
ul#mrmenu>li{
margin:0;
float:left;
display:inline-block;
}
ul#mrmenu li.toplast{
width:15%;
}
ul#mrmenu a:active, ul#mrmenu a:focus, ul#mrmenu label:active, ul#mrmenu label:focus{
outline-style:none;
}
ul#mrmenu a, ul#mrmenu label{
display:block;
vertical-align:middle;
text-align:left;
font:bold 12px Trebuchet MS;
line-height: 18px;
color:#fff;
cursor:pointer;
background-repeat:repeat;
background-position:0 0;
}
ul#mrmenu .submenu .column{
margin-top:10px;
margin-bottom:10px;
}
ul#mrmenu ul li{
float:none;
margin:2px 0 0;
}
ul#mrmenu ul a, ul#mrmenu ul label{
text-align:left;
padding:2px;
padding-left:10px;
}
ul#mrmenu img{
vertical-align:middle;
margin-right:6px;
}
ul#mrmenu span{
display:block;
overflow:visible;
background-position:right center;
background-repeat:no-repeat;
padding-right:0px;
}
ul#mrmenu ul span{
padding-right:8px;
}
ul#mrmenu ul li:hover>a,ul#mrmenu ul li a.pressed, ul#mrmenu ul li:hover>label,ul#mrmenu ul li label.pressed{
background-image:none;
color:#yellow;
}
.mr-button {
background: black;
border:1px solid #808080;
border-width:1px 1px 1px 0;
display:inline-block;
color:#ffffff;
padding:14px 10px;
}
.mr-button:active {
position:relative;
top:1px;
}
#mrmenu {
color: #cfcfcf;
}
</style>
</head>
<body>
<ul id="mrmenu" class="topmenu">
<li class="mr-button">
<label><span>Menu1</span></label>
<div class="submenu">
<div class="column">
<ul class="cat_parent">
<li>
<label>
<img src="data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAVCAYAAACpF6WWAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAOwwAADsMBx2+oZAAAABZ0RVh0Q3JlYXRpb24gVGltZQAxMS8xMi8xMhR8XRwAAAAYdEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3Jrc0+zH04AAAPTSURBVDiNnZRbiFVVGMd/3z57nzPn5oyjjjU0Y5qXBBNKm2maLAsberMLRahFSBdRhPCheht88UGIgiiash4SjC5SQokPFTGUEuaF0cRKhazp6MyZ+zlnn3P2WvvrYe/BSYzKDxYsvrXWj//6r+9boqpc3Cm5RJI33Vzz0+Km+b+hxseURj+wdba192pJiq/i+VXeyLcseCGfz+EQAooqqP4XpKDiUCqVmBr6rS/dwHY5u4MVze1zf5zX5KXqhQJBCRwPvBS4aSABhP/CdYDsjQxPBrXRi8XVrg9Z1/gpJkYwbT3UZncjfgF//ALh5WMkgxFyaXCmXbmW+hCoXMY16VTEA5VaGQLIdN5DZuVWKBewtQphtUTtj5OMDewjOXKMfA7w/gFMiNTKGFDXGghtLKJeAX8YTA1JN5FI5ck2zie7/EFKpw8xduR18tU/cbPXsEQjjjXgWgNYoAFk4H349XNItyCtnWhrF8xdgRKQX/UotfZVTH35EvmxYxFY/w5lJnRaqSkMYf0hEu5Z3DP9SNMsWNgDdzxH2LSE5Jw2nMf3MLV/G7OGD5OYqXiGUsfaeKEO1da7mLz9ecYXrGM0zFEtTMLxT5HPnkEufou6GdxZc8k+9hbl3GK0Ep+dMawFxxpQA5Qg17GBeZv6aN70HpnNh/A7tjNeT6JDBeTAFuTcQVQ8ko3z8R7aTdV6EcxGQ02s1BjQ6YUgQFEklaPhpluZ/fBOkk/tZ8JrRSfqyMEdcGkAlQQNS9cS3rYROxn7GUYcY8AJLagFksDRd5CPnkROfYLWyqgxZJbfT2rjXsrJRhgtId/0QmgRJ4G7ejMm3Qj1WKmNfHVsPMEBBn9G+z8mfHcLsvcRmCqgIaSXrUHW9RKEIL8cQc99DeKQvLkDae9E/UhpaKc9tVc8qQYw1NbF8KJu/FPHkQ83QKWIBjXS3c9iWldCGZwT+1AviyQ87IIHotePGdbGnoYWmAK6ttLyymHmv/wdTs+LcPIn6H8NvBxOKo+sfCJS9PsJtHgeELxFdyNOBAxt7KkxcTlUoWFxNxKXXWrpfdHGgS/Q8kiUW7I22jt+CR0fBIREy7LIu7ikjAHXFZx6AGSAw3tg4RpwXPi+DzLgTAxC8TyIIIEPCmIUqYxCZRTxx6OrA/UAXMGRr9Zzy5yMc3RFs852VcGNtQZ65fMQZ0Y7xi00M0eIMcLpMRkbqYR3ugnLhZFSuOuMZfcNGSTrxg0tgLkKNJ2/Klc2UKioFn3d5SoXJK5Q5+17WT+vgU6uM4ar/LClnwNAKJHLpFTVv17gdIhIGqj9BQBF07VXMETuAAAAAElFTkSuQmCC" />
Item1</label>
</li>
<li>
<label>
<img src="data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAVCAYAAACpF6WWAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAOwwAADsMBx2+oZAAAABZ0RVh0Q3JlYXRpb24gVGltZQAxMS8xMi8xMhR8XRwAAAAYdEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3Jrc0+zH04AAAPTSURBVDiNnZRbiFVVGMd/3z57nzPn5oyjjjU0Y5qXBBNKm2maLAsberMLRahFSBdRhPCheht88UGIgiiash4SjC5SQokPFTGUEuaF0cRKhazp6MyZ+zlnn3P2WvvrYe/BSYzKDxYsvrXWj//6r+9boqpc3Cm5RJI33Vzz0+Km+b+hxseURj+wdba192pJiq/i+VXeyLcseCGfz+EQAooqqP4XpKDiUCqVmBr6rS/dwHY5u4MVze1zf5zX5KXqhQJBCRwPvBS4aSABhP/CdYDsjQxPBrXRi8XVrg9Z1/gpJkYwbT3UZncjfgF//ALh5WMkgxFyaXCmXbmW+hCoXMY16VTEA5VaGQLIdN5DZuVWKBewtQphtUTtj5OMDewjOXKMfA7w/gFMiNTKGFDXGghtLKJeAX8YTA1JN5FI5ck2zie7/EFKpw8xduR18tU/cbPXsEQjjjXgWgNYoAFk4H349XNItyCtnWhrF8xdgRKQX/UotfZVTH35EvmxYxFY/w5lJnRaqSkMYf0hEu5Z3DP9SNMsWNgDdzxH2LSE5Jw2nMf3MLV/G7OGD5OYqXiGUsfaeKEO1da7mLz9ecYXrGM0zFEtTMLxT5HPnkEufou6GdxZc8k+9hbl3GK0Ep+dMawFxxpQA5Qg17GBeZv6aN70HpnNh/A7tjNeT6JDBeTAFuTcQVQ8ko3z8R7aTdV6EcxGQ02s1BjQ6YUgQFEklaPhpluZ/fBOkk/tZ8JrRSfqyMEdcGkAlQQNS9cS3rYROxn7GUYcY8AJLagFksDRd5CPnkROfYLWyqgxZJbfT2rjXsrJRhgtId/0QmgRJ4G7ejMm3Qj1WKmNfHVsPMEBBn9G+z8mfHcLsvcRmCqgIaSXrUHW9RKEIL8cQc99DeKQvLkDae9E/UhpaKc9tVc8qQYw1NbF8KJu/FPHkQ83QKWIBjXS3c9iWldCGZwT+1AviyQ87IIHotePGdbGnoYWmAK6ttLyymHmv/wdTs+LcPIn6H8NvBxOKo+sfCJS9PsJtHgeELxFdyNOBAxt7KkxcTlUoWFxNxKXXWrpfdHGgS/Q8kiUW7I22jt+CR0fBIREy7LIu7ikjAHXFZx6AGSAw3tg4RpwXPi+DzLgTAxC8TyIIIEPCmIUqYxCZRTxx6OrA/UAXMGRr9Zzy5yMc3RFs852VcGNtQZ65fMQZ0Y7xi00M0eIMcLpMRkbqYR3ugnLhZFSuOuMZfcNGSTrxg0tgLkKNJ2/Klc2UKioFn3d5SoXJK5Q5+17WT+vgU6uM4ar/LClnwNAKJHLpFTVv17gdIhIGqj9BQBF07VXMETuAAAAAElFTkSuQmCC" />
Item2</label>
</li>
<li>
<label>
<img src="data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAVCAYAAACpF6WWAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAOwwAADsMBx2+oZAAAABZ0RVh0Q3JlYXRpb24gVGltZQAxMS8xMi8xMhR8XRwAAAAYdEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3Jrc0+zH04AAAPTSURBVDiNnZRbiFVVGMd/3z57nzPn5oyjjjU0Y5qXBBNKm2maLAsberMLRahFSBdRhPCheht88UGIgiiash4SjC5SQokPFTGUEuaF0cRKhazp6MyZ+zlnn3P2WvvrYe/BSYzKDxYsvrXWj//6r+9boqpc3Cm5RJI33Vzz0+Km+b+hxseURj+wdba192pJiq/i+VXeyLcseCGfz+EQAooqqP4XpKDiUCqVmBr6rS/dwHY5u4MVze1zf5zX5KXqhQJBCRwPvBS4aSABhP/CdYDsjQxPBrXRi8XVrg9Z1/gpJkYwbT3UZncjfgF//ALh5WMkgxFyaXCmXbmW+hCoXMY16VTEA5VaGQLIdN5DZuVWKBewtQphtUTtj5OMDewjOXKMfA7w/gFMiNTKGFDXGghtLKJeAX8YTA1JN5FI5ck2zie7/EFKpw8xduR18tU/cbPXsEQjjjXgWgNYoAFk4H349XNItyCtnWhrF8xdgRKQX/UotfZVTH35EvmxYxFY/w5lJnRaqSkMYf0hEu5Z3DP9SNMsWNgDdzxH2LSE5Jw2nMf3MLV/G7OGD5OYqXiGUsfaeKEO1da7mLz9ecYXrGM0zFEtTMLxT5HPnkEufou6GdxZc8k+9hbl3GK0Ep+dMawFxxpQA5Qg17GBeZv6aN70HpnNh/A7tjNeT6JDBeTAFuTcQVQ8ko3z8R7aTdV6EcxGQ02s1BjQ6YUgQFEklaPhpluZ/fBOkk/tZ8JrRSfqyMEdcGkAlQQNS9cS3rYROxn7GUYcY8AJLagFksDRd5CPnkROfYLWyqgxZJbfT2rjXsrJRhgtId/0QmgRJ4G7ejMm3Qj1WKmNfHVsPMEBBn9G+z8mfHcLsvcRmCqgIaSXrUHW9RKEIL8cQc99DeKQvLkDae9E/UhpaKc9tVc8qQYw1NbF8KJu/FPHkQ83QKWIBjXS3c9iWldCGZwT+1AviyQ87IIHotePGdbGnoYWmAK6ttLyymHmv/wdTs+LcPIn6H8NvBxOKo+sfCJS9PsJtHgeELxFdyNOBAxt7KkxcTlUoWFxNxKXXWrpfdHGgS/Q8kiUW7I22jt+CR0fBIREy7LIu7ikjAHXFZx6AGSAw3tg4RpwXPi+DzLgTAxC8TyIIIEPCmIUqYxCZRTxx6OrA/UAXMGRr9Zzy5yMc3RFs852VcGNtQZ65fMQZ0Y7xi00M0eIMcLpMRkbqYR3ugnLhZFSuOuMZfcNGSTrxg0tgLkKNJ2/Klc2UKioFn3d5SoXJK5Q5+17WT+vgU6uM4ar/LClnwNAKJHLpFTVv17gdIhIGqj9BQBF07VXMETuAAAAAElFTkSuQmCC" />
Item3</label>
</li>
<li>
<label>
<img src="data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAVCAYAAACpF6WWAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAOwwAADsMBx2+oZAAAABZ0RVh0Q3JlYXRpb24gVGltZQAxMS8xMi8xMhR8XRwAAAAYdEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3Jrc0+zH04AAAPTSURBVDiNnZRbiFVVGMd/3z57nzPn5oyjjjU0Y5qXBBNKm2maLAsberMLRahFSBdRhPCheht88UGIgiiash4SjC5SQokPFTGUEuaF0cRKhazp6MyZ+zlnn3P2WvvrYe/BSYzKDxYsvrXWj//6r+9boqpc3Cm5RJI33Vzz0+Km+b+hxseURj+wdba192pJiq/i+VXeyLcseCGfz+EQAooqqP4XpKDiUCqVmBr6rS/dwHY5u4MVze1zf5zX5KXqhQJBCRwPvBS4aSABhP/CdYDsjQxPBrXRi8XVrg9Z1/gpJkYwbT3UZncjfgF//ALh5WMkgxFyaXCmXbmW+hCoXMY16VTEA5VaGQLIdN5DZuVWKBewtQphtUTtj5OMDewjOXKMfA7w/gFMiNTKGFDXGghtLKJeAX8YTA1JN5FI5ck2zie7/EFKpw8xduR18tU/cbPXsEQjjjXgWgNYoAFk4H349XNItyCtnWhrF8xdgRKQX/UotfZVTH35EvmxYxFY/w5lJnRaqSkMYf0hEu5Z3DP9SNMsWNgDdzxH2LSE5Jw2nMf3MLV/G7OGD5OYqXiGUsfaeKEO1da7mLz9ecYXrGM0zFEtTMLxT5HPnkEufou6GdxZc8k+9hbl3GK0Ep+dMawFxxpQA5Qg17GBeZv6aN70HpnNh/A7tjNeT6JDBeTAFuTcQVQ8ko3z8R7aTdV6EcxGQ02s1BjQ6YUgQFEklaPhpluZ/fBOkk/tZ8JrRSfqyMEdcGkAlQQNS9cS3rYROxn7GUYcY8AJLagFksDRd5CPnkROfYLWyqgxZJbfT2rjXsrJRhgtId/0QmgRJ4G7ejMm3Qj1WKmNfHVsPMEBBn9G+z8mfHcLsvcRmCqgIaSXrUHW9RKEIL8cQc99DeKQvLkDae9E/UhpaKc9tVc8qQYw1NbF8KJu/FPHkQ83QKWIBjXS3c9iWldCGZwT+1AviyQ87IIHotePGdbGnoYWmAK6ttLyymHmv/wdTs+LcPIn6H8NvBxOKo+sfCJS9PsJtHgeELxFdyNOBAxt7KkxcTlUoWFxNxKXXWrpfdHGgS/Q8kiUW7I22jt+CR0fBIREy7LIu7ikjAHXFZx6AGSAw3tg4RpwXPi+DzLgTAxC8TyIIIEPCmIUqYxCZRTxx6OrA/UAXMGRr9Zzy5yMc3RFs852VcGNtQZ65fMQZ0Y7xi00M0eIMcLpMRkbqYR3ugnLhZFSuOuMZfcNGSTrxg0tgLkKNJ2/Klc2UKioFn3d5SoXJK5Q5+17WT+vgU6uM4ar/LClnwNAKJHLpFTVv17gdIhIGqj9BQBF07VXMETuAAAAAElFTkSuQmCC" />
Item4</label>
</li>
<li>
<label>
<img src="data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAVCAYAAACpF6WWAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAOwwAADsMBx2+oZAAAABZ0RVh0Q3JlYXRpb24gVGltZQAxMS8xMi8xMhR8XRwAAAAYdEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3Jrc0+zH04AAAPTSURBVDiNnZRbiFVVGMd/3z57nzPn5oyjjjU0Y5qXBBNKm2maLAsberMLRahFSBdRhPCheht88UGIgiiash4SjC5SQokPFTGUEuaF0cRKhazp6MyZ+zlnn3P2WvvrYe/BSYzKDxYsvrXWj//6r+9boqpc3Cm5RJI33Vzz0+Km+b+hxseURj+wdba192pJiq/i+VXeyLcseCGfz+EQAooqqP4XpKDiUCqVmBr6rS/dwHY5u4MVze1zf5zX5KXqhQJBCRwPvBS4aSABhP/CdYDsjQxPBrXRi8XVrg9Z1/gpJkYwbT3UZncjfgF//ALh5WMkgxFyaXCmXbmW+hCoXMY16VTEA5VaGQLIdN5DZuVWKBewtQphtUTtj5OMDewjOXKMfA7w/gFMiNTKGFDXGghtLKJeAX8YTA1JN5FI5ck2zie7/EFKpw8xduR18tU/cbPXsEQjjjXgWgNYoAFk4H349XNItyCtnWhrF8xdgRKQX/UotfZVTH35EvmxYxFY/w5lJnRaqSkMYf0hEu5Z3DP9SNMsWNgDdzxH2LSE5Jw2nMf3MLV/G7OGD5OYqXiGUsfaeKEO1da7mLz9ecYXrGM0zFEtTMLxT5HPnkEufou6GdxZc8k+9hbl3GK0Ep+dMawFxxpQA5Qg17GBeZv6aN70HpnNh/A7tjNeT6JDBeTAFuTcQVQ8ko3z8R7aTdV6EcxGQ02s1BjQ6YUgQFEklaPhpluZ/fBOkk/tZ8JrRSfqyMEdcGkAlQQNS9cS3rYROxn7GUYcY8AJLagFksDRd5CPnkROfYLWyqgxZJbfT2rjXsrJRhgtId/0QmgRJ4G7ejMm3Qj1WKmNfHVsPMEBBn9G+z8mfHcLsvcRmCqgIaSXrUHW9RKEIL8cQc99DeKQvLkDae9E/UhpaKc9tVc8qQYw1NbF8KJu/FPHkQ83QKWIBjXS3c9iWldCGZwT+1AviyQ87IIHotePGdbGnoYWmAK6ttLyymHmv/wdTs+LcPIn6H8NvBxOKo+sfCJS9PsJtHgeELxFdyNOBAxt7KkxcTlUoWFxNxKXXWrpfdHGgS/Q8kiUW7I22jt+CR0fBIREy7LIu7ikjAHXFZx6AGSAw3tg4RpwXPi+DzLgTAxC8TyIIIEPCmIUqYxCZRTxx6OrA/UAXMGRr9Zzy5yMc3RFs852VcGNtQZ65fMQZ0Y7xi00M0eIMcLpMRkbqYR3ugnLhZFSuOuMZfcNGSTrxg0tgLkKNJ2/Klc2UKioFn3d5SoXJK5Q5+17WT+vgU6uM4ar/LClnwNAKJHLpFTVv17gdIhIGqj9BQBF07VXMETuAAAAAElFTkSuQmCC" />
Item5</label>
</li>
<li>
<label>
<img src="data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAVCAYAAACpF6WWAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAOwwAADsMBx2+oZAAAABZ0RVh0Q3JlYXRpb24gVGltZQAxMS8xMi8xMhR8XRwAAAAYdEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3Jrc0+zH04AAAPTSURBVDiNnZRbiFVVGMd/3z57nzPn5oyjjjU0Y5qXBBNKm2maLAsberMLRahFSBdRhPCheht88UGIgiiash4SjC5SQokPFTGUEuaF0cRKhazp6MyZ+zlnn3P2WvvrYe/BSYzKDxYsvrXWj//6r+9boqpc3Cm5RJI33Vzz0+Km+b+hxseURj+wdba192pJiq/i+VXeyLcseCGfz+EQAooqqP4XpKDiUCqVmBr6rS/dwHY5u4MVze1zf5zX5KXqhQJBCRwPvBS4aSABhP/CdYDsjQxPBrXRi8XVrg9Z1/gpJkYwbT3UZncjfgF//ALh5WMkgxFyaXCmXbmW+hCoXMY16VTEA5VaGQLIdN5DZuVWKBewtQphtUTtj5OMDewjOXKMfA7w/gFMiNTKGFDXGghtLKJeAX8YTA1JN5FI5ck2zie7/EFKpw8xduR18tU/cbPXsEQjjjXgWgNYoAFk4H349XNItyCtnWhrF8xdgRKQX/UotfZVTH35EvmxYxFY/w5lJnRaqSkMYf0hEu5Z3DP9SNMsWNgDdzxH2LSE5Jw2nMf3MLV/G7OGD5OYqXiGUsfaeKEO1da7mLz9ecYXrGM0zFEtTMLxT5HPnkEufou6GdxZc8k+9hbl3GK0Ep+dMawFxxpQA5Qg17GBeZv6aN70HpnNh/A7tjNeT6JDBeTAFuTcQVQ8ko3z8R7aTdV6EcxGQ02s1BjQ6YUgQFEklaPhpluZ/fBOkk/tZ8JrRSfqyMEdcGkAlQQNS9cS3rYROxn7GUYcY8AJLagFksDRd5CPnkROfYLWyqgxZJbfT2rjXsrJRhgtId/0QmgRJ4G7ejMm3Qj1WKmNfHVsPMEBBn9G+z8mfHcLsvcRmCqgIaSXrUHW9RKEIL8cQc99DeKQvLkDae9E/UhpaKc9tVc8qQYw1NbF8KJu/FPHkQ83QKWIBjXS3c9iWldCGZwT+1AviyQ87IIHotePGdbGnoYWmAK6ttLyymHmv/wdTs+LcPIn6H8NvBxOKo+sfCJS9PsJtHgeELxFdyNOBAxt7KkxcTlUoWFxNxKXXWrpfdHGgS/Q8kiUW7I22jt+CR0fBIREy7LIu7ikjAHXFZx6AGSAw3tg4RpwXPi+DzLgTAxC8TyIIIEPCmIUqYxCZRTxx6OrA/UAXMGRr9Zzy5yMc3RFs852VcGNtQZ65fMQZ0Y7xi00M0eIMcLpMRkbqYR3ugnLhZFSuOuMZfcNGSTrxg0tgLkKNJ2/Klc2UKioFn3d5SoXJK5Q5+17WT+vgU6uM4ar/LClnwNAKJHLpFTVv17gdIhIGqj9BQBF07VXMETuAAAAAElFTkSuQmCC" />
Item6</label>
</li>
<li>
<label>
<img src="data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAVCAYAAACpF6WWAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAOwwAADsMBx2+oZAAAABZ0RVh0Q3JlYXRpb24gVGltZQAxMS8xMi8xMhR8XRwAAAAYdEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3Jrc0+zH04AAAPTSURBVDiNnZRbiFVVGMd/3z57nzPn5oyjjjU0Y5qXBBNKm2maLAsberMLRahFSBdRhPCheht88UGIgiiash4SjC5SQokPFTGUEuaF0cRKhazp6MyZ+zlnn3P2WvvrYe/BSYzKDxYsvrXWj//6r+9boqpc3Cm5RJI33Vzz0+Km+b+hxseURj+wdba192pJiq/i+VXeyLcseCGfz+EQAooqqP4XpKDiUCqVmBr6rS/dwHY5u4MVze1zf5zX5KXqhQJBCRwPvBS4aSABhP/CdYDsjQxPBrXRi8XVrg9Z1/gpJkYwbT3UZncjfgF//ALh5WMkgxFyaXCmXbmW+hCoXMY16VTEA5VaGQLIdN5DZuVWKBewtQphtUTtj5OMDewjOXKMfA7w/gFMiNTKGFDXGghtLKJeAX8YTA1JN5FI5ck2zie7/EFKpw8xduR18tU/cbPXsEQjjjXgWgNYoAFk4H349XNItyCtnWhrF8xdgRKQX/UotfZVTH35EvmxYxFY/w5lJnRaqSkMYf0hEu5Z3DP9SNMsWNgDdzxH2LSE5Jw2nMf3MLV/G7OGD5OYqXiGUsfaeKEO1da7mLz9ecYXrGM0zFEtTMLxT5HPnkEufou6GdxZc8k+9hbl3GK0Ep+dMawFxxpQA5Qg17GBeZv6aN70HpnNh/A7tjNeT6JDBeTAFuTcQVQ8ko3z8R7aTdV6EcxGQ02s1BjQ6YUgQFEklaPhpluZ/fBOkk/tZ8JrRSfqyMEdcGkAlQQNS9cS3rYROxn7GUYcY8AJLagFksDRd5CPnkROfYLWyqgxZJbfT2rjXsrJRhgtId/0QmgRJ4G7ejMm3Qj1WKmNfHVsPMEBBn9G+z8mfHcLsvcRmCqgIaSXrUHW9RKEIL8cQc99DeKQvLkDae9E/UhpaKc9tVc8qQYw1NbF8KJu/FPHkQ83QKWIBjXS3c9iWldCGZwT+1AviyQ87IIHotePGdbGnoYWmAK6ttLyymHmv/wdTs+LcPIn6H8NvBxOKo+sfCJS9PsJtHgeELxFdyNOBAxt7KkxcTlUoWFxNxKXXWrpfdHGgS/Q8kiUW7I22jt+CR0fBIREy7LIu7ikjAHXFZx6AGSAw3tg4RpwXPi+DzLgTAxC8TyIIIEPCmIUqYxCZRTxx6OrA/UAXMGRr9Zzy5yMc3RFs852VcGNtQZ65fMQZ0Y7xi00M0eIMcLpMRkbqYR3ugnLhZFSuOuMZfcNGSTrxg0tgLkKNJ2/Klc2UKioFn3d5SoXJK5Q5+17WT+vgU6uM4ar/LClnwNAKJHLpFTVv17gdIhIGqj9BQBF07VXMETuAAAAAElFTkSuQmCC" />
Item7</label>
</li>
</ul>
</div>
</div>
</li>
<li class="mr-button">
<label><span>Menu2</span></label>
<div class="submenu">
<div class="column">
<ul class="cat_parent">
<li>
<label>
<img src="data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAVCAYAAACpF6WWAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAOwwAADsMBx2+oZAAAABZ0RVh0Q3JlYXRpb24gVGltZQAxMS8xMi8xMhR8XRwAAAAYdEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3Jrc0+zH04AAAPTSURBVDiNnZRbiFVVGMd/3z57nzPn5oyjjjU0Y5qXBBNKm2maLAsberMLRahFSBdRhPCheht88UGIgiiash4SjC5SQokPFTGUEuaF0cRKhazp6MyZ+zlnn3P2WvvrYe/BSYzKDxYsvrXWj//6r+9boqpc3Cm5RJI33Vzz0+Km+b+hxseURj+wdba192pJiq/i+VXeyLcseCGfz+EQAooqqP4XpKDiUCqVmBr6rS/dwHY5u4MVze1zf5zX5KXqhQJBCRwPvBS4aSABhP/CdYDsjQxPBrXRi8XVrg9Z1/gpJkYwbT3UZncjfgF//ALh5WMkgxFyaXCmXbmW+hCoXMY16VTEA5VaGQLIdN5DZuVWKBewtQphtUTtj5OMDewjOXKMfA7w/gFMiNTKGFDXGghtLKJeAX8YTA1JN5FI5ck2zie7/EFKpw8xduR18tU/cbPXsEQjjjXgWgNYoAFk4H349XNItyCtnWhrF8xdgRKQX/UotfZVTH35EvmxYxFY/w5lJnRaqSkMYf0hEu5Z3DP9SNMsWNgDdzxH2LSE5Jw2nMf3MLV/G7OGD5OYqXiGUsfaeKEO1da7mLz9ecYXrGM0zFEtTMLxT5HPnkEufou6GdxZc8k+9hbl3GK0Ep+dMawFxxpQA5Qg17GBeZv6aN70HpnNh/A7tjNeT6JDBeTAFuTcQVQ8ko3z8R7aTdV6EcxGQ02s1BjQ6YUgQFEklaPhpluZ/fBOkk/tZ8JrRSfqyMEdcGkAlQQNS9cS3rYROxn7GUYcY8AJLagFksDRd5CPnkROfYLWyqgxZJbfT2rjXsrJRhgtId/0QmgRJ4G7ejMm3Qj1WKmNfHVsPMEBBn9G+z8mfHcLsvcRmCqgIaSXrUHW9RKEIL8cQc99DeKQvLkDae9E/UhpaKc9tVc8qQYw1NbF8KJu/FPHkQ83QKWIBjXS3c9iWldCGZwT+1AviyQ87IIHotePGdbGnoYWmAK6ttLyymHmv/wdTs+LcPIn6H8NvBxOKo+sfCJS9PsJtHgeELxFdyNOBAxt7KkxcTlUoWFxNxKXXWrpfdHGgS/Q8kiUW7I22jt+CR0fBIREy7LIu7ikjAHXFZx6AGSAw3tg4RpwXPi+DzLgTAxC8TyIIIEPCmIUqYxCZRTxx6OrA/UAXMGRr9Zzy5yMc3RFs852VcGNtQZ65fMQZ0Y7xi00M0eIMcLpMRkbqYR3ugnLhZFSuOuMZfcNGSTrxg0tgLkKNJ2/Klc2UKioFn3d5SoXJK5Q5+17WT+vgU6uM4ar/LClnwNAKJHLpFTVv17gdIhIGqj9BQBF07VXMETuAAAAAElFTkSuQmCC" />
Item 2-1</label>
</li>
</ul>
</div>
</div>
</li>
</ul>
</body>
</html>
Thanks for all

Adding a valid doctype fixes this for IE8, for example:
<!DOCTYPE html>
Oterwise IE will be rendering the page in Quirks mode and the CSS child selector ul#mrmenu li:hover>.submenu that you use to show the menu will not work. Note: CSS descendant selectors will still work in Quirks Mode.

Related

resize navigation bar with image in middle?

nav
{
display: table;
width: 50%;
background-color: #333;
padding: 0.50em 0.5em;
margin: 0.60em auto;
}
nav ul
{
display: table-row;
}
nav ul li
{
display: table-cell;
text-align: center;
}
a
{
text-decoration:none;
color: #d9d9d9;
}
a:hover
{
color: #e6e6e6;
}
<nav>
<ul>
<li> art <li>
<li> download </li>
<li> <img src="image/symbol.png">
<li> portfolio </li>
<li> product </li>
</ul>
</nav>
The above code is how I am so far designing my website; however, if I add the image in the middle of the bar, the bar widens to fit the image in it!
The answer has been posted, thanks again!

Try this
.navContain{
height:30px;
width:100%;
margin:0 auto;
background-color:red;
padding-top:30px;
}
nav{
width: 100%;
max-width:400px;
background-color: #333;
padding:0;
margin:0 auto;
overflow:visible;
height:30px;
}
nav ul{
overflow:visible;
height:30px;
margin:0;
padding:0;
}
nav ul li{
text-align: center;
overflow:visible;
height:30px;
margin:0;
padding:0;
list-style-type:none;
float:left;
width:20%;
max-width:80px;
}
a{
text-decoration:none;
margin:0;
padding:0;
color: #d9d9d9;
overflow:visible;
line-height:30px;
display:block;
position:relative;
}
a:hover{
color: #e6e6e6;
}
a img{
width:90%;
margin:0;
padding:0;
vertical-align:baseline;
position:absolute;
bottom:-30px;
right:5%;
left:5%;
}
<div class="navContain">
<nav>
<ul>
<li> art </li>
<li> download </li>
<li> <img src="http://www.chinabuddhismencyclopedia.com/en/images/thumb/b/b8/Nature.jpg/240px-Nature.jpg"></li>
<li> portfolio </li>
<li> product </li>
</ul>
</nav>
</div>

Why did my padding get removed from my logo?

How come my padding isnt working on my logo div it was working before i added an extra div but i still cant see the reason it isn't working.Please check out my code to figure out if you can help me :)
<!DOCTYPE html>
<html>
<head>
<title>Learning Javacript</title>
<link href="main.css" rel="stylesheet" type="text/css">
<link href="normalize.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<div class="contact_info">
<div class="email">
<img src="icons/icon_mail.png">
<p>contact#thislooksgreat.net</p>
</div>
<div class="phone">
<img src="icons/icon_phone.png">
<p>+40.727.123.456</p>
</div>
<div class="Social_Media">
<ul>
<li><img src="Social/facebook.png"></li>
<li><img src="Social/twitter.png"></li>
<li><img src="Social/youtube.png"></li>
<li><img src="Social/googleplus.png"></li>
<li><img src="Social/linked.png"></li>
</ul>
</div>
<div class="language">
<p>ENGLISH</p>
<img src="icons/arrow.png">
</div>
</div>
</header>
<div class="main_real">
<div class="main_img">
<div class="main_nav_width">
<div class="main_nav">
<div class="logo">
<img src="Logo/logo.png">
</div>
<nav>
<ul>
<li>Home</li>
<li>About Us</li>
<li>News</li>
<li>Portfolio</li>
<li>Blog</li>
<li>Shop</li>
<li>Contact</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</body>
</html>
html,body,h1,h2,h3,h4,h5,h6,p,li,ul,a,nav{
padding:0px;
margin:0px;
}
header{
width:100%;
background-color:#143e6e;
height:40px;
border-top:6px solid #0d2f57;
}
.contact_info{
width:1200px;
margin:0 auto;
}
.contact_info p, img{
float:left;
}
.email p,img{
float:left;
}
.email .phone, p{
padding-top:12px;
padding-right:60px;
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
color:white;
}
.email img{
padding-top:11px;
padding-right:10px;
}
.phone p,img{
float:left;
}
.phone img{
padding-top:7px;
}
.Social_Media ul{
padding-top:10px;
padding-left:25px;
float:right;
}
.Social_Media li{
display:inline;
}
.Social_Media img{
padding-right:25px;
}
.Social_Media li:last-child img {
padding-right:0px
}
.language{
float:right;
}
.language p{
padding-right:0px;
}
.language img{
padding-top:15px;
padding-left:5px;
}
.main_nav_width{
width:100%;
background-color:white;
box-shadow: 0 5px 6px -6px black;
}
.main_nav{
width:1200px;
margin:0 auto;
height:90px;
}
}
.logo{
clear:both;
float:left;
padding-top:15px;
}
nav ul{
float:right;
padding-top:35px;
height:55px;
}
nav li{
display:inline;
}
nav li:last-child a{
margin-right:0px;
}
nav a{
width:50px;
margin-right:20px;
margin-left:20px;
padding-top:33px;
padding-bottom:40px;
text-decoration:none;
height:90px;
color:#143e6e;
}
nav a:hover {
width:90px;
padding-top:35px;
text-decoration:none;
height:15px;
color:#143e6e;
border-bottom:5px solid blue;
padding-bottom:33px;
}
nav li:last-child a:hover{
width:70px;
margin-left:20px
}
.main_img{
background-image: url("images/imac.png");
background-repeat:no-repeat;
background-position: 780px 64px;
background-repeat: no-repeat;
background-size:500px 500px;
width:100%;
height:650px;
}
.main_real{
background-image: url("images/background_jumbo.jpg");
background-repeat:no-repeat;
background-position: right top;
background-size:100% 480px;
width:100%;
}

Check your brackets. The extra curly brace might be throwing you off. If not try get a JSFiddle up.
.main_nav{
width:1200px;
margin:0 auto;
height:90px;
}
}
.logo{
clear:both;
float:left;
padding-top:15px;
}

Black space when I activate drop down menu

There is some black space to the right of my sub-menu when I activate the drop down menu(through hovering). I have tried a lot of thing and can't seem to find which element I must alter to get rid of it. Help me out please, when on fiddle increase width of website, the problem becomes more apparent.I don't want any space at all, I want the sub-menus to fit the size of the menu it dropped from.
html:
<body>
<header id = "M_head">
<img id="M_logo" src="MircLogo.png">
<img id="M_logo2" src="MircLogo.png">
<h2><ul>Mc</ul></h2>
</header>
<div id="container">
<nav id="M_nav">
<ul>
<li>NEWS
<ul>
<li><a>Item1</a></li><li><a>Item1</a></li><li><a>Item1</a></li><li><a>Item1</a></li>
</ul>
</li>
<li>STORE
<ul>
<li><a>Item1</a></li><li><a>Item1</a></li><li><a>Item1</a></li><li><a>Item1</a></li>
</ul>
</li>
<li>BLOG</li>
<li>CONTACTS</li>
<li>ABOUT</li>
</ul>
</nav>
<section id="M_section">
<div id=Side_sec></div>
<div id="Side_sec2"></div>
</section>
<footer id="M_footer">
</footer>
</div>
</body>
css:
*{box-sizing:border-box;}
body{
max-width:100%;
margin:0px;
display:block;
}
#container{
padding:0;
text-align:center;
box-sizing:border-box;
margin: 0px auto;
margin-top:-.5em;
background-image:url("MircBackground.jpg");
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-repeat:no-repeat;
}
#M_logo{
margin:-25px;
float:left;
height:5em;
width:8%;
margin-left:-1.825em;
}
#M_logo2{
margin-top:-25px;
float:right;
height:5em;
width:8%;
margin-right:-1.825em;
}
#M_head{
margin:0px auto;
color:black;
width:90%;
background-color:white;
height:4em;
}
#M_head ul{
padding:0px auto !important;
margin: 0px;
margin-left:5em;
text-align:left;
font-style:italic;
font-weight:bold;
width:30%;
letter-spacing:-0.08em;
word-spacing:-0.03em;
}
#M_nav ul {
width:102.5%;
padding:0px;
padding-top:.25em;
padding-bottom:.25em;
margin-left:-2.6%;
margin-top:0em;
background-color:black;
display:inline-table;
}
#M_nav ul li{
display:inline-block;
list-style-type:none;
text-decoration:none;
text-align:center;
padding-left:3.5em;
padding-right:3.5em;
padding-top:0.35em;
padding-bottom:0.35em;
display:inline-block;
border-radius:0.25em;
color:white;
font-weight:bold;
background-color:black;
}
#M_nav ul li:hover{
background-color:#FFBF00;
color:white;
font-shadow:none;
z-index:100;
}
#M_nav ul ul{
display:none;
}
#M_nav ul li:hover >ul{
display:block;
width:20%;
position:absolute;
margin-top:.7em;
float:center;
}
#M_nav ul li:hover ul >li{
display:block;
width:60%;
}
#Side_sec{
height:50em;
width:15%;
border-left:2px solid white;
float:right;
}
#M_section{
height:50em;
width:80%;
margin:-1em auto;
border:2px solid white;
}
fiddle link:http://jsfiddle.net/ft9b6np9/

Change:
#M_nav ul li:hover ul >li{
display:block;
width:60%;
}
to:
#M_nav ul li:hover ul >li{
display:block;
}
Setting a percentage width is causing the black overflow on the right side.
Fiddle: http://jsfiddle.net/ft9b6np9/1/

creating navigation bar - position two li elements next to each other

basically i'm trying to create a navigation bar and I'm trying to position two (and more) li elements next to each other, I've tried to figure it out but can't seem to do it???
css is below.... html is below css
don't even know whether i've laid it out correctly, if you know a tutorial or something to do the same thing let me know I've spent days figuring out how to set it up correctly......
CSS
li {
list-style-type:none;
list-style:none;
background:clear;
padding:0;
margin:0;
}
ul {
list-style-type:none;
list-style:none;
margin:0;
padding:0;
background-color:clear;
}
li.nav a {
text-align:center;
font-family:"Helvetica";
font-weight:lighter;
text-decoration:none;
display:inline;
background-color:green;
padding:10px;
margin:0;
color:#FF0;
float:none;
}
li.nav a:hover {
text-align:center;
font-family:"Helvetica";
font-weight:lighter;
text-decoration:none;
display:inline;
background-color:blue;
padding:10px;
margin:0;
color:#0FF;
}
li.sub a {
position:relative;
top:2px;
background:pink;
display:block;
margin:0;
padding:10px;
color:red;
width:100px;
}
li.sub a:hover {
position:relative;
top:2px;
background:pink;
display:block;
margin:0;
padding:10px;
color:red;
width:100px;
}
HTML
<li class="nav">Community
<ul>
<li class="sub">Third Age</li>
<li class="sub">Tide Timetables</li>
<li class="sub">Schools</li>
<li class="sub">Religion</li>
<li class="sub">Clubs+Societies</li>
<li class="sub">Courses</li>
<li class="sub">The Council</li>
<li class="sub">Culture</li>
</ul>
</li>
<!--END OF COMMUNITY SECTION-->
<!--START OF EVENTS NAVIGATION BUTTON AND SUBMENU-->
<li class="nav">Events
<ul>
<li class="sub">Festivals</li>
<li class="sub">Family</li>
<li class="sub">Music</li>
<li class="sub">Comedy</li>
<li class="sub">Theatre</li>
<li class="sub">Exhibitions</li>
<li class="sub">Film</li>
<li class="sub">Literature</li>
</ul>
</li>
<!--END OF EVENTS SECTION-->

Try to add this lines in your css.
li.nav{display:inline-block;position:absolute;}
li.nav:nth-child(2)
{margin-left:140px;}
OR
HTML
<div class="main-navigation">
<nav class="navigation">
<ul>
<li>1
<ul class="sub-menu"><li>1a</li><li>1b</li></ul>
</li>
<li>2
<ul class="sub-menu"><li>2a</li><li>2b</li></ul>
</li>
<li>3</li>
<li>4</li>
</ul>
</nav>
</div>
CSS
nav.navigation{
width: 75%;
height:50px;
}
nav ul ul.sub-menu{
display: none;
margin-left:-40px;
margin-top:-10px;
}
nav ul li:hover > ul.sub-menu{
display: block;
}
nav ul{
height:50px;
list-style:none;
padding: 3px 0 0 0;
position: relative;
text-transform: uppercase;
}
nav ul:after{
content:"";
clear:both;
display:block;
}
nav ul li{
float: left;
padding:10px 30px;
background:yellow;
margin-left:5px;
}
nav ul ul.sub-menu{
background-color: #fcfcfc;
padding: 0;
position: absolute;
z-index:100;
top: 100%;
}
nav ul ul.sub-menu li{
float: none;
margin-top: -3px;
height:30px;
background-color:green;
}
The DEMO is here

add float:left; to the li-items.
li
{
float:left;
}
DEMO

you can use display:inline-block level property to all li element.

Cross Browser Display Issue

On further investigation I have discovered that there is something in my CSS that is making my navigation display funny -> Everything on my innerPage and HTML below (Main Page) load fine but I am still being driven crazy by the nav so I have uploaded my full html and css to resolve this issue,
HTML:
<div id="container">
<header>
<h1>company</h1>
<div id="logo">Home</div>
<section id="sales">
<p></p>
</section>
<section id="searchBox">
<form id="searchBoxForm">
<fieldset>
<input type="text" name="search" id="search" placeholder="Search Here" />
<input class="submit" type="submit" name="submit" id="submit" value="Search" />
</fieldset>
</form>
</section>
</header><!-- Header End -->
<nav id="mainMenu">
<ul>
<li>Nav 1
<ul><!--Sub Menu Hosting -->
<li>Drop Down 1</li>
</ul><!-- Sub Menu Hosting Ends -->
</li>
<li>Nav 2
<ul><!-- Sub Menu Email -->
<li>I want my own email</li>
</ul><!-- Sub Menu Email Ends -->
</li>
<li>Nav 3
<ul><!-- Sub Menu Support -->
<li>Need Support?</li>
</ul><!-- Sub Menu Support Ends -->
</li>
<li>Nav 3
<ul><!-- Sub Menu About -->
<li>About</li>
</ul><!-- Sub Menu About Ends -->
</li>
<li><a class="signup" href="#">SIGN UP</a></li>
</ul>
</nav><!-- Main Menu End -->
<div id="billboard">
<h1 contenteditable="true">Cloud Hosting </h1>
<p>Hosting to take you way above the clouds</p>
</div>
<article id="services">
<section class="service1">
<h2>Plan 1</h2>
<p>Cloud hosting isn't difficult or expensive. OnApp lets hosts deploy clouds in a day, at very low cost.</p>
<p>More</p>
</section>
<section class="service2">
<h2>Plan 2</h2>
<p>OnApp maximizes margins with high density, self-organizing clouds and an intuitive control panel.</p>
<p>More</p>
</section>
<section class="service3">
<h2>Plan 3</h2>
<p>No more late-night fixes in the data center. OnApp has automatic failover and multi-layered security. </p>
<p>More</p>
</section>
<section class="service4">
<h2>MS Exchange</h2>
<p>OnApp's fine control of permissions, limits and pricing lets you tailor the customer experience.</p>
<p>More</p>
</section>
<section class="service5">
<h2>Domains</h2>
<p>OnApp's fine control of permissions, limits and pricing lets you tailor the customer experience.</p>
<p>More</p>
</section>
</article><!-- Services End -->
<div id="servicesBanner">
<p>Services: </p>
</div>
<ul id="nav-footer">
<div id="col">
</div>
<p>&copy</p>
</div> <!-- container -->
</body>
</html>
CSS:
body {
line-height:1;
font:12px normal helvetica,arial,sans-serif;
color:gray;
background:url(includes/images/body-bg.png) 0 0 repeat-x #efefef;
}
ol,ul {
list-style:none;
}
blockquote,q {
quotes:none;
}
blockquote:before,blockquote:after,q:before,q:after {
content:none;
}
h1 {
margin-bottom:20px;
font-size:36px;
line-height:40px;
color:#58585a;
font-weight:700;
}
h2 {
padding-bottom:9px;
border-bottom:1px solid #e5e5e5;
font-size:18px;
line-height:30px;
color:#58585a;
font-weight:700;
margin:40px 0 10px;
}
h3 {
margin-bottom:3px;
font-size:14px;
line-height:20px;
color:#58585a;
font-weight:700;
}
h4 {
font-size:12px;
font-weight:700;
color:#58585a;
line-height:20px;
}
ol {
list-style:decimal;
margin:0 0 20px 16px;
}
strong {
color:#4a4a4a;
}
.subheading {
margin-bottom:40px;
font-size:16px;
line-height:24px;
}
h1.small {
font-size:26px;
line-height:36px;
}
#container {
width:960px;
margin:0 auto;
padding:0 0 40px;
}
pre {
border-left:2px solid #00afd8;
background:url(/assets/img/pre-bg.png);
font-size:12px;
line-height:20px;
width:620px;
overflow:auto;
overflow-y:hidden;
margin:0;
padding:0;
}
code {
display:block;
margin:0 0 0 10px;
}
header{
z-index:100;
margin-bottom:-30px;
width:100%;
height:100px;
}
header h1{
font-family: 'Springsteel Lig', arial, serif;
}
h1#logo,#logo a {
display:block;
left:0;
top:30px;
text-indent:-99999px;
width:193px;
height:41px;
margin:0;
}
/* Main Menu */
#mainMenu{
height:50px;
margin:0 0 15px 0px;
background-color:#6a6a6a;
-moz-border-radius:3px;
-webkit-border-radius:3px;
}
#mainMenu ul{
display:inline;
-webkit-border-bottom-right-radius:2px;
-webkit-border-bottom-left-radius:2px;
-moz-border-radius-bottomright:2px;
-moz-border-radius-bottomleft:2px;
}
#mainMenu ul li{
margin-left:0px;
width:120px;
height:56px;
display:inline;
position:relative;
}
#mainMenu li a {
float:left;
display:block;
text-decoration:none;
width:120px;
height:35px;
font-size:13px;
line-height:45px;
text-align:center;
color:#fff;
text-transform:uppercase;
padding-top:-4px;
margin:0px;
}
#mainMenu li a:hover, #mainMenu li a:active{
text-decoration:none;
background-color:#7a7a7a;
color:#fff;
width:120px;
height:50px;
-webkit-border-top-left-radius:2px;
-webkit-border-bottom-left-radius:2px;
-moz-border-radius-topleft:2px;
-moz-border-radius-topleft:2px;
}
#mainMenu .signup{
background-color:#69c21c;
height:50px;
margin-left:360px;
-webkit-border-top-right-radius:2px;
-webkit-border-bottom-right-radius:2px;
-moz-border-radius-topright:2px;
-moz-border-radius-bottomright:2px;
}
#mainMenu .signup:hover{
background-color:#00afd8;
}
/*mainMenu Sub Menu */
#mainMenu ul li ul{
display:none;
background-color:#7a7a7a;
}
#mainMenu ul li:hover ul{
text-transform:none;
display:block;
position:absolute;
width:115px;
top:50px;
right:-37px;
}
#mainMenu ul li:hover ul a{
float:left;
margin:0 0 0 -35px;
line-height:35px;
width:150px;
height:35px;
border:none;
font-size:12px;
text-align:left;
text-transform:none;
}
#mainMenu ul li ul li a:hover{
width:152px;
height:30px;
font-weight:bold;
margin-left:-38px;
line-height:35px;
}
footer{
clear:both;
border-top: 1px solid #d3d3d3;
width:100%;
height:50px;
}
#sales {
width:160px;
height:30px;
float:right;
margin-top:-140px;
margin-right:215px;
}
/*Sales */
#sales p{
font-weight:bold;
text-align:center;
line-height:45px;
}
/*Search Bpx */
#searchBox{
float:right;
margin-top:-125px;
}
#searchBoxForm{
margin-top:10px;
}
#searchBoxForm .search {
font-size: 11px;
color: #fff;
padding: 6px;
border: 1px solid #b8b8b8;
-moz-border-radius:2px;
border-radius:2px
}
#searchBoxForm .submit {
background-color:#00afd8;
width: 67px;
height: 26px;
border: none;
color: #fff;
cursor: pointer;
-moz-border-radius:2px;
border-radius:2px
}
#searchBoxForm .submit:hover,
#searchBoxForm .submit.hover {
background-color:#00afd8;
}
/* Billboard */
#billboard {
min-height:240px;
background:#00afd8;
font-size:16px;
line-height:24px;
color:#fff;
-webkit-border-top-left-radius:3px;
-webkit-border-top-right-radius:3px;
-moz-border-radius-topleft:3px;
-moz-border-radius-topright:3px;
padding:34px 520px 60px 40px;
}
#billboard h1 {
font-family:arial;
margin-bottom:20px;
font-size:36px;
line-height:40px;
color:#fff;
}
#billboard a {
color:#fff;
text-decoration:underline;
}
#services {
background-color:#fff;
-webkit-border-bottom-right-radius:3px;
-webkit-border-bottom-left-radius:3px;
-moz-border-radius-bottomright:3px;
-moz-border-radius-bottomleft:3px;
}
#services a{
text-decoration:none;
}
#services h2 {
position:relative;
border:0;
background:url(/assets/img/sections/home/services-icons.png) 0 0 no-repeat;
margin:-40px 0 3px;
padding:0;
}
#services h2 a {
display:block;
color:#58585a;
padding:94px 0 0;
}
#services .service1 {
padding-left:20px;
border-left:0;
}
#services .service2 h2 {
background-position:-168px 0;
}
#services .service3 h2 {
background-position:-336px 0;
}
#services .service4 h2 {
background-position:-504px 0;
}
#services .service5 h2 {
background-position:-672px 0;
}
#services .service1,.service2,.service3,.service4,.service5{
float:left;
background-color:#fff;
border-left:1px solid #e5e5e5;
width:154px;
height:100%;
padding:0 18px 0 19px;
margin-bottom:10px;
}
#services img{
height:100px;
width:100px;
margin:0 auto;
}
#servicesBanner{
clear:both;
width:100%;
height:90px;
margin:15px 0 10px 0;
min-height:100%;
background-color:#e0e0e0;
}
#servicesBanner p{
padding:35px 0 0 8px;
font-size:18px;
color:#ccc;
}
/*Nav Content */
.subNavHeading{
color:#fff;
padding-top:10px;
margin:9px 0 15px 45px;
}
/*Inner Page CSS */
#innerPageLeftCol{
float:right;
width:220px;
min-height:100%;
margin:-10px 0 10px 0;
}
#innerPageContent{
background-color:#fff;
float:left;
width:720px;
min-height:100%;
margin-bottom:10px;
-webkit-border-bottom-right-radius:2px;
-webkit-border-bottom-left-radius:2px;
-moz-border-radius-bottomright:2px;
-moz-border-radius-bottomleft:2px;
-webkit-border-top-right-radius:2px;
-webkit-border-top-left-radius:2px;
-moz-border-radius-topright:2px;
-moz-border-radius-topleft:2px;
}
.boxOne{
background:url(../images/sidebarBox.png) no-repeat;
width:220px;
height:100%;
min-height:100%;
margin:10px 0 0 0;
-webkit-border-bottom-right-radius:2px;
-webkit-border-bottom-left-radius:2px;
-moz-border-radius-bottomright:2px;
-moz-border-radius-bottomleft:2px;
-webkit-border-top-right-radius:2px;
-webkit-border-top-left-radius:2px;
-moz-border-radius-topright:2px;
-moz-border-radius-topleft:2px;
}
.boxOne li{
margin:5px 0 0 0;
padding-top:5px;
}
.boxOne a{
text-decoration: none;
color:#00afd8;
}
.boxTwo{
background-color:#fff;
width:220px;
height:125px;
margin:15px 0 0 0;
-webkit-border-bottom-right-radius:2px;
-webkit-border-bottom-left-radius:2px;
-moz-border-radius-bottomright:2px;
-moz-border-radius-bottomleft:2px;
-webkit-border-top-right-radius:2px;
-webkit-border-top-left-radius:2px;
-moz-border-radius-topright:2px;
-moz-border-radius-topleft:2px;
}
.boxThree{
background-color:#fff;
width:220px;
height:125px;
margin:15px 0 5px 0;
-webkit-border-bottom-right-radius:2px;
-webkit-border-bottom-left-radius:2px;
-moz-border-radius-bottomright:2px;
-moz-border-radius-bottomleft:2px;
-webkit-border-top-right-radius:2px;
-webkit-border-top-left-radius:2px;
-moz-border-radius-topright:2px;
-moz-border-radius-topleft:2px;
}
#innerPageContent h1{
margin:30px;
}
#innerPageContent .innerPageSubHeading{
display:block;
font-size:16px;
margin:30px;
width:450px;
}
#innerPage .separator{
margin-top:20px;
padding-top:20px;
}
#innerPageContent p{
margin:30px;
}
#innerPageContent img{
float:right;
width:175px;
height:175px;
margin:30px;
padding:3px;
}
/*Packages Template */
#packageContainer{
width:320px;
list-style:none;
font-size:14px;
color:#000;
margin:0 auto;
}
#packageContainer .leftCol{
width:35%;
float:left;
margin-bottom:10px;
}
#packageContainer .leftCol li{
height:15px;
border-bottom:1px solid #ccc;
border-right:1px solid #ccc;
}
#packageContainer .rightCol{
width:35%;
float:left;
margin-bottom:10px;
}
#packageContainer .rightCol li{
height:15px;
text-indent:8px;
border-bottom:1px solid #ccc;
}
#packageContainer .orderButton{
float:left;
margin:0px 20px 20px 65px;
background:#00afd8;
font-family:Helvetica,arial,sans-serif;
font-size:12px;
color:#fff;
-moz-border-radius:3px;
-webkit-border-radius:3px;
padding:6px 5px;
}
#innerPageProducts{
clear:both;
width:100%;
height:90px;
margin:10px 0 10px 0;
min-height:100%;
background-color:#e0e0e0;
}
#innerPageProducts p{
padding:35px 0 0 8px;
font-size:18px;
color:#ccc;
}
/*Footer */
#nav-footer{
margin: 20px 0 0 0;
padding: 20px 0 20px 20px;
border-top: 1px solid lightGrey;
list-style: none;
font-size: 11px;
}
#nav-footer #col{
margin: 0 auto;
display:inline-block;
width:215px;
}
#nav-footer li{
margin:10px 0 0 -10px;
text-align:left;
}
#nav-footer li a{
text-decoration:none;
}
#nav-footer ul{
list-style:none;
}
#nav-footer .first{
text-decoration:none;
font-weight:bold;
padding-left:30px;
}
My menu seems to align fine in Chrome but when I open it in Firefox 5 I get why?
Answer 1:
I have tested on another computer in firefox 3.6 and get:
HTML:
<nav id="mainMenu">
<ul>
<li class="first">
Domains
<ul>
<li class="first">
Transfer my Domain
</li>
<li class="last">
Get A Domain Name
</li>
</ul>
</li>
</ul>
<ul>
<li class="">
Hosting
<ul>
<li class="first">
Website Hosting
</li>
<li class="">
Hosted CRM
</li>
<li class="last">
Transfer to HostOne
</li>
</ul>
</li>
</ul>
<ul>
<li class="has_current">
Email
<ul>
<li class="first">
Personal E-Mail
</li>
<li class="">
Business Email
</li>
<li class="last current">
Microsoft Hosted Exchange
</li>
</ul>
</li>
</ul>
<ul>
<li class="">
Support
</li>
</ul>
<ul>
<li class="signup last">
SIGN UP
</li>
</ul>
</nav><!-- Main Menu End -->
CSS:
#mainMenu{
height:50px;
margin:0 0 15px 0px;
background-color:#6a6a6a;
-moz-border-radius:3px;
-webkit-border-radius:3px;
}
#mainMenu ul{
display:inline;
-webkit-border-bottom-right-radius:2px;
-webkit-border-bottom-left-radius:2px;
-moz-border-radius-bottomright:2px;
-moz-border-radius-bottomleft:2px;
}
#mainMenu ul li{
margin-left:0px;
width:120px;
height:56px;
display:inline;
position:relative;
}
#mainMenu li a {
float:left;
display:block;
text-decoration:none;
width:120px;
height:35px;
font-size:13px;
line-height:45px;
text-align:center;
color:#fff;
text-transform:uppercase;
padding-top:-4px;
margin:0px;
}
#mainMenu li a:hover, #mainMenu li a:active{
text-decoration:none;
background-color:#7a7a7a;
color:#fff;
width:120px;
height:50px;
-webkit-border-top-left-radius:2px;
-webkit-border-bottom-left-radius:2px;
-moz-border-radius-topleft:2px;
-moz-border-radius-topleft:2px;
}
#mainMenu .signup a{
background-color:#69c21c;
height:50px;
margin-left:360px;
-webkit-border-top-right-radius:2px;
-webkit-border-bottom-right-radius:2px;
-moz-border-radius-topright:2px;
-moz-border-radius-bottomright:2px;
}
#mainMenu li .signup a:hover{
background-color:#00afd8;
}
/*mainMenu Sub Menu */
#mainMenu ul li ul{
display:none;
background-color:#7a7a7a;
}
#mainMenu ul li:hover ul{
text-transform:none;
display:block;
position:absolute;
width:135px;
top:50px;
right:-55px;
}
#mainMenu ul li:hover ul a{
float:left;
margin:0 0 0 -35px;
line-height:35px;
width:150px;
height:35px;
border:none;
font-size:12px;
text-align:left;
text-transform:none;
}
#mainMenu ul li ul li a:hover{
width:170px;
height:30px;
font-weight:bold;
margin-left:-35px;
line-height:35px;
}

OK, I didn't see exactly what you were seeing, but I did see that it was a bit messed up in FF. I made some changes to a couple of your CSS statements, and it was working in Chrome and FF. Here is what I did:
Changed "#mainMenu ul li" removed "display: inline;" added "float: left; list-style: none;"
#mainMenu ul li
{
margin-left:0px;
width:120px;
height:56px;
position:relative;
float: left;
list-style: none;
}
Added "#mainMenu .signup" with a "float: right;"
#mainMenu .signup
{
float: right;
}
Removed "margin-left: 360px;" from "#mainMenu .signup a"
#mainMenu .signup a
{
background-color:#69c21c;
height:50px;
-webkit-border-top-right-radius:2px;
-webkit-border-bottom-right-radius:2px;
-moz-border-radius-topright:2px;
-moz-border-radius-bottomright:2px;
}
Now since I am using floats in your nav bar you will probably want to put a clear div after the closing nav tag to clear the floats and start a new div normally.
<div style="clear: both;"> </div>

We Keep Coding

html mysql json google-apps-script actionscript-3 ms-access google-chrome google-maps reporting-services sql-server-2008

IE8 CSS Menu Fix - html

Adding a valid doctype fixes this for IE8, for example: <!DOCTYPE html> Oterwise IE will be rendering the page in Quirks mode and the CSS child selector ul#mrmenu li:hover>.submenu that you use to show the menu will not work. Note: CSS descendant selectors will still work in Quirks Mode.

Related

resize navigation bar with image in middle?

Why did my padding get removed from my logo?

Black space when I activate drop down menu

creating navigation bar - position two li elements next to each other

Cross Browser Display Issue

Categories

Resources