I've implemented an Iframe Like box, but the vertical scroll bar does not show. (The generated code set scrolling to no, but I've now changed it to yes, but still it does not work).
The code is as follows:
<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fpages%2FChristopher-Carter-Veterinary-Surgery%2F332086710515idth=300&height=590&colorscheme=light&show_faces=true&border_color&stream=true&header=true" scrolling="Yes" frameborder="0" style="border:none; overflow:hidden; width:300px; height:590px;" allowtransparency="true"></iframe>
The problem occurs with I/E but not with Safari, Firefox, Netscape or Chrome. It seems as if this is a Windows XP / IE8 issue, but if anybody knows differently, I'd be pleased to hear from them.
You have overridden the scrollbars in the style clause;
overflow: hidden;
However, it has the opposite effect, IE will correctly render as-is, but firefox etc will not render the scrollbars. Fix that with;
overflow-y: scroll;
Having style overflow:hidden; seems to me like a contradiction to scrolling=Yes.
At the risk of stating the obvious:
Have you tried:
overflow:scroll
Related
I have two boxes. The first one contains simple text. The second one contains a submit input with no borders, paddings, margins.
So, why the input takes more height than the simple text?
I know that I can play with the padding and remove the box height, but for my purposes I need to set it a static height, and prepare this box to be reusable for both inputs and simple texts.
I have tried to play with line-height and vertical-align properties, without success.
What is causing that extra line-height?
There's an example to play with it.
Edit: I recently see, that the issue is only with Firefox...
I think it could be for the line-height property in the Firefox CSS:
But... in first place I can't believe what my eyes are seeing. An !important in the internal browser stylesheet? That's normal? Could this be a possible answer?
Similar question with the same answer.
But the trick Leniel suggest doesn't work for me...
The extra padding is on your .buttonarrownext class.
Fixed CSS Class:
.buttonarrownext {
cursor:pointer;
position:relative;
border-radius:4px;
text-align:center;
background:white;
border:1px solid red;
padding: 0px; /* changed the padding here */
margin:0px auto;
display:inline-block;
}
A JSFiddle to demonstrate.
As mentioned in my comment, it displays fine in IE and Chrome, but not FF. A quick solution is to replace the input with a button.
updated html would be:
<div class="container">
<div class="buttonarrownext">Siguiente</div>
<div class="buttonarrownext"><button class="reset">Siguiente</button></div>
</div>
There's no real difference as you can still fire a submit event with a click handler for the button...
It will be interesting to find out why FireFox does this though...
Updated fiddle - http://jsfiddle.net/QfPGW/2/
I've recently run in to a peculiar problem in IE10 (sigh). It appears that if you use display:inline-block; in conjunction with overflow:hidden; IE10 messes up your line-height.
I tried fixing it using vertical-align:middle; but that only almost fixes the problem in IE10 and then introduces baseline problems in other browsers.
The only code needed to trigger the bug is:
CSS:
.bug {
display:inline-block;
overflow:hidden;
}
HTML:
<p>This should <span class="bug">be buggy</span> in IE10</p>
I created a JSFiddle to illustrate the bug - http://jsfiddle.net/laustdeleuran/5pWMQ/.
There's also a screenshot of the bug here - https://dzwonsemrish7.cloudfront.net/items/3d0t1m3h00462w2n1s0Q/Image%202013-04-08%20at%2011.13.16%20AM.png?v=2688e27a
EDIT:
This is not a IE10 bug (but more a case of lazy testing on my behalf). Actually Chrome (webkit) is the one doing it wrong - https://stackoverflow.com/a/15883508/799327.
CSS 2.1 says
The baseline of an 'inline-block' is the baseline of its last line box
in the normal flow, unless it has either no in-flow line boxes or if
its 'overflow' property has a computed value other than 'visible', in
which case the baseline is the bottom margin edge.
which is exactly what IE10 is doing.
And Firefox and Opera are doing the same thing.
It's not IE that's bugged, it's Chrome, which is not following the above rule correctly.
Here is the jsFiddle:
http://jsfiddle.net/8dbQu/1/
In brief, I have such structure:
<div class='content'>
<div class='column'></div>
<div class='column'></div>
<div class='column'></div>
</div>
.content is display as box
.columns have -moz-box-flex: 1;
without set .content's position to absolute everything works fine.
But when I do so, it seems the "box" style doesn't work any more...
How to fix it?
display: -moz-box triggers a XUL box (which is NOT the same thing as display: box (which simply doesn't exist) or display: flexbox (which does something completely different)). XUL boxes cannot be absolutely positioned; if you try to position one its display value will be forced to block, just like a box with display: inline would be forced to block if positioned.
The way to 'fix' it is to not use XUL boxes in web code, especially not if you expect them to behave like CSS flexboxes. Support for CSS flexbox (with display: flexbox) is coming to browsers in the near future.
Ive just built a website for a client, and Ive got an odd problem that only occurs in Firefox browser.
At the top of the page I have a navigation bar that fills the width of the browser. Ive used the technique described here http://css-tricks.com/full-browser-width-bars/ to achieve the effect as semantically as possible. Then Ive had to place overflow-x:hidden on the html and body tags to prevent the user from being able to scroll off the right side of the screen.
This works great in every browser I've tested it in from Safari on Mac/PC, Opera, Chrome and heaven forbid, but even IE7, 8 & 9 wanted to play nice. But oh no Firefox just doesn't want to go along with it.
Although Ive no horizontal scroll bars which is the desired effect, Firefox has decided to double up on the amount of vertical scrollbars. I can't scroll horizontally if using a mouse, but when I use the trackpad on the Mac, the vertical movement is restricted, meaning I cant scroll down the page and if I do a two finger swipe the page scrolls off horizontally into oblivion.
The only thing I have found on google and elsewhere is that this behaviour is a bug in Firefox?
Any help with this annoyance is greatly appreciated, Many Thanks.
Update: Added Code
Basically the code is this as theres too much show it all. I would point you to the site but the client doesn't want it live yet. Here we go:
<nav id="menu">
<ul>
<li>Menu Item 1</li>
<li>Menu Item 2</li>
<li>Menu Item 3</li>
</ul>
</nav>
Then the css is this for a fullwidth browser bar as the link above:
html,body{
overflow-x: hidden; /*This prevents the user from scrolling horizontally*/
}
#menu{
position: relative;
background: blue;
}
#menu:before, #menu:after{
content:'';
position: absolute;
background: inherit;
top: 0;
bottom: 0;
width: 9999px; /*huge width to ensure bar fills browser*/
}
#menu:before{
right: 100%;
}
#menu:after{
left: 100%;
}
Just had a similar issue come up; my solution was to simply add:
html, body {height:100%;}
And that solved it. Just wanted to post it here 'cause this kept popping up in the search results.
OK, I sorted it out. Against my better judgement, I just copied and pasted a clearfix hack from any old site on the net. After many hours troubleshooting, Ive found that it was all down to clearfix that the fullwidth bars weren't working as expected. I narrowed it down to the css content tag of the clearfix hack. For some reason it had had a '.' inserted as the content. I removed this and then added
* html .clearfix { height: 1%; }
onto the end of the clearfix css block and it worked. No more horizontal scrolling, no more x2 vertical scrollbars in Firefox.
What fixed it for me was moving over the scrollbar code to html only instead of "body, html". I figured maybe it's making two scrollbars because its put in both html and body. Though this introduced some other problems. Think I'll go with an additional div instead.
html {
overflow-y: scroll;
scrollbar-color: #2A9FD6 rgba(0,0,0,1);
scrollbar-width: thin;
}
body, html {
}
I'm running into a vertical positioning problem with a couple of elements on a page in Firefox 5. When I set a line-height on a piece of text, and give it an equal height, it doesn't center vertically the way it should. Instead it sticks to the top of its line-height.
The page in question is here: http://www.tyndale.ca/~missiodei/
Here are the two problem elements along with their CSS. In both cases the text is pushed up in FF5 but displays properly (vertically centered within its line-height) in Chrome/Chromium.
the large title link in the banner (#blogtitle a)
position:relative;
display:block;
margin:0;
padding:0;
color:#fff;
text-decoration:none;
letter-spacing:.1em;
font-family:"Palatino Linotype", Palatino, serif;
font-weight:bold;
opacity:0.6;
height:120px;
line-height:120px;
any of the drop-caps that float at the beginning of new sections of body text (p.openingPar:first-letter)
font-size:3em;
font-weight:bold;
position:relative;
float:left;
height:48px;
color:#ccc;
line-height:48px;
margin-right:4px;
You might not see these drop caps unless you look at the page using Chrome or Safari, since most of them aren't showing up at all in FF. (I'm not sure why these styles aren't being respected either).
Finally, it would be helpful to know whether this is a problem unique to FF5 or whether 3.6 and 4.0 have the same problem. I don't have any old versions of FF available for quick testing.
Thanks ahead of time for help. I've imprinted my keyboard on my forehead bashing my head over this one!
The vertical centering seems to work fine for me....
The lack of first letter styling is https://bugzilla.mozilla.org/show_bug.cgi?id=8253
Try using <span class"dropcaps">W</span> instead of styling your opening first letter in the paragraph by selector :first-letter. Let us know if it works.