this is my website
http://www.forid.ir
it is not english but my question is just about the search box (it has an icon and is obvious)
about the curves in search box if your browser is NOT IE9 you can see everything works currectly. (including IE8-)
but if you use IE9 there is a single white pixel at the right corner, i have no idea what causes ie to behave like this :(
between corners i have an input which has the appropriate border i have tried lots of possibilities but it doesn't work the last option is to forget about the curves and have an image for the whole input background.
it's the worst English i've ever used!! so sorry it is hard to explain.
The problem seems to be related to direction: rtl on body. At least, when I toggle that off, the problem disappears.
For a lack of any better ideas, you could fix it with a conditional comment:
<!--[if IE 9]>
<style>
#sr_right {
margin-left: -1px;
}
</style>
<![endif]-->
Related
I'm working on a site and I have some problems that I hope you guys can help me with :)
If I put bold on my text in the menu it looks too bold in Firefox :S, but it looks fine in Chrome.
In Firefox the double border on the #content container is outside of the shadow effect :S, but looks good in Chrome.
Screen shot on Mac Firefox 5.0.1 and Chrome 13.0.782.112:
This is my project.
I hope some one can help me out with this.
If you have something I better I can do, I will be glad to hear that too :)
Your first issue regarding bold font looking different between the browsers is just because of the way browsers render text differently. There is nothing you can do about it, unless you go the horrible route of using images instead.
Your second issue is not about the border but rather the outline. It is caused because of the way Firefox interprets the outline when box-shadow is applied. It applies it outside of the shadow instead.
You can put the code below in your css to target Firefox and bring the outline back in:
#-moz-document url-prefix() {
#content{
outline-offset: -11px;
}
}
Live example: http://jsfiddle.net/tw16/n8bet/
#1: There differences in font rendering in every browser. You can try numeric values instead of simply bold to narrow the results ( http://clagnut.com/blog/2228/ ). Also read the answer on this SO entry: Same font except its weight seems different on different browsers
#2: remove this line from #content css:
outline: 1px solid #B9BDBE;
A known old known problem is that various old browsers both IE 7 (perhaps also IE 8) and FireFox 3.0 ~ 3.6, are the experiencing of very SLOW scrolling down through a webpage whenever a background image img or div with an image has the position: fixed; property.
Having built a site with this feature I noticed that in IE 7 (maybe 8 too) that had a terribly sluggish scrolling experience ruing the good enjoyment of the entire website. All other JQuery effects were also not smooth anymore. Now, as soon as I commented the position: fixed; property of the background image div:img, everything becomes good again.
<html><head>
img#bg {
/* position:fixed;*/
top:0;
left:0;
height:auto;
min-height:100%; /* proportionally fit height (eg panorama images) */
width: 100%;
z-index:-2;
}
</head>
<body><img src="background.jpg" id="bg"/></body>
</html>
Q1: How to make that line conditional? Users with IE7 or IE8 /*position:fixed;*/ and users with IE9 or FF4 position:fixed
Q2: Could anything in my css have triggered the bug except position: fixed? for example should img#bg be written differently?
Some links: MozzilaZine, StackOverflow, LinDesk
Thanks very much for your suggestions and ideas on this browserbug. Much appreciated!
Q1: How to make that line conditional?
For IE older than version 9 there's always a conditional comment override:
<!--[if lt IE 9]>
<style>img#bg { position: absolute; }</style>
<![endif]-->
For Firefox, one way would be to find some hack that distinguishes version 4 from its predecessors, which I can't really think of right now.
Q2: Could anything in my css have triggered the bug except position: fixed?
That and the fact that it's an image. But mostly the fixed positioning. This also happens if you used a background image with background-attachment: fixed, and is a well-known performance issue on those browsers.
Q1: How to make that line conditional?
If you'd rather not to use conditional comments (per BoltClock's reply), a summary of browser-specific CSS hacks can be found on Paul Irish's site.
Q2: Could anything in my css have triggered the bug except position: fixed?
Short answer: Yes, but probably none as much as position: fixed. If removing it fixes your issue, it's your biggest problem.
Slightly longer answer: box-shadow has been shown to cause performance issues. So will IE's proprietary filters. Inefficient selectors are sometimes mentioned, but it's debatable whether they have a large effect.
To profile your code, use the CSS Stress Test bookmarklet to drill down on exactly which selectors are causing your browser trouble. It's great!
i know IE6 is dead,but in china, there are lots of people still using it. so expect someone can do me a favor about this problem.
this is the page.the even line's background color is not the same length, under IE6, which is shorter
the display under IE6. (http://run.xxmn.com/ie6.jpg). the bgcolor displays different from other browers.
the display under IE7,FF,CHROME (http://run.xxmn.com/ie7.jpg). it displays ok.
how to make it under IE6 displays the same result as other browers?
ps:the problem is solved. thanks all the guys.
The problem in IE6 is probably due to negative margins on the views-field-title class (though I don't have IE6 installed to check).
You don't actually need negative margins to achieve the effect you want. So suggest removing them like this:
Remove margin-left: -4px; from #left_cplist .cplist-bg .view-content .views-field-title
Remove margin-left: 5px; form #left_cplist .cplist-bg .views-row
I did this layout here: http://www.2xfun.com/
It uses some css3 effects and stuff which are not supported in every browser, but if they dont work its fine.
The thing is that i really tried to keep the essentials working in old browsers.
I didnt use any negativ margins, which i know of make problems in IE 6 etc
But if i look at it in IE 6 the layout gets messy. The elements are completely garbled.
Where did I fail so terribly? I don't need an analysis of all my errors because i know its by far not perfect. But what positioning css directives are so wrong that they cause IE6 to mess everything up?
So my question is:
What properties or combination of properties do cause such legacy incompatibility
are there any good work arounds (css resets, javascript fixes) ?
addendum:
this is how the page looks like in ie6
and after Šime Vidas's javascript fix
and this is how it should look like and looks like in modern browsers
Everything that has position: absolute, put both top and left positions, not just top. Everything that has float AND margin, set to display: inline. That will at least fix many problems. I'd also recommend a reset styling, like Meyer's. Your code looks a bit underdefined for IE6, it's a picky one.
Put this on the page:
<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
How does the page look in IE6 now?
Project homepage: http://code.google.com/p/ie7-js/
Getting started: http://www.charlescooke.me.uk/web/lab_notes/ie7_script.html
Here we go..
Add a rule to this effect to your normal stylesheet - #neXib was correct:
.headcontainer, .headbar {
left:0
}
Without that, your site has problems even in IE7.
The above snippet, combined with adding this voodoo magic dust I created fixes the pressing IE6 issues:
<!--[if IE 6]>
<style type="text/css">
.headbar-spacer {
width: 169px
}
.content div.right {
padding-right: 0
}
.content h2 {
margin: -30px 0 0 106px;
width: 535px;
padding: 0 0 12px 0
}
</style>
<![endif]-->
I commented out this:
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=xa-4c90156b67654829"></script>
It seemed to somehow make IE6 jump the white video container to the top of the window. So wrap that in a conditional comment if need be.
Your site looks like this with the above changes in IE6 (ignoring the low color depth of this image):
Much better!
Improvements you could make:
Try out DD_belatedPNG to fix your .png transparency issues.
Make an image version of the CSS gradient you have on .headbar. At the moment, IE8 does not have a gradient. IE has support for it's own special kind of gradient, you might consider providing those rules (-ms-filter/filter + gradient?).
Redundant point: fix Notice: Undefined index: jsfix in /home/2xfun/html/application/views/vanilla.php on line 13. Obviously you just put that in for testing. I recommend suppressing the PHP error by prefixing the line with #.
Kick IE6 in the face. Twice.
Little background information here: I have narrowed down the problem, but can't determine what the fix is. In IE6 the input box won't allow me to use my mouse to select it.
Please go here to see the problem: http://www.malahatautoparts.com/business-application/
The problems stems from an IE6 fix for the CSS background.
#main{
background-position:-9999px -9999px;
filter: progid:dximagetransform.microsoft.alphaimageloader( src='http://www.malahatautoparts.com/wp-content/themes/malahat/images/bg-main.png', sizingmethod='crop');
}
If I remove that from my IE6 css file, input box all of a sudden works.
Any ideas on what I can use to fix this?
The conditional comment you have there for "less than IE 7" isn't even working right for the PNG transparency it's supposed to fix in IE6: I'm seeing grey background around the transparent corner areas. In IE7 the transparency works natively without loading that stylesheet.
The method you're using in the IE stylesheet relies on the alphaImageLoader filter, which I suspect is blocking over top of the HTML form controls on the page.
There's an alternate method that uses VML instead: check out DD_BelatedPNG. I'm not 100% sure if it will solve your problem, but I have a hunch it will, and it's a cleaner solution than what you're using now.
<textarea> and <input> selections: selectionStart and selectionEnd are not implemented in IE, and there's a proprietary "ranges" system in its place, see also Caret position in textarea, in characters from the start.
Also see What are the typical reasons Javascript developed on Firefox fails on IE for common reasons of failure of Javascript/CSS in IE which work in Firefox & other browsers (or vice versa).
Some excellent tips so you can get a uniform look & usage in all browsers.
use css with
#main{
background-position:-9999px -9999px;
filter: progid:dximagetransform.microsoft.alphaimageloader( src='http://www.malahatautoparts.com/wp-content/themes/malahat/images/bg-main.png', sizingmethod='crop');
position: relative;
}