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!
Related
So I really hate the way chrome extension development works so I decided to make a regular webapp and use an iframe in my extension. Everything works fine, except for the dimensions of the website and the scrolling on the extension/site.
When developing the site, I knew I was going to use an iframe so I used percentages when formatting the site, for the most part I used 100% on most divs and textboxes. Anyway, the problem I am facing is that the scroll is extremely wonky on the extension for instance this is a picture of my extension with 400px height:
400x400. Everything looks fine.
and here is my extension with 800px height:
400x800. Scroll appears.
Why is the scroll appearing if I am merely making the extension longer? It doesn't make sense to me.
Any idea why this is happening?
There is a limit on the size of the popup window. I don't know the exact dimensions though.
You cannot increase the size of the document past it, scroll will appear.
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 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.
This is a two part problem. Solving it for Firefox breaks IE6, and solving it for IE6 breaks Firefox. WebKit works fine.
This demonstrates the problem in Firefox: http://jsfiddle.net/UpZca/2/
"Import Submission" link is slightly higher than "Export Submission", which is a problem. IE6 works fine at this point - the alignment is correct.
I know that when using 'inline-block', vertical alignment issues can be fixed with vertical-align:top, so I tried that first. You can see that it fixes the problem in Firefox: http://jsfiddle.net/UpZca/1/
However, with this change IE6 decided that it is going to move "Import Submission" down all the way to the bottom of the invisible file input. Take a look at the last link again in IE6 to see what I mean.
btw, jsfiddle doesn't render the code the same way as pure IE6 does. In the links above, my text is covered up by the gray Browse button from the file input. In pure IE6 that doesn't happen, but this still demonstrates the positioning problem.
So, is there any way for me to make this code work in IE6 and Firefox?
Any ideas would be appreciated (except the one about not using IE6 :))
I ended up using Javascript to programatically add the vertical-align: top style if the browser is not IE.
A brief look tells me that the problem might be because IE6 does not support inline-block. Whenever you use inline-block, you will also need to do this:
*display: inline;
*zoom: inline;
These two lines are equivalent to display: inline-block for IE 6 and 7.
With this set, you can then probably figure out a cross-browser solution for the issue by adding vertical-align: top to the first anchor tag or qq-upload_button.
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.