Is there something wrong with firefox? My styles on <label> work in every browser but FF. I'm using 3.5.5. I mean they even work in every version of IE? anyone have a suggestion?
EDIT, as i said, the code works in any other browser. but all of these fails.
<label style="color: #aaa; font-weight: bold;">Blah</label>
and
.mylabel {
color: #aaa;
font-weight: bold;
}
<label class="mylabel">Blah</label>
and
label {
color: #aaa;
font-weight: bold;
}
<label>Blah</label>
There you go. Where's the error in code? i sure don't see one.
The most probable reason is there are some other styles that are overriding these. The easiest thing you can do here is:
Download firebug: http://getfirebug.com/ and install it.
Open up firebug, click the second button on the top left (the one that looks like an arrow pointing to a button) and then click on your label. On the right side you will see what styles are being applied to it and which are being overwritten.
As a general rule, it's a good idea to post all relevant information / code about your question. The users of SO are not wizards; if you couldn't figure out the problem with the code in front of you, there's a slim chance anyone will figure out the problem with no code. Try to put yourself in their shoes – would you be able to figure out a technical issue that just says "something is wrong with my code"? Most likely, you're going to get downvoted without getting a proper response.
Renders fine in FireFox 3.5.5, both with an XHTML transitional DOCTYPE and no DOCTYPE.
What environment are you testing this in... Is it local or a remote server? If you go to the View menu and view the source for the page via FireFox, do the inline styles appear correctly? Could you be looking at a cached copy of the page?
Another worthwhile alternative is to start from scratch. Create a minimal page with just a label and the CSS to color it. Add features of the broken page until you reach the point where the problem occurs.
Also ensure that you don't render in quirks mode but in standards mode. Usually the styles which doesn't work in FF but do in IE is after all IE's fault because it's either too forgiving or rendering in quirksmode.
Read this for more info: http://hsivonen.iki.fi/doctype/
To the point: use a strict doctype and develop in FF.
As others have pointed out, works fine for me. Maybe you can try the following code to narrow down the problem:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style type="text/css">
.mylabel {
color: #aaa;
font-weight: bold;
}
</style>
</head>
<body>
<form>
<label class="mylabel" for="f1">Field 1</label>
<input id="f1" type="text">
<label style="color: #aaa;font-weight:bold" for="f2">Field
2</label>
<input id="f2" type="text">
<input type="submit">
</form>
</body>
</html>
I had a similar problem and it seems that a simple
float: left;
clear: left;
solves it.
Related
The problem
In IE11 the image in the following code is clickable to activate/toggle the input in the label:
<label>
<input type="checkbox"> some text
<img src="http://placeimg.com/100/100/any" alt="some img">
</label>
While the image in the this exactly same code but inside of a <form> is not clickable to activate/toggle the input:
<form>
<label>
<input type="checkbox"> some text
<img src="http://placeimg.com/100/100/any" alt="some img">
</label>
</form>
(Demo at jsfiddle)
Note that in the example animation above I'm clicking the second image, which doesn't work, but clicking on the text works (just did that to demonstrate).
This was tested and reproduced on:
IE 11.0.9600.16428 on Windows 7 Pro SP1 x64.
IE 11.0.9600.16438 on Windows RT 8.1 tablet.
IE 11.0.9600.17105 on Windows 7 Pro SP1 x64.
IE 11.0.10240.16431 on Windows 10
This issue does not occur in IE9, IE10, Microsoft Edge, and other browsers.
Questions:
Can this be solved without JS while still using image tags?
If not, what other possible solutions are there?
(Optional) Why doesn't the image in the second example trigger the input element (while doing it in the first)?
One way to fix this is with pointer-events: none on the image, and adjusting the label with for example display: inline-block. (pointer-events is supported in IE11.)
label{
display: inline-block;
}
label img{
pointer-events: none;
}
(Demo at jsFiddle)
Is a bit older question, but as its pretty high in google search, I'll post here one more answer that fixes this in all IE versions.
.
The checkbox/radio has to be outside of label, it has to have own unique ID and label has to have attribute for which contains the ID of checkbox/radio its related to:
<label for="my_lovely_checkbox">Hello good friend</label>
<input type="checkbox" value="Hello" id="my_lovely_checkbox">
If you done that and if you use PHP (which you probably are), you can use this piece of code:
if (preg_match('~MSIE|Internet Explorer~i', $_SERVER['HTTP_USER_AGENT']) || (strpos($_SERVER['HTTP_USER_AGENT'], 'Trident/7.0; rv:11.0') !== false)) {
?>
<script>
$(document).ready(function() {
$("label img").on("click", function() {
$("#" + $(this).parents("label").attr("for")).click();
});
});
</script>
<?
}
I know its JS, but there is actually no other fix for =< IE10 without JS usage.
It detects all IE, versions (IE10 and 11 included, have no idea about Spartan tho, i think it does not detect that one).
Ps.: Answer above me does not actually work for IE8, IE9 and IE10. Just so you know.
I have text boxes that specify with inline CSS that their width should be 200px
<input type="text" name="xxx" value="yyy" style="width: 200px;" />
IE 10 presents them as below (highlighted where text is cut off)
As soon as that textbox receives focus, all the text becomes visible (and then after it has lost focus again, the text remains visible)
Anybody have the same problem and manage to fix this?
I'm 99% sure this has something to do with the "clear button" in ie10.
When a textbox gets focus in ie10 a little "x" appears on the right side that allows you to clear the text.
You can remove the x by adding this to the stylesheet
::-ms-clear {
display: none;
}
Chances are there is something messing with the style of the clear button. I would suggest adding the style I pasted above and see if that fixes your issue.
Here's a fiddle that kinda replicates your issue (with bad css)
http://jsfiddle.net/qDTWw/3/
Here's a fiddle with the fix
http://jsfiddle.net/qDTWw/4/
I am getting the same in a password box in ie10
This workaround seems to work for me ...
$('.password').blur(function () {
//work around for ie10 clipping text
$(this).val($(this).val());
});
*This isn't a true "answer", because I haven't solved it, but am posting here with additional information that won't fit into a comment very well. I have this same problem, and am hoping this helps someone else figure it out.
This jsfiddle is one way to reproduce the problem:
http://jsfiddle.net/tj_vantoll/2NGEQ/2/
Apparently, this was reported to Microsoft:
https://connect.microsoft.com/IE/feedback/details/767602/input-text-boxes-clipped-when-a-font-size-is-applied-to-a-parent-element#details
There is a reference to a reply from someone at Microsoft here:
http://bugs.jqueryui.com/ticket/8677
From Tony Ross (Microsoft):
Unfortunately I don’t think this will make our bar for a patch update since the issue automatically resolves itself when the user interacts with the control, but I’ll definitely make sure it stays on our radar for the next release.
As for code-based workarounds, there are various ways you can poke the input element itself to get it to it to update if you so desire (updating the value, changing the width of the element inline, assigning the width inline to begin with, etc).....
Posting code from jsfiddle because I have to:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo by tj_vantoll</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type='text/css'>
input { width: 150px; }
form.on input { font-size: 1em; }
</style>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$('button').on('click', function(event) {
$('form').addClass('on');
});
});//]]>
</script>
</head>
<body>
<form>
<input type="text" value="Whatever" />
</form>
<button>Break It</button>
</body>
</html
I have an unusual problem that's driving me crazy! I haven't found a question posted yet that pertains to this exact issue.
I have a page on my site where certain elements render incorrectly on random page loads. Using chrome for example, the page will render normally but after a number of refreshes a basic ul in the header will shift down into the body. Sometimes a carousel won't appear, or a navigation block will slide to the next row. I have duplicated this behavior on Firefox as well.
I can't really give a snippet of code for anyone to look at because I have no idea where the issue is originating from. The page with the issue is the index of www.Calibrus.com.
What's really amazing is that by using Chrome Dev Tools I can set display:none to the incorrect ul, then set display back to normal, and the ul renders where it should again. This suggests to me that the exact same html and css is somehow rendering differently (regardless of any scripts being used).
Also, this isn't an issue with the server. I have the same problem when running the code locally.
Does anyone have any idea whats going on here?
I believe the issue is tied to floats and the slideshow javascript.
Whenever I triggered the layout bug on the live site, it was accompanied by the first slide not rendering correctly. This would cause <div id="r1"> to have a height of 0 which in turn seems to aggravate the afore mentioned float bug. There seems to be some tension between the <ul> which is floated and the <a> which is not.
This is the solution that worked for me:
In index.html add a class (or ID if you prefer) to allow yourself to target the link within the CSS. In this example I have simply given it a class of logo:
<a class="logo" href="index.html">
<img src="images/Calibrus_logo.png" alt="logo" border="0">
</a>
Then, in your CSS:
// target the link using your chosen selector
.logo {
display: block;
float: left;
}
Once I added those rules, I could no longer replicate the rendering bug.
Side note:
I would recommend declaring your character encoding just after the opening <head> tag with <meta charset="utf-8">.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Calibrus</title>
Also, the border attribute for images has become obsolete. So rather than:
<img src="images/Calibrus_logo.png" alt="logo" border="0">
Simply target the <img> with CSS and declare:
.logo img {
border: none;
}
I want to use the white-space CSS property in an HTML textarea.
Basically if someone types a bunch of text with line breaks in a textarea, and then submits this data to be stored in MySQL, I want to use the white-space CSS property to display those line breaks in the textarea. But when I try it it's not working and just displays the text all together in one big paragraph, without any breaks or anything. Is there a way to do this?
<form action="includes/changebio.php" method="post" id="form1">
<textarea id="bio" style="width: 440px;
margin-top:3px;
text-align:left;
margin-left:-2px;
height: 120px;
resize: none;
outline:none;
overflow:scroll;
**white-space:pre-line;**
border: #ccc 1px solid;" textarea name="bio" data-id="bio" maxlength="710" placeholder="<?php echo stripslashes($profile['bio']); ?>"></textarea>
<input type="image" src="assets/img/icons/save-edit.png"class="bio-submit" name="submit" value="submit" id="submit"/>
</form>
textarea{white-space:pre}
When I've seen this, it's because your textarea is inheriting a white-space:nowrap from something. It can also be complicated by a wrap="no" on the textareas which can be useful sometimes.
The default behavior for a textarea nowrap is pre, so simply setting the css as above at the bottom of your styles will override anywhere that is setting the white-space.
If you inspect your textarea element, you'll most certainly find that somewhere in the hierarchy you're setting the nowrap property somewhere on some type of element that is overriding the default textarea behavior.
Don't.
<textarea> elements already handle whitespace literally. There is no need to try and take things into your own hands.
Things seem to be working ok for me... Tossed this into a codepen just to test it. Newline characters appear fine within the textarea when added directly.
Don't know what's going on. Is PHP stripping newline characters? Are you using double quotes around whatever you are passing in through $profile['bio']?
Here's an answer that might help you: The .val() of a textarea doesn't take new lines into account
The last response, in particular. Based on your code, it doesn't sound like the .replace() method is what you need (but I could be wrong... maybe I'm not understanding what you are doing).
one line of jquery will solve the problem
$('#bio').text('');
or Javascript
document.getElementById("bio").innerText = '';
I created a new web application in visual web developer. I saw that the title of "Site.Master" (in code) is:
<div class="title">
<h1>
My ASP.NET Application
</h1>
</div>
So I opened "Site.css" and added:
h1
{
font-size: 1.6em;
padding-bottom: 0px;
margin-bottom: 0px;
color:Blue;
}
Showing "Default.aspx", though, doesn't show the text ("My ASP.NET Application
") in blue. Why?
EDIT: From the source code:
<body>
<form runat="server">
<div class="page">
<div class="header">
<div class="title">
<h1>
My ASP.NET Application
</h1>
So I added color: Blue; in the css under body, page, header, title, and h1. I rebuilt, and pressed Ctrl + F5. Doesn't help. I'm trying this in IE and Firefox.
The stylesheet is probably cached on the browser. Clear your browser cache, and you should see the change.
Also, You probably did this for emphasis, but you don't need to surround the css in asterisks.
You can prevent this from occurring in the future by appending a query string to the css link:
<link rel="stylesheet" type="text/css" href='site.css?v=<%= DateTime.Now.Ticks %>' />
Something like this will cause the browser to download the css file every time the page is requested.
Update your css like below.
.title h1
{
font-size: 1.6em !important;
padding-bottom: 0px !important;
margin-bottom: 0px !important;
color:Blue !important;
}
from: http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/
Specificity is calculated by counting various components of your css
and expressing them in a form (a,b,c,d). This will be clearer with an
example, but first the components.
Element, Pseudo Element: d = 1 – (0,0,0,1)
Class, Pseudo class, Attribute: c = 1 – (0,0,1,0)
Id: b = 1 – (0,1,0,0)
Inline Style: a = 1 – (1,0,0,0)
So, the class of div is over-riding the element setting of h1.
Try
color: blue;
instead of
**color:Blue;**
Two things:
It's possible you just need to do a "hard refresh" of the page. Try pressing Ctrl + F5 and see if that helps.
You may need a more specific selector to control that element if another CSS rule is affecting it. Try changing "h1" to ".title h1"
i dont know why it happens but u need to clean firefox cache and cookie then it works.
This cases are common and almost no solution to this issue (sadly, little can be done) if and only if your web page content was sourced from a template online. To confirm this, create two web forms with different templates and both web forms share the same 'sitemaster' page. it kind of inherits content design.