I've noticed that in jsFiddle, the header tags (<h1> -- <h6>) don't "enlarge" (or otherwise style) the text as expected.
For example: http://jsfiddle.net/Bubby4j/KURKp/
I was expecting to see the text larger, but it looks like regular text. How can I get the normal behavior back?
You can now untick "Normalize CSS" in the "Choose Framework" section of the panel.
jsFiddle currently forces normalize on all fiddles - I hope to have it changed to optional mid Feb. Annoying indeed - no idea what I was thinking.
If you mean "doesnt work" in terms of the font size not being what you regularly see, that is because font-size:100% is inherited from the jsfiddle stylesheets for h2-h6.
You can redeclare your own rules with h2 { font-size:2em; } or any value you like in the CSS tab.
Related
I know that I can do the following if I want to turn an image into a click-able link:
<img src="icons/twitter.png" />
But I would prefer to use a CSS background image so that I can have a hover state:
<a class="twitter" href="http://twitter.com/username"></a>
# css
.twitter{display:block; width:16px; height:16px; background:url("twitter.png")}
This works fine except I'm not sure it's entirely valid to have an anchor link that contains nothing. Chrome renders it fine, as does FF, but I'm not sure if others are the same.
I realise I could just put some text inside the link, and hide it with text-indent: -9999px, but I've never liked that approach, for various reasons. Is my code above cross-browser compatible?
It's valid, but it's best if you did put something in there and used something like
font-size: 0;
to hide it away. This way, if someone does not have CSS (screen readers for example), he would still be able to tell approximately what the link is about.
Here's a great article on the subject
It is not OK at all, since it breaks fundamental accessibility principles. There is no way to specify alternative text for a background image, the same way you can and should specify it using an alt attribute in an img tag for a content image. See WCAG 2.0 Guideline 1.1.
If you wish to change an image on mouseover, there are CSS and JavaScript techniques for that.
It is perfectly valid, but if you want, you can put a blank space inside:
Use as the text, and you are good.
Over at Markup.tips we recently did some accessibility testing in iOS 8 and discovered that VoiceOver will not navigation to empty links. There must at least be a non-breaking space. Whether this should be considered an iOS bug or not we are not sure.
I have an image and a rectangle (a paragraph with a coloured background) that should have their tops line up. They're both absolutely positioned and have the same style-top value, but the top of the rectangle is appearing about 15px below the top of the image, and I can't figure out why. Is there any reason why this might be happening?
HTML:
<img class="v1" id="image" src="/COMP2405A4/images/resized_adorkable!.jpg" style="position:absolute;top:313px;left: 61px;" alt = "Your Image">
<p class="mask" id="tmask" style="position:absolute;top:313px;left: 61px;width: 400px;height: 20px"> </p>
CSS:
p.mask {background: rgb(255,255,255);
opacity:0.5;
}
Your elements don't line up because the margins of your elements aren't the same.
Try explicitly setting margin: 0; on the p element.
Seems like you have the right idea. One of your other classes may be throwing you off. I made an example if you want to take a look.
http://jsfiddle.net/hwrQA/
It can't be other classes since the relevant styles are applied through a style tag, which overrides the default styles it may have.
However I can theorize that it may have to do with on of the elements, probably the image, having additional styles through the stylesheet creating extra offset.
Like padding on an image, the effect differs per browser but it may create the extra offset.
The best thing you can do to check why the offset it not correct is use the developer tools in chrome or firebug in firefox to select the relevant element and see which styles get applied and where they are coming from. Internet Explorer has debugging tools too but I wouldn't recommend them to start with.
If you want a better answer you're going to have to reproduce it in jsfiddle so we can see what is wrong. Try taking away stuff until nothing irrelevant to be bug remains, or if the bug dissapeared in this process you may have solved it yourself. Read the how to ask faq for more information.
In my website, there are lots of buttons. When viewing in Chrome, the button width just fit on the dynamic button text, but in IE, I can see extra padding are produced on both left and right...
Would there be any CSS rule that can allow me to take away these padding? Thanks.
Might be a bit late, but when I searched SO for the very same problem today I found this question. Obviously, this is no real padding (in a sense that it cannot be turned off by padding:0px), but rather one of those weird oddities that we all love so much about IE. (Note how the false padding scales with button text length O_o). Fortunately, there is a simple solution to it, as described here.
Basically you only add overflow:visible; to the button (I did not need the extra width:auto;as described there). Don't ask - it's absolutely not what you'd have thought this should do, but well... It's IE Land and the rules are different over there. Just note that this apparently does not work when your buttons are inside a table cell.
I guess the CSS reset might have solved this, because someone already included this in some global declaration. Just adding this answer to shed some more light on the how and why.
Never give up, people - our children will see a world without IE quirks... One can hope.
You can use reset css as it avoids browser inconsistencies.
Please refer http://sixrevisions.com/css/css-tips/css-tip-1-resetting-your-styles-with-css-reset/
Visit http://www.cssreset.com/scripts/html5-doctor-css-reset-stylesheet/ for reset.css
Managed to avoid extra spacing in IE with extra statement display:block; in CSS like so:
.menu button{
display:block;
width:100%;
padding:0;
}
Note that I didn't use width:auto as it wasn't an option in my case - buttons are empty, width is taken from parent div.
I wrote up a post in WordPress that included some code samples. I used the "preformatted" style for the code sample, which gives a nice monospace font and doesn't screw up multiple spaces, and everything looks great...
...except that it's tiny! The text of the code samples comes out at something ridiculously small, like 8 pt or something. The HTML isn't much help; it's only producing this text by wrapping it in a <pre> tag. So I figure the bad size setting has to be coming from my style sheet.
I don't know a thing about CSS, though, and trying to look through the style sheet isn't very helpful. Does anyone know how I can find what's causing the <pre> tag to generate tiny text and tweak it to make the text size larger?
There could be several different stylesheets in your Wordpress installation and you have to read them all, in order to find out what's causing the problem. You should search for a definition of "pre", but, given you don't know much about CSS, you may have to do several tests to find out which one you should alter.
I believe an easier way is to install a plugin for code snippets, such as this.
You should be able to add a style like so:
pre {
font-size: 12pt;
}
CSS allows you to apply styling to block-level items as well as classes and ID's.
In your CSS, put the following:
pre { font-size: 16px; }
Search for "pre" in the CSS files, there's probably a font-size value defined. You can change this to a larger value to increase the size. Here's an example styling pre tags.
I was just recently asked to add a print stylesheet to a site I've coded out and am baffled as to why Firefox is mangling the output. A print preview of the following page reveals what I'm referring to:
http://webreviewportal.com/ethicalmovers/newsite/aaem-customer-testimonials.php
When you try to print that page in Firefox, you get the logo on one page, part of the testimonials on the second (they get cut off), and another blank third page. I've tested this with moderate success in IE and Safari with no such issues. Thoughts?
Also, why does the text get cut off (as opposed to wrapping) when you scale the page to anything above 150%? Thanks in advance!
If you add "overflow: visible" to #content in print.css, it prints correctly in Firefox. Your overflow is set to hidden in style.css, which is why the text is getting cut off on one page.
I've not really experimented with print stylesheets yet, having not had the necessity nor curiosity enough. However, looking at the W3C's page on paged media, reveals that page breaks may have to be explicitly stated or allowed:
This section describes page breaks in CSS 2.1. Five properties indicate where the user agent may or should break pages...
Taken from: http://www.w3.org/TR/CSS2/page.html#page-break-props, 2009-07-27, 18:13
So it may be worth adding in the page breaks, or disallowing the page-break between the testimonials and the logo, by adding:
#leftcol {
page-break-inside: auto; /* although this may be the default value, anyway */
}
I think I remember Eric Meyer having issues with this sort of thing because of the 'float' property; but since you've already stated float: none!important; I guess you've dealt with that.