Every1,
I am building a website for an organization that still only uses IE7. When creating this drop down menu on my laptop, the menu works without a problem. However, when trying it for the first time on a IE7 browser, it does not work.
<!doctype html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="./menu.css">
<link rel="stylesheet" type="text/css" href="./styles.css">
<title>Title</title>
</head>
<body>
<header>
<div id="logo">
<img src="Crest.png">
</div>
<p id="name">Somename</p>
<p id="motto">MyMotto</p>
</header>
<nav id="navigation">
<ul>
<li id="menu">Home</li>
<li id="menu">Pubs
<ul id="subMenu">
<li>Book 1</li>
<li>Book 2</li>
</ul>
</li>
<li id="menu">Links to Website
<ul id="subMenu">
<li>Link 1</li>
<li>Link 2</li>
</ul>
</li>
<li id="menu">Departments</li>
<li id="menu">References
<ul id="subMenu">
<li>Ref 1</li>
<li>Ref 2</li>
</ul>
</li>
<li id="menu">Links
<ul id="subMenu">
<li>More 1</li>
<li>More 2</li>
</ul>
</li>
<li id="menu">Forms
<ul id="subMenu">
<li>Form 1</li>
<li>Form 2</li>
</ul>
</li>
<li id="menu">Orders</li>
<li id="menu">Status</li>
</ul>
</nav>
</body>
Code for the menu.css
/* #navigation */
ul {
list-style:none;
padding:0px;
margin:0px;
}
ul#subMenu a:hover { color: #FF0; font-weight: bold;}
#navigation {
margin-top: 20px;
float: left;
}
#navigation ul, #navigation li {
list-style: none;
padding: 0;
margin: 0;
display: inline;
background-color: #30C;
/* box-shadow: #111 3px 3px 4px; */
}
li#menu { box-shadow: #111 3px 3px 4px; }
ul#subMenu { box-shadow: #111 3px 3px 4px; }
#navigation ul li {
float: left;
position: relative;
}
#navigation ul li a {
display: block;
padding: 3px 20px;
margin: 1px;
font-size: 12px;
white-space: nowrap;
color: #FFF;
text-decoration: none;
font-size: 16px;
}
#navigation ul ul {
position: absolute;
top: -99999px; /* Remove them out of viewport */
left: 0;
opacity: 0; /* Hide sub level, we will use this in transition */
-webkit-transition: opacity .4s ease-in-out;
-moz-transition: opacity .4s ease-in-out;
-o-transition: opacity .4s ease-in-out;
transition: opacity .4s ease-in-out;
z-index: 497;
background: #30C;
padding: 2px;
border: 1px solid #444;
border-top: none;
box-shadow: #111 0 3px 4px;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
}
#navigation ul ul ul {
position: absolute;
top: -99999px;
left: 100%;
border-radius: 6px;
border: 1px solid #444;
background-color: #FFF;
}
#navigation ul li:hover>ul {
opacity: 1;
position: absolute;
top: 99%;
left: 0;
}
#navigation ul ul li:hover>ul {
opacity: 1;
position: absolute;
top: 0%;
left: 100%;
}
Code for the styles.css
body {
width: 900px;
margin: 0 auto;
padding: 0;
background-color: #006;
}
#font-face {
font-family: Cowboys;
src: url('Bleeding_Cowboys.ttf');
}
#logo {
margin-top: 20px;
padding: 0;
float: left;
}
#name {
float: left;
font-size: 85px;
margin: 0;
margin-top: 20px;
padding: 0;
color: #FC0;
font-family: Cowboys;
position: relative;
left: 40px;
}
#motto {
float: left;
font-size: 25px;
margin: 0;
padding: 0;
position: relative;
left: -460px;
top: 160px;
color: #FC0;
font-family: Cowboys;
font-style: italic;
}
The above code on IE7 does not even display the properties of a horizontal menu, instead it show it as vertical menu displaying all sub-menus and the font-face above also does not work.
What am I doing wrong?
Thanks.
Others have pointed out the <nav> tag not being supported in IE7. However, issues go beyond that. IE7 does not support HTML5 and your page is entirely HTML5 - the Doctype is inappropriate, the header tag is not supported, the nav tag is not supported.
There are javascript lubraries you can include to help push older browser into understanding HTML5.
Modernizer
HTML5 Shiv
In addition, some pre-constructed frameworks, such as HTML5 Boilerplate may help support older browsers as well.
If you are constructing primarily for IE7 you may want to stick to xHTML or HTML4 and CSS2.
ie7 doesn't know what nav is....you should use html5shiv.js to include it in the document, then add nav{display:block} for starters
nav doesnt work for ie7 and below use
<!DOCTYPE html>
at the top of your header area
Related
I have a logo image on the upper left side of the site and want my nav to show on the upper right side of the site. The nav is showing on the right side of the page but instead of being parallel to the logo it is below it even thought the logo is on the left side. Any idea what I am missing in the code below that is preventing the nav from moving up.
#charset 'UTF-8';
html,
html * {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: arial, sans-serif;
<!-- font-size: 1vw;>
background: white;
}
img {
width: 100%;
max-width: 100%;
height: auto;
vertical-align: middle;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
a, a:visited {
color: inherit;
}
header {
position: fixed;
padding: 1.5em;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
}
.site-logo {
width: 30%;
max-width: 30%;
position: relative;
display: block;
}
.site-logo img {
width: 22em;
}
.logo {
opacity: 1;
}
.site-nav {
position: relative;
float: right;
z-index: 400;
top: 0;
left: 0;
display: block !important;
width: 68%;
padding: .75em 1em 0 0;
opacity: .95;
background: none;
}
.site-nav ul {
list-style-type: none;
margin: 0;
text-align: right;
}
.site-nav ul li {
display: inline-block;
margin-bottom: 0;
margin-left: 1.5em;
}
.site-nav ul li a {
font-size: .85em;
padding-bottom: .5em;
text-decoration: none;
letter-spacing: .15em;
text-transform: uppercase;
color: #000000;
-webkit-transition: color .3s;
transition: color .3s;
}
.site-nav ul li a:hover {
outline: none;
border-bottom: 1px solid black;
}
HTML
<header>
<!-- Logo -->
<a class="site-logo">
<img class="logo" src="images/SBI Logo.png" alt=""/>
</a>
<!-- Navigation Menu -->
<nav class="site-nav">
<ul>
<li>Home</li>
<li>Rooms</li>
<li>Gift Certificates</li>
<li>About Us</li>
<li>Things To Do</li>
<li>Contact Us</li>
<li>Blog</li>
</ul>
</nav>
</header>
enter image description here
You are getting bogged down in the style sheet and using EM too, it would be much easier for you to use PIXELS instead of EM to position your elements.
<style>
.mysitelogo
{
margin-top: 16px;
width: 458px;
height: 114px;
}
.mysitenav
{
float: right;
padding: 8px;
opacity: .95;
}
</style>
<header>
<!-- Logo -->
<img class="mysitelogo" src="logo.gif" alt="" />
<!-- Navigation Menu -->
<nav class="mysitenav">
<ul>
<li>Home</li>
<li>Rooms</li>
<li>Gift Certificates</li>
<li>About Us</li>
<li>Things To Do</li>
<li>Contact Us</li>
<li>Blog</li>
</ul>
</nav>
</header>
Using the code above you can get the layout you desire, THEN fine tune your layout in the stylesheet.
Some times it is easier to break the bigger problem down into basic parts.
Read this page for better understanding of using EM which is relative to FONT SIZE
https://www.w3schools.com/CSSref/css_units.asp
I'm trying to create a very basic page of weblinks, arranged into 7 columns. Some of the links have sub-links. What I want to happen is when the mouse is held over a link that has sub-links, the sub-links are to appear just below it and just to the right (as shown in menu 2.2)
I've cobbled the code together from various websites (I'm not a coder!), and I'm almost there I think, but if you take a look at the jsfiddle you will see there is a problem with the 3rd column (I've cut the menu down in the example).
HTML
<div id="container">
<ul id="menu">
<li><h3>Menu 1</h3></li>
<li>1.1</li>
<li>1.2</li>
</ul>
<ul id="menu">
<li><h3>Menu 2</h3></li>
<li>2.1</li>
<li>2.2
<ul id="sub1">
<li>2.2.1</li>
<li>2.2.2</li>
<li>2.2.3</li>
</ul>
</li>
</ul>
<ul id="menu">
<li><h3>Menu 3</h3></li>
<li>3.1
<ul id="sub2">
<li>3.1.1</li>
<li>3.1.2</li>
<li>3.1.3</li>
</ul>
</li>
<li>3.2</li>
<li>3.3</li>
</ul>
CSS
a {
font-family: arial, helvetica, sans-serif;
font-size: 12px;
font-weight: 700;
text-decoration:none;
color:black;
display:block;
padding-top: 17px;
padding-bottom: 17px;
outline: 0;
}
a:visited {
color:black;
background-color:#fff;
}
a:hover {
color:#fff;
background-color:#302403;
display:block;
}
ul {
padding: 10px 0px 0px 0px;
margin: 1px;
display: inline-block;
text-align: center;
position:relative;
list-style-type:none;
float: left;
width: 160px;
background-color: #fff;
height: 400px;
}
ul#sub1 {
position: relative;
left: 30px;
top: -15px;
visibility: hidden;
height: auto;
padding: 0;
}
ul#sub2 {
position: relative;
left: 30px;
top: -15px;
visibility: hidden;
height: auto;
padding: 0;
}
ul#menu li:hover #sub1 {
visibility: visible;
height: auto;
z-index: 1;
border: 2px solid;
padding: 0;
}
ul#menu li:hover #sub2 {
visibility: visible;
height: auto;
z-index: 1;
border: 2px solid;
padding: 0;
}
http://jsfiddle.net/87u27aw0/
I can get it to work if I give each sub-menu it's own absolute position, but I'm sure there is a better way than how I'm doing it - using relative maybe? Oh, and it has to work in IE8 onwards.
Thanks in advance.
Graybags
Right now the parent menu has an opacity shift on hover, this is being transferred to the sub menu (current & previous) as well. I want the sub menu to have a clear background so that the opacity band of the parent is the only thing that is visible. Is there a way to use an li class for the submenu that makes it exempt from the li class that is governing the parent. I've been trying different things but can't seem to make it work properly.
Demo
HTML
<div>
<ul id="mainmenu">
<li class="liHome">
<a class="maintextcolour" href="#item-x1y1" id="Home" rel=
"none">INFO</a>
</li>
<li class="liServices">
<a class="maintextcolour" href="#item-x1y2" id="Services" rel=
"SubMenuY2">EXHIBITIONS</a>
<ul class="submenu" id="SubMenuY2">
<li class="sub1">
<a class="maintextcolour" href="#">CURRENT</a>
</li>
<li class="sub1">
<a class="maintextcolour" href="#">PREVIOUS</a>
</li>
</ul>
</li>
<li id="liEnvironment">
<a class="maintextcolour" href="#item-x1y3" id="Environment"
rel="none">CV</a>
</li>
<li id="liCareer">
<a class="maintextcolour" href="#item-x1y4" id="Career" rel=
"none">NEWS</a>
</li>
<li id="liContact">
<a class="maintextcolour" href="#item-x1y5" id="Contact" rel=
"none">MORE</a>
</li>
</ul>
</div>
CSS:
#charset UTF-8;
/* CSS Document */
body {
background-color: #666;
background-size: 100%;
background-repeat: no-repeat;
}
#mainmenu {
margin: 0;
padding: 0;
list-style-type: none;
position: relative;
}
#mainmenu li {
clear: left;
position: relative;
}
#mainmenu a {
display: block;
overflow: hidden;
float: left;
width: 100%;
position: relative;
opacity: 1;
-webkit-transition: all .4s ease-in-out;
padding-left: 20px;
}
#mainmenu li:hover a {
background-position: 0 0;
background-color: clear;
background-color: rgba(255,255,255,0.5);
width: 100%;
opacity: 0;
-webkit-transition: none;
}
#mainmenu li.active a {
background-position: 0 0;
background-color: clear;
width: 100%;
}
.submenu {
list-style-type: none;
float: left;
display: none;
position: absolute;
left: 135px;
top: 0;
width: auto;
}
#mainmenu li a:hover + .submenu,.submenu:hover {
display: block;
}
.submenu li {
display: inline-block;
clear: none !important;
}
.submenu li a {
float: right;
margin-left: 10px;
}
.maintextcolour {
font-family: Arial, Helvetica, sans-serif;
font-size: 24px;
color: #FFF;
text-decoration: none;
}
.maintextcolour:hover {
font-family: Arial, Helvetica, sans-serif;
font-size: 24px;
color: #0FF;
text-decoration: none;
}
.headertext {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #FFF;
text-decoration: none;
}
Here is the updated Fiddle link. I have just added color to the following css:
#mainmenu > li:hover > a {
background-position: 0 0;
background-color:clear;
color:#0fffff;
background-color:rgba(255,255,255,0.5);
width:100%;
\
opacity: 0;
-webkit-transition: none;
}
Hope you want this.
doing a project at uni and I've completely misread the brief, used HTML5 in my project and realised that I'm not allowed to do this. Oops!
My only problem is, I've tried to convert it to XHTML Strict 1.0 standards by using divs and it just isn't as easy as I thought.
I will only post up the nav section as that's what I need help with, no need for all the extra bits and bobs.
Before I post - just wanted to clarify the question:
This code is HTML5 compliant, I need it to be XHTML Strict 1.0 compliant but I can't get the CSS working with divs in place of the nav function.
Here is the code:
<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="style\main.css" />
<title>Wessex Round Table of Investors</title>
</head>
<body>
<div id="whole">
<div id="header">
<img class="logo" src="images\wrtilogo.gif" alt="WRTI Logo" />
</div>
<div id="navbar">
<div id="container">
<nav id="menu">
<ul>
<li>Home</li>
<li>Link
<ul>
<li>Sublink</li>
<li>Sublink</li>
<li>Sublink</li>
<li>Sublink</li>
</ul>
</li>
<li>Link
<ul>
<li>Sublink</li>
</ul>
</li>
<li>Link
<ul>
<li>Sublink</li>
</ul>
</li>
<li>Link</li>
</ul>
</nav>
</div>
</div>
</div>
</body>
</html>
aaaand here is the CSS
div.whole {
margin-left: 15%;
margin-right: 15% }
div.header {
width: 100%; }
div.navbar {
position: absolute;
display: block;
width: 90%;
margin-left: auto;
margin-right: auto;
text-align: center }
img.logo {
display: block;
margin-left: auto;
margin-right: auto }
#content
#footer
#navigation {
width: 800px;
margin: 30px auto;
background: #fff;
box-shadow: 0 0 20px #8493A6;
overflow: auto;
}
nav#menu {
margin: 10px 30px 30px;
padding: 0;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
text-align: center; /*this is the first bit that centers the menu*/
font: 100%/40px Verdana, Geneva, sans-serif
}
nav#menu ul {margin: 0;}
nav#menu ul li {
margin: 0;
padding: 0;
display: inline-block; /*this is the second bit that centers the menu*/
position: relative;
list-style: none;
background: #fff;
}
nav#menu ul li a {
padding: 1px 20px;
display: block;
font-size: 17px;
font-weight: 300;
color: #cc0000;
text-decoration: none;
}
nav#menu ul li:hover {background: #fff;}
nav#menu ul ul {
width: 160px;
margin: 0;
padding: 0;
position: absolute;
top: 42px;
left: -999px;
border: 1px solid #ccc;
border-radius: 3px 3px 3px 3px;
box-shadow: 0 0 0 transparent;
}
nav#menu ul li:hover ul { /*this bit centers the dropped ul relative to the parent li*/
margin: 0 0 0 -80px;
left: 50%;
}
nav#menu a:hover {color: #540000;}
Often, you're using IDs in your HTML, but styling based on classes.
e.g. If you're going to say
div.navbar {
...
}
That will apply to:
<div class="navbar">...</div>
not
<div id="navbar">...</div>
after having read many helpful hints on this side I am full of hope that I can find an answer to my problem here.
The web page I'm working on contains a horizontal menu with button background-imgs.
Testing it on browsers after validation it looks fine on FF, Chrome and Opera. After upload i discovered that online Opera does not show part of the buttons while the other browsers have no difference. ????
Thanks in advance for any ideas about this issue
In addition to my above mail...
trying, testing, biting my nails I discovered that the odd rendering of the menu happens only on 2 of 5 links... one named "commonmail.html" and the other linking back to the "index.html". When I choose fantasy names or just type href="#" the css is rendered properly.I added the links to 2 screenshots to show the problem:
menu with fantasy link names
menu with normal link names
The mark-up is this one:
<ul>
<li><a class="direkt" href="#">home</a></li>
</ul>
<ul>
<li class="firstlevel">our houses
<ul>
<li>in nikiti</li>
<li>in kastri</li>
<li>new projects</li>
</ul>
</li>
</ul>
<ul>
<li><a class="direkt" href="nikiti_info.html" title="Informations about Nikiti and the peninsula of Sithonia">nikiti</a></li>
</ul>
<ul>
<li class="firstlevel">informations
<ul>
<li>company</li>
<li>buying property in greece</li>
</ul>
</li>
</ul>
<ul>
<li><a class="direkt" href="commonmail.html" title="Informations about Nikiti and the peninsula of Sithonia">contact</a></li>
</ul>
</nav>
And the css is this one:
nav {
width: 704px;
padding: 0 0 0 16px;
float: left;
}
nav ul {
float: left;
width: 138px;
list-style-type: none;
}
nav li.firstlevel {
font-size: 93%;
font-weight:bold;
text-align: center;
padding-top: 17px;
padding-bottom: 17px;
color: #fff;
border: 1px solid transparent; /*--erforderlich für IE 7--*/
background: url(../pic/button110.png) 50% 50% no-repeat;
}
nav a {
text-decoration: none;
display: block;
font-size: 90%;
text-align: left;
padding-left: 6px;
padding-top: 6px;
padding-bottom: 6px;
background: url(../pic/sublistbg.png) 0 0 repeat-x;
color: #fff;
}
nav a:hover {
color: #454545;
background: url(../pic/sublisthoverbg.png) 0 0 repeat-x;
}
nav li {
position: relative;
}
nav ul ul {
position: absolute; top:50px; left: 30px;
width: 170px;
z-index: 2;
display: none;
}
nav ul li:hover ul {
display: block;
}
nav ul a.direkt:link {
font-size: 93%;
font-weight: bold;
padding-top: 17px;
padding-bottom: 17px;
padding-left: 0;
text-align: center;
color: #fff;
border: 1px solid transparent;
background: url(../pic/button110.png) 50% 50% no-repeat;
}
nav ul a.direkt:hover {
color: #454545;
background: url(../pic/button110active.png) 50% 50% no-repeat;
border: 1px solid transparent;
}