Related
I have instituted a flex-grid in my code, however its not functioning as expected in ie11 (i unfortunately need to have it work there too)—Chrome and Firefox both work fine. What seems to happen is when I load in IE11—the flex boxes only load 1 per line and are no longer hovering appropriately.
I am honestly at a loss here... anything I change breaks Chrome and Firefox.
.flex_row {
display: flex;
flex-flow: row wrap;
justify-content: space-around;
}
.flex_col{
flex: 1;
margin: 10px;
}
.circle_shape {
position: relative;
display: flex;
padding: 50% 0;
border-radius: 50%;
overflow: hidden;
border: 1px solid gray;
font-size: 16px;
font-family: 'Source Sans Pro', sans-serif;
justify-content: center;
align-items: center;
background: radial-gradient(circle at 50% 120%, #81e8f6, #76deef 10%, #055194 80%, #062745 100%);
}
.circle_shape:before {
content: "";
position: absolute;
top: 1%;
left: 5%;
width: 90%;
height: 90%;
border-radius: 50%;
background: radial-gradient(circle at 50% 0px, #ffffff, rgba(255, 255, 255, 0) 58%);
filter: blur(5px);
z-index: 2;
}
.circle_shape:hover{
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1), 0 1px 2px rgba(0,0,0,0.1);
}
.circle_shape img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.circle_shape i{
position: absolute;
text-align: center;
font-size: 4vw;
text-shadow:
0 0 1px #fff,
0 1px 2px rgba(0,0,0,0.3);
}
.circle_shape h2 {
position: absolute;
bottom: 10%;
font-size: 1vw;
font-weight: 800;
text-align: center;
}
.circle_text{
position: absolute;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0,51,102, 0.9);
border-radius: 50%;
width: 100%;
height: 100%;
overflow: hidden;
opacity: 0;
transition: all 0.4s ease-in-out;
transform: scale(0);
}
.circle_text p {
color: #fff;
padding: 4px;
text-align: center;
font-size: calc(7px + .5vw);
text-shadow:
0 0 1px #fff,
0 1px 2px rgba(0,0,0,0.3);
}
.circle_shape:hover .circle_text{
transform: scale(1);
opacity: 1;
}
<div class="flex_row">
<a class="flex_col" href="http://www.cnn.com">
<div class="circle_shape">
<i class="fas fa-sitemap"></i>
<div class="circle_text">
<p>Load me some CNN!</p>
</div>
</div>
<div>
<h2>Beep!</h2>
</div>
</a>
<a class="flex_col" href="http://www.cnn.com">
<div class="circle_shape">
<i class="fas fa-sitemap"></i>
<div class="circle_text">
<p>Load me some ABC!</p>
</div>
</div>
<div>
<h2>BIP!</h2>
</div>
</a>
<a class="flex_col" href="http://www.cnn.com">
<div class="circle_shape">
<i class="fas fa-sitemap"></i>
<div class="circle_text">
<p>Load me some BBC!</p>
</div>
</div>
<div>
<h2>BOOP!</h2>
</div>
</a>
</div>
JSFiddle link
IE 11 partially support flex box. Partial support due to large amount of bugs.
Visit the link for more information.
I try to test with the code in IE 11 and try to modify it for testing purpose. I tried many variations in the code but nothing worked so far.
As a work around, I suggest you to refer example below which is working properly in IE and other browsers.
.ch-item {
width: 100%;
height: 100%;
border-radius: 50%;
position: relative;
cursor: default;
box-shadow: inset 0 0 0 0 rgba(200, 95, 66, 0.4), inset 0 0 0 16px rgba(255, 255, 255, 0.6), 0 1px 2px rgba(0, 0, 0, 0.1);
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
z-index: 2;
}
.ch-info {
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
opacity: 0;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-backface-visibility: hidden;
}
li {
position: relative;
overflow: hidden;
border-radius: 100%;
}
li img {
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
.ch-info h3 {
color: #fff;
text-transform: uppercase;
position: relative;
letter-spacing: 2px;
font-size: 22px;
margin: 0 30px;
padding: 65px 0 0 0;
height: 110px;
font-family: 'Open Sans', Arial, sans-serif;
text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0, 0, 0, 0.3);
}
.ch-info p {
color: #fff;
padding: 10px 5px;
font-style: italic;
margin: 0 30px;
font-size: 12px;
border-top: 1px solid rgba(255, 255, 255, 0.5);
}
.ch-info p a {
display: block;
color: #fff;
color: rgba(255, 255, 255, 0.7);
font-style: normal;
font-weight: 700;
text-transform: uppercase;
font-size: 9px;
letter-spacing: 1px;
padding-top: 4px;
font-family: 'Open Sans', Arial, sans-serif;
}
.ch-info p a:hover {
color: #fff222;
color: rgba(255, 242, 34, 0.8);
}
.ch-item:hover {
box-shadow: inset 0 0 0 110px rgba(200, 95, 66, 0.4), inset 0 0 0 16px rgba(255, 255, 255, 0.8), 0 1px 2px rgba(0, 0, 0, 0.1);
}
.ch-item:hover .ch-info {
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
#import url('normalize.css');
/* General Demo Style */
body{
font-family: Cambria, Georgia, serif;
background: #f9f9f9 url(../images/bg.jpg);
font-weight: 300;
font-size: 15px;
color: #333;
-webkit-font-smoothing: antialiased;
overflow-y: scroll;
overflow-x: hidden;
}
a{
color: #555;
text-decoration: none;
}
.container{
width: 100%;
position: relative;
}
.clr{
clear: both;
padding: 0;
height: 0;
margin: 0;
}
.main{
width: 90%;
margin: 0 auto;
position: relative;
}
.container > header{
margin: 10px;
padding: 20px 10px 10px 10px;
position: relative;
display: block;
text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
text-align: center;
}
.container > header h1{
font-size: 32px;
line-height: 32px;
margin: 0;
position: relative;
font-weight: 300;
color: #777;
text-shadow: 1px 1px 1px rgba(255,255,255,0.7);
}
.container > header h2{
font-size: 14px;
font-weight: 300;
font-style: italic;
margin: 0;
padding: 15px 0 5px 0;
color: #888;
text-shadow: 1px 1px 1px rgba(255,255,255,0.9);
}
/* Header Style */
.codrops-top{
line-height: 24px;
font-size: 11px;
background: #fff;
background: rgba(255, 255, 255, 0.6);
text-transform: uppercase;
z-index: 9999;
position: relative;
box-shadow: 1px 0px 2px rgba(0,0,0,0.1);
}
.codrops-top a{
padding: 0px 10px;
letter-spacing: 1px;
color: #333;
display: inline-block;
}
.codrops-top a:hover{
background: rgba(255,255,255,0.3);
}
.codrops-top span.right{
float: right;
}
.codrops-top span.right a{
float: left;
display: block;
}
/* Demo Buttons Style */
.codrops-demos{
text-align:center;
display: block;
line-height: 30px;
padding: 5px 0px;
}
.codrops-demos a{
display: inline-block;
font-style: italic;
margin: 0px 4px;
padding: 0px 6px;
color: #aaa;
line-height: 20px;
font-size: 13px;
text-shadow: 1px 1px 1px #fff;
border: 1px solid #fff;
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(47%,#f6f6f6), color-stop(100%,#ededed)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* IE10+ */
background: linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 ); /* IE6-9 */
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}
.codrops-demos a:hover{
color: #333;
background: #fff;
}
.codrops-demos a:active{
background: #fff;
}
.codrops-demos a.current-demo,
.codrops-demos a.current-demo:hover{
background: #f0f0f0;
border-color: #d9d9d9;
color: #aaa;
box-shadow: 0 1px 1px rgba(255,255,255,0.7);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f6f6', endColorstr='#f6f6f6',GradientType=0 ); /* IE6-9 */
}
.support-note span{
color: #ac375d;
font-size: 16px;
display: none;
font-weight: bold;
text-align: center;
padding: 5px 0;
}
.no-cssanimations .support-note span.no-cssanimations,
.no-csstransforms .support-note span.no-csstransforms,
.no-csstransforms3d .support-note span.no-csstransforms3d,
.no-csstransitions .support-note span.no-csstransitions{
display: block;
}
.ch-grid {
margin: 20px 0 0 0;
padding: 0;
list-style: none;
display: block;
text-align: center;
width: 100%;
}
.ch-grid:after,
.ch-item:before {
content: '';
display: table;
}
.ch-grid:after {
clear: both;
}
.ch-grid li {
width: 220px;
height: 220px;
display: inline-block;
margin: 20px;
}
<section class="main">
<ul class="ch-grid">
<li>
<img src="http://tympanus.net/Tutorials/CircleHoverEffects/images/5.jpg" alt="Vision">
<div class="ch-item">
<div class="ch-info">
<h3>Brainiac</h3>
<p>by Daniel Nyari View on Dribbble</p>
</div>
</div>
</li>
</ul>
</section>
Output in IE:
References:
(1) JSFiddle link
(2) Circle Hover Effects with CSS Transitions
Further, you can try to modify the code example as per your requirement.
I just wanted to follow up on this. Rather than rewrite my code -- I decided to hack around it to define a solution.
First step was to identify this is IE 10+ code in my CSS -- i did that through:
#media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* IE10+ CSS styles go here */
}
I then redefined my flex_container and flex_item as block (using column code as follows) inside the #media query
[class*="flex_item"] {
float: left;
padding: 15px;
}
.flex_container{
display: block;
overflow: hidden;
box-sizing: border-box;
justify-content: center;
align-items: center;
text-align: center;
flex-direction: none;
font-size: 16px;
}
.flex_item {width: 8.33%;box-sizing: border-box;}
I then went through my code and changed any reference to flex to block within that code. Its a lot of duplication but it essentially got me back to #deepak-MSFTs response.
This effectively resolves my issue.
I am designing a page, and run into a problem, I can not solve on my own. On zooming out, the items in the header are moving vertically, at 25%, the elements are in completely wrong position.
I am using block display, because i want the menu items to move to the center on zoomout(like on facebook, twitter or here), so inline and inline-block not solving my problem.
Same reason on relative positioning.
Is there another way to achive the same effect instead of relative positioning?
Any ideas how to make it right?
Cheers
Andrew
HTML:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css" media="screen"> </style>
<title>Layout</title>
<link href="../Content/LAYOUT.css" rel="stylesheet" />
</head>
<body>
<div id="menucontainer">
<div id="wrapper">
<a href="HTTP://www.google.com" class="LC">
<p class="L"> </p>
</a>
<a href="http://www.idk.com" class="KC">
<p class="K">Új Kérdés</p>
</a>
<a href="http://www.idk.com" class="EC">
<p class="E">Új Értékelés</p>
</a>
<a href="http://www.idk.com" class="MessageC">
<p class="Message"> </p>
</a>
</div>
</div>
</body>
</html>
CSS:
body { background-color: lightgray;
margin:0 auto;}
#menucontainer {
position: fixed;
width: 100%;
min-height: 45px;
height: 20px;
background: #3f3f3f; /* Old browsers */
background: -moz-linear-gradient(top, #3f3f3f 0%, #000000 91%, #3f3f3f 91%, #33eb31 93%, #33eb31 101%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3f3f3f), color-stop(91%,#000000), color-stop(91%,#3f3f3f), color-stop(93%,#33eb31), color-stop(101%,#33eb31)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #3f3f3f 0%,#000000 91%,#3f3f3f 91%,#33eb31 93%,#33eb31 101%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #3f3f3f 0%,#000000 91%,#3f3f3f 91%,#33eb31 93%,#33eb31 101%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #3f3f3f 0%,#000000 91%,#3f3f3f 91%,#33eb31 93%,#33eb31 101%); /* IE10+ */
background: linear-gradient(to bottom, #3f3f3f 0%,#000000 91%,#3f3f3f 91%,#33eb31 93%,#33eb31 101%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3f3f3f', endColorstr='#33eb31',GradientType=0 ); /* IE6-9 */
-webkit-box-shadow: 0px 2px 12px 4px rgba(50, 50, 50, 0.64);
-moz-box-shadow: 0px 2px 12px 4px rgba(50, 50, 50, 0.64);
box-shadow: 0px 2px 12px 4px rgba(50, 50, 50, 0.64);
font-family: Corbel;
z-index: 2;
display: inline-block; }
#wrapper {
margin-left: auto;
margin-right: auto;
width: 960px;
z-index: -1;
white-space: nowrap;
height: 30px;
max-height: 30px;
display: block;
padding-top:9px;
padding-bottom:10px; }
.LC {
left: 0%;
min-width: 30px;
top: -20px;
max-width:30px;
width:30px;
display: block;
position:relative;
white-space:nowrap;
height:30px;
min-height:30px;
margin-right:20px;
margin-top:2px; }
.L {
background-image: url(/logo.png);
background-size: 30px 30px;
height: 30px;
width: 30px;
min-width: 30px;
max-width: 30px; }
.KC {
left: 7%;
top: -64px;
display: inline-block;
position: relative;
text-decoration: none;
width:90px;
min-width:90px;
white-space:nowrap;
height:30px; }
.K {
font-family: Arial;
font-weight: bold;
font-size: 1.2em;
color: white;
text-decoration:none; }
.K:link {
text-decoration: none; }
.K:visited {
text-decoration: none; }
.K:hover {
text-decoration: none;
color: #33eb31; }
.K:active {
color: white;
text-decoration: none; }
.EC {
left: 20%;
top: -105px;
display: block;
position: relative;
text-decoration: none;
width:110px;
min-width:110px;
white-space:nowrap;
height:30px; }
.E {
position: relative;
font-family: Arial;
font-weight: bold;
font-size: 1.2em;
color: white;
min-width: 30px; }
.E:link {
text-decoration: none;
}
.E:visited {
text-decoration: none;
}
.E:hover {
text-decoration: none;
color: #33eb31;
}
.E:active {
color: white;
text-decoration: none;
}
I think you might be over complicating this a little bit. you shouldn't need to use position:absolute;. You should use ul li elements for your menu instead. You can set #wrapper to the size of your page and use margin:0px auto to center it.
Let me know if this looks like what you're trying to do: http://jsfiddle.net/gxwxk3zv/
While checking over something else on my college’s website, it noticed that zooming in and out of our website’s pages makes a small gap appear between the header and the main content on certain zoom levels. We mostly test for IE compatibility since that’s what a majority of our visitors use, and when I zoom in and out in IE 9, the gap never appears. In the current versions of Firefox, Chrome, Safari, and Opera, the same “moving ” error occurs. It’s not a very bad bug, as it doesn’t affect readability of the site too severely, but it’s something I’d like to eliminate if possible.
What I’ve tried already:
Making the that appears to be moving, “content”, a fixed width
Giving “content” a fixed position Giving the inside “content”, “canvas”, a fixed position
Changing the z-indexes on “content” and “canvas” each
Not setting a position for the header
Removing a of class “clear” between s “ct100_header” and “content” (it just makes the error more extreme)
The site: www.swic.edu
"sw_home.css"
/*============================================================*/
/*==================== Left Column ==========*/
/*==================================================*/
/*========== Ads ==========*/
.ad-content
{
text-align: center;
margin: 20px 0;
padding: 0;
}
.ad-content p
{
text-align:right;
padding-right:15px;
margin-top: -4px;
}
.ad-content img
{
padding: 5px;
background: #fff;
border: 1px solid #417ec1; /* light blue */
width: 180px;
}
.ad-content img:hover, .ad_content img:active
{
border: 1px solid #c2b535; /* light yellow */
}
/*//////////////////// Ads //////////*/
/*////////// Ads //////////*/
/*//////////////////////////////////////////////////*/
/*///////////////////// Left Column //////////*/
/*////////////////////////////////////////////////////////////*/
/*============================================================*/
/*==================== Main Column ==========*/
/*==================================================*/
/*========== Top Row ==========*/
/*////////// Top Row //////////*/
/*//////////////////////////////////////////////////*/
/*==================================================*/
/*========== Announcements ==========*/
.announcements-wrapper
{
margin-top: -4px;
position: relative;
z-index: 1;
}
.announcements-wrapper .announcement
{
}
.announcements-wrapper .announcement-last
{
margin-bottom: 16px;
}
.announcements-wrapper h2
{
font-size: 18px;
border-width: 0px 0px 1px 0px;
border-color: #888;
border-style: solid;
color: #771425;
}
.announcements-wrapper p
{
}
.announcements-wrapper .multicol ul
{
margin-bottom: 0px!important;
}
.announcement-wrapper img
{
}
/*========================================*/
/*===== Count Down Timer =====*/
.countdown-box
{
/* --COMMENT OUT-- to DISPLAY; --UNCOMMENT-- to HIDE*/
/*display:none; visibility:hidden;*/
width: 100%;
border: 1px solid #888;
margin-bottom: 20px;
text-align: center;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
behavior: url(/packages/PIE/PIE_uncompressed.htc);
}
.countdown-box a
{
color: #417ec1; /* light blue */
text-decoration: none;
font-weight: 700;
font-size: 12px;
}
.countdown-box .en-event-date
{
font-size: 16px !important;
font-weight: 700;
}
.countdown-box a:visited
{
color: #417ec1; /* light blue */
text-decoration: none;
}
.countdown-box a:hover
{
color: #b5a933; /* triad yellow; */
}
.countdown-box a:active
{
color: #b5a933; /* triad yellow; */
}
/* might need implementing in future */
/*////////// Announcements //////////*/
/*//////////////////////////////////////////////////*/
/*==================================================*/
/*========== Bottom Row ==========*/
/*========================================*/
/*===== Widgets =====*/
.widget
{
padding: 3px;
border: 1px solid #888;
-moz-border-radius-topleft: 4px;
-webkit-border-top-left-radius: 4px;
-khtml-border-top-left-radius: 4px;
border-top-left-radius: 4px;
border-radius: 4px;
position: relative;
behavior: url(/packages/PIE/PIE_uncompressed.htc);
}
/*===== PollBox =====*/
.widget.poll p
{
border: 1px solid #888;
-moz-border-radius-topleft: 4px;
-webkit-border-top-left-radius: 4px;
-khtml-border-top-left-radius: 4px;
border-top-left-radius: 4px;
border-radius: 4px;
position: relative;
behavior: url(/packages/PIE/PIE_uncompressed.htc);
background: #aaaaaa url(/css/images/widget-header-bg.png) 50% 50% repeat-x;
line-height: 30px;
font-size: 12px;
color: #193c69; /* dark blue */
text-align: center;
}
.widget.poll ol
{
margin-bottom: 20px;
left: 0;
}
.widget.poll ol li {
font-size: 11px;
line-height: 15px;
}
.widget.poll input[type=submit]
{
/*margin: 0 0 20px 50px;*/
}
/*===== Ektrons Reportchart.css overrides =====*/
/* /punch ektron in face */
.widget.poll table.tblreport *
{
margin: 0;
padding: 0;
border: 0;
vertical-align: baseline;
color: #222;
font-family: Verdana, Sans-Serif;
line-height:20px;
font-size: 12px;
font-weight: normal;
}
.widget.poll table.tblreport
{
border-width: 0;
}
.widget.poll table.tblreport .headreport
{
padding: 0px 3px;
border: 1px solid #888;
background: #aaaaaa url(/css/images/widget-header-bg.png) 50% 50% repeat-x;
font-size: 12px;
height: 30px;
color: #193c69; /* dark blue */
vertical-align: middle;
text-align: center;
}
.widget.poll table.tblreport td
{
padding: 0 10px;
}
.widget.poll table.tblreport .resultbar
{
background: #005daa; /* swic blue; */
}
.widget.poll span.refreshlink
{
margin: 10px 0;
display: block;
}
.widget.poll a.refreshlink
{
color: #417ec1!important; /* light blue */
line-height:20px;
font-size: 12px;
float: right;
margin: -30px 0 0 0;
}
.widget.poll a.refreshlink:hover
{
color: #b5a933!important; /* triad yellow; */
}
/*///// Widgets /////*/
/*////////////////////////////////////////*/
/*////////// Bottom Row //////////*/
/*//////////////////////////////////////////////////*/
/*///////////////////// Main Column //////////*/
/*////////////////////////////////////////////////////////////*/
/*============================================================*/
/*==================== Footer Changes ==========*/
.footer p a
{
font-size: 10px;
}
/*///////////////////// Footer Changes //////////*/
/*////////////////////////////////////////////////////////////*/
"sw_layout.css"
/*////////////////////////////////////////////////////////////*/
/*============================================================*/
/*==================== Header Layout ==========*/
.header {
height: 140px;
position: relative;
z-index: 3;
}
/* because if i use a css3 gradient on the header, it causes z-index issues with the menu because its the relatively positioned object */
.header-bg-wrapper-1 {
width: 100%;
height: 100%;
background: #193c69;
background: -moz-linear-gradient(top, #193c69 0%, #005daa 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#193c69), color-stop(100%,#005daa));
background: -webkit-linear-gradient(top, #193c69 0%,#005daa 100%);
background: -o-linear-gradient(top, #193c69 0%,#005daa 100%);
background: -ms-linear-gradient(top, #193c69 0%,#005daa 100%);
background: linear-gradient(to bottom, #193c69 0%,#005daa 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#193c69', endColorstr='#005daa',GradientType=0 );
}
.header p {
color: #fff;
margin: 0;
padding: 0;
}
/*==================== Header Row Layout ==========*/
.header .row-1 {
width: 100%;
height: 100px;
}
.header .row-2 {
width: 100%;
height: 40px;
}
/*==================== Header Row 1 Content ==========*/
.header .swic-logo {
background-color: #fff;
margin: 10px auto;
padding: 2px 0px 5px 5px;
text-align: center;
width: 170px;
}
.header .swic-logo a img {
position: relative;
}
.header h1 {
font-size: 30px;
line-height: 75px;
font-family: Arial;
color: #fff;
margin: 10px 0px 0px -20px;
padding: 0px;
}
.header .header-links-wrapper {
float: right;
}
.header .header-links-wrapper a {
font-size: 14px;
color: #fff;
}
.header .header-links-wrapper a:hover, .header .header-links-wrapper a:active {
color: #DDB042;
}
.header .header-icons-wrapper {
float: right;
margin-top: 35px;
}
/*==================== Header Row 2 Content ==========*/
/* main menu */
.main-menu {
width: 100%;
height: 40px;
font-family: Arial;
}
.main-menu-bg-middle {
background: #111;
width: 100%;
position: absolute;
top: 100px;
left: 0;
height: 40px;
filter: alpha(opacity=85);
-moz-opacity: 0.85;
-khtml-opacity: 0.85;
opacity: 0.85;
}
/* search box */
.header .search-wrapper {
position: relative;
height: 38px;
text-align: center;
}
.header .search-wrapper .search-box {
width: 150px;
height: 26px !important;
font-size: 15px;
line-height: 26px;
position: absolute;
right: 40px;
top: 1px;
padding: 0 5px;
margin: 5px 0 0 0;
background: url(http://www.google.com/cse/intl/en/images/google_custom_search_watermark.gif) #ffffff no-repeat left 50%;
border: 1px solid #bccdf0;
border-collapse: collapse;
}
.header .search-wrapper .search-box:focus {
background: #fff;
}
.header .search-wrapper .search-button {
position: absolute;
top: 0;
right: 0;
margin: 0;
padding: 0;
width: 40px;
height: 40px;
border: none;
background: transparent;
background-image: url('/images/layout/paw-button-angled-up.png');
background-repeat: no-repeat;
}
.header .search-wrapper .search-button:hover, .header .search-wrapper .search-button:focus {
background-image: url('/images/layout/paw-button-angled-down.png');
outline: none;
}
.header .search-wrapper .search-button:active {
background-image: url('/images/layout/paw-button-angled-down.png');
outline: none;
}
/*==================== Superfish Menu Styles ==========*/
.sf-menu {
margin: 0; padding: 0;
}
.sf-menu a {
padding: 10px 16px;
text-decoration:none;
}
.sf-menu a, .sf-menu a:visited { /* visited pseudo selector so IE6 applies text colour*/
color: #fff;
}
.sf-menu li li a
{
padding: 7px 10px;
}
.sf-menu li {
font-size: 17px;
line-height: 20px;
font-weight: bold;
margin: 0!important; padding: 0!important;
}
.sf-menu li ul{
margin-top: -3px;
background: #444; /* fixes IE7 background not behind li border problem */
width: 12em;
}
.sf-menu li li {
background: #444;
font-size: 15px;
font-weight: normal;
border-bottom: 1px dotted #555;
}
.sf-menu li li li {
background: #555;
}
.sf-menu li:hover, .sf-menu li.sfHover,
.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
background: #888;
color: #b71f38; /* triad red; */
text-decoration: none;
outline: 0;
}
/*//////////////////// Header Layout ==========*/
/*////////////////////////////////////////////////////////////*/
/*============================================================*/
/*==================== Content Layout ==========*/
/*==================== Wrappers ==========*/
.content {
position: relative;
z-index: 2;
width: 100%;
height: 100%;
}
.canvas {
width: 960px;
position: relative;
margin: 0 auto;
padding: 16px 0;
}
/*==================== Content Title ==========*/
.content-header-wrapper
{
position: relative;
display: block;
width: 100%;
margin-bottom: 16px;
}
.breadcrumbs-wrapper
{
float: left;
width: 84%;
height: 20px;
font-size: 10px;
margin-bottom: 4px;
overflow: hidden; /* i want to truncate really long breadcrumbs */
}
.email-print-wrapper
{
width: 16%;
float: right;
text-align: right;
margin-bottom: 4px;
}
.page-title-wrapper
{
clear: both;
border-bottom: 3px double #777;
}
.page-title-wrapper h1
{
margin: 1px; /* fixes corner redraw glitches that pop up sparatically in some broswers as you scoll, ect */
padding: 4px 4px 4px 4px;
}
/*==================== Side Menu ==========*/
.side-menu-box
{
border: none;
background: none;
padding: 0 5px;
}
.side-menu-box h2
{
background: none;
padding: 0 5px;
color: #771425; /* medium red */
line-height:29px;
border-bottom: 1px solid #888;
margin-bottom: 10px;
font-size: 14px;
}
.side-menu-box ul
{
list-style-type: none;
margin: 0 0 10px 10px!important;
left: 0!important;
}
.side-menu-box ul li a
{
text-decoration: none;
}
.side-menu-box ul li a:hover
{
text-decoration: underline;
}
.ekflexmenu_accessible_menu_startlink, .ekflexmenu_accessible_menu_endlink, .ekflexmenu_accessible_menuitem_selected_message
{
display: none;
}
.ekflexmenu_accessible_menu_start
{
display: none;
}
.side-bar-bg-wrapper{
position: absolute;
top: 0px;
left: 10px;
height: 100%;
width: 220px;
background: #eee;
z-index: -1000;
}
.side-bar-bg-left
{
position: absolute;
top: 0px;
left: 0px;
width: 110px;
height: 100%;
z-index: -999;
background: #eee;
background: -moz-linear-gradient(left, rgba(221,221,221,1) 0%, rgba(238,238,238,1) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(221,221,221,1)), color-stop(100%,rgba(238,238,238,1)));
background: -webkit-linear-gradient(left, rgba(221,221,221,1) 0%,rgba(238,238,238,1) 100%);
background: -o-linear-gradient(left, rgba(221,221,221,1) 0%,rgba(238,238,238,1) 100%);
background: -ms-linear-gradient(left, rgba(221,221,221,1) 0%,rgba(238,238,238,1) 100%);
background: linear-gradient(left, rgba(221,221,221,1) 0%,rgba(238,238,238,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dddddd', endColorstr='#eeeeee',GradientType=1 );
}
.side-bar-bg-right
{
position: absolute;
top: 0px;
left: 120px;
width: 110px;
height: 100%;
z-index: -999;
background: #eee;
background: -moz-linear-gradient(left, rgba(238,238,238,1) 0%, rgba(221,221,221,1) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(238,238,238,1)), color-stop(100%,rgba(221,221,221,1)));
background: -webkit-linear-gradient(left, rgba(238,238,238,1) 0%,rgba(221,221,221,1) 100%);
background: -o-linear-gradient(left, rgba(238,238,238,1) 0%,rgba(221,221,221,1) 100%);
background: -ms-linear-gradient(left, rgba(238,238,238,1) 0%,rgba(221,221,221,1) 100%);
background: linear-gradient(left, rgba(238,238,238,1) 0%,rgba(221,221,221,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#dddddd',GradientType=1 );
}
.ekflexmenu_accessible_menu_startlink, .ekflexmenu_accessible_menu_endlink, .ekflexmenu_accessible_menuitem_selected_message
{
display: none;
}
.ekflexmenu_accessible_menu_start
{
display: none;
}
/*//////////////////// Content Layout ==========*/
/*////////////////////////////////////////////////////////////*/
/*============================================================*/
/*==================== Footer Layout ==========*/
.footer {
position: relative;
width: 100%;
background: #005daa;
/*
background: -moz-linear-gradient(top, #005daa 0%, #193c69 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#005daa), color-stop(100%,#193c69));
background: -webkit-linear-gradient(top, #005daa 0%,#193c69 100%);
background: -o-linear-gradient(top, #005daa 0%,#193c69 100%);
background: -ms-linear-gradient(top, #005daa 0%,#193c69 100%);
background: linear-gradient(to bottom, #005daa 0%,#193c69 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#005daa', endColorstr='#193c69',GradientType=0 );
*/
}
.footer-bar-wrapper {
color: #fff;
font-size: 11px;
font-family: Arial, Sans-Serif;
margin: 0;
padding: 0;
width: 100%;
background: #005daa;
background: -moz-linear-gradient(top, #005daa 0%, #193c69 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#005daa), color-stop(100%,#193c69));
background: -webkit-linear-gradient(top, #005daa 0%,#193c69 100%);
background: -o-linear-gradient(top, #005daa 0%,#193c69 100%);
background: -ms-linear-gradient(top, #005daa 0%,#193c69 100%);
background: linear-gradient(to bottom, #005daa 0%,#193c69 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#005daa', endColorstr='#193c69',GradientType=0 );
}
.footer .footer-bar-wrapper p {
color: #fff;
font-size: 11px;
margin: 10px 0;
padding: 0;
}
.footer .footer-links a {
color: #fff;
}
.footer .footer-links a:hover {
color: #EAB73A;
}
.footer .copyright {
text-align: right;
}
.footer-campuses-wrapper {
padding-top: 10px;
/*color: #fff;*/
font-size: 11px;
background: rgb(255,255,255);
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(221,221,221,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(221,221,221,1)));
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(221,221,221,1) 100%);
background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(221,221,221,1) 100%);
background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(221,221,221,1) 100%);
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(221,221,221,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#dddddd',GradientType=0 );
}
.footer-campuses-wrapper a:link,
.footer-campuses-wrapper a:visited {
color: #417ec1;
}
.footer-campuses-wrapper a:hover,
.footer-campuses-wrapper a:active {
color: #b5a933;
}
.footer-campuses-wrapper .container_12 {
/*
border-right: 2px solid #ddd;
border-left: 2px solid #ddd;
*/
}
.footer-campuses-wrapper .campus-inner-wrapper {
position: relative;
height: 100%;
width: 100%;
}
.footer-campuses-wrapper .campuses-divider{
/*
position: absolute;
top: 0px;
right: -10px;
height: 100%;
width: 0px;
border-right: 1px solid #ddd;
border-left: 1px solid #ddd;
*/
}
.footer-campuses-wrapper h2,
.footer-campuses-wrapper address {
display: inline;
}
.footer-campuses-wrapper h2 {
font-size: 10px;
font-family: Verdana, sans-serif;
}
.footer-campuses-wrapper h2 a {
font-size: 10px;
}
.footer-campuses-wrapper address {
font-style: normal;
font-size: 10px;
}
.footer-campuses-wrapper .hlc-logo {
float: right;
height: 80px;
margin-bottom: 10px;
}
.footer-campuses-wrapper .google-map-link {
float: left;
margin-right: 20px;
}
.footer-campuses-wrapper .google-map-link img {
height: 60px;
width: 60px;
}
.footer-bottom-border {
height: 10px;
background: rgb(25,60,105); /* Old browsers */
background: -moz-linear-gradient(top, rgba(25,60,105,1) 0%, rgba(0,93,170,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(25,60,105,1)), color-stop(100%,rgba(0,93,170,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(25,60,105,1) 0%,rgba(0,93,170,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(25,60,105,1) 0%,rgba(0,93,170,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(25,60,105,1) 0%,rgba(0,93,170,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(25,60,105,1) 0%,rgba(0,93,170,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#193c69', endColorstr='#005daa',GradientType=0 ); /* IE6-9 */
}
/* site toggle button (mobile/desktop) */
.siteToggleButton{
margin-bottom: 0px;
padding-left: 5px;
}
/*//////////////////// Footer Layout ==========*/
/*////////////////////////////////////////////////////////////*/
Looks like the white gap is the menu items wrapping. The text is white so you just can't see them doing it.
Add this style to sw_layout.css
.main-menu {
width: 100%;
height: 40px;
font-family: Arial;
overflow: hidden;
}
While this will get you pointed/repointed in a reasonable direction, the wrapping of menu items in this way could be considered a design limitation, where the content managers need to work within the limitations of their site's design, or the design should change to suite their needs.
If you want, give width: 101%; a try.
So I'm working on a layout and have completed the header. When I started working on the body content, I kept running into the issue where the header would overlap the body unless I set a top margin of the body wrapper to something huge (300+px) even then it can overlap when the screen is small. I think I have screwed up the positioning somewhere but I can't seem to figure out how to overcome this.
My HTML:
<body>
<div id="pageWrapper">
<div id="mainHeader">
<div id="mainNav">
<div id="navContent">
<div class="mainLogo"></div>
<div style="display: inline-block;">
<ul>
<li><img class="navIcons" src="http://lifeview.michiganweb.org/img/icons/dashboard.png" />Dashboard</li>
<li><img class="navIcons" src="http://lifeview.michiganweb.org/img/icons/patient.png" />Patients</li>
<li><img class="navIcons" src="http://lifeview.michiganweb.org/img/icons/devices.png" />Devices</li>
<li><img class="navIcons" src="http://lifeview.michiganweb.org/img/icons/account.png" />Account</li>
<li><img class="navIcons" src="http://lifeview.michiganweb.org/img/icons/support.png" />Support</li>
</ul>
</div>
<div class="lvpLogo"><strong>LifeView</strong> Portal</div>
</div>
</div>
<div id="subNav">
<span class="loginName">Doctor Brian Town</span>
</div>
</div>
<div id="bodWrap">
<div class="statWrap"><div class="titleWrap"><span>Chronic Disease Summary</span></div>
<img src="http://lifeview.michiganweb.org/img/icons/support.png" /><img src="img/icons/account.png" /><img src="http://lifeview.michiganweb.org/img/icons/devices.png" /><img src="http://lifeview.michiganweb.org/img/icons/patient.png" />
</div>
<div class="statWrap"><div class="titleWrap"><span>Vital Summary</span></div>
</div>
<div class="statWrap"><div class="titleWrap"><span>Alerts</span></div>
</div>
</div>
</div>
</body>
My CSS:
#charset "utf-8";
body {
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 14px;
}
.pageWrapper {
width: 100%;
position: fixed;
}
.mainLogo {
background:url(http://lifeview.michiganweb.org/img/home_02.png) no-repeat left;
height: 77px;
width: 300px;
display: inline-block;
margin-left: 26px;
margin-right: 30px;
float: left;
}
#mainHeader {
position: absolute;
left: 0;
top: 0;
width: 100%;
overflow: hidden;
border: 1px;
}
#mainNav {
/*height: 109px;*/
width: 100%;
float: left;
left: 0px;
margin: 0px;
padding: 0px;
color: #FFFFFF;
/*background:url(http://lifeview.michiganweb.org/img/home_01.jpg) repeat-x scroll top;*/
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(top, #0e448e 0%, #2b2c2e 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(top, #0e448e 0%, #2b2c2e 100%);
/* Opera */
background-image: -o-linear-gradient(top, #0e448e 0%, #2b2c2e 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #0e448e), color-stop(1, #2b2c2e));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(top, #0e448e 0%, #2b2c2e 100%);
/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to bottom, #0e448e 0%, #2b2c2e 100%);
}
#navContent {
padding-top: 20px;
}
#mainNav #navContent ul {
list-style: none;
margin: 0 auto;
padding: 0;
}
#mainNav #navContent li {
float: left;
}
#mainNav #navContent li a {
display: inline-block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #FFF;
border-right: 1px solid #ccc;
}
#mainNav #navContent li:first-child a {
border-left: 1px solid #ccc;
}
#mainNav #navContent li a:hover {
color: #23afff;
}
#mainNav #navContent h1 {
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 24px;
margin-bottom: 2px;
}
.lvpLogo {
margin: auto auto auto auto;
display: inline-block;
word-spacing: 20px;
vertical-align: top;
float: right;
padding-right: 80px;
}
.lvpLogo strong {
font-family: Verdana, Geneva, sans-serif;
font-size: 36px;
margin-bottom: 2px;
}
.navIcons {
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: 1px;
height: 35px;
width: 35px;
}
#subNav {
overflow: hidden;
height: 40px;
width: 100%;
margin: 0px;
padding: 0px;
color: #000000;
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(top, #FFFFFF 0%, #cccccc 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(top, #FFFFFF 0%, #cccccc 100%);
/* Opera */
background-image: -o-linear-gradient(top, #FFFFFF 0%, #cccccc 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(1, #cccccc));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #cccccc 100%);
/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to bottom, #FFFFFF 0%, #cccccc 100%);
}
.loginName {
float: right;
margin-right: 120px;
color: #000000;
font-weight: bold;
line-height: 40px;
margin-bottom: 2px;
}
#bodWrap {
width: 100%;
left: 0px;
padding: 0px;
color: #000000;
}
.statWrap {
margin: 10px auto auto auto;
border: 2px solid #000;
border-radius: 19px;
width: 80%;
background-color: #eee;
}
.titleWrap {
postion: absolute;
background-color: #00639c;
top: 0;
height: 30px;
border-radius: 30px;
}
.titleWrap span {
color: #FFFFFF;
font-weight: bold;
margin: auto auto auto 33px;
line-height: 30px;
}
JSfiddle:
http://jsfiddle.net/Artsen/tKdqh/
Test Environment:
http://lifeview.michiganweb.org/
I updated your jsfiddle, please see here: updated code
Basically I changed the position:absolute; to a position:relative; for the mainHeader div
Remove position:absolute only from #mainHeader css
DEMO HERE
http://jsfiddle.net/tKdqh/2/
I want to have the header's navigation to have a box shadow. However, the box-shadow seems to be hidden by the carousel I placed below it. I put a z-index of all children of #carousel but the box-shadow still doesn't show up.
(page snippet)
Here's what happens when I push #carousel down when I give it margin-top: 40px;
(another page snippet)
HTML
<header>
<nav>
<div class="container">
<h1><img src="images/logo.png" alt="" id="logo"></h1>
<h1 id="NHS">Newport High School</h1>
<ul id="nav">
<li>Home</li>
<li>About</li>
<li>Students</li>
<li>Parents</li>
<li>Activities & Atletics</li>
<li>Resources</li>
</ul>
</div><!--container--->
</nav>
</header><div id="carousel">
<div class="inner">
<ul>
<li><img src="images/example-slide-1.jpg" alt="Fish"></li>
<li><img src="images/example-slide-2.jpg" alt="Elephant"></li>
<li><img src="images/example-slide-3.jpg" alt="Giraffe"></li>
<li><img src="images/example-slide-4.jpg" alt="Fish"></li>
</ul>
</div>
</div>
CSS
/* - - - header - - - */
header {
background: rgb(30,27,27); /* Old browsers */
background: -moz-linear-gradient(top, rgba(30,27,27,1) 0%, rgba(2,2,2,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(30,27,27,1)), color-stop(100%,rgba(2,2,2,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(30,27,27,1) 0%,rgba(2,2,2,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(30,27,27,1) 0%,rgba(2,2,2,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(30,27,27,1) 0%,rgba(2,2,2,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(30,27,27,1) 0%,rgba(2,2,2,1) 100%);
box-shadow: 0px 3px 15px rgba(50, 50, 50, .7);
-webkit-box-shadow: 0px 3px 15px rgba(50, 50, 50, .7);
-moz-box-shadow: 0px 3px 15px rgba(50, 50, 50, .7);
z-index: 1000;
}
header h1, header li {
float: left;
}
header a {
color: #A1A1A1 ;
font-family: arial, helvetica, verana, sans-serif;
}
header a:hover {
color: #A1A1A1;
text-decoration: none;
}
#logo {
width: 50px;
}
#NHS {
margin: 1.8% 0 0 2%;
font-size: 1.2em;
text-transform: uppercase;
}
#NHS a {
color: #F6F6F6;
letter-spacing: 2px;
}
#nav {
float: right;
margin: 3% 0 0 0;
}
#nav li {
margin-right: 20px;
padding: 0;
}
#nav li:last-of-type {
margin-right: 0px;
}
#nav a {
font-size: .8em;
text-transform: uppercase;
padding-top: 3px;
font-weight: 400;
}
#nav a:hover {
border-top: 1px dotted #C41D0E;
}
/* - - - carousel - - - */
#carousel {
margin: 40px 0 0 0;
width: 100%;
overflow: hidden;
z-index: -999;
}
#carousel .inner {
box-sizing: border-box;
margin-left: -50px;
z-index: -5000;
}
#carousel ul {
width: 60000px;
height: 480px;
z-index: -5000;
}
#carousel li {
height: 480px;
float: left;
overflow: hidden;
z-index: -5000;
}
#carousel img {
text-align: center;
width: 1375px;
height: auto;
z-index: -5000;
}
Remember z-index only works with positioned elements. So both your carousel and header needs to have a position value other than static and then you can specify a higher z-index to the header. That way box-shadow will appear properly above the carousel.
You only need to add position:relative to the header. The carousel doesn't need a z-index alteration.
try adding !important to your shadowbox. I think that should work.
box-shadow: 0px 3px 15px rgba(50, 50, 50, .7) !important;
-webkit-box-shadow: 0px 3px 15px rgba(50, 50, 50, .7) !important;
-moz-box-shadow: 0px 3px 15px rgba(50, 50, 50, .7) !important;