tab not showing in IE 6, working fine in others
http://jsbin.com/ehege/2
how to solve?
<style type="text/css">
*
{
margin:0;
padding:0;
}
li
{
list-style:none;
}
a
{
text-decoration:none;
font-size:14px;
}
#tabcontainer
{
height:62px;
position:relative;
margin: 2em;
font-size: 12px;
}
#tabitemscontainer1 > li > a
{
-moz-border-radius: 7px 7px 0 0;
background: #F3F8C6;
float: left;
margin-right: 2px;
padding: 5px 10px;
border: 1px solid #EABF4A;
/* Added this */
position: relative;
top: 0;
/* end */
}
#tabcontainer ul li li.selected a,#tabitemscontainer1 > li.selected > a
{
color:#AE4329;
font-weight:700;
}
#tabitemscontainer1 > li.selected
{
border-bottom: 1px solid #F3F8C6;
}
#tabitemscontainer1 > li.selected > a
{
/* Added this */
position: relative;
top: 0px;
z-index: 1;
border-bottom: 0px;
/* end */
}
ul.level2
{
background: #F3F8C6;
border:1px solid #EABF4A;
left:0;
position:absolute;
top:28px;
width:463px;
padding:6px;
z-index: 0;
}
#tabcontainer ul li {float:left}
#tabcontainer ul li li
{
float:left;
padding:0 15px 0 4px;
}
</style>
</head>
<body>
<div class="tabcontainer" id="tabcontainer">
<ul id="tabitemscontainer1">
<li class="selected" >
item 1
<ul class="level2">
<li>sub item 1</li>
<li>subitem 2</li>
</ul>
</li>
<li>item2</li>
</ul>
</div>
First of all, IE6 doesn't support the > selector at all.
Secondly, there is no reason to make the a inside the li float to the left. To be able to put padding and margin on the a make it display: inline-block.
Try changing that and remove other unnecessary rules (such as position, which should not be needed on a either) and see if that helps.
Related
So I've been trying to work on my website creation skills and was reading various tutorials concerning html/css developing. The problem I now have run into is that when I alter the size of my page the view gets incredibly altered. I was under the assumption that when the view changed it would keep it's structure but have a smaller view window (not the case).
Does the problem lie with me using percent values instead of pixels? Is there a better way to structure my design to make it responsive to window size alterations?
This is my HTML
<html>
<html lang="en">
<head>
<title> MyWebsite</title>
<link rel="stylesheet"type="text/css" href="style.css">
</head>
<body>
<div id="containerColumn1">
<div id="Fill1"> </div>
</div>
<div id="containerTopLogo">
<div id="FillTopLogo"> </div>
</div>
<div class="menu-wrap">
<nav class="menu">
<ul class="clearfix">
<li>Home</li>
<li>
Services <span class="arrow">▼</span>
<ul class="sub-menu">
<li> Option 1</li>
<li> Option 2</li>
<li> Option 3</li>
</ul>
</li>
<li>
Services2 <span class="arrow">▼</span>
<ul class="sub-menu">
<li> Option 1</li>
<li> Option 2</li>
<li> Option 3</li>
</ul>
</li>
<li> Contact Us</li>
<li> Site Map</li>
</ul>
</nav>
</div>
<div id="containerPicture">
<div id="headerPicture"> </div>
</div>
<div id="container">
<div id="header"> </div>
</div>
<div id="containerColumn2">
<div id="Fill2"> </div>
</div>
</body>
</html>
This is my style.css
body {
background: #FFFFFF url('body-bg.jpg');
}
.clearfix:after {
display:block;
clear:both;
}
/*COLUMNS TO CENTER PAGE*/
#containerColumn1 {
width:18.2%;
margin-top: 0%;
margin-left: 0%;
padding: 0;
border: 5px groove #000;
}
#Fill1 {
background: red;
height:100%;
}
#containerTopLogo {
width:61.3%;
margin-left:18.4%;
margin-top:-47.4%;
height:23%;
position: absolute;
border: 5px groove #000;
}
#FillTopLogo {
background: green;
height:100%;
}
#containerColumn2 {
width:18%;
margin-top: -49.82%;
margin-left: 80%;
height:100%;
position:absolute;
padding: 0;
border: 5px groove #000;
}
#Fill2 {
background: red;
height:100%;
}
/*Menu Outline*/
.menu-wrap {
width:50%;
box-shadow: 0px 1px 3px rgba(0,0,0,0.2);
background:#000000;
}
/* Height of menu (Home)(*MARGIN*) AND LEFT-RIGHT PLACEMENT(*WIDTH*)*/
.menu {
width: 61.5%;
margin:0%;
position: absolute;
left:19%;
top: 25%;
border-style: groove;
border-width: 5px;
border-color: #000000;
}
.menu li{
margin:0px;
list-style:none;
font-family:'Ek Mukta';
}
.menu a {
transition:all linear 0.15s;
color:#000000;
}
.menu li a:hover > a .menu .current-item a{
color:#FFF000;
}
.menu .arrow {
font-size:11px;
line-height:0%;
}
/* Top of the Page */
.menu > ul > li {
float:left;
display:inline-block;
position:relative;
font-size:19px;
}
/* Menu Item spacing (Vertical/Horizontal) */
.menu > ul > li > a {
/* Menu Spacing Vert/Hor */
padding:10px 30px;
display:inline-block;
text-shadow:0px 1px 0px rgba(0,0,0,0.4);
}
.menu > ul > li:hover > a, .menu > ul > .current-item > a{
background:#FFFFFF;
}
/* Bottom Level */
.menu li:hover .sub-menu {
z-index:1;
opacity:1;
}
.sub-menu {
width:100%;
padding:5px 0px;
position:absolute;
top:100%;
left:0px;
z-index:-1;
opacity:0;
transition:opacity linear 0.15s;
box-shadow: 0px 2px 3px rgba(0,0,0,0.2);
background:#FFFFFF;
border-style: groove;
border-width: 5px;
border-color: #000000;
}
.sub-menu li {
display:block;
font-size:16px;
}
.sub-menu li a {
padding:10px 30px;
display:block;
}
.sub-menu li a:hover, .sub-menu .current-item a{
background:#FFFFFF;
}
/*END OF MENU TOOLBAR*/
#containerPicture {
width:62%;
margin-top: -31.7%;
margin-left: 18.6%;
padding: 0;
border: 5px groove #000;
}
#headerPicture {
background: yellow;
height:20%;
}
#container {
width: 62%;
margin-top:-0.5%;
margin-left: 18.6%;
padding: 0;
border: 5px groove #000;
}
#header {
background: blue;
height: 50%;
}
I would like to state that I have used a drop down menu provided by Seb Kay. His website: http://inspirationalpixels.com/tutorials/creating-a-dropdown-menu-with-html-css. I only state this as a reference so that he is at least acknowledged for his craftsmanship.
Your problem comes from the vertical margin and padding rules in your css. This is a little counterintuitive but this rules, when defined with percentage, doesn't take as reference the height, but instead they take the width as reference, so all 4 margins are equal. Example:
If you have: margin: 5%, the top and left margin are the same and they don't depend on the height of the conteiner for the top and bottom margins and the with for the right and left.
For padding it is the same.
So, my solution: if you don't really need a percentage layout, I recomend you to use ems for the vertical margins and paddings. Otherwise, if you need to mantain proportions, you can use vh units. The vh units are like a percentage that refers not to the height of the parent but the height of the window, so it is great to mantain proportions on a page when you want to avoid scrolling and yet keep percentage.
I am creating a vertical navigation menu using ul and li I want to make span the full width of ul so I can have underline for each menu item (like this site (http://www.steffenallen.com/index.php))
However, there is a space in li that prevents it from spanning across the parent ul. Could someone tell me how the above website did it? Or, what I need to do?
<nav>
<ul class='menu'>
<li class="menuItem">
About
</li>
<li class="menuItem"> Album
<ul class="submenu">
<li class="submenu-Item">Nepal </li>
<li class="submenu-Item">Seattle</li>
<li class="submenu-Item">South Korea</li>
</ul>
</li>
<li class="menuItem"> Contact </li>
<!-- <li> </li> -->
</ul>
My CSS is
ul,li{
list-style: none;
display: block;
}
ul.menu{
width: 170px;
/*position: absolute;*/
/*width: 100%;*/
/*margin-left: -20px;*/
border: 1px solid orange;
}
ul.submenu{
/*position: absolute;*/
/*left: -999px;*/
/*visibility: hidden;*/
display: none;
}
li{
width:140px;
margin: 0;
padding: 0;
/*width:100%;*/
border-left: 1px blue solid;
border-right: 1px blue solid;
}
span{
display: block;
}
li a, li span {
/*width: 170px;*/
/*width: 100%;*/
border-bottom: #cbcbcb 1px solid;
}
li.menuItem, li.submenu-Item{
text-align: right;
margin: 1em 0em 1em 0em;
}
li.menuitem > a{
color: #808080;
}
li a:hover{
color: steelblue;
}
li.menuItem a.current{
background-color: orange;
}
ul.menu:first-child{
margin-top: 0
}
First things first, your CSS is not well-written and hence a little difficult to understand.
The main problem in your code happens to be the default CSS that is being applied. You can remove that as follows:
ul, li {
margin: 0;
padding: 0;
}
However, I'd suggest you simplify your CSS code as follows. This will still achieve what you are looking for all the while making your code more elegant and easily readable. Please see the code below :
ul, li {
margin:0px;
padding:0px;
}
ul.menu {
border: 1px solid Orange;
width:200px;
}
ul.menu li {
display:block;
list-style-type:none;
}
ul.menu li a {
border-bottom:1px solid #ccc;
display:block;
text-align:right;
text-decoration: none;
}
ul.menu li ul {
display:none;
}
ul.menu li:hover > ul {
display:block;
}
ul.menu li ul li:last-child {
border-bottom:none;
}
See this working below :
ul, li {
margin:0px;
padding:0px;
}
ul.menu {
border: 1px solid Orange;
width:200px;
}
ul.menu li {
display:block;
list-style-type:none;
}
ul.menu li a {
border-bottom:1px solid #ccc;
display:block;
text-align:right;
text-decoration: none;
}
ul.menu li ul {
display:none;
}
ul.menu li:hover > ul {
display:block;
}
ul.menu li ul li:last-child {
border-bottom:none;
}
<nav>
<ul class='menu'>
<li class="menuItem"> About
</li>
<li class="menuItem"> Album
<ul class="submenu">
<li class="submenu-Item">Nepal
</li>
<li class="submenu-Item">Seattle
</li>
<li class="submenu-Item">South Korea
</li>
</ul>
</li>
<li class="menuItem"> Contact
</li>
<!-- <li> </li> -->
</ul>
Hope this helps!!!
On the left side there is the default margin/padding of ULs, so just remove that. It's 40px and depends on browser if margin or padding is used.
ul, li {margin-left: 0; padding-left: 0;}
The space on the right side is caused by your widths, list has 170px, items just 140px.
http://jsfiddle.net/8q9chvbh/
<div class="header">
<div id="navigation">
<div class="center">
<div class="logo"></div>
<ul class="right">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
------------------------C S S--------------------------------
#navigation {
position:fixed;
display:block;
top: 0;
width: 100%;
height:35px;
padding-top: 15px;
-webkit-box-shadow: 0px 0px 8px 0px #000000;
background-color: rgba(1,1,1,0.8);
color:rgba(1,1,1,0.8);
border-bottom:1px solid black;
}
.center {width: 1000px; margin: 0 auto;}
div.logo {display:inline-block;
}
ul, li {
padding:0;
margin:0;
}
#navigation ul {
list-style: none;
float:right;
}
#navigation ul li {
display:inline;
}
#navigation a {
text-decoration:none;
font-size:14px;
padding: 0 15px;
color:white;
}
#navigation a:hover {
color: grey;
}
#content {
width: 800px;
margin: 0 auto;
margin-top: 80px;
}
an example would be like this
fiddle
you can modify the code for you
HTML:
<div class="containerc">
<div class="navbarc" id="navbarc">
<div class="username">
<!-- base menu -->
<ul>
<li onmouseover="showsubmenu()" onmouseout="hidesubmenu()"> <div id="menuname"> Menu </div>
<!-- actual menu -->
<ul>
<li> sub1 hover here
<!-- sub menu -->
<ul>
<li> submenu 2
</li>
<!-- for more submenu within sub menu add ul tags and li tags within that here -->
</ul>
</li>
<li>Logout
</li>
</ul>
</li>
</ul>
</div>
</div>
CSS:
.containerc>.navbarc { //setting the dimensions and font properties
padding-left:15px;
padding-right:15px;
padding-top:0px;
margin-left:auto;
margin-right:auto;
font-size:18px;
font-style:bold;
z-index:10;
}
.navbarc {
width:100%; //to occupy the full width of screen
height:45px;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #494846), color-stop(1, #0a0909));
border:1px solid #e7e7e7;
position:fixed; // this will take menu bar along the vertical scroll
color: white;
}
#navbarc ul {
margin: 0;
padding: 0;
list-style: none;
}
#navbarc a:link, #navbarc a:visited { //changing the style properties of anchor tags
color: white;
text-decoration: none; //removes the underline
}
#navbarc a {
display: block;
padding: 6px 8px;
}
#navbarc li {
float: left;
margin-right: 1px;
position: relative;
}
#navbarc li li { //for properties of submenu
width: 160px;
margin-top: 1px;
background-color: #494846;
}
#navbarc li:hover { //on hover change the background color
background-color: #6E6E6E;
}
#navbarc li li:hover {
background-color: #6E6E6E;
}
#navbarc ul ul { //for properties of submenu
position: absolute;
visibility: hidden;
font-size:15px;
}
#navbarc ul ul ul { //for properties of submenu within submenus
position: absolute;
left: 100%;
top: -2px;
border: solid 1px transparent;
}
#navbarc li:hover > ul { // on hover show the submenu
visibility: visible;
}
.menuname { //styling for base menu
display:inline-block;
padding-top:10px;
position:relative;
}
Javascript
$(document).ready(function(){
$("#navbarc ul ul").hide(); //to hide expanded menu initially
function showsubmenu() {
$("#navbarc ul ul").show(); //to show the list on function call
}
function hidesubmenu() {
$("#navbarc ul ul").hide(); // to hide the list on function call
}
});
Hi Please help me on this issue.
Issue: dropdown values of the menu is shown in other menu (it is not in-line with menu).
Example: Dropdown values of Home menu is Home-1, Home-2, Home-3 and it will shown under National parties menu. How can I show appropriately under the right menu
Demo: http://jsfiddle.net/shrikanth/Sv79m/
<div id="menu">
<ul>
< li>Home<ul>
<li>Home-1</li>
<li>Home-2</li>
<li>Home-3</li>
</ul></li>
<li ><a href="aboutus.html">National Parties<ul>
<li>BJP</li>
<li>Congress</li>
<li>CPM</li>
</ul></a></li>
<li><a href="services.html">Services<ul>
<li>TV</li>
<li>Cell</li>
<li>Radio</li>
</ul></a></li>
<li>Contact Us
<ul>
<li>India</li>
<li>USA</li>
<li>SAUS</li>
</ul>
</li>
</ul>
</div>
CSS
#menu {
width: 550px;
height: 35px;
font-size: 16px;
font-family: Tahoma, Geneva, sans-serif;
font-weight: bold;
text-align: center;
text-shadow: 1px 2px 1px #333333;
background-color: #8AD9FF;
border-radius: 8px;
}
#menu ul {
height: auto;
padding: 8px 0px;
margin: 0px;
}
#menu li {
display: inline;
padding: 20px;
}
#menu ul li a {
text-decoration: none;
color: #00F;
padding: 8px 8px 8px 8px;
}
#menu a:hover {
color: #F90;
background-color: #FFF;
}
#menu ul li ul{
display:none;
position:absolute;
top:31px;
background-color:red;
}
#menu ul li:hover ul{
display:inline-block;
height:auto;
width:135px;
}
#menu ul li ul:before{
content: '';
border-color: transparent transparent red transparent;
border-style: solid;
border-width: 10px; /* The border on the drop down box */
position: absolute;
top: -20px;
left: 37%;
margin-left:10px;
}
http://jsfiddle.net/Sv79m/1/
Give #menu li a position of relative:
#menu li {
display: inline;
padding: 20px;
position:relative;
}
Adjust a little the absolute positioning with left:0 :
#menu ul li ul{
display:none;
position:absolute;
top:51px;
background-color:red;
left:0;
}
Edit:
Also, to solve the overlapping links, add this:
#menu ul li ul li{
display:block;
padding:5px;
}
http://jsfiddle.net/Sv79m/2/
Also, you had some unclosed tags, I closed them and now it's much better:
http://jsfiddle.net/Sv79m/3/
<a href="aboutus.html">National Parties<ul>
^^CLOSE ME!
It's all down to the positioning of the containing element. If you use position: relative; it allows you to position elements absolutely inside of it.
Here's a tutorial on creating a dropdown navigation, it explains about the positioning and structure. This should help - CSS 3 navigation menu
So i have an issue with a CSS dropdown menu being displayed wrong in IE. In other browsers it works like it should.
<body>
<div id="container">
<header>
<div id="hlogo">
title
</div>
<nav id="hmenu">
<ul>
<li>
menu1
</li>
<li>
menu2
<div id="items" class="hiddenMenu">
submenu1
submenu2
submenu3
submenu4
</div>
</li>
<li>
menu3
</li>
<li>
menu4
</li>
</ul>
</nav>
</header>
<section id="container-body">
<div id="content">
</div>
</section>
</div>
So this is my complete HTML. It has a layout provided by the following css.
/* layout styles */
*{margin:0;padding:0;font-family:Arial;}
header{overflow:hidden;}
body{background-color:#cc3333;}
a {display: inline-block;font-weight: bold;text-decoration:none;}
footer {
display:block;
position:relative;
width:100%;
}
footer > #disclamer {
margin-left: auto;
margin-right: auto;
width: 200px;
padding-bottom:5px;
font-size:small;
font-weight: bold;
}
#container{
background-color:#ffffff;
margin:auto;
min-width:756px;
width:60%;
overflow:hidden;
border:solid 2px #666666;
margin-top:10px;
margin-bottom:10px;
box-shadow:0 1px 3px rgba(0,0,0,0.6);
}
#hlogo {float:left;height:105px;width:181px;padding:10px;}
#hlogo a{background-position: 0px 0px;float:left;display:inline;height:105px;text-indent:-999999em;width:181px;}
#hlogo a{background-image:url('../images/logo.png');background-repeat:no-repeat;overflow:hidden;}
#hmenu{margin-top:45px;padding:10px;}
nav {
list-style:none;
display:inline;
float:right;
}
nav ul{
list-style: none;
text-align:center;
background-color:#666666;
float:left;
}
nav ul li {
width:128px;
float:left;
display:inline-block;
}
nav ul li:hover{
background-color:#cc3333;
cursor:pointer;
}
nav ul li a {
color:#ffffff;
padding:10px;
}
nav ul {
background: #222 url('../images/overlay.png') repeat-x;
color: #fff;
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
cursor: pointer
}
section {margin:10px;}
#container > header {display:block;}
#container-body {
background-color:#ececec;
height:600px;
display:block;
overflow:auto;
}
#container-body > #content {
margin: 10px;
height:95%;
position:relative;
}
.hiddenMenu
{
position:absolute;
z-index: 150;
background: #222 url('../images/overlay.png') repeat-x;
color: #fff;
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
cursor: pointer;
width: inherit;
}
.hiddenMenu > a
{
position:relative;
text-align: left;
clear:both;
font-size:0.75em;
}
nav li .hiddenMenu > a
{
display:none;
}
/*nav li:hover .hiddenMenu > a
{
display:block;
}*/
nav li .hiddenMenu > a:hover
{
background-color:#cc3333;
cursor:pointer;
border: 1px black solid;
}
This is the full CSS.
This is the CSS i use. Now in firefox it works as it should. The menu is show when i hover the menu2 item. On IE it shows the first submenu item (submenu1) and then it is cleared so i can't even click it.
I can't see what i'm doing wrong so if you can help me i would appreciate it. Thanks!
edit: added code.
The header tag has an overflow:hidden attribute; if i set that to visible it will show the complete menu but will mess up my layout completely. Is there a way around it or am i doing something wrong?
Also, i have a jquery script to set the display on the menu to none/block accordingly but in IE if i hover on the submenu items the menu will still be hidden. Why does this happen?
In my experience IE gets a bit buggy when you don't set the positions of an absolute positioned object. Like top: 0 and left: 0 for instance.
Edit:
Also, parent of the absolute positioned object should have position: relative; if the position should be using the parent dimensions as a starting point.
Edit2:
li:hover doesn't work in IE6 I think. Can't remember about IE7. One of them will only accept a:hover, and browsers below maybe none of them. jQuery solves things like that though.
Edit3:
I don't know what the nav stuff is, I haven't jumped to HTML5 so I don't know if it's relevant later. But anyway I've made something that works of your code.
Script (jquery):
$(document).ready(function () {
$('#hmenu ul li').hover(function () {
$(this).children('div').css('display', 'block');
},
function () {
$(this).children('div').css('display', 'none');
});
});
CSS:
#hmenu {
list-style: none;
display: inline;
float: right;
}
#hmenu ul {
list-style: none;
text-align: center;
background-color: #666666;
float: left;
}
#hmenu ul li {
width: 128px;
float: left;
position: relative;
display: inline-block;
}
#hmenu ul li:hover {
background-color: #cc3333;
cursor: pointer;
}
#hmenu ul li a {
color: #ffffff;
padding: 10px;
}
#hmenu ul {
background: #222 url('../images/overlay.png') repeat-x;
color: #fff;
text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);
cursor: pointer
}
.hiddenMenu {
display: none;
position: absolute;
top: 60;
left: 0;
z-index: 150;
background: #222 url('../images/overlay.png') repeat-x;
color: #fff;
text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);
cursor: pointer;
width: inherit;
}
(sorry for the formatting, bit new to this, but you can apply source formatting in your editor I guess. I changed the navs to have the id and changed the HTML nav to be div. That's it.
HTML:
<div id="hmenu">
<ul>
<li>
menu1
</li>
<li>
menu2
<div id="items" class="hiddenMenu">
submenu1
submenu2
submenu3
submenu4
</div>
</li>
<li>
menu3
</li>
<li>
menu4
</li>
</ul>
</div>
You cannot have a tag named nav change it to div and try again.