Ok I have a pretty simple problem. In Chrome, Safari, and Firefox everything is fine and perfect. But in IE9 it is not.
I have CSS style set up for a couple different links.
.header a:link {
color:#fff;
background-color:#f00;
}
.content a:link {
color:#00f;
text-decoration:underline;
}
.nolinkcolor a:link {
color:#000;
background-color:fff;
}
Here is the problem when using the last css style .nolinkcolor it does not work at all on IE9 all other browsers it works fine. In IE9 it basically ignores the .nolinkcolor and uses the styles of the .header
I just want to know if this is known problem and if there a tweak of fix for it???
thanks
Please check you div like Your test. Also it matter parent container for link. If it is inside other container. you have to overwrite CSS. like:
modify CSS like:
body #parentContainerID or class a.nolinkcolor {}
.nolinkcolor a:link {
color:#000;
background-color:fff;
}
Make sure you include the # character in background-color.
Fixing that that, I'm not seeing any other issues in IE9:
JSFiddle test
Related
Hi in Drupal 7 I am using autocomplete search. In search input it displays part of ajax loader animation all the time even when the input is not focused. Bug is marked with red square .
Any suggestions please why there is this bug. (I am using boostrap theme)
Thank you for help.
It's not a twitter bootstrap error.
See your drupal installation's misc/throbber.gif file. You will see that it's actually a sprite and when the ajax request is in progress, it changes its position to show the animated throbber.
You will need to create a new one and adjust CSS accordingly to workaround this issue. Your text field has a relatively higher length than this sprite's
Add the following CSS to your theme's css file. These styles are defined already, so you will only need to override them. See inline comments.
html.js input.form-autocomplete {
background-image: url("/misc/throbber.gif"); // Enter a new thribber image here.
background-position: 100% 2px;
background-repeat: no-repeat;
}
html.js input.throbbing {
background-position: 100% -18px; // Adjust this -18px to the height of your new throbber.
}
I'm using this:
circle.attr({
fill:'#FFFFFF',
'stroke-width':0,
opacity:0,
'pointer-events':'none'
});
The problem is mouse events are still caught and in the DOM inspector that property does not show.
Thanks.
Raphael has a whitelist of attributes it can assign to an element. Since pointer-events: none is not supported in VML then this property is not among the whitelist. To work around this you can do...
circle.node.setAttribute("pointer-events", "none");
Alternatively, if all circles are non-clickable you can include in your CSS stylesheet:
circle {
pointer-events: none;
}
However, none of this will work in any browser that is IE8 or less. If you need old IE support please check out this answer: pointer-events: none VML raphael solution
I've been searching and searching for an answer to this problem and cannot found a solution.
I have added some custom styles to the CKEditor that add a margin-left to the selected text. The problem is that this causes the style previews to move to the right in the styles list. So much so, that they go off the right side of the dropdown. I don't quite have enough rep to post a screenshot unfortunately.
I would just like the styles in the list to have no preview at all if possible.
I have tried to add .cke_panel_listItem p {margin-left: 0px !important;} to my global.css and to the editor.css. I cannot override the inline style no matter what I do.
Any suggestions? Thanks in advance!
I was able to do this using the contentsCss config property. So:
CKEDITOR.editorConfig = function( config ) {
config.contentsCss = 'wysiwyg.css';
}
then in wysiwyg.css put your CSS code:
.cke_panel_listItem p {
margin-left: 0px !important;
}
I need to set the width of textboxes as 80% of it's parent. So first I used
td input[type="text"]
{
width: 80%;
}
But it was not rendering properly if the input is the child of td. So, I used Css expressions
td input[type="text"]
{
width: expression(this.parentNode.offsetWidth*0.8);
}
It is working as I wanted in every browser except IE 6. Can anybody help me, where I am going wrong? I know that expressions are allowed in IE 6. So, is it the problem of using css expression or something to do offsetWidth.
Thanks in advance.
td input[type="text"]
Attribute selectors don't work in IE6. If you want to support this browser, add a class="text" and style on td input.text.
You shouldn't need anything complex with scripts, jQuery or expressions.
try rewriting as
* html td input[type="text"]
{
width: expression(this.parentNode.offsetWidth*0.8) !important;
}
however my own alternative method would be to detect ie version and if its 6 redirect to an error page with a angry face alerting to the user : Its 21st Century you moron! Update!
:)
Sorry I am writing answer for my own question, thought if somebody can get help from this.
I tried many things from CSS, nothing worked in IE 6. So, finally used jquery
if (jQuery.browser.msie && jQuery.browser.version.substring(0, 1) == "6") {
$("td > input[type='text']").each(function() {
$(this).css("width", $(this).parent().width() * 0.80);
});
}
It worked for me fine.
I believe this issue is caused by the ie 6 box model. The width and height include the padding and the borders. See here for more info.
Having major issues getting my wordpress website to display correctly in IE6.
Link to screenshot below. My background image is missing, the nav is knocked down a few extra pixels, and most of my content is off center.
www.genevarealtytrust.com/content/wp-content/themes/wp-terra-basic/images/ie6_wpterra.jpg
FF screenshot (linked below) is what it should look like. Have tried in Safari, a couple versions of Firefox, and IE7, and all look just the way that they are supposed to. IE6 is the only one giving me trouble.
www.genevarealtytrust.com/content/wp-content/themes/wp-terra-basic/images/ff_wpterra.jpg
Any ideas??
Link: www.genevarealtytrust.com/content
I've validated my code, and have tried a few things, but no success.
Help! Appreciate it!
You can try using conditional styles. In document's head section paste:
<!--[if lte IE 6]>
<link rel="stylesheet" media="screen,projection" href=www.example.com/ie.css" type="text/css" />
<![endif]-->
Now You can start editing ie.css without worrying about spoiling design for other browser.
Extra space around nav: IE sometimes has default margins/paddings different from other browsers. Try defining
#something {
margin: 0;
padding: 0;
}
explicitly in Your new css.
No background: Maybe it's the alignment. Try adding somethig like "top left" to Your background-image definition. Example:
background-image: url('../img/site-bg.jpg') no-repeat scroll top right;
Content centering: In CSS there are two ways to center content. First: setting the parent element text-align property to center;. Second: Defining width and setting margin to top-bottom-margin-value auto;. Example:
#something {
width: 100px;
margin: 10px auto;
}
I hope this will help solve any of Your problems :)
This isn't really an answer to your question (and since I don't have enough rep to comment :) ), but try running through this list of common IE CSS bugs. It's helped me work out some kinks in my CSS, but IE 6 is a warzone. Otherwise, I'd really suggest getting the fantastic book Bulletproof Web Design.
Thanks for the tips guys! Daveslab, I'll definitely keep that list handy, and thanks for the book recommendation.
Centering Issue/Missing Background Image:
I made the alternate css doc and that gave me more room to experiment - I was able to resolve the missing background image and centering issue by simplifying the CSS a bit for the problematic section by trial and error. (removed float, position...)
Extra pixels:
What finally ended up fixing the 3 pixels on the bottom of my header was... just stupid.
Evidently IE6 was applying an extra 3 pixels to the bottom of the header image because my html code for that div was split into 3 lines...
<div id="header">
<img src="url" />
</div>
I just had to combine them all into one line, and the extra padding on the bottom disappeared. Dumb... (and ugly)
<div id="header"><img src="url" /></div>
I still have an extra pixel on the right side that I'm trying to resolve - still investigating.