I have a Twitter Bootstrap based Website with some strange issues on regular old link buttons (like this: http://jsfiddle.net/RK3RC/)
HTML
<a class="button" href="http://jsfiddle.net/">Click Me</a>
CSS
.button {
background-color: #bc4b4e;
color: #ffffff;
display: block;
border-radius: 45px;
border: none;
text-decoration: none;
position: absolute;
font-size: 18px;
padding: 14px 50px;
margin: 0px;
border-width: 0px;
line-height: 20px;
white-space: nowrap;
min-width: 0px;
min-height: 0px;
-webkit-transform: rotate(0deg);
opacity: 1;
left: 220px;
top: 20px;
visibility: visible;
}
.button:hover {
background: #d35559;
}
The buttons work absolutely fine and as expected in desktop browsers, but are not responsive in mobile browsers (touch devices). If you click them through touch, nothing happens - the buttons are non-responsive. However, interestingly, if the link is to an anchor tag on the same page, it will work (just not to an outside page).
Any thoughts/suggestions? I've scoured the Web but haven't found people with the exact same issue, which is a bit odd in itself.
Ok, got it figured out.
It was actually because there was a JQuery-based slider, on a different part of the page, that had a touchenabled setting (which allows the user to go through the slider by swiping). This was affecting the button's response to touch. Once that touch setting was turned off, the buttons everywhere respond as normal.
Thanks for all the help and suggestions. You guys rock.
Related
I created a text box over an image for a client that has a overflow set to scroll so that the text does not spill over when the page is resized. For some reason I do not see scroll bars on my screen but my client sees them on both the x and y axis.
Does anyone know if having "overflow: scroll;" causes scroll bars to show up in certain versions of Chrome and if there is a solution to make them invisible?
My client's alternative would be to use images with text on them and I would like avoid that for myriad reasons including accessibility.
I have an offline version of this as well and still see no scrollbars.
I am using a Mac and they are using PC but, to my knowledge and recollection, this shouldn't make a difference for this issue.
You can view the page here.
The page is cramped at the moment as we are doing a stylesheet overhaul that is offline.
Here is a snippet of the CSS I am using for this. Thinking some of it may be redundant. Not sure if removing any parts of this will change things visually as I can't replicate the issue.
.boxwrapper {
position: relative;
font-family: Arial;
margin: 10px 15px;
}
.imagebox {
position: absolute;
top: 15px;
right: 15px;
background-color: #ffffff;
color: white;
padding-left: 20px;
padding-right: 20px;
padding-top: 10px;
height: 85%;
width: 35%;
overflow: scroll;
}
.imagebox p{
color: #000;
overflow: scroll;
font-size: 18px;
}
Expected results are for the page to render with no scroll bars like it does for me.
Thanks in advance for any advice you can offer! I've got an overlay that works well on a desktop version of my website. However, when I design the overlay for use on a mobile, it gives me problems. Here's the jfiddle:
http://jsfiddle.net/kevindp78/bs3FT/1/
Code is below. When I try this in a mobile view, the content seems to be appearing at the wrong level (maybe below the #fixedoverlay but above the #overlaymatte?) Basically, I can't interact with the content in the #overlaycontent for some reason. It's got a layer of dark background over it, and there's only a strip of white at the top of the div. Any ideas? Thanks!
My CSS:
#fixedoverlay, #overlaymatte {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000000;
opacity: 0.7;
filter: alpha(opacity=70);
z-index: 999;
}
#overlaycontent {
position: relative;
width: 960px;
margin: 25px auto;
max-height: 75%;
overflow: auto;
background: #fff;
padding: 20px;
/* border: 20px solid #fff; */
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
z-index: 9999;
}
#overlaymatte {
background: none;
}
My HTML
<div id="fixedoverlay">
<div id="overlaymatte"></div>
<div id="overlaycontent">
<div><p>Here's my content</p><p>Here's my content</p><p>Here's my content</p><p>Here's my content</p><p>Here's my content</p></div>
</div>
</div>
Apologies, but this is the result of an HTML and javascript issue related to the mobile design software I am using (Mobify.) Essentially, I have a bit of javascript that automatically appends the overlay:
function popUpOverlay(){
$('body').append('<div id="fixedoverlay"><div id="overlaymatte"></div><a title="close" href="#" class="closeoverlay">Close</a><div id="overlaycontent"></div></div>');
$('#overlaycontent').append(loaderimg);
$('#loaderimg').show();
$(window).keydown(function(e){
if(e.keyCode == 27) {
$('#fixedoverlay').remove();
}
})
}
My problem was that I was applying Javascript twice throughout the website: once in the head of the document through a reference link, and once through Mobify's Global Selections / Script feature. Since javascript was being applied twice, I was actually seeing two instances of the overlay: one on top of the other. I fixed the javascript so that only one instance occurred, and the problem no longer happens.
This CSS works in IE8 and newer (and in Chrome), but not in IE7. Specifically, the tooltip just doesn't appear when I hover over the div. What do I need to change for IE7 (and IE6)?
.headertooltip, .headertooltip:visited
{
color: #0077AA;
float: left;
height: 40px;
text-decoration: none;
width: 20px;
}
.headertooltip div
{
background-color: black;
color: #fff;
left: 50px;
padding: 5px 10px 5px 40px;
position: absolute;
text-decoration: none;
top: 82px;
visibility: hidden;
width: 900px;
z-index: 10;
}
.headertooltip:hover div
{
position: absolute;
visibility: visible;
}
UPDATE:
I've updated the code to use mouse events to show the div/tooltip, but that still isn't working in IE7. That makes me think the problem lies in my markup/CSS.
I tried to create a sample in jsFiddle. It doesn't work, but you get the idea. Hovering the mouse over the little black box on the left (which I added just so you can see the target) should make the tooltip appear.
http://jsfiddle.net/szyN4/
IE6 has minimal support for the :hover pseudo class, and IE7's is incomplete.
Try and change the .headertooltip:hover div to .headertooltip div:hover to please the oddities of IE's bubbling mechanism. It may solve your issue (you'll have to include it in a conditional stylesheet for IE7 only, of course).
You may also use JavaScript to sidestep this by implementing mouseenter and mouseleave. See a posted answer of mine on IE's innovation regarding mouse events for a quick reference.
References
CSS support table on quirksmode
mouseover and mouseout on quirksmode
I am using fancybox to allow users to send messages to one another. I have a wierd issue where the fancybox's close button shows four times in google chrome but works just fine in firefox.
Here is the css for the button
#fancybox-close {
position: absolute;
top: -15px;
right: -15px;
width: 30px;
height: 30px;
background: transparent url('fancybox.png') -40px 0px;
cursor: pointer;
z-index: 1103;
display: none;
}
Hmmn.. Seeing example page would help.
This shouldnt happen... but im going to throw in a guess that overflow: hidden; could help.
try adding:
background-repeat: no-repeat;
you might want to mess about with the width and height etc too
My default page works fine in ie but Firefox it has problems with the a:link.
At my page http://www.printer-ink-toner.co.uk and half way down is a link to my status on ebay.
For Firefox this link does not work and for ie it does. I can reproduce this behavior on my development PC also.
The link is contained in a float div block called "centercol50pct" which has CSS of
.centercol50pct {
position: relative;
float: left;
width: 380px;
margin:0px 5px 0px 0px;
}
If the float:left; is removed it works fine. changing any other parameter does not have an effect on the problem.
In addition the search drop downs do not work in Firefox either. I assume it is related but thought I would try and solve the more simple 'a link' problem first
Thanks
Nigel
The centrecolLowerblock div was covering up the above content, therefore making the link unreachable.
Change
#centrecolLowerblock {
position: relative;
top: 20px;
}
to
#centrecolLowerblock {
clear: both;
position: relative;
top: 20px;
}
Also your dropdowns are not working due to the same problem (an element is overlapping them). Try changing.
h3.h3_Largeblue {
color: blue;
font-size: 20px;
}
to
h3.h3_Largeblue {
clear: both;
color: blue;
font-size: 20px;
}
That should sort the problem's :)