I have an annoying IE6 layout bug
This screenshot shows the problem:
Problem: Text inputs i.e. <input type='text' /> are wrong size.
The text inputs are a bit wonky. They are supposed to be 248px wide (like the textarea) and on the same horizontal level as their labels. All other browsers appear to obey the following code but our friend IE6 doesn't
.simple_form input[type='text'],.simple_form input[type='email'],.simple_form textarea
{
width:240px;
border:1px solid #ccc;
padding:3px
}
I dunno what I'm doing wrong here and it's driving me nuts. The page in question is here. The inputs are significantly wider than 248px in IE6. Does IE6 have a problem understanding input[type='text'] when used in CSS?
Can post more code
IE6 doesn't support the attribute selector in CSS.
You will to select those elements using an IE6 compatible way, such as classes.
In addition to the previous answers, also remember to keep said css selector in a separate selector. So for example,
input[type="text"], input.text {
color: red;
}
This will be completely ignored by IE6. But...
input[type="text"] {
color: red;
}
input.text {
color: red;
}
should work.
IE6 does not support CSS attribute selectors. Try a selector like the following instead:
.simple_form input.text {
...
}
In addition, remember the differences in the box model for IE6.
Yes our red headed step child, in my experience does not resolve well with attributes. Instead do something like
.input {/*your styles*/}
Not only will it be browser adaptable but with a css reset you will find it browser persistent as well.
Related
Hi I am having a label which is having a value but I need to add different styles to that words.
<label> 00001 M2 Available </label>
label{
font-size:15px;
}
The font size 15px should be applied to 0001 only. Can anyone help me out regarding this how to achieve using css.
The only way that this is possible, currently, is to wrap that first-word (or whichever other words) in a specific element and style that element:
<label><span>0001</span> M2 Available</label>
label span {
font-size: 15px;
}
You can style the ::first-letter and the ::first-line pseudo-elements with CSS but, for some reason, the W3C chose not, or didn't think, to allow a ::first-word pseudo-element.
It appears, from testing (in Chromium 28/Win XP) that using the ::first-line pseudo-element will style the first-word (though I don't think this is a specified behaviour), so it might not be reliable cross-browser:
label {
display: inline-block;
}
label::first-line {
font-size: 2em;
}
JS Fiddle demo.
References:
CSS Pseudo-elements.
First of all, David's solution is perfect, but if you do not want to add any extra elements, than you can use content: "" property.. if still you can't use this, than you need to go JavaScript
Demo
label.class_name:before {
content: "00001";
color: red;
}
Check the js fiddle
http://jsfiddle.net/9v2n4/
<label> <span style="font-size:15px">00001</span> M2 Available </label>
HTML:
<label><p class="p01">00001</p> M2 Available</label>
CSS:
p.p01{
font-size:15px;
}
Give your label span with a class <label><span class="labelItem"> 00001</span> M2 Available </label>. then style that class .labelItem { font-size: 15px; }
Lets say this markup:
<div id="socialMedia">
<a class="Twitter">Twitter</a>
</div>
What i want is only to be visible the first letter of the text (in this case, just a T)
(Actually I won't end up using it but I am curious about this; sure can be helpfull later)
So this was my a attempt:
#socialMedia .Twitter{
display:none;
}
#socialMedia .Twitter:first-letter {
display: block !important;
}
I was able to check that it won't achieve it. Question is why? and is there some work-around this?
-EDIT-
We are looking for IE=+7/8 version capable solutions..
Salut
Try something like this:
.Twitter {
font-size: 0;
}
.Twitter:first-letter {
font-size: 12px;
}
<div class="Twitter">Twitter</div>
Maybe this is not the best solution, but it works.
Edit: Disclaimer: this does not work according to comments. Please don't use as-is without checking it fits your needs.
If you check the specification for the :first-letter pseudo-element, you'll notice the following:
The :first-letter pseudo-element must select the first letter of the first line of a block, if it is not preceded by any other content (such as images or inline tables) on its line.
The important word here is "block."
You are trying to use the pseudo-element on an <a/> tag with class of Twitter. By default, anchor tags are inline elements (not block level elements).
For your given markup, one solution to your problem would be to style the anchor this way:
.Twitter {
display:block;
visibility:hidden;
}
.Twitter:first-letter {
visibility:visible;
}
I'm not sure exactly what you are going for, but that is good enough for experimental purposes. Check out a demo here: http://jsfiddle.net/H7jhF/.
Another way is to use color: transparent
.twitter{
display: block;
color: transparent;
}
.twitter:first-letter{
color: #000;
}
<div id="socialMedia">
<a class="twitter">Twitter</a>
</div>
JSFiddle
However, this won't work for lte IE8.
References:
IE7 IE8 IE9 color:transparent property
color: transparent is not working in Internet Explorer
What you're doing is like hiding a parent element and trying to show one of its children, it won't work because the parent's style overrides it. The parent element also has to be a block level element for it to work. Like a div or p tag, or display: block; on the a tag.
Here's something using color:
HTML
<div id="socialMedia">
<a class="Twitter">Twitter</a>
</div>
CSS
body {
background-color:#FFF;
}
.Twitter{
display: block;
color:#FFF;
}
.Twitter:first-letter {
color:#000;
}
shoot the content off the page and show the letter using dynamic content:
.twitter{
text-indent:-9999px;
display:block;
position:relative;
}
.twitter:before,.twitter::before{
content:"T";
position:absolute;
width:10px;
height:15px;
z-index:100;
text-indent:9999px;
}
at play in this fiddle:
http://jsfiddle.net/jalbertbowdenii/H7jhF/67/
Why not just use JavaScript and split the string into an array and use the first item in the array. Or charAt()
The pure-CSS answers use visibility and color tricks to hide the remaining letters, but they are still present and affecting layout. It could cause layout issues, e.g. if you wish to float the element and put something beside it.
I found a funny way to do this without hidden elements. The trick is to shrink the entire word down to almost nothing and then blow up just the first letter. It's a bit like OP was trying to do, but it works because it's operating on a continuous spectrum rather than display: none which just shuts down anything inside it. (Kind of an analogue > digital situation.)
Demo
HTML:
<div>Ding Dong</div> and other stuff
CSS:
div {
font-size: 0.0000016px;
float: left;
}
div::first-letter {
color: red;
font-size: 10000000em;
}
Result:
Here's what I do:
.Twitter{
display:block;
width:1ch;
overflow:hidden;
white-space: nowrap;
}
If you check the form at this link, you'll see that required fields have a class="required" in the CSS and a * in the markup.
http://drupal.org/user
Can the * which shows in the markup be added entirely with CSS for divs that have this class?
You can use the after pseudo class:
.required:after { content: "*"; }
or, because you explicitly asked for a div with that class:
div.required:after { content: "*"; }
Should work (for IE only since IE8)
You can apply any style to this, of course. You can even do things like this:
div.required:after:hover { /* Hello, I'm a geek. */ }
This can also be achieved with JavaScript. jQuery:
$(".required").append("*");
span:after { content:"*"; }
Demo: http://jsfiddle.net/W3gHU/
You can use the :after or before css pseudo element for this, more info, also abt which browsers support it here.
You could add an image of a star via CSS. This should work in all browsers.
.required
{
background-image:url(/path/to/your/images/dir/required-field.png);
background-position:top right;
background-repeat:no-repeat;
padding-right:10px;
}
Try this page:
<html>
<style>
.required:after {
color: red;
content: "*"
}
</style>
<body>
<div class="required">Name</div> <input type="text">
<div class="required">Email</div> <input type="text">
</body>
</html>
:after is understood by probably everything except for IE (hopefully IE9 will have support)
Update taking into account comment of Šime Vidas:
it was just example of using. Of course it would bring more sense if we make it this way:
.required:before {
color: red;
content: "*"
}
....
<div>Name <input type="text" class="required"> </div>
then we can even add unobtrusive javascript validation to that field (so this way brings good advantages). The problem is that this refactored page will be displayed as we want it only in Opera (I checked it on all last builds of browsers, except for FireFox 4, but I'm not sure FF will change the way they take that style into account).
:after and :before do not work for input and img elements; there is related discussion of why. $(".required").before("*") from jQuery however will work everywhere, but that's more about JavaScript then CSS (and was mentioned before by other people).
I must be missing something obvious, but can someone explain what I'm doing wrong with my CSS? I would like all buttons to have a certain format, except a few. I was expecting to use CssClass in order to override the few that should be different, but they all seem to use the standard one.
My CSS:
.btn
{
border:none;
background-color:red;
}
input[type="submit"]
{
border: 2px solid black;
background-color:green;
}
All the buttons take the second value (green background, with a border). However, I have this button:
<asp:Button ID="btnAdd" CssClass="btn" runat="server" Text="Add" />
I was expecting this to have no border, and a red background, but it's the same as every other button.
Any ideas what I'm doing wrong?
Thanks
The type='button' rule probably beats the btn rule in specificity. You could use !important but that won't work in IE < 8 and is bound to give problems in the long run.
Try this first:
input[type="submit"].btn
{
border:none;
background-color:red;
}
Place your .btn below you input[type="submit"] rule. If that still does not work add !important.
.btn
{
border:none !important;
background-color:red !important;
}
See here for CSS precedence: http://www.w3.org/TR/CSS2/cascade.html
It's also worth noting that attribute selectors such as input[type="submit"] won't work in IE, they do in FF though.
I have a DataFormWebPart rendering:
<th class="MenuItem">
<xsl:attribute name="onclick" >window.location="<xsl:value-of select="substring-before(#URL, ', ')" ></xsl:value-of>"</xsl:attribute>
<xsl:value-of select="#Comments" disable-output-escaping="yes" />
</th>
With CSS like:
.MenuItem
{
background-color:aqua;
border: thick red solid;
border-top: 0;
border-bottom: 0;
padding:.25em;
padding-left:1em;
padding-right:1em;
}
.MenuItem:hover
{
background-color:green;
}
In IE the :hover is getting ignored, Chrome it works.
If I create the above in a simple html file is works as expected in IE.
My theory is that WSS is messing with the CSS somehow....
Anybody know what or how to trace what is messing with the :hover selector?
the :hover is not accepted on all elements by all browsers. To fix this you have to either place an "a" tag inside of .menuitem and use .menuitem a and and .menuitem a:hover, or use javascript to perform something on a hover
you could easily use jQuery's .hover function to perform an action.
Since many pointed out that only a few elements allow the :hover pseudo in IE, here's how the code would look:
<th class="MenuItem">
<a href="#">
<xsl:attribute name="onclick" >window.location="<xsl:value-of select="substring-before(#URL, ', ')" ></xsl:value-of>"; return false;</xsl:attribute>
<xsl:value-of select="#Comments" disable-output-escaping="yes" />
</a>
</th>
.MenuItem
{
border: thick red solid;
border-top: 0;
border-bottom: 0;
}
.MenuItem a
{
display: inline-block;
padding:.25em;
padding-left:1em;
padding-right:1em;
background-color:aqua;
}
.MenuItem a:hover
{
background-color:green;
}
With jQuery or other js ways, it would keep the original code, change the .MenuItem a:hover to a .MenuHover class and:
$(document).ready(function() {
$(".MenuItem").hover(function() {
$(this).addClass("MenuHover");
}, function() {
$(this).removeClass("MenuHover");
});
});
IE 6, 7 and 8 (when in quirks mode) do not support the CSS :hover pseudo class on arbitrary elements. There are javascript shims to make IE recognize :hover.
I found that the browser version and SharePoint add significant complexity to CSS. I think your solution will be to troubleshoot.
First, you need to understand the order that the CSS files are processed in by viewing the resulting HTML. SharePoint adds its own references to CSS that might override your own CSS classes. I would also suggest using Firebug and/or IE8's developer tools to understand which classes are applied to your HTML elements and/or any parent elements.
I found that the HTML declaration (strict, transitional) influenced how some browsers determined which class to apply to a given element when a conflict exists. I also found that SharePoint adds !important to a few of their CSS classes which also impacts how the browser makes a decision in the presence of conflicting CSS.
I hope this helps. I know it's not an answer but perhaps it will help you identify/resolve the problem.