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.
Related
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.
My private webpage's main content is not displaying strangely within Firefox. The header and footer bar both display and the main text is placed adjacent to them towards the right. Occasionally, the footer also moves above the main text. I'm guessing this is all one issue involving the positioning of DIVs that I'm somehow missing. [This has been solved]
The height of two DIVs that are equally as tall when displayed in Chrome is also different. This issue also occurs in Safari but in a different way. There is a 1 px gap between the logo and the navbar that isn't present when viewed in Chrome or Firefox. Can anyone think of a way to reset all of the browser defaults to prevent similar things from happening in the future?
The website is currently not online yet and I'm debugging it for final release. (I don't really want to release this in the current condition as it will frustrate anyone who doesn't use a webkit browser.)
Also, as a side note, anyone know how to fix the CSS errors I'm getting in Internet Explorer 9? The gradient in the nav bar is gone, some areas have missing background color, and all picture links have annoying boxes around them.
EDIT: I saw in an online CSS gradient generator what I need to do to make the gradients work in IE9. The background issue apparently stems from the same source.
Also, is anyone in Opera experiencing issues with the latest debug version at http://jsbin.com/ipixay/1? (Credit for this one goes to Sunyatasattva.)
The link to the fiddle (where the code is posted at) is: http://jsfiddle.net/aaQSD/7/ Please forgive me for the amount of CSS that's still there, but I can't tell which causes the Internet Explorer 9 problems.
My best guess is that the Firefox problem lies somewhere in this section of CSS:
body {
margin: 0;
padding: 0;
text-align: center;
font-family: Times;
background: #efefef url(pics/background.png) repeat top center;
}
#container {
overflow:auto;
width: 95%;
min-height: 100%;
min-width: 946px;
margin: 0 auto 10px auto;
}
#content-wrapper {
width: 100%;
float: right;
text-align: left;
margin: 10px 0 0 0;
}
#content-inner {
padding: 0 15px 0 15px;
}
.center-slide {
font: normal 62.5%/1.5 Times;
letter-spacing: 0;
width: 900px;
height: 485px;
position: relative;
padding: 20px 0 0 0;
margin: 0 auto 0 auto;
background-color: #FFFFFF;
border-radius: 8px;
}
.boxes {
margin: 0 auto 0 auto;
width: 900px;
}
.left-box {
float: left;
background-color: #FFFFFF;
border-radius: 8px;
margin: 10px 5px 0 0;
padding: 20px;
width: 500px;
position: relative;
}
.logo {
width: 26%;
text-align: center;
float: left;
font-family: Times;
font-size: 65px;
font-weight: bold;
color: #FFFFFF;
padding: 10px 0 0 0;
background-image: -moz-linear-gradient(0% 22px 90deg, #0B3474, #517ABA);
background-image: -webkit-gradient(linear, 0% 0%, 0% 70%, from(#517ABA), to(#0B3474));
}
header {
width: 100%;
min-width: 863px;
background-color: #000047;
float: left;
padding: 10px;
color: #FFFFFF;
text-align: left;
font-size: 20px;
overflow: hidden;
margin: 0 0 10px 0;
}
nav {
background-color: #6a6a6a;
font: 16px Times;
min-width: 700px;
float: right;
width: 74%;
}
footer {
font-family: Times;
text-align: center;
background-color: #000047;
color: #FFFFFF;
text-align: center;
padding: 10px 0;
width: 100%;
min-width: 863px;
}
Here is the list of things that have been fixed:
Unwanted boxes/borders around picture
Firefox display issue
Glitchy footer
EDIT: I'm currently working on making a fiddle with the minimal code to replicate the issue as suggested in the comments. I hope you can forgive me for my noobish mistake. Thanks, everyone who have responded so far!
EDIT 2: The fiddle is out! I've removed the pandora's box of code that used to be below.
The header and footer are displayed adjacent to the main container
Is there a reason why they are floated? Removing the float: left rule from the header, makes the container stack below it. If they need to be floated for some reason I am not seeing, perhaps you should consider adding a clear?
Logo height different from navbar element heights
This piece baffled me a bit: I think the culprit is browser default line-height property, which, on Chrome, is coincidentally making your elements align.
Your nav elements have a set line-height of 61, plus a vertical padding of 12 on both sides, adding up to 85px. Your logo has no defined line-height and a font-size of 65px plus a padding-top of 10px. In Firefox this is 10px short.
To fix this, just set the line-height to your logo element as well.
Here is a working JSBin of your code:
Working example
Internet explorer problems:
Missing gradient
Missing background
Annoying border
I don't have IE9 at hand right now, so I might look into it later if you need it, but here are my guesses.
As for the missing gradient, your CSS specifies only webkit and mozilla vendor prefixes. You might want to take a look at the -ms– prefix as well, and check which rules really need it and which don't.
I am skipping the missing background part because it's quite vague and I am not testing on IE right now.
As for the border around linked images, you could perhaps add this rule to your CSS:
a img {
border: 0;
outline: 0;
}
EDIT:
Safari annoying one pixel gap
As for the Safari annoying one pixel gap, it apparently comes from the fact that Safari doesn't calculate well your float: left + width: 26% plus float: right + width: 74%. Adding a .1% to the first element width fixes the problem, but it is not the most elegant solution.
The best solution for your problem at hand is to just float both your elements left. You can see an updated fiddle working in Safari:
Working example
I have edited your fiddle for it to work. I essentially just added float: left; to your #container. You can look at my edits for further details. http://jsfiddle.net/aaQSD/8/
Not sure if there is an issue with nested DIV that prevents scrolling or I have missed something in the code itself. At any rate cant seem to get the div with class .txtpodscroll to actually scroll. Bar appears fine just wont scroll? Below is the CSS rule I have applied to the DIV
.txtpodscroll {
font-family: Tahoma, Geneva, sans-serif;
font-size: 13px;
line-height: 20px;
width: 360px;
margin-top: 10px;
margin-right: auto;
margin-bottom: 10px;
margin-left: auto;
height: 300px;
overflow-y: auto;
overflow-x: hidden;
position: fixed;
}
<div class="holder-northeastphotobooth">
<div class="imgpod"><img src="alt-img/nephotobooth-logo.png" width="370" height="89"></div>
<div class="txtpodscroll">Photo booths are one of the most sought-after wedding reception additions, and we’ve got one of the best ready to bring to your big day. We will deliver our professional booth to your venue, assemble it, and man it for the duration to make sure your guests have a great time taking lots of memorable pictures. Afterwards, we’ll dismantle and clear away the booth. We can be as formal or as crazy as you like and will tailor it to suit your needs. You can select a range of fun green screen backgrounds for guests to choose from, allow uploading to Facebook, add multiple pictures to each print, take videos, and we can even bring along a box full of fun props for your guests to wear. Hire our booth and you’ll get unlimited pictures and prints on the night, plus we’ll give you a USB stick with all of the pictures on to take away and for a limited time we’ll even supply a 2nd set of prints in a lovely photo album for you to take home and treasure. </div>
</div>
Plus this is a link to it live and not working.
http://www.yourwedding.com/yourweddingwow/index-northeastphotobooth.html
it's because the book's inner shadow is above the scrollbar, so you cannot click it, but you still see it because the shadow is a transparent PNG...
change this line:
standard-variable.css (line 83)
.holder-northeastphotobooth {
float: left;
font-family: Arial,Helvetica,sans-serif;
height: 470px;
margin: 0;
padding: 15px;
position: relative; /* added */
width: 370px;
z-index: 1; /* added */
}
Make sure to remove the background property as well, so the shadow will be shown "under" the page, and not above it. try it on firebug and see, it's very easy to fix.
you have a div with a class of .wowbook-gutter-shadow that you have placed on top of the scroll bar, this is why it doesn't scroll
if you give .txtpodscroll the following style: z-index:2 it should fix your problem
To prevent scroll you should use "percentage".
.txtpodscroll {
font-family: Tahoma, Geneva, sans-serif;
font-size: 13px;
line-height: 20px;
width: 360%;
margin-top: 10px;
margin-right: auto;
margin-bottom: 10px;
margin-left: auto;
height: 300px;
overflow-y: auto;
overflow-x: hidden;
position: fixed;
}
if the scroll is horizontal.
width: 360%;
Hope this helps.
I am using google chrome 19.x or IE9.x
I have set the Html5 Doctype.
I have a jquery dynatree plugin inside my TreeDiv.
Although there is enough space to show more tree items vertically without the need to scroll, those scrollbars are visible.
Why is that?
The problem also is when the vertical space gets so less then vertical scrollbars are also shown from the dynatree which is inside an ul-tag. Thus the ul-dynatree is doing it correctly, only my div is going crazy with the scrollbars!
I can even set overflow: hidden; on the TreeDiv that does not help. The vertical scrollbar is always visible :/
function loadUnits(data) {
$('#TreeDiv').dynatree({
onActivate: function (node) {
getEmployees(node.data.key);
}, children: data
});
}
#TreeDiv{
width: 200px;
position: fixed;
left: 100px;
top: 50px;
bottom: 0px;
overflow: hidden;
}
please find that if you have the inner div has a style of overflow:auto.This generally cause this problem.
Here is the solution:
go to .css of dynatree ..\src\skin-vista\ui.dynatree.css
and edit the tag:
ul.dynatree-container
{
font-family: tahoma, arial, helvetica;
font-size: 10pt; /* font size should not be too big */
white-space: nowrap;
padding: 3px;
margin: 0; /* issue 201 */
background-color: white;
border: 1px dotted gray;
width: 480px;
height: 580px;
overflow: scroll;
}
You done. you wil automaticall grow shrink tree
I was having an issue where the scroll bars would occur when checking the check box items.
I added this to my onSelect
$("ul.dynatree-container").css("overflow", "hidden");
I dont know whether its my mistake or Firefox bug. I have a text box in which the value is dynamically generated through python.
The value in the text box should be in the middle of the text box.
It works in IE and Chrome, but in Firefox it doesn't work.
Here is the CSS:
#query
{
margin: 0px;
padding: 0px;
width: 465px;
vertical-align: middle;
height: 45px;
font-weight: bold;
font-size: 16px;
line-height: 45px;
color: #aaaaaa;
padding-left: 10px;
display: block;
}
I don't know your html but your code renders the input visually ok - only the cursor is rendered badly. IE8 renders it as it should, firefox stretches the cursor from bottom to top, but once you start writing it will go back to normal. In chrome the cursor renders from top to baseline.
Other that that it looks ok. If you are really having issues you could change the line-height to padding
height:29px
padding:8px 10px;
I think
vertical-align: middle
Does not work in firefox ... people has some problems with it.
Should try different approach.