I am facing a input select dropdown problem in Firefox browser but it works fine in Google Chrome.
I have created a jQuery submenu box. My problem is when I put content in the content area of the submenu, its ok. But when I am creating a select box in that content area its not working in Firefox but works fine chrome browser...I mean I can't select any option of that select box when I am trying to select option 2, option 3 etc, the whole thing got disappear.
I need your help regarding this.
Here is my html code:
<div class="layout_nemo" style="margin:0px auto; width:520px;">
<aside id="models">
<section class="nestingList" style="width:520px;">
<div style="float:right; width:100px; border:1px solid #f00; text-align:right">A5
</div>
<div style="clear:both; margin:0px; padding:0px;"></div>
<div class="flyout" style="border:3px solid #000;">
<div class="inner">
<div class="col" style="float:right;">
<ul class="nav">
<li>A5 Coupé
</li>
<li>A5 Sportback
</li>
</ul>
</div>
<div class="articles" style="float:left;">
<article class="visuallyhidden">
<select name="bvgn " style="border:1px solid #000; height:30px;width:180px;">
<option>option1</option>
<option>option2</option>
<option>option3</option>
<option>option4</option>
</select>
<select name="bvgn " style="border:1px solid #000; height:30px;width:180px;">
<option>option5</option>
<option>option6</option>
<option>option7</option>
<option>option8</option>
</select>
</article>
<article class="visuallyhidden" style="border:7px solid #3C0; height:30px;">content here</article>
</div>
</div>
</div>
</section>
</aside>
</div>
And the CSS code:
.visuallyhidden {
border:0;
clip:rect(0 0 0 0);
height:1px;
margin:-1px;
overflow:hidden;
padding:0;
position:absolute;
width:1px;
}
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus {
clip:auto;
height:auto;
margin:0;
overflow:visible;
position:static;
width:auto;
}
.clearfix:after, .layout_nemo .nemo_carousel .pagination:after {
clear:both;
}
aside {
display:block;
}
nav ul, ul.nav {
padding-bottom:0;
}
.flyout {
display:none;
height:auto;
overflow:hidden;
position:absolute;
z-index:9999;
}
.flyout nav#navigation .links a {
font-family:Verdana, Helvetica, sans-serif;
line-height:20px;
font-weight:bold;
background-position:0 -444px;
}
.flyout nav#navigation .links a:hover {
background-position:0 -444px;
}
.flyout>.inner {
position:relative;
margin:-3px 3px 3px 3px;
}
#models {
position:absolute;
top:-124px;
}
#models.home {
top:-84px;
}
#models section {
display:inline;
float:left;
}
#models .flyout {
left:-3px;
width:520px;
}
#models .articles, #models .inner {
overflow:hidden;
}
#models .inner {
position:relative;
padding-top:20px;
min-height:280px;
}
#models .nav li {
list-style-image:none;
list-style-type:none;
margin-left:0;
}
#models .nav a {
display:block;
height:29px;
line-height:29px;
padding-left:9px;
border-top:1px solid #e7e9ea;
text-decoration:none;
background:none;
}
body.special #main .content .mediaContainer, body.special #main .content .audi_flash_replace, body.special #main .content .flash_3col, body.special #main .content .con_flashfilm_3col, body.special #main .content body.special.detail .headline h1 {
font-size:36px;
}
.layout_nemo #models {
top:23px;
}
.layout_nemo #models section>h1>a {
margin-left:0;
}
Also sharing you a link
where we have tried the whole thing includes all the js files. Please have a look of that link in both browser (firefox & chrome)
Developing primarily in Chrome will always lead to strange behavior in other browsers, so a good start would be to do it in Firefox. If it works in Firefox 99% it will work everywhere else, in IE too. Chrome has a lot of assumptions and "helpful" features that derail developers.
Also, my test in Firefox showed no errors. I am using 23.0.1.
I just refactored entire HTML code and started working on CSS. I've done this up to now I hope it helps, somewhat.
http://jsfiddle.net/cgRA2/19/
<div class="layout_nemo">
<aside id="models">
<section class="nestingList">
<div id="new_url_top">
A5 series
</div>
<div style="clear:both; margin:0px; padding:0px;"></div>
<div class="flyout" style="border:3px solid #000;">
<div class="inner">
<div class="col" style="float:right;">
<ul class="nav">
<li>A5 Coupé</li>
<li><a href="#" class="track-click" >A5 Sportback</a></li>
</ul>
</div>
<div class="articles" style="float:left;">
<article class="visuallyhidden">
<select name="bvgn " style="border:1px solid #000; height:30px;width:180px;">
<option>option1</option>
<option>option2</option>
<option>option3</option>
<option>option4</option>
</select>
<select name="bvgn " style="border:1px solid #000; height:30px;width:180px;">
<option>option5</option>
<option>option6</option>
<option>option7</option>
<option>option8</option>
</select>
</article>
<article class="visuallyhidden" style="border:7px solid #3C0; height:30px;">content here</article>
</div>
</div>
</div>
</section>
</aside>
The effect and everything concerned around the dropdown is not happening inside HTML/CSS, and its not Firefox problem because of that. I thought you must have been using some external JavaScript to do this, and I was right.
Problem is inside your js.js file, that you have included into external files for the jsFiddle example page. One part of the problem is that the file is combined with everything else and is part of something much bigger. I would really hate going into it after doing html/css.
So the part of jQuery that is making the problem is located around:
line 4836
line 4841
line 4937
line 4942
line 5074
If you can get that spaghetti code out and do something with it... Good luck.
Someone posted a solution here Containing div loses focus when mousing over select dropdown
July 14, 2021
Anyone experiencing recent issues with Firefox not rendering HTML, in particular the <select> element correctly see below:
I have been managing a Grails web application for a number of years and came across this issue just the other day, where my site worked fine in all browsers, but for whatever strange reason, Firefox simply would not render the <select> tags in their allocated <div>
Following a lot of testing across the browsers and using Firebug console/inspection, I tracked it down to an old HTML 4.0 Doctype definition.
As soon as I updated my site to the HTML 5 standard doctype, Firefox fell into line and rendered everything perfectly.
FIX:
Change OLD Doctype:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
To NEW Doctype:
<!DOCTYPE html>
I know this is YEARS later than the original question post, but I would have really appreciated stumbling across this answer.
I hope it helps someone out there.
Related
I just tried making a script that fades in a tooltip when you hover a link, image etc.. Everything works fine except the actual fading in of only one tooltip at a time. If it was not clear what i mean: I want to hover an image and show a tooltip right above the image, every other tooltip on the page should not be visible. I know what my mistake is (The hovering of an image fades all tooltips in, because they all have the same class) but i don't know how to fix it. I hope I explained my problem properly and would be very happy if someone could help me. (Please excuse me if my english isn't the best, it is obviously not my mother tongue)
Here is my Code:
$(function() {
$('.button').hover(function() {
$('.tooltip').stop().fadeTo("fast", 0.8);
}, function() {
$('.tooltip').fadeTo("fast", 0.0);
});
});
.wrapper{
width:90px;
margin:auto;
margin-top:10%;
}
.tooltip{
margin-left: auto;
margin-right:auto;
background-color:#34495e;
color:white;
border-radius:5px;
opacity:0.8;
padding:5px;
text-align: center;
font-size:15px;
font-family: 'Open Sans', sans-serif;
display: block;
opacity:0.0;
}
.button img{
margin-top:5px;
height:50px;
width: 50px;
display:block;
margin-left:auto;
margin-right:auto;
}
.button img:hover{
cursor:pointer;
}
<div class="wrapper">
<div class="tooltip">
189k Likes
</div>
<div class="button">
<img src="https://cdn2.iconfinder.com/data/icons/metro-uinvert-dock/256/Twitter_alt_3.png"/>
</div>
</div>
<div class="wrapper">
<div class="tooltip">
200 Followers
</div>
<div class="button">
<img src="http://lakemacholidayparks.com.au/wp-content/uploads/2014/09/facebook-icon.png"/>
</div>
And here is my Code in Action on jsfiddle.net:
https://jsfiddle.net/3y8pcv69/
You are selecting all .tooltips when you can just select the previous element from your button which IS the tooltip. So just do:
$(function() {
$('.button').hover(function() {
$(this).prev('.tooltip').stop().fadeTo("fast", 0.8);
}, function() {
$(this).prev('.tooltip').fadeTo("fast", 0.0);
});
});
Fiddle
I'm fairly new to jQuery and advanced CSS. I was wondering if anyone could take a look at my code and help me get this working. Basically, the gray box on the left is supposed to be fixed and follow you as the page scrolls(that works). Essentially, I want to have the tabs in that gray scroll bar, and have the content of the tabs be displayed in the orange-ish flexbox on the right. I understand that my issue stems from the separation of the <ul> and content divs in HTML, because that's how jQuery reads the tabs. That being said, can anyone help me achieve what I'm looking for. The code is fairly convoluted, so any advice is welcome. I want to learn, so don't hold back!
$(document).ready(function () {
$('#menu').tabs();
$('.ui-tabs-active').removeClass('ui-tabs-active ui-state-active');
});
body {
margin:0;
margin-top:10px;
padding:0px;
}
#wrapper {
border:1px solid black;
display:flex;
margin-left:300px;
margin-right:10px;
}
#scrollBar {
background-color:gray;
height:300px;
width:280px;
position:fixed;
margin:10px;
margin-top:0px;
}
#box1 {
background-color:#ffcc66;
height:1000px;
flex:1;
}
.tabs {
list-style-type: none;
margin:0;
padding:0;
z-index:10;
width:100%;
}
.contentDiv {
width:100%;
padding: 0;
position: relative;
}
.tabs a {
color:black;
position:relative;
text-decoration:none;
}
.tabs li:focus {
outline:none;
color:orange;
}
.tabs a:hover, .tabs a:focus {
color:blue;
}
.tabs a:focus, .tabs a:active {
outline: none;
cursor:pointer;
color:orange;
}
.ui-tabs-active a {
color:orange;
overflow:visible;
}
.contentDiv {
width:100%;
padding: 0;
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="scrollBar">
<div id="menu">
<ul class="tabs">
<li>Coding
</li>
<li>Photography
</li>
<li>About Me
</li>
</ul>
</div>
</div>
<div id="wrapper">
<div id="box1">
<div id="coding" class="contentDiv">
<div class="fillerText">
<p>this is my code</p>
</div>
</div>
<div id="photography" class="contentDiv">
<div class="fillerText">
<p>these are my pictures</p>
</div>
</div>
<div id="info" class="contentDiv">
<div class="fillerText">
<p>this is my info</p>
</div>
</div>
</div>
</div>
</body>
Code: http://jsfiddle.net/yk55vufk/
I don't know why you have added this line :
$('.ui-tabs-active').removeClass('ui-tabs-active ui-state-active');
In your code you don't have classes "ui-tabs-active", "ui-tabs-active", "ui-state-active"
some classes and jquery needs be fixed in your code :
Here is fiddle
I can't seem to center my image slider, seems like an easy fix but I can't get it to center dead in the middle of my page (centered left & right, centered top and bottom) Any suggestions?
The image slider is #logo-and-slider in the CSS
Heres the jsfiddle: http://jsfiddle.net/gZDVL/13/ (thanks to #MaggiQall)
And here is a live link to it: http://jtcraddock.ie/boards/
I don't understand.
Is this your desired result?
<div><img src="http://testjd.net46.net/1.jpg" alt="1"/></div>
<div><img src="http://testjd.net46.net/2.jpg" alt="1"/></div>
<div><img src="http://testjd.net46.net/3.jpg" alt="1"/></div>
I closed your img-tags. with />
http://jsfiddle.net/gZDVL/2/
I am not very sure about whether you want to include the logo in the content to be centered. I have shown the idea below. I have added some borders to clearly display how the elements are laid out. If you don't want to include logo remove it from the HTML structure. Basically what I have done is placed the content in a table-cell element with the content center aligned horizontally with middle vertical alignment. That places the content at "dead center" as you wanted :-) See the fiddle at http://jsfiddle.net/linuxexpert/WYadL/
HTML:
<html>
<body>
<div class="outer-box">
<div class="inner-box">
<div class="innermost-box">
<div class="logo">
Logo
</div>
<div class="controller">
<
</div>
<div class="scroller">
Image scroller
</div>
<div class="controller">
>
</div>
</div>
</div>
</div>
</body>
</html>
CSS:
html, body {
width:100%;
height:100%;
}
.outer-box {
display:table;
width:100%;
height:100%;
}
.inner-box {
display:table-cell;
vertical-align:middle;
height:100%;
width:100%;
border:1px solid red;
text-align:center;
}
.innermost-box {
display:table;
height:50%;
width:80%;
margin:0px auto;
border:1px solid blue;
}
.innermost-box > * {
display:table-cell;
height:100%;
vertical-align:middle;
border:1px solid green;
}
.logo {
width:40%;
}
.controller {
width:5%;
}
.scroller {
width:50%;
}
I'm using the SlidesJS product example found here http://slidesjs.com/examples/product/
I want to have more than 1 of these units on the page, but when just copying the markup for it and pasting below doesn't work right. The first one will show up fine, but the second one only shows the 2 pagination elements and are unclickable. My main question is why would my approach of just copying the slider again not work, and is my general approach totally wrong? Is there some quirk with SlidesJS or Jquery in general that requires me to create separate css divs or something like that?
HTML:
<div id="containerSlides">
<div id="products_example">
<div id="products">
<div class="slides_container">
<img src="img/lamp1.png" width="360" alt="1144953 3 2x">
</div>
<ul class="pagination">
<li><img src="img/lamp1.png" width="55" alt="1144953 3 2x"></li>
<li><img src="img/lamp2.png" width="55" alt="1144953 1 2x"></li>
</ul>
</div>
</div>
</div>
<div id="containerSlides">
<div id="products_example">
<div id="products">
<div class="slides_container">
<img src="img/lamp3.png" width="360" alt="1144953 3 2x">
</div>
<ul class="pagination">
<li><img src="img/lamp3.png" width="55" alt="1144953 3 2x"></li>
<li><img src="img/lamp4.png" width="55" alt="1144953 1 2x"></li>
</ul>
</div>
</div>
</div>
CSS:
#containerSlides {
width:580px;
padding:10px;
margin:0 auto;
position:relative;
z-index:0;
float:left;
}
#products_example {
width:600px;
height:282px;
position:relative;
}
/*
Slideshow
*/
#products {
margin-left:26px;
}
/*
Slides container
Important:
Set the width of your slides container
Set to display none, prevents content flash
*/
#products .slides_container {
width:360px;
/*overflow:hidden;*/
float:left;
position:relative;
border:1px solid #dfdfdf;
display:none;
}
/*
Each slide
Important:
Set the width of your slides
If height not specified height will be set by the slide content
Set to display block
*/
.slides_container a {
width:360px;
height:268px;
display:block;
}
/*
Next/prev buttons
*/
#products .next,#products .prev {
position:absolute;
top:127px;
left:0;
width:21px;
height:0;
padding-top:21px;
overflow:hidden;
display:block;
z-index:101;
}
#products .prev {
background:url(../img/arrow-prev.png);
}
#products .next {
left:398px;
background:url(../img/arrow-next.png);
}
/*
Pagination
*/
#products .pagination {
width:55px;
padding:5px 5px;
float:left;
margin-left:30px;
border-radius:5px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
}
#products .pagination li {
float:left;
margin:2px 4px;
list-style:none;
}
#products .pagination li a {
display:block;
width:55px;
height:41px;
margin:1px;
float:left;
background:#f9f9f9;
}
#products .pagination li.current a {
border:1px solid #7f7f7f;
margin:0;
}
Without seeing the javascript its impossible to say exactly where the issue is, however there are some immediate issues with the markup.
You have multiple elements on the page with the same id's (containerSlides, products_example, products).
Giving the second container unique id's will help solve the problem. You will then probably (again, cant say for sure without seeing the javascript) need to add another 'initialization' call to set up slidesjs on the second container as well as adding the id to your css so that the second container gets the same styling.
Ex:
Markup
<code>
<div id="secondContainerSlides">
…
</div>
</code>
Css
<code>
#containerSlides,
#secondContainerSlides{
…
}
</code>
I wondered whether someone might be able to help? I've tried and tried to find a solution myself, but nothing seems to work.
I have a horizontal list and when the user clicks on one of these links, a hidden div appears just below the list, filling the width of the overall container (950px).
This works absolutely perfectly on Firefox, Safari and IE8 but doesn't seem to work on IE7 (and possibly less, I haven't been able to check).
In IE7, the div causes the list to break, plonking the final list item on an extra line and (as a result, I presume?) pushing the div further down the page, so it's not flush with the bottom of the list. In fact, it appears just beneath the div with ID "highlightsbar".
Here is the relevant code - I'd be eternally grateful for any suggestions anyone might have!
You can see this problem 'in action' at http://www.totalbackpacker.co.uk. (Interestingly, if I do a quick test with only the relevant bits of code at http://www.martinjefferies.co.uk/test.html, the problem isn't there. I'm not sure if that helps or not?!)
Thanks,
Martin
HTML:
<div id="outer">
<div id="wrapper">
<div id="header">
</div>
<div id="navbar">
<ul>
<li class="left"><img src="<?php bloginfo('template_url'); ?>/images/navbar/home.png" alt="Home" /></li>
<li><img src="<?php bloginfo('template_url'); ?>/images/navbar/explorebycountry.png" alt="Explore by country" /></li>
<li><img src="<?php bloginfo('template_url'); ?>/images/navbar/search.png" alt="Search" /></li>
<li><img src="<?php bloginfo('template_url'); ?>/images/navbar/contact.png" alt="Contact" /></li>
<li class="right"><img src="<?php bloginfo('template_url'); ?>/images/navbar/about.png" alt="About" /></li>
<div id="submenu" style="display: none; z-index:500;">
<div id="submenu-inner">
<?php
$categories = get_categories('child_of=7');
$count = 1; ?>
<div class="left">
Left hand links go here
</div>
<div class="right">
Right hand links go here
</div>
<div class="clearer"></div>
<br />Close menu
</div>
</div>
</ul>
<div class="clearer"></div>
<div id="highlightsbar">
<span class="title">Promotion:</span> Promotion info goes here.
</div><!--highlightsbar-->
</div><!--navbar-->
<div id="content">
</div>
</div>
</div>
CSS:
#outer {
margin:0 auto;
background:#E2E2E2;
width:100%;
}
#wrapper {
text-align:left;
width:950px;
margin-left:auto;
margin-right:auto;
background:#FFFFFF;
padding:0 0 50px 0;
}
#header {
background:#be023a;
height:100px;
width:950px;
margin:0;
padding:0;
}
#navbar {
background:#cc0000 url('http://www.totalbackpacker.co.uk/wp-content/themes/totalbackpacker/images/navbar.jpg') repeat-x;
height:70px;
width:950px;
}
#navbar ul {
float:left;
list-style:none;
margin:7px 0 0 10px;
padding:0;
height:40px;
}
#navbar li {
float:left;
}
#navbar li a {
display:block;
padding:3px 10px;
margin:0;
border-right:1px solid #ffffff;
font-family:Helvetica,Arial,sans-serif;
font-size:15px;
line-height:15px;
color:#ffffff;
text-decoration:none;
text-transform:uppercase;
font-weight:normal;
}
#navbar li a:hover {
background:#cc0000;
}
#navbar img {
border:0;
}
#highlightsbar {
padding:0;
margin:3px 0 0 20px;
font-family:Helvetica,Arial,sans-serif;
font-size:12px;
line-height:12px;
color:#666666;
text-decoration:none;
}
#highlightsbar .title {
text-transform:uppercase;
float:left;
font-weight:bold;
}
#highlightsbar .textwidget {
float:left;
padding:0;
margin:0 0 0 5px;
}
.clearer {
clear:both;
}
#submenu {
background:url('../images/submenushadow.png') left bottom repeat-x;
margin:30px 0 0 -10px;
padding:0 0 50px 0;
z-index:5000;
position:relative;
width:950px;
display:block;
}
#submenu-inner {
background:#ffffff;
border-left:5px solid #be023a;
border-bottom:5px solid #be023a;
border-right:5px solid #be023a;
padding:20px;
}
#submenu-inner .right {
float:left;
width:140px;
padding:0;
margin:0;
}
#submenu-inner .left {
float:left;
width:140px;
padding:0;
margin:0;
}
JavaScript:
<script type="text/javascript" language="javascript">
function toggle(id)
{
el = document.getElementById(id);
var display = el.style.display ? '' : 'none';
el.style.display = display;
}
window.onload=function()
{document.getElementById('submenu').style.display='none';}
</script>
If you pull it out and it works then it must be something in the surrounding code.
The most common issue with non javascript IE compatibility is IE will treat extra open tags and close tags differently than other browsers.
I suggest you look very closely at the html, or selectively add back HTML till you can reproduce.
I suggest you look into using conditional-includes for IE7 (forget about IE6 if at all possible). Here's a jsFiddle of the code I got working in my copy of IE7: http://jsfiddle.net/qjx4g/2/
What happened is that you shouldn't have your submenu code within your #navbar <ul> (i.e., close your #navbar (</ul>) and then put in your submenu's code) and whenever I have problems with a container with position: relative that contains content that is floated, I change the container to use position: absolute and work from there (only in a conditional-include for IE7).
1 - If you give your ul a width of 100%, it solves the problem of the last list item "About" pushing itself down to a second line.
2 - Close your ul . In IE9 the div#submenu is a child of ul, while in IE7 it is the child of the last li
3 - div#navbar{ position: relative;} - div#submenu{position: absolute; top: 15px; right: 1px;} - Works on IE7
pic
Here's the solution I came up with.
Firstly, I created an extra div for the submenu - called #submenu-outer:
#submenu-outer {
position:absolute;
width:100%;
left:0;
display:block;
text-align:center;
margin:35px 0 0 0;
z-index:5000;
}
Then I made #submenu appear in the centre of the 100% outer div:
#submenu {
background:url('totalbackpacker.co.uk/wp-content/themes/totalbackpacker/images/…;) left bottom repeat-x;
margin-left:auto;
margin-right:auto;
padding:0 0 50px 0;
width:950px;
text-align:left;
}
Et voila! Thanks to everyone who helped along the way! :)