I have a rather big page (with lots of html, css and js(dojo framework)). This page contains html-select element and when I select any option the page blinks in IE6. In other browsers it works fine.
Any ideas how to avoid blinking?
Thanks in advance
Personally I would ignore this. My personal philosophy with IE6 is: It needs to work, but I don't care how it looks.
Perhaps you don't have the luxury.
Related
I have just created a dropdown for my site. It works fine in all other browsers except new version of opera that is 12.02.
Webiste Url : http://www.sktechnologyworld.com/demo/anything/
Here when you mouse over on "Categories", it displays dropdown of that categories then when you hover on categories then it displays subcategories of that category. At this time there is background line remains at top of that perticular category and this same thing in all the subcategories. However when i open dragon fly in opera by pressing ctrl+shift+I then it works fine but if dragon fly is not open then it makes it weird.
Its very strange and have not face this kind of problem before. Any help?
Thanks
This is indeed a bug in Opera. As it's merely a cosmetic issue with no big impact on functionality I suggest you just report a bug to Opera Software and forget about it until it's fixed :-)
The root cause is that Opera fails to draw the background colour of the padding-top of the A elements correctly. It's mainly triggered by the padding-top:9px instruction on #CategoriesBar .nav. However, trying to work around it means adding hacks to your CSS and that makes it harder to understand and maintain - even more likely to break in future browsers. Hence reporting a bug and not trying to work around it is your best way ahead.
Here is a simplified demo you can refer to when reporting the bug:
http://jsfiddle.net/sNHbB/
Please let me know the bug reference number and I'll give it a kick for you.
I'm using the 960.gs grid system to style a website. It appears fine in all the major browsers, except in IE6, I see other sites using the 960.gs perfectly well and it displaying fine in IE6 and wanted to know what I need to tweak to appear correctly.
Here's more info on the 960.gs system: http://960.gs
I've used the class="grid_6 omega" to try and force my last div to float to the right. Which it does in all browsers except IE6. Does anyone know what I need to do to make it work in IE6, do I need to clear something?
Any advice greatly appreciated!
I figured out the problem this morning for anyone wanting to know. I'm using 960.gs and Thematic because I think they're both brilliant in their own ways.
The solution that worked for me was to add the following CSS styling to the containing div before the div that floats to the right, in my case this DIV happens to be called leftloopcontainer, but obviously adjust it to whatever you need it to be:
#leftloopcontainer {overflow: hidden; zoom: 1;}
After I did this IE6 behaved (well, as much as that troublesome browser can!) and displayed my content just fine!
I tested my site on a mobile device and it loaded pretty quickly. However i had to scroll right to see all of the text. The text was pretty big as well.
How can i redesign my site so i dont need to do any scrolling and have smaller text? I know i I seen this before but i cant remember what site did it.
i removed my css and the device scrolled right until the end of my largest div. So i need css to solve this? What css do i need to make the text not big and not cause the user to scroll (horz) no matter how small his screen is?
Also do i detect the user agent in .NET and link an alternative css file or do i detect which css to use elsewhere?
yes you should design an own css-file for the mobile version of your website. either you check the useragent if it's a handheld or you work with the css media type handheld (which is not supported by older browsers) to load the different css-file.
edit:
with css you can also replace images with text
Since long time i been having a real problem with the different ways that each browser display text.
Sure you have noticed that even when you create a stylesheet specifying everything about the font properties, still every browser display the same text with some differences, the usual problem is the font weight, that even if you specify it different browsers display it different ways.
I would like to know if some as come with a solution. Not turning the text into a image.
Thanks.
EDIT:
This is a example of the problem. On the left Firefox and right IE. However i have defined in the CSS font family, weight, size and still they render the fonts different.
Snapshot
Do you mean that on one browser its bold and another one its normal? A reset should fix that, but if it doesn't, it might be something overriding that.
If you're talking about fonts looking different, it is possible - for example, since Google Chrome / Chromium sandboxes the renderer process, the font rendering won't be affected by other parts of the system, and I believe that it uses some sort of special font rendering. To be honest, on my Linux install, I do get bolder fonts on Chromium, but Firefox displays them fine.
There's SIFR (as pointed above), but it needs Flash and it is a bit heavy. There's also Cufon http://cufon.shoqolate.com/ that uses Javascript. Could you show a screencast so we know what's the problem? Thanks.
SIFR is a good solution, as long as you're only trying to control the appearance of small chunks of text (headings, design elements, etc.)
Beyond that, browsers are perfectly allowed to render text any way they want, and getting it pixel-perfect between browsers and operating systems is usually not even desirable for larger chunks of text. Users will have different accessibility settings and anti-aliasing settings which are tuned to the way they want to read text, and in general websites should try to respect that.
You can use SIFR.
Although this problem is already about a week old, here is a solution that I found, that might be related:
http://blog.wolffmyren.com/2009/05/28/jquery-fadeinfadeout-ie-cleartype-glitch/
If you're not using jQuery, try removing the filter attribute from the elements that are displaying non-Cleartype'd text and it should work, according to that blog post.
Is there a good way to create crisp, clear, LARGE font in webpages? I need to create a tag cloud effect on my homepage with different font sizes and colours.
I've got it set up in HTML/CSS but on the older browsers or OS's which don't support anti-aliasing as default it looks a bit... crappy.
I've played with sIFR, which worked beautifully but gave me some horrible load effects but I'm now wondering if there is a way to:
a) do browser/OS detection to split users by browser/OS combinations which I KNOW support anti-aliasing (they get raw HTML) and by "others" who get an image tag.
b) Some sort of JavaScript to add antialiasing?
c) Permanent solution to load a BG image in the div and hide the HTML text. (I know, I know, Google horror stories about de-indexing... but is it possible?)
a) Of course you can use browser detection. The easiest way to do this is probably using jQuery's browser method. (jQuery is an awesome JavaScript library that makes a lot of JS-development easier in case you haven't heard)
Depending on what browser (or OS) results you get, you could present the user with different solutions, from normal text to something like a Flash solution.
However, I advise against it. Things look better on new machines than old ones. That's just the way it is, which is why I recommend against spending precious time on minor glitches in older browsers. -- Unless users with older browsers are your main demographic of course. In this case, how about you just do it in Flash altogether? No use coding up two solutions if one always works, right?
b) You can in fact create anti-aliased text via JavaScript. Have a look at my project Die Stimme Gottes ("Voice of God" -- not for the religiously squeamish) for an example. In this project, I used the excellent typeface.js for this.
c) Just use CSS, maybe?
h1.welcome {
background: url('the-welcome-image.png') no-repeat;
color: transparent;
}
+1 Hank's comment. You have very little to gain by doing this. Some desktop browsers (including IE7+ and Safari) turn on anti-aliasing by default even when it's off at an OS level, and modern (post-XP) OSs tend to turn it on by default anyway. By forcing AA on the rest, you'll:
(+) improve the display a little for IE6 and XP+Firefox users who unwittingly don't have AA
(-) make loading slower for everyone (but especially users of limited mobile devices)
(-) defeat preferred font sizes
(-) unnecessarily annoy the luddites who deliberately disable anti-aliasing because it's “all blurry”(*)
(*: there are limited cases where this does even make sense, particularly for old, fuzzy CRT monitors.)
By the looks of it the best methods (in no real order) are:
1) Use an image. If you rely on SEO for the site then by all means add html and hide it using css using one of these methods
2) typeface.js - JS which will work across most modern browsers. Has some bugs and glitches but works nicely. If you're going to force anti-aliasing on your users then this works. Use sparingly. Author working on Opera and IE8 compatability though...
2) sIFR - Excellent script which dynamically replaces your selected areas of text with flash movies. Again some bugs and glitches, but if you're simply interested in awesome looking font then this is perfect. Increases your page load though, so as ever more is less, use sparingly.
I tend not to go with JS heavy solutions, as I like to have lightning quick page loads, but if you HAVE to have some good looking fonts, then these seem to be the most graceful and simple methods.
-webkit-font-smoothing:antialiased;
Force background color, redefining it for the class or element with the same background color. It works.
span.your_class {
writing-mode: tb-rl;
filter: flipv fliph;
background-color: #006cb8 !important;
}
Flash or Silverlight are your best bets for great looking font rendering