unseenghost
New Member
How it should look like and does in FF:
How it looks in chrome:
http://mindwuehle.de/ - Have a look for yourselfI ran into a weird issue working on my current project. I am working on a wordpress theme using bootstrap. The theme has a top navigation bar with menus and sub-menus.But for some reason the second drop down does not get displayed properly, parts are hidden. There is no div of that size anywhere, also with "inspect element" I was not able to figure it out. The weirdest part however: When you move to the issue link from the left, the dropdown displays correctly, if you come in from the right side, it is broken. I did not change anything in the bootstrap css, so I will only attach my own stylesheet and the html as the mistake is very likely to be found somewhere here:\[code\]html, body { height: 100%;}#wrap { min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -120px;}/** * Global Styles */a , a:hover, a:visited, a:focus, a:active{ -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-tap-highlight-color: transparent;}body{ background: #fff;}header{ background: #a31010; height: 100px; color: white; padding-top: 25px; padding-bottom: 25px; font-size: 24px;}p { text-align: justify;}i.button-overlay { position: absolute; margin: 8px; z-index: 1;}.nav-pills>li>a:hover { color: #000;}.if-ie { position: absolute; right:5em; width: 500px;}.close { font-size: 40px;}.form-search { margin: 20px auto; margin-bottom: 20px; width: 210px;}.page-header { margin-top:0px; border-bottom: 0px; margin-left:0px;}.page-header a{ color: white;}.page-header a:hover{ text-decoration: none;}li.widget { list-style-type: none;}#page-content { -webkit-box-shadow: 0px 1px 1px 1 rgba(0,0,0,.5); -moz-box-shadow: 0px 1px 1px rgba(0,0,0,.5); box-shadow: 0px 1px 1px rgba(0,0,0,.5); background-color: #fff; margin-top: -10px; z-index: 3;}/*** Desktop Navigation, issue may be here somewhere*/.navbar .nav>li>a.issue{ color: red;}.navbar{ -webkit-box-shadow: 0px 1px 20px 1 rgba(0,0,0,.5); -moz-box-shadow: 0px 1px 20px rgba(0,0,0,.5); box-shadow: 0px 1px 20px rgba(0,0,0,.5);}.nav { width: 100%;}.navbar ul ul { position: absolute; top:-99999999px; opacity: 0; background-color:#f8f8f8; color:#000; text-align: left; box-shadow: 2px 2px 0 #b5b5b5; list-style-type: none; margin-left: 0;}.navbar ul li:hover > ul{ position: absolute; top:100%; opacity: 1; border-top: 1px solid #a7a7a7; z-index: 3;}.navbar .navbar-inner { padding: 0; min-height: 40px; padding-left: 20px; padding-right: 20px; background-color: #d6d4bb; background-image: -moz-linear-gradient(top, ##d6d4bb, ##c3c09c); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(##d6d4bb), to(##c3c09c)); background-image: -webkit-linear-gradient(top, ##d6d4bb, ##c3c09c); background-image: -o-linear-gradient(top, ##d6d4bb, ##c3c09c); background-image: linear-gradient(to bottom, ##d6d4bb, ##c3c09c); background-repeat: repeat-x; filter: progid
XImageTransform.Microsoft.gradient(startColorstr='##d6d4bbf', endColorstr='#ff#c3c09c', GradientType=0); border: 1px solid #d4d4d4; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.065); -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.065); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.065);}.navbar ul ul a { width: 160px; line-height: 40px; padding: 0 20px; display: block;}.sub-menu a { border-right:0px;}.sub-menu ul.sub-menu{ margin-left:5px;}ul.nav ul.sub-menu li { display:block; z-index: 3;}ul.nav ul.sub-menu li:hover > ul{ position: absolute; top:0px; opacity: 1; left:197px; border-top: 0px;}ul.nav ul.sub-menu a{ text-align: left;}.navbar ul li { position: relative; float:left;}.navbar .nav { -webkit-margin: 0; -moz-margin:-10px 0 0;}.navbar .nav li { display: table-cell; width: 1%; float: none;}.navbar .nav li a{ font-weight: bold; text-align: center; border-left: 1px solid rgba(255,255,255,.75); border-right: 1px solid rgba(0,0,0,.1);}ul.sub-menu li a { color: #777777; text-decoration: none; text-shadow: 0 1px 0 #ffffff;}ul.sub-menu li a:hover { color: #a31010; text-decoration: none; text-shadow: 0 1px 0 #ffffff;}.navbar .nav li:first-child a { border-left: 0;}.navbar .nav li:last-child a { border-right: 0;}ul.sub-menu li a:hover { background-color: #e3e3e3;}/******** End of Navigation **********/.item img{ width: 100%;}.media{ padding: 15px; border-bottom: 3px solid #e5e5e5;}.nav-pills>.active>a, .nav-pills>.active>a:hover, .nav-pills>.active>a:focus {color: #ffffff;background-color: #a31010;}.hero-unit { padding:0; }\[/code\]HTML: navigation issue ×</button> Warning!</h4> You use an old browser. To view this website correctly please use a newer Version of Chrome or Firefox. </div> \[code\] </div> </div> </div> </div> </header> <div class="hidden-phone"> <div class="navbar"> <div class="navbar-inner"> <div class="menu-main-nav-container"> <ul id="menu-main-nav" class="nav"> <li id="menu-item" class="menu-item menu-item-home"> <a href="http://stackoverflow.com/questions/15670980/#">Start</a> </li> <li id="menu-item" class="menu-item"><a class="issue" href="http://stackoverflow.com/questions/15670980/#">Issues here</a> <ul class="sub-menu"> <li id="menu-item" class="menu-item "><a href="http://stackoverflow.com/questions/15670980/#">Link</a></li> <li id="menu-item" class="menu-item "><a href="http://stackoverflow.com/questions/15670980/#">Link</a></li> <li id="menu-item" class="menu-item "><a href="http://stackoverflow.com/questions/15670980/#">Link</a></li> </ul> </li> <li id="menu-item" class="menu-item "><a href="http://stackoverflow.com/questions/15670980/#">Link</a> <ul class="sub-menu"> <li id="menu-item" class="menu-item "> <a href="http://stackoverflow.com/questions/15670980/#">Link</a> </li> <li id="menu-item" class="menu-item "> <a href="http://stackoverflow.com/questions/15670980/#">Link</a> </li> <li id="menu-item" class="menu-item "><a href="http://stackoverflow.com/questions/15670980/#">Link</a> <ul class="sub-menu"> <li id="menu-item" class="menu-item "> <a href="http://stackoverflow.com/questions/15670980/#">Sub-Link</a> </li> <li id="menu-item" class="menu-item"> <a href="http://stackoverflow.com/questions/15670980/#">Sub-Link</a> </li> <li id="menu-item" class="menu-item"> <a href="http://stackoverflow.com/questions/15670980/#">Sub-Link</a> </li> </ul> </li> <li id="menu-item" class="menu-item"> <a href="http://stackoverflow.com/questions/15670980/#">Link</a> </li> </ul> </li> <li id="menu-item" class="menu-item "> <a href="http://stackoverflow.com/questions/15670980/#">Link</a> </li> <li id="menu-item" class="menu-item"> <a href="http://stackoverflow.com/questions/15670980/#">Link</a> </li> <li id="menu-item" class="menu-item "><a href="http://stackoverflow.com/questions/15670980/#">Link</a> <ul class="sub-menu"> <li id="menu-item" class="menu-item "> <a href="http://stackoverflow.com/questions/15670980/#">Link</a> </li> <li id="menu-item" class="menu-item"> <a href="http://stackoverflow.com/questions/15670980/#">Link</a> </li> </ul> </li> <li id="menu-item" class="menu-item"> <a href="http://stackoverflow.com/questions/15670980/#">Link</a> </li> </ul> </div> </div> </div> </div> <div id="main-content" class="container"> <div class="row"> <div class="span8"> <div class="textwidget"> <div class="hero-unit well"> <h4>Call to Action Text</h4> <a href="http://stackoverflow.com/questions/15670980/#/" class="btn btn-success btn-small">more</a> </div> </div> </div> <div class="span4 randompic"> <div class="form-search"> <form method="get" class="input-append" id="searchform" action="#"> <input type="text" class="field span2" name="s" id="appendedInputButton" placeholder="enter text" /> <i class="icon-search button-overlay"></i><input type="submit" class="submit btn" name="submit" id="searchsubmit" value="http://stackoverflow.com/questions/15670980/ Search" /> </form> </div> <h4 class="widgettitle right ">Next events</h4><div class="" id=""><p>There are currently no events to display.</p></div> </div> </div> <div class="row"> <div class="span8"> <h3><a href="http://stackoverflow.com/questions/15670980/#">Lorem ipsum Lorem ipsum</a></h3> <h5>Date: 31. Mar, 2013 | Category: <a href="http://stackoverflow.com/questions/15670980/#" title="View all articles" rel="category tag">Article</a></h5> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> </div> <div class="span4 sidebar"> <ul class="nav nav-pills"> <li class="active"><a href="http://stackoverflow.com/questions/15670980/#tab-one" data-toggle="tab">Recent entries</a></li> <li><a href="http://stackoverflow.com/questions/15670980/#tab-two" data-toggle="tab">Articles</a></li> <li><a href="http://stackoverflow.com/questions/15670980/#tab-three" data-toggle="tab">Events</a></li> </ul> <div id="home-tab-container" class="tab-content well"> <div class="tab-pane fade active in" id="tab-one"> <ul> <li class="crpw-item"> <a href="http://stackoverflow.com/questions/15670980/#" rel="bookmark" title="Permanent link to Lorem ipsum" class="crpw-title">Lorem ipsum</a> </li> <li class="crpw-item"> <a href="http://stackoverflow.com/questions/15670980/#" rel="bookmark" title="Permanent link to Hello World!" class="crpw-title">Hello World!</a> </li> <li class="crpw-item"> <a href="http://stackoverflow.com/questions/15670980/#" rel="bookmark" title="Permanent link to Test number 2" class="crpw-title">Test number 2</a> </li> </ul> </div> <div class="tab-pane fade" id="tab-two"> <ul> <li class="crpw-item"> <a href="http://stackoverflow.com/questions/15670980/#" rel="bookmark" title="Permanent link to Lorem ipsum Lorem ipsum" class="crpw-title">Lorem ipsum Lorem ipsum</a> </li> </ul> </div> <div class="tab-pane fade" id="tab-three"> <div class="" id=""> <p>There are currently no events to display.</p> </div> </div> </div> </div> </div> <div id="push"></div> </div></div><footer></footer></body></html> \[/code\]I would be so happy if this gets fixed somehow, ran out of ideas myself... Thanks in advance!
XImageTransform.Microsoft.gradient(startColorstr='##d6d4bbf', endColorstr='#ff#c3c09c', GradientType=0); border: 1px solid #d4d4d4; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.065); -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.065); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.065);}.navbar ul ul a { width: 160px; line-height: 40px; padding: 0 20px; display: block;}.sub-menu a { border-right:0px;}.sub-menu ul.sub-menu{ margin-left:5px;}ul.nav ul.sub-menu li { display:block; z-index: 3;}ul.nav ul.sub-menu li:hover > ul{ position: absolute; top:0px; opacity: 1; left:197px; border-top: 0px;}ul.nav ul.sub-menu a{ text-align: left;}.navbar ul li { position: relative; float:left;}.navbar .nav { -webkit-margin: 0; -moz-margin:-10px 0 0;}.navbar .nav li { display: table-cell; width: 1%; float: none;}.navbar .nav li a{ font-weight: bold; text-align: center; border-left: 1px solid rgba(255,255,255,.75); border-right: 1px solid rgba(0,0,0,.1);}ul.sub-menu li a { color: #777777; text-decoration: none; text-shadow: 0 1px 0 #ffffff;}ul.sub-menu li a:hover { color: #a31010; text-decoration: none; text-shadow: 0 1px 0 #ffffff;}.navbar .nav li:first-child a { border-left: 0;}.navbar .nav li:last-child a { border-right: 0;}ul.sub-menu li a:hover { background-color: #e3e3e3;}/******** End of Navigation **********/.item img{ width: 100%;}.media{ padding: 15px; border-bottom: 3px solid #e5e5e5;}.nav-pills>.active>a, .nav-pills>.active>a:hover, .nav-pills>.active>a:focus {color: #ffffff;background-color: #a31010;}.hero-unit { padding:0; }\[/code\]HTML: navigation issue ×</button> Warning!</h4> You use an old browser. To view this website correctly please use a newer Version of Chrome or Firefox. </div> \[code\] </div> </div> </div> </div> </header> <div class="hidden-phone"> <div class="navbar"> <div class="navbar-inner"> <div class="menu-main-nav-container"> <ul id="menu-main-nav" class="nav"> <li id="menu-item" class="menu-item menu-item-home"> <a href="http://stackoverflow.com/questions/15670980/#">Start</a> </li> <li id="menu-item" class="menu-item"><a class="issue" href="http://stackoverflow.com/questions/15670980/#">Issues here</a> <ul class="sub-menu"> <li id="menu-item" class="menu-item "><a href="http://stackoverflow.com/questions/15670980/#">Link</a></li> <li id="menu-item" class="menu-item "><a href="http://stackoverflow.com/questions/15670980/#">Link</a></li> <li id="menu-item" class="menu-item "><a href="http://stackoverflow.com/questions/15670980/#">Link</a></li> </ul> </li> <li id="menu-item" class="menu-item "><a href="http://stackoverflow.com/questions/15670980/#">Link</a> <ul class="sub-menu"> <li id="menu-item" class="menu-item "> <a href="http://stackoverflow.com/questions/15670980/#">Link</a> </li> <li id="menu-item" class="menu-item "> <a href="http://stackoverflow.com/questions/15670980/#">Link</a> </li> <li id="menu-item" class="menu-item "><a href="http://stackoverflow.com/questions/15670980/#">Link</a> <ul class="sub-menu"> <li id="menu-item" class="menu-item "> <a href="http://stackoverflow.com/questions/15670980/#">Sub-Link</a> </li> <li id="menu-item" class="menu-item"> <a href="http://stackoverflow.com/questions/15670980/#">Sub-Link</a> </li> <li id="menu-item" class="menu-item"> <a href="http://stackoverflow.com/questions/15670980/#">Sub-Link</a> </li> </ul> </li> <li id="menu-item" class="menu-item"> <a href="http://stackoverflow.com/questions/15670980/#">Link</a> </li> </ul> </li> <li id="menu-item" class="menu-item "> <a href="http://stackoverflow.com/questions/15670980/#">Link</a> </li> <li id="menu-item" class="menu-item"> <a href="http://stackoverflow.com/questions/15670980/#">Link</a> </li> <li id="menu-item" class="menu-item "><a href="http://stackoverflow.com/questions/15670980/#">Link</a> <ul class="sub-menu"> <li id="menu-item" class="menu-item "> <a href="http://stackoverflow.com/questions/15670980/#">Link</a> </li> <li id="menu-item" class="menu-item"> <a href="http://stackoverflow.com/questions/15670980/#">Link</a> </li> </ul> </li> <li id="menu-item" class="menu-item"> <a href="http://stackoverflow.com/questions/15670980/#">Link</a> </li> </ul> </div> </div> </div> </div> <div id="main-content" class="container"> <div class="row"> <div class="span8"> <div class="textwidget"> <div class="hero-unit well"> <h4>Call to Action Text</h4> <a href="http://stackoverflow.com/questions/15670980/#/" class="btn btn-success btn-small">more</a> </div> </div> </div> <div class="span4 randompic"> <div class="form-search"> <form method="get" class="input-append" id="searchform" action="#"> <input type="text" class="field span2" name="s" id="appendedInputButton" placeholder="enter text" /> <i class="icon-search button-overlay"></i><input type="submit" class="submit btn" name="submit" id="searchsubmit" value="http://stackoverflow.com/questions/15670980/ Search" /> </form> </div> <h4 class="widgettitle right ">Next events</h4><div class="" id=""><p>There are currently no events to display.</p></div> </div> </div> <div class="row"> <div class="span8"> <h3><a href="http://stackoverflow.com/questions/15670980/#">Lorem ipsum Lorem ipsum</a></h3> <h5>Date: 31. Mar, 2013 | Category: <a href="http://stackoverflow.com/questions/15670980/#" title="View all articles" rel="category tag">Article</a></h5> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> </div> <div class="span4 sidebar"> <ul class="nav nav-pills"> <li class="active"><a href="http://stackoverflow.com/questions/15670980/#tab-one" data-toggle="tab">Recent entries</a></li> <li><a href="http://stackoverflow.com/questions/15670980/#tab-two" data-toggle="tab">Articles</a></li> <li><a href="http://stackoverflow.com/questions/15670980/#tab-three" data-toggle="tab">Events</a></li> </ul> <div id="home-tab-container" class="tab-content well"> <div class="tab-pane fade active in" id="tab-one"> <ul> <li class="crpw-item"> <a href="http://stackoverflow.com/questions/15670980/#" rel="bookmark" title="Permanent link to Lorem ipsum" class="crpw-title">Lorem ipsum</a> </li> <li class="crpw-item"> <a href="http://stackoverflow.com/questions/15670980/#" rel="bookmark" title="Permanent link to Hello World!" class="crpw-title">Hello World!</a> </li> <li class="crpw-item"> <a href="http://stackoverflow.com/questions/15670980/#" rel="bookmark" title="Permanent link to Test number 2" class="crpw-title">Test number 2</a> </li> </ul> </div> <div class="tab-pane fade" id="tab-two"> <ul> <li class="crpw-item"> <a href="http://stackoverflow.com/questions/15670980/#" rel="bookmark" title="Permanent link to Lorem ipsum Lorem ipsum" class="crpw-title">Lorem ipsum Lorem ipsum</a> </li> </ul> </div> <div class="tab-pane fade" id="tab-three"> <div class="" id=""> <p>There are currently no events to display.</p> </div> </div> </div> </div> </div> <div id="push"></div> </div></div><footer></footer></body></html> \[/code\]I would be so happy if this gets fixed somehow, ran out of ideas myself... Thanks in advance!