I'm using jQuery Mobile to create this navbar but I can't align the buttons to the center.
Here is my code:
<footer data-role="footer" data-position="fixed" data-theme="b">
<nav data-role="navbar">
<ul>
<li>Record</li>
<li>Upload</li>
<li>Refresh</li>
<li>Clear</li>
</ul>
</nav>
</footer>
I have tried with data-grid="c" but it's not working.
Any idea?
I haven't add any CSS style to this project
This is the compiled jQuery Mobile:
Block (each block inside the navbar):
.ui-grid-c > .ui-block-a, .ui-grid-c > .ui-block-b, .ui-grid-c > .ui-block-c, .ui-grid-c > .ui-block-d {
width: 25%;
}
ul.ui-grid-a, ul.ui-grid-b, ul.ui-grid-c, ul.ui-grid-d, ul.ui-grid-solo, li.ui-block-a, li.ui-block-b, li.ui-block-c, li.ui-block-d, li.ui-block-e {
margin-left: 0;
margin-right: 0;
padding: 0;
list-style: none;
}
.ui-block-a {
clear: left;
}
.ui-block-a, .ui-block-b, .ui-block-c, .ui-block-d, .ui-block-e {
margin: 0;
padding: 0;
border: 0;
float: left;
min-height: 1px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
li {
display: list-item;
text-align: -webkit-match-parent;
}
.ui-navbar ul {
list-style: none;
}
ul.ui-grid-a, ul.ui-grid-b, ul.ui-grid-c, ul.ui-grid-d, ul.ui-grid-solo, li.ui-block-a, li.ui-block-b, li.ui-block-c, li.ui-block-d, li.ui-block-e {
list-style: none;
}
ul, menu, dir {
list-style-type: disc;
}
.ui-bar-b, .ui-page-theme-b .ui-bar-inherit, html .ui-bar-b .ui-bar-inherit, html .ui-body-b .ui-bar-inherit, html body .ui-group-theme-b .ui-bar-inherit {
color: #fff /*{b-bar-color}*/;
text-shadow: 0 /*{b-bar-shadow-x}*/ 1px /*{b-bar-shadow-y}*/ 0 /*{b-bar-shadow-radius}*/ #111 /*{b-bar-shadow-color}*/;
font-weight: bold;
}
.ui-overlay-a, .ui-page-theme-a, .ui-page-theme-a .ui-panel-wrapper {
color: #333 /*{a-page-color}*/;
text-shadow: 0 /*{a-page-shadow-x}*/ 1px /*{a-page-shadow-y}*/ 0 /*{a-page-shadow-radius}*/ #f3f3f3 /*{a-page-shadow-color}*/;
}
.ui-overlay-a, .ui-page-theme-a, .ui-page-theme-a .ui-panel-wrapper {
color: #333 /*{a-page-color}*/;
text-shadow: 0 /*{a-page-shadow-x}*/ 1px /*{a-page-shadow-y}*/ 0 /*{a-page-shadow-radius}*/ #f3f3f3 /*{a-page-shadow-color}*/;
}
body, input, select, textarea, button, .ui-btn {
font-size: 1em;
line-height: 1.3;
font-family: sans-serif /*{global-font-family}*/;
}
Icon
.ui-btn-icon-notext:after, .ui-btn-icon-top:after, .ui-btn-icon-bottom:after {
left: 50%;
margin-left: -11px;
}
.ui-btn-icon-notext:after, .ui-btn-icon-left:after, .ui-btn-icon-right:after {
top: 50%;
margin-top: -11px;
}
.ui-btn-icon-left:after, .ui-btn-icon-right:after, .ui-btn-icon-top:after, .ui-btn-icon-bottom:after, .ui-btn-icon-notext:after {
content: "";
position: absolute;
display: block;
width: 22px;
height: 22px;
}
.ui-btn-icon-left:after, .ui-btn-icon-right:after, .ui-btn-icon-top:after, .ui-btn-icon-bottom:after, .ui-btn-icon-notext:after {
background-color: #666 /*{global-icon-color}*/;
background-color: rgba(0,0,0,.3) /*{global-icon-disc}*/;
background-position: center center;
background-repeat: no-repeat;
-webkit-border-radius: 1em;
border-radius: 1em;
}
All you need is, to force button inside each block to fill width completely.
.ui-navbar li a {
width: 100% !important;
}
Demo
You may want to look at using vertical-align
The vertical-align CSS property specifies the vertical alignment of an
inline or table-cell box.
Try:
a.ui-btn{
vertical-align:middle;
}
Although this is on the assumption you dont have other style settings which may interfere, its hard to say without having your CSS. You may need to also set margin:0; or remove any paddingfrom the containing li
Try margin: 0 auto in your css
Related
I have built this header using custom CSS and bootstrap class names. I have tried z-index, float: initial properties already. Thanks in advance
.branding-preview {
height: 75px;
margin-left: 15px;
margin-right: 15px;
background-color: #0071bb;
}
.branding-logo {
float: left;
height: 50px;
font-size: 18px;
padding: 15px 15px;
}
.branding-logo img {
width: 300px;
height: 50px;
}
.branding-powered-by-logo {
float: right;
height: 50px;
color: white;
font-size: 15px;
padding: 2px 10px;
}
.preview-menu {
margin: 30px 0 0 0;
}
.preview-menu > li > a {
margin: 0 3px;
color: white;
text-transform: uppercase;
border-bottom: solid 1px transparent;
background-color: transparent !important;
}
<div class="branding-preview">
<div class="branding-logo">
<img id="branding-logo" src="/path/to/logo">
</div>
<div class="branding-powered-by-logo">
<span>Powered By</span>
<img id="branding-powered-by-logo" src="/path/to/logo" height="30">
</div>
<ul class="navbar-nav navbar-right nav preview-menu">
<li><a>Start</a></li>
<li><a>Plan</a></li>
<li><a>Manage</a></li>
<li><a>Learn</a></li>
<li><a>Admin</a></li>
</ul>
</div>
This is the result that I am getting with the current code,
actual result:
This is what I'm hoping it will look like, expected result:
Isn't simple without all the css rules, but the concept is: Create a wrapper floated to right and inside create 2 lines, one for the branding-powered-by-logo and display:block the second line is depend from actual CSS but probably works without modify anything.
If you can post the real page we can help you with more precision.
Hope this help you.
.branding-preview {
display:block;
height: 75px;
margin-left: 15px;
margin-right: 15px;
background-color: #0071bb;
}
.branding-logo {
float: left;
height: 50px;
font-size: 18px;
padding: 15px 15px;
}
.branding-logo img {
width: 300px;
height: 50px;
}
.branding-powered-by-logo {
/* ADDED */
display:block;
text-align:right;
height: 50px;
color: white;
font-size: 15px;
padding: 2px 10px;
}
.preview-menu {
margin: 0px 0 0 0;
}
.preview-menu > li > a {
margin: 0 3px;
color: white;
text-transform: uppercase;
border-bottom: solid 1px transparent;
background-color: transparent !important;
}
/* ADDED */
.wrapper-logo-navbar {
float: right;
}
.preview-menu > li {
display: inline-block;
}
<div class="branding-preview">
<div class="branding-logo">
<img id="branding-logo" src="/path/to/logo">
</div>
<div class="wrapper-logo-navbar">
<div class="branding-powered-by-logo">
<span>Powered By</span>
<img id="branding-powered-by-logo" src="https://cdn.pixabay.com/photo/2012/05/02/19/27/head-46086_960_720.png" height="30">
</div>
<ul class="navbar-nav navbar-right nav preview-menu">
<li><a>Start</a></li>
<li><a>Plan</a></li>
<li><a>Manage</a></li>
<!-- removed some elements for the rendering on StackOverflow -->
</ul>
</div>
</div>
I think you just need add
position:absolute; right:0px;
to your .preview-menu class.
I'm wondering why the elements in my nav bar appear to have blank space above them? I've checked the margin and padding and there doesn't seem to be an issue, but there is a large space above my #logo and #searchbox which is messing up my layout, how can I get rid of the space above the elements?
Thanks a lot!
Here's my Code:
li {
display: inline-block;
}
ul {
display: inline-block;
margin: 0px;
padding: 0px;
}
#main_nav, logo {
display: inline-block;
padding: 0px;
margin: 0px;
}
nav li a:link {
font-weight: bold;
display: inline-block;
text-decoration: none;
font-family: times;
font-size: 24px;
list-style: none;
padding: 5px;
border: 2px solid black;
border-radius: 5px;
color: black;
}
nav li a:visited {
color: rgba(0,0,0,0.7);
}
nav li a:hover {
background-color: rgba(0,0,0,0.6);
color: white;
}
nav li a:active {
color: black;
border-color: black;
}
nav {
width: 1000px;
height: 130px;
background-color: rgba(255,255,255,0.7);
padding: 10px;
margin: 0px auto;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
input[type=search] {
font-size: 16px;
}
#searchbox {
position: absolute;
right: 0px;
top: 0px;
}
#searchbox_div {
position: relative;
display: inline-block;
padding: 0;
width: 100%;
}
#logo {
display: inline-block;
width: 200px;
font-family: arial;
margin: 0px;
padding: 0px;
font-size: 26px;
}
#logo_jeff, #logo_arries, #logo_website {
margin: 0px;
}
#logo_jeff {
letter-spacing: 35.5px;
}
#logo_arries {
letter-spacing: 11px;
}
#logo_website {
letter-spacing: 4px;
}
#main_content {
width: 1000px;
min-height: 600px;
display: block;
background-color: rgba(255,255,255,0.7);
margin: 0 auto;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
position: relative; top: 0px;
padding: 10px;
}
#here_you_can_learn {
font-size: 47px;
color: gray;
margin: 0 auto;
margin-bottom: 10px;
text-align: center;
}
#welcome {
text-align: center;
color: rgb(0, 0, 110);
font-size: 100px;
margin: 0;
padding: 10px 10px 20px 10px;
}
#down_arrow {
height: 50px;
margin: auto;
display: block;
padding: 10px;
}
#most_frequent {
width: 600px;
vertical-align: top;
display: inline-block;
background-color: rgba(0,0,0,0.1);
border-radius: 3px;
}
#m_f_heading {
font-size: 30px;
margin: 10px;
padding: 5px;
text-align: center;
background-color: rgba(0,0,0,0.2);
border-radius: 5px;
}
#m_f_show_more {
font-size: 20px;
margin: 10px;
padding: 5px;
text-align: center;
background-color: rgba(0,0,0,0.2);
border-radius: 5px;
}
#recent_activity {
width: 375px;
display: inline-block;
background-color: rgba(0,0,0,0.1);
border-radius: 3px;
}
#r_a_heading {
font-size: 30px;
margin: 10px;
padding: 5px;
text-align: center;
background-color: rgba(0,0,0,0.2);
border-radius: 5px;
}
#r_a_body {
font-size: 15px;
margin: 10px;
padding: 5px;
text-align: center;
background-color: rgba(0,0,0,0.2);
border-radius: 5px;
}
#r_a_show_more {
font-size: 20px;
margin: 10px;
padding: 5px;
text-align: center;
background-color: rgba(0,0,0,0.2);
border-radius: 5px;
}
#r_a_show_more_link:visited {
color: black;
}
#r_a_show_more_link:hover {
color: gray;
background-color: rgba(0,0,0,0.9);
}
#r_a_show_more_link:active {
color: black;
}
body {
background-image: url("../pictures/jeff_skiing.jpg");
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
min-height: 500px;
margin: 0px;
padding: 0px;
}
aside {
position: absolute;
right: 0px;
background-color: rgba(255,255,255,0.9);
width: 170px;
height: 600px;
margin: 0;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
padding: 10px;
}
<!DOCTYPE html>
<head>
<title>Home | Jeff's Website</title>
<link href="styles/main_navigation.css" type="text/css" rel="stylesheet" />
<link href="styles/body.css" type="text/css" rel="stylesheet" />
<link href="styles/main_content.css" type="text/css" rel="stylesheet" />
</head>
<body>
<!--Main Nav-->
<header>
<nav>
<div id="searchbox_div">
<form action="" id="searchbox">
<input id="search_input" type="search" name="searchmysite" placeholder="Search my Site!">
<input type="submit" value="Search!">
</form>
</div>
<div id="logo">
<h1 id="logo_jeff">JEFF</h1>
<h1 id="logo_arries">ARRIES</h1>
<h1 id="logo_website">WEBSITE</h1>
</div>
<div id="main_nav">
<ul>
<li>Home</li>
<li>Blog</li>
<li>Trips</li>
<li>Politics</li>
<li>Pictures</li>
<li>Videos</li>
<li>Computer</li>
<li>Misc</li>
</ul>
</div>
</nav>
</header>
<!--Welcome to jeff's website-->
<div>
<h2 id="welcome">Welcome to my Website!</h1>
<a href="#here_you_can_learn">
<img src="pictures/down_arrow.png" id="down_arrow"/>
</a>
</div>
<!--right side nav-->
<aside>
<p>this is aside</p>
</aside>
<!--Main Content-->
<div id="main_content">
<h2 id="here_you_can_learn">Here you can learn about me and my adventures!</h2>
<!--Most Frequently visited pages: on left side of page-->
<div id="most_frequent">
<p id="m_f_heading">Most frequently visted pages!</p>
<p id="m_f_show_more">Show More</p>
</div>
<!--Recent Activity: on the right side of page-->
<div id="recent_activity">
<p id="r_a_heading">Recent Activity</p>
<p id="r_a_body">test</p>
<p id="r_a_show_more">Show More</p>
</div>
</div>
</body>
Your <nav> element has a padding of 10px.
EDIT: The absolutely positioned search form seems to be causing the problem. I made the following changes and the space went away:
#searchbox_div {
position: relative;
display: block;
padding: 0;
width: 100%;
}
#searchbox {
position: relative;
float: right;
}
#logo {
display: inline-block;
width: 200px;
font-family: arial;
margin: 0px;
padding: 0px;
font-size: 26px;
float: left;
}
#main_nav{
display: inline-block;
padding: 0px;
margin: 0px;
margin-top: 4em;
margin-left: 1em;
}
I noticed that you`re not using a css reset. A CSS Reset (or “Reset CSS”) is a short, often compressed (minified) set of CSS rules that resets the styling of all HTML elements to a consistent baseline.
In case you didn’t know, every browser has its own default ‘user agent’ stylesheet, that it uses to make unstyled websites appear more legible. For example, most browsers by default make links blue and visited links purple, give tables a certain amount of border and padding, apply variable font-sizes to H1, H2, H3 etc. and a certain amount of padding to almost everything. Ever wondered why Submit buttons look different in every browser?
Obviously this creates a certain amount of headaches for CSS authors, who can’t work out how to make their websites look the same in every browser.
Using a CSS Reset, CSS authors can force every browser to have all its styles reset to null, thus avoiding cross-browser differences as much as possible.
Also, sometimes if I have a problem with blank spaces, I run the html all together so there are no blank spaces between the tags. To make it look neat, I insert carriage returns in the middle of the html tag.
By default, most browsers have an 8px or so margin that is built in or "Added" to the page style. The super easy way to eliminate this is through CSS. Simply use:
html,body{
margin:0;
}
You can also add:
padding:0;
If it's still giving you problems!
You appear to need to reset/normalize your css as that
html,body{
margin:0;
padding:0;
}
The <nav> element is configured to have 10 pixels of padding on all sides.
The targeted design looks like this:
My markup and CSS can be seen in this JSFiddle: http://jsfiddle.net/n2bynh57/
HTML:
<div id="steps">
<ol class="para-small-color">
<span class="wedge"></span>
<li>
<div class="counter">1</div>
<div class="list-elem">
</div>
</li>
<li>
<div class="counter">2</div>
<div class="list-elem">
</div>
</li>
<span class="wedge"></span>
<li>
<div class="counter">3</div>
<div class="list-elem">
</div>
</li>
<li>
<div class="counter">4</div>
<div class="list-elem">
</div>
</li>
</ol>
</div>
CSS:
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#steps ol, #steps ul{
-padding-start: 0px;
-webkit-padding-start: 0px;
}
#steps ol>li:nth-child(2), #steps ol>li:nth-child(5) {
background-color: #e9e9e9;
}
#steps ol>li:nth-child(3), #steps ol>li:nth-child(6) {
margin-left: 5.6rem;
}
#steps ol>li, #steps ol>li ul li{
list-style: none;
}
#steps ol>li{
display: flex;
margin-left: 1.4rem;
}
.list-elem{
margin-left: 2rem;
}
.counter{
font: 400 4rem Arial;
padding: 10px 25px 10px 25px;
color: #a83443;
}
.wedge {
position: absolute;
display: inline-block;
width: 0px;
height: 0px;
border-style: solid;
border-width: 0 25px 8px 0;
border-color: transparent #b0b0b0 transparent transparent;
}
#steps ol li:nth-of-type(1)>.counter, #steps ol li:nth-of-type(3)>.counter {
width: 100px;
height: 100px;
background: #E9E9E9;
position: relative;
text-align: center;
}
#steps ol li:nth-of-type(1)>.counter:after, #steps ol li:nth-of-type(3)>.counter:after {
content: "";
position: absolute;
bottom: -25px;
left: 0;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 25px solid #E9E9E9;
}
I managed to get the semi-hexagonal shapes right and the corner flat shadow. But I'm not sure how the perspective flat shadows could be made. Using box-shadow doesn't seem to work right, because it cannot achieve the wedge-shaped perspective shadows. So, I suppose it might work with some border properties.
I think I found the solution. This is possible to achieve by creating the same elements again and placing the clones underneath them using z-indexed layers, then applying some transformations on these shadow-coloured shapes to make them look as if they are perspective shadows.
I will edit this post later to add the solution for reference, once I finish writing the code.
Solution: http://codepen.io/ciprianf/pen/epvvep
Edit: I'm not an Html pro.
I want to add this text :
AIM -> Historian
AIM -> AIM
AIM -> PI
Historian -> PI
Perfectly aligned like the ones above in the picture. It is one link with all this text.
I have tried <p style ="text-indent:5em; and I have also tried to make a <ul style ="text-indent:5em; but the spacing is still weird an not what I want. As you can see there is an empty space above which is unneeded and the Text alignment is not proper.
The Code
<div class="tabContentBorders">
<div id="tab1">
<p><strong>Data Acquisition and Reporting</strong></p>
<p> High-Speed Data Acquisition</p>
<p> Custom Driver Development</p>
<p> Custom Reporting Solutions</p>
<p><strong>15) Historian Migration</strong></p>
<p style ="text-indent:5em;"> <br>AIM -> Historian<br>AIM -> AIM<br>AIM -> PI<br>Historian -> PI</p>
<p><strong>Custom Windows Application</strong></p>
<p> SOE/TRA Suite</p>
<p> TCP Time-Sync</p>
<p> Power Calculations</p>
</div>
Style Sheet
body { background: #000 url("../images/background.jpg") no-repeat center top; }
body, h1, h2, h3, h4, h5, h6, ol, ul, li, p, td { font-family: Verdana, Geneva, Tahoma, sans-serif; color: #fff; font-weight: normal; }
.frame { z-index: 10; margin-left: auto; margin-right: auto; width: 970px; margin-bottom: 20px; position: relative;}
/* CSS grid credit 960 Grid System http://960.gs */
/* Must declare this for all containers with widths in the layout grid so they properly align alongside of each other */
.leftCol, .rightCol, .headerBox, .shadedBox ul, .rightSplitCol
{ display:inline; float:left; margin-left:0; margin-right:0; }
.topBox { display: block; height: 82px; background: url("../images/header.jpg") no-repeat left top; margin-bottom: 18px; }
.topNav { margin:0; padding:0; float: right; position: relative; top: 10px; right: 10px; text-align: right; font-size: 13px; }
.topNav a:link, .topNav a:visited { color: #fff; text-decoration: none; } .topNav a:hover { text-decoration: underline; }
.leftCol { width: 515px; }
.leftCol .box { margin: 15px 20px !important; }
.rightCol { width: 435px; margin-left: 20px; } .rightSplitCol { width: 232px; margin: 5px 0 0 0; } .splitColspace { margin-left: 10px;}
.rightSplitCol p { font-size: 13px !important; padding: 0 0 5px 0; }
.mission { padding: 10px 0 0 10px;}
.headerBox { color: #000; margin-bottom: 5px; padding: 5px 20px 5px 10px; font-size: 18px; } .headerBoxPink { color: #000; margin-bottom: 10px; padding: 5px 20px 5px 10px; font-size: 15px; background-color: #d81c3f; }
.boxBlue { background-color: #00b9e4;} .boxOrange { background-color: #e87511;} .boxGreen { background-color: #c3cf21;}
.shadedBox { background: url("../images/bkgrdBox.png") repeat; } .venue { margin-bottom: 9px; padding: 7px !important; } .boxMargin { padding: 7px;}
.shadedBox a:link, .shadedBox a:visited { color: #c3d603; } .shadedBox a:hover, .shadedBox a:visited:hover { text-decoration: none; }
.shadedBox ul { list-style: disc; padding: 7px 0 5px 10px; font-size: 13px; } .shadedBox li { padding-bottom: 0.75em; line-height: 1.4em;}
ul.leftSide { width: 200px; margin-left: 15px; margin-right: 0;} ul.rightSide { width: 210px; margin-left: 18px; margin-right: 0;}
.shadedBox p { font-size: 14px; line-height: 1.2em; } .venue p { line-height: 1.3em !important; }
.small{ color: #ccc; font-size: 12px; } .big { font-size: 26px; padding-top: 5px;}
.button { float: right; }
.iconSubscribe { float: right; padding: 25px 0 0 5px;} .iconOpen { float:left; padding: 0 10px 0 0;}
a.whiteLink { color: #fff !important; }
.footer { background: url("../images/footerDots.png") no-repeat left top; margin: 10px 0 10px 20px;}
.footer p { font-size: 11px; margin-top: 20px;}
.brands { background-color: #636466; display:inline; float:right; color: #000; padding: 5px 10px; font-size: 13px;}
.brands a:link, .brands a:visited { color: #000; text-decoration:none; } .brands a:hover, .brands a:visited:hover { text-decoration:none; }
/* 960 Grid System: Clear style used with various floated containers */
html body * span.clear, html body * div.clear, html body * li.clear, html body * dd.clear {background:none;border:0;clear:both;display:block;float:none;font-size:0;list-style:none;margin:0;padding:0;overflow:hidden;visibility:hidden;width:0;height:0}
.clearfix:after {clear:both;content:'.';display:block;visibility:hidden;height:0}
.clearfix {display:inline-block}
* html .clearfix{height:1%}
.clearfix {display:block}
I'd suggest a simple rewrite of the base-code. Here, I use an H3 for the headers, and target the paragraphs. Unless you use white-space:pre white-space will always collapse to the width of one space.
The code can be cleaned up more, with less paragraph tags, but here's a quick idea.
http://jsfiddle.net/Ufx58/1/
HTML
<div class="tabContentBorders">
<div id="tab1">
<h3>Data Acquisition and Reporting</h3>
<p> High-Speed Data Acquisition</p>
<p> Custom Driver Development</p>
<p> Custom Reporting Solutions</p>
<h3>15) Historian Migration</strong></h3>
<p style ="text-indent:5em;"> <br>AIM -> Historian<br>AIM -> AIM<br>AIM -> PI<br>Historian -> PI</p>
<h3>Custom Windows Application</h3>
<p> SOE/TRA Suite</p>
<p> TCP Time-Sync</p>
<p> Power Calculations</p>
</div>
CSS
h3{
font-weight:bold;
font-size:1.2em;
}
#tab1 p{
padding-left:2em;
}
This is how I did it and it works
<p><strong>Data Acquisition and Reporting</strong></p>
<p style="padding-left : 2em;">High-Speed Data Acquisition</p>
<p style="padding-left : 2em;">Custom Driver Development</p>
<p style="padding-left : 2em;">Custom Reporting Solutions</p>
<p><strong>Historian Migration</strong></p>
<p style="padding-left : 2em;"><a href="IOM_EnterpriseControl.html">
AIM -> HistorianAIM -> AIM<br>
AIM -> PI<br>
Historian -> PI<br>
</a>
</p>
<p><strong>Custom Windows Application</strong></p>
<p style="padding-left : 2em;">SOE/TRA Suite</p>
<p style="padding-left : 2em;">TCP Time-Sync</p>
<p style="padding-left : 2em;">Power Calculations</p>
I built the following website basically from scratch, and it works perfectly on most browsers (Chrome, Firefox, Safari, Edge), but unsurprisingly not on IE (tested on 9,10,11): Alliance Française du Manitoba
The problem is with the dropdown menus. When hovering over one of the menu headers (<div class="headerMenuItem">), a mega-menu (<div class="headerMenuDropdown">) should appear. Currently, when hovering, the headerMenuItems are highlighting, as expected, but the child headerMenuDropdown isn't appearing.
/***Header Menu***/
#headerMenu { /*Menu Wrapper*/
float: left;
margin: 12px auto 0px;
padding: 0px;
}
.headerMenuItem { /* Individual menu item */
display: block;
float: left;
overflow: hidden;
border-radius: 5px 5px 0px 0px;
margin-top: 6px;
padding-bottom: 10px;
}
.headerMenuItem:hover {
background-color: #d4d9db;
text-decoration: none;
}
.headerMenuItem>a {
padding: 8px 12px 0px;
text-align: center;
border-radius: 5px 5px 0px 0px;
font-weight: bold;
color: #444;
}
.headerMenuItem a:hover { /* override default link behaviour */
text-decoration: none;
color: #444;
}
/*Menu expand*/
.headerMenuDropdown { /* mega-menu wrapper */
float: left;
display: none;
position: fixed;
background-color: white;
width: 100%;
left: 0;
top: 100%;
border-top: 1px solid #da002e;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 105;
text-align: center;
}
.headerMenuItem:hover .headerMenuDropdown { /*Display dropdown*/
display: block;
animation: headerDropdownAppear;
animation-duration: 0.4s;
}
#keyframes headerDropdownAppear {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Create up to 6 equal columns that floats next to each other */
.row {
width: 1200px;
display: block;
margin-left: auto;
margin-right: auto;
}
.column {
float: left;
width: 15.53848%;
padding: 10px 10px 10px 0px;
}
.column span,
.column a {
float: none;
text-decoration: none;
display: block;
text-align: left;
padding: 1px;
}
.column>span {
font-weight: bold;
}
.column>span>span {
padding-left: 15px;
text-indent: -10px;
font-weight: lighter;
font-size: 0.8em;
}
.column>span>span>a {
padding-left: 15px;
margin-left: -15px;
padding-bottom: 3px;
line-height: 120%;
}
.column a:hover {
background-color: #d4d9db;
}
<div id="headerBottom">
<nav id="headerMenu">
<div class="headerMenuItem">
Learn French
<div class="headerMenuDropdown">
<div class="row">
<div class="column">
<span>
Column 1
<span>
Link 1
</span>
<span>
Link 2
</span>
...
</span>
</div>
<div class="column">
<span>
Column 2
...
</span>
</div>
...
</div>
</div>
</div>
<div class="headerMenuItem">
Tests & Exams
<div class="headerMenuDropdown">
<div class="row">
...
</div>
</div>
</div>
...
</nav>
...
</div>
I assumed that this had to do with one of two known IE bugs:
:hover inconsistencies
Unsuported > selector
However, both of these should have been phased out as issues by IE 9, but I'm having issues on IE 11! I've got a proper <!DOCTYPE html>, HTML5Shiv, and even crossover.htc, but nothing seems to work.
This leads me to think that the issue is with the CSS selector
.headerMenuItem:hover .headerMenuDropdown
EDIT: However, IE Inspector shows that it's behaivng properly!
Any known fixes?