html - CSS sidebar iframe positioned incorrectly for firefox, chrome & most probably ie -
i have sidebar loads content through iframe. in safari looks fine in chrome & firefox .content div shoots out right can't seem pinpoint why happening.
sidebar.html:
<body> <div id="sidebar" class="open"> <div class="nav"> <div class="tr"> <div class="top"> <ul> <li class="link"><img src="_images/attributes/user.svg"></li> <li class="link"><img src="_images/attributes/contribute.svg"></li> <li class="link"><img src="_images/attributes/attribute2.svg"></li> <li class="link"><img src="_images/attributes/attribute2.svg"></li> <li class="link"><img src="_images/attributes/attribute2.svg"></li> <li class="link"><img src="_images/attributes/attribute2.svg"></li> </ul> </div> </div> <div class="tr"> <div class="middle"> </div> </div> <div class="tr"> <div class="bottom"> <ul> <li class="link"><img src="_images/attributes/attribute2.svg"></li> <li class="link"><img src="_images/attributes/attribute2.svg"></li> <li class="link"><img src="_images/attributes/attribute2.svg"></li> <li class="link"><img src="_images/attributes/attribute2.svg"></li> <li class="current"><img src="_images/attributes/attribute2.svg"></li> </ul> </div> </div> </div> <div class="content"> <iframe src="content.html" frameborder="0"></iframe> </ul> </div> </div> <div id="dummy-column"></div> </body> sidebar.css:
html, body {height:100%; margin:0; padding:0;} #sidebar { position:fixed; top:0; bottom:0; overflow:auto; text-align: center; width: 20em; z-index:2; color: #ffffff; background-color: #303030; -moz-box-shadow: inset -30px 0 30px -10px #222; -webkit-box-shadow: inset -30px 0 30px -10px #222; box-shadow: inset -30px 0 30px -10px #222; -webkit-transition:margin 1s ease-in; -moz-transition:margin 1s ease-in; -ms-transition:margin 1s ease-in; transition:margin 1s ease-in; white-space: nowrap; } .nav{ display:table; height:100%; table-layout:fixed; width:3em; float: right; background-color: #2a2a2a; border-left: 2px groove #454545; -moz-box-shadow: inset -10px 0 10px -10px #000; -webkit-box-shadow: inset -10px 0 10px -10px #000; box-shadow: inset -10px 0 10px -10px #000; } .content { height:100%; position: fixed; width: 16.875em; float: right; display:inline-block; color:#eee; font-family: "georgia", sans-serif; } .content iframe{ width: 100%; height:100%; overflow-y: auto; overflow-x: hidden; } .top, .bottom, .middle { width:3em; display:table-cell; text-align: center; } .top{vertical-align:top;} .middle {vertical-align:middle;} .bottom{vertical-align:bottom;} .top,.bottom{height:1px} .tr{display:table-row} #sidebar ul {margin:0; padding: 0;} #sidebar .nav li { padding: .5625em; list-style:none; position: relative; } #sidebar .nav li img { height: 1.875em; width: 1.875em } #sidebar .nav li:before { content: ""; position: absolute; left:0; top:0; height: 100%; width: 3px; background:white; visibility: hidden; } #sidebar .nav li.link:hover:before, #sidebar .nav li.current:before { visibility: visible; } #sidebar .nav .top li { border-bottom: 2px groove #454545 } #sidebar .nav .bottom li { border-top: 2px groove #454545 } #sidebar .content li { min-height: 4em; vertical-align: middle; border-bottom: 2px groove #454545; line-height: 4em; text-shadow: 2px 2px 2px #000; width: 100%; list-style:none; letter-spacing: 0.2em; font-size: .9em; background: -moz-linear-gradient(left, rgba(58,58,58,0) 0%, rgba(58,58,58,0.57) 20%, rgba(58,58,58,1) 35%, rgba(58,58,58,1) 65%, rgba(58,58,58,0.57) 80%, rgba(58,58,58,0) 100%); /* ff3.6+ */ background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(58,58,58,0)), color-stop(20%,rgba(58,58,58,0.57)), color-stop(35%,rgba(58,58,58,1)), color-stop(65%,rgba(58,58,58,1)), color-stop(80%,rgba(58,58,58,0.57)), color-stop(100%,rgba(58,58,58,0))); /* chrome,safari4+ */ background: -webkit-linear-gradient(left, rgba(58,58,58,0) 0%,rgba(58,58,58,0.57) 20%,rgba(58,58,58,1) 35%,rgba(58,58,58,1) 65%,rgba(58,58,58,0.57) 80%,rgba(58,58,58,0) 100%); /* chrome10+,safari5.1+ */ background: -o-linear-gradient(left, rgba(58,58,58,0) 0%,rgba(58,58,58,0.57) 20%,rgba(58,58,58,1) 35%,rgba(58,58,58,1) 65%,rgba(58,58,58,0.57) 80%,rgba(58,58,58,0) 100%); /* opera 11.10+ */ background: -ms-linear-gradient(left, rgba(58,58,58,0) 0%,rgba(58,58,58,0.57) 20%,rgba(58,58,58,1) 35%,rgba(58,58,58,1) 65%,rgba(58,58,58,0.57) 80%,rgba(58,58,58,0) 100%); /* ie10+ */ background: linear-gradient(to right, rgba(58,58,58,0) 0%,rgba(58,58,58,0.57) 20%,rgba(58,58,58,1) 35%,rgba(58,58,58,1) 65%,rgba(58,58,58,0.57) 80%,rgba(58,58,58,0) 100%); /* w3c */ } #sidebar .content .sub-menu li { font-size: .8em; min-height: 6em; line-height: 6em; text-shadow: 1px 1px 1px #000; border-bottom: 2px ridge #454545; margin: 0; width:100%; background: #303030; } #sidebar .content .sub-menu li:last-child {border-bottom: none;} #dummy-column { width: 20em; float:left; height:100px; position:relative; -webkit-transition:margin 1s ease-in; -moz-transition:margin 1s ease-in; -ms-transition:margin 1s ease-in; transition:margin 1s ease-in; } /*to account scrollbars - better make javascript backup*/ /*if hasscrollbar width =+ scrollbarwidth*/ @media , (max-height: 37.1em) { #sidebar{width:20.9375em;} #dummy-column{width:20.9375em;} } content.html:
<body> <div id="sidebar"> <div class="content"> <p class="title">mission control</p> <ul> <li class="heading">recent changes</li> <li class="sub-menu"><ul> <li>content sub-menu</li> <li>content sub-menu</li> <li>content sub-menu</li> </ul></li> <li class="heading">formatting</li> <li class="sub-menu"><ul> <li>content sub-menu</li> <li>content sub-menu</li> <li>content sub-menu</li> </ul></li> <li class="heading">categorise</li> <li class="sub-menu"><ul> <li>content sub-menu</li> <li>content sub-menu</li> <li>content sub-menu</li> </ul></li> <li class="heading">categorise</li> <li class="sub-menu"><ul> <li>content sub-menu</li> <li>content sub-menu</li> <li>content sub-menu</li> </ul></li> </ul> </div> </div> content.css:
html, body { margin:0; padding:0; height:100%; overflow-x:hidden} #sidebar { text-align: center; width: 16.875em; color: #ffffff; background-color: #333333; } .content { width: 16.875em; display:inline-block; color:#fff; } #sidebar ul {margin:0; padding: 0;} #sidebar .content li { min-height: 4em; vertical-align: middle; border-bottom: 2px groove #454545; line-height: 4em; text-shadow: 2px 2px 2px #000; width: 100%; z-index: 3; list-style:none; letter-spacing: 0.15em; font-size: 1em; font-style: italic; background: #333; z-index: 1; position: relative; } #sidebar .content .sub-menu li { font-size: .8em; min-height: 4em; line-height: 4em; text-shadow: 1px 1px 1px #000; border-bottom: 2px ridge #454545; margin: 0; width:100%; background: #2d2d2d; font-style: normal; } #sidebar .content p.title { font-size: .95em; min-height: 5em; line-height: 5em; text-shadow: 2px 2px 2px #000; border-bottom: 2px ridge #454545; margin: 0; width: 100%; z-index: 100; box-shadow: 0 1em 1em -1em #1a1a1a; z-index: 3; position: relative; letter-spacing: .2em; background: #393939; } #sidebar .content li.heading { z-index: 2; position: relative; text-align:left; padding-left: 1em; } #sidebar .content .sub-menu li:last-child {border-bottom: none;} any ideas on why .content shoot out side in chrome & firefox not safari?
here screenshot of correctly rendered: http://img818.imageshack.us/img818/716/screenshot20130504at113.png
i'm not sure if got problem try remove text-align: center; #sidebar in sidebar.css.
Comments
Post a Comment