Advise: it happens with fieldset, not with div. See the links with tests below.
In Firefox, this works, the content is cut off at 50px:
#someDiv {
display:block;
height:50px;
overflow:hidden;
}
but this doesn't works, all content is shown:
.openAndClose {
display:block;
height:50px;
overflow:hidden;
}
In Safari and Chrome, both CSS declarations works. Using the pseudo class is useful for divs that will open and (almost) close later by JavaScript. Otherwise I'll have to set every ID and if I decided to change 50px to 60px, all will have to be corrected.
Is there a way to make FireFox accept the pseudo-class CSS overflow declaration?
As your wish, two live tests:
With ID
With class
By the way, there was a stupid error, but now nor Id or class works...
It looks like you're running into https://bugzilla.mozilla.org/show_bug.cgi?id=261037, which is fixed in the upcoming Firefox 28. That's shipping about 5 days from now, so unless you really need this working in old Firefox versions I wouldn't bother with workarounds; just assume it will work.
If you do need to work around, you can try using a nested div inside the fieldset, with height set to 100% and the overflow style on the div.
FireFox has a different understanding of fieldset kind of element. However, as described here:
Content categories by MDN
it should be render as a div. Instead, is render as a transparent rectangle, maybe because is considered in the form context, but is unclear in the documentation.
Looking at this example os usage from Mozilla:
Example of fieldset usage by Mozilla
I did a cross browser version:
This will work in FireFox
The content is enlarging the frameset...
I don't know if FireFox is right, but the usage of fieldset should be more clear since there is a difference from other common content categories as div. I could not find a proper Mozilla forum to discuss this, I do think they should know about. If you know how can I better contact the developer team, please let me know.
Related
I am trying to animate lines going from left, right, top and bottom(lines should start from edges of the screen). Animation works fine in IE11 but not in Mozilla and Chrome. Other browsers I haven't tested. I used Adobe Illustrator to draw. http://codepen.io/Ljanmi/pen/WbyLWv
In Chrome and Mozilla(IE11 is fine and acts normal) if in Illustrator I set Object>Artboards>Fit To Artwork Bounds(minimizing Artboard size which I usually do when create or edit SVG) I get this result(even worse) - http://codepen.io/Ljanmi/pen/yyqVqz
I spent hours and hours trying to figure out on my own without success. I started topics on GSAP forum and CSS tricks forum(stackoverflow.com is limiting me to post only 2 links as a newcomer).
I used GSAP JS library for animating(generally very happy with GSAP) but animation behaves the same if I use CSS3 to animate. I concluded that it is not related to GSAP(viewbox size property seems to have little bit of effect here) , more likely to be related to SVG structure itself or browser compatibility or both. So I guess there must be some work around to make it work like I would like to. I most likely lack some SVG/HTML/CSS3 knowledge since I am not very experienced but trying to learn as much as I can. Thanks everybody for reading.
Add svg { overflow: visible } and it should work the same in all browsers (longer explanation below). If you want to see why the lines get clipped, add borders to the svg element.
Another way is to make sure the size of the svg matches what you want, e.g by using css.
All browsers except IE implemented hidden as the initial value for the overflow property for the <svg> element, as called for by the SVG 1.1 spec. SVG 2 has changed this for (outermost) inline svg elements, such that it requires what IE11 is currently doing. It will take some time before that gets changed in all browsers, so for now just add the overflow: visible rule and it should work correctly in all browsers.
I had some trouble with browsers still not showing the overflowed content for SVGs and found that this finally got past it:
svg:not(:root) {
overflow: visible !important;
}
I made a form script so that I can always use that if I need a form, but I noticed that when I set for a field the property on overflow hidden it still is visible in Firefox (tested in 3.6).
I saw that still more than 5% of the users look in FF 3.6 so I need to fix it.
I googled it for it but all the fixes they said didn't help me with my bug...
Link to jsFiddle I made a part on the form in JS fiddle, if you can test in chrome, IE 6+ and then FF 3.6 you see the differences (when you click on the checkbox the hidden content should show).
Please can someone help,
Sander
It looks like it is a Mozilla bug that has been going on for over 7 years (reported 2004-09-22):
https://bugzilla.mozilla.org/show_bug.cgi?id=261037
The problem
overflow is always treated as overflow: visible on a fieldset when it is assigned a fixed height or width (no matter what you set it as).
The Workaround
You could either use display: none to hide the fieldset content or if you want to carry on using the overflow:hidden approach then you could either change the element from fieldset to div or nest fieldset within another div with the property overflow: hidden.
Nested fieldset example: http://jsfiddle.net/8nbuj/8/
I'm trying to stretch the background to fill the whole window with HTML/CSS.
I've seen a few solutions for this but they don't work.
Every solution i encounter won't work on all the browsers, either Chrome won't stretch it, or IE won't stretch it, and if they both do, firefox will be the problematic one.
Does anyone have a working solution, that will work on all browsers ? (don't mind some javascript)
I believe there is no way to do this without creating an img element, and setting its z-order to the bottom and then customizing the width of that. This page has details.
Edit: In the link it says to use position: fixed;. This will in only work in older versions of IE if you specify a doctype. Using absolute is a simple workaround as long as the element is a direct child of the body.
I had this problem a little while ago and I found that this website http://webdesign.about.com/od/css3/f/blfaqbgsize.htm had a very nicely written tutorial which explains it well, plus it worked for what I was looking for.
http://reisio.com/temp/stretch/
write a css for that in which the background image will be in body.like
body {
background-image: url("/images/bg.jpg");
background-repeat: no-repeat;
background-position:center top ;
}
This will keep the total image in the body.Try this hope it will work.
I have two problems... I've tried altering my CSS file, the JavaScript files and all kinds of other things. A google search yielded no remedy to these problems, so I come to the awesome site of answers!
This page -> http://students.cmps.subr.edu/aaron.chauvin/misc/test2.html
has some issues in Chrome and Safari. Only when my CSS is in effect, the pictures that are supposed to be side-by-side aren't, but when the CSS is off, they are. This problem isn't evident in FF/IE9. I'm thinking it has something to do with the but I'm not totally sure. Edit Edit: Thanks for the fix Genzer!
Also on that page, even if all my CSS/JavaScript isn't linked, I have a small gap between the bottom of the images that are links and the dotted link border... I want to get rid of the gap. What's causing this gap? This happens in all browsers.
Thanks in advance.
Edit: Here's the CSS: http://students.cmps.subr.edu/aaron.chauvin/misc/style.css
Edit Edit: Fixed the side-by-side image link problem, now trying to figure out what's causing the variation in the display of the custom a:focus border (non-existent in IE9, partially encases image link in Webkit browsers) and the gap between it and the bottom of the image link (all browsers BUT IE9).
The problem is you're wrapping all your column's info in a span: <span class="reg">...</span>
IE9 and FF figure out that you want it to display as a block element, but Webkit (Chrome and Safari) don't. Set display:block on the "reg" class and you should be set. (I think this fixes the "dotted border" issue as well, but i'm not quite sure what you meant there)
To get the orange border to show up in IE9, make sure to set outline-style to something like "solid" or "double" in the a.piclink:hover css class, in style.css. Once i did that, the border shows up.
I'm still not entirely sure why your links and nested images are behaving like they are, but I found a little tweak (tweak = almost a hack) to get it to work: Set display:inline-block; on a.piclink and set a fixed height on it. Note that inline-block tacks on 4px, so the height should be 4px taller than the height of the image; in your case: 47px. It's a bit of a hack, but it's valid and it works. Unfortunately IE7 doesn't like this, but zoom:1; *display:inline; get it working.
Adding following CSS code in your style will make Chrome display your TestPage the same as IE8.
span.reg a {
display: inline;
}
I am designing an html web page that mimics inline panes by defining this css class:
.paneSection{
display: block;
border-width: 1px;
border-style: solid;
margin: 2px;
padding:0px;
height:200px;
width:200px;
overflow: auto
}
and applying to a span tag. The resulting code is something like this:
<table>
<tr valign=top>
<td>
<span class="paneSection">
... A long piece of text here that will inevitably overflow the block ...
</span>
</td>
<td>
<span class="paneSection">
... More text, may or may not overflow, etc...
</span>
</td>
</tr>
</table>
The problem is that the scrollbars that appear are ugly, gray, boxy ones. I really need a "prettier" scrollbar. I have looked around for a couple hours, and it seems that almost everything points to using the JQuery plugin JScrollPane. However, although I am a developer (I am actually using Java to generate the html for the web page), I have never used JQuery or plugins before.
I played around a little bit with source code from other pages, and got something minimal working, but still nothing pretty. I may be wrong in saying this, but it appears that I need actual image files to make the scrollbars prettier.
An example of one scrollbar that I like is the one on pane2 on this page:
http://www.kelvinluck.com/assets/jquery/jScrollPane/examples.html
Where can I get the images that are referenced in the source? Do I actually need to make those images, or are they available somewhere for download?
Any other help on designing pretty scrollbars (I am NOT a graphic designer, please keep that in mind), or how to use JQuery plugins in general is appreciated.
Added Note I also need the scrollbars to work horizontally, not just vertically. Is JScrollPane still right for this?
No you should be able to grab the images. For example one of the arrows is here: http://www.kelvinluck.com/assets/jquery/jScrollPane/images/osx_arrow_up.png.
The easiest way to find this is use your browser's inspector (Chrome and Safari has this built in, Firefox use Firebug, no comment on IE). Just rightclick on the scrollbar or the part of the scrollbar that you are interested in for the image and do "Inspect Element." From there you can see the css for that element and in this case they are using the background-image property and you can just grab the URL from here.
If you are not a graphic designer I would just find already existing images on the web (assuming the creator allows this). For jQuery in general I would suggest perusing the documentation http://api.jquery.com/ to see what is available to you (I assume you know Javascript) and just start using it. Experience is a great teacher in this case.