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.
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'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 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.
Recently i noticed to this bug in IE8 (displays correctly in IE7), that the text gets cut off in IE8, just a bit and mainly all the "o":
The text is justified don't know if that plays an important role in this.
My questions would be, can this be fixed? is this a IE8 problem?
Thank you.
Try padding-right: 1px;
This appears to be a bug in IE8. I was having a similar problem: one of the last letters in a paragraph (l) was turning barely visible. When I selected the text, you could see it fine.
I was able to fix by turning on IE7 compatibility mode.
<meta http-equiv="X-UA-Compatible" content="IE=7"/>
This was happening with
IE8
Justified text
Zoom level increased by 1 (Ctrl +)
I was experiencing the same issue, and was able to reduce the cut-off in IE 8 by using the -ms-text-justify CSS property, like so :
text-justify: justify;
-ms-text-justify: newspaper;
This produced a noticeable improvement. However, some characters are still being cut off.
You can read more about -ms-text-justify here: http://msdn.microsoft.com/en-us/library/ie/ms531172%28v=vs.85%29.aspx
How to control a running text? This is a user generated content, where user used to give with out giving space to the text. for example:
abcdefghabcdefghabcdefghabcdefghabcdefghabcdefghabcdefghabcdefghabcdefgh
This goes beyond the specific block. Is there is a way to wrap the text? how can i control it and i also want that to be worked in ie6 also...
You can make strings with no spaces wrap by using the following CSS property:
word-wrap: break-word;
According to the MDC page on the word-wrap property, it is supported in IE 5.5+, Firefox 3.5+, and Safari 1.0+ (but not Opera).
You could use overflow:scroll; in your CSS, this would put a horizontal scroll bar. Should work in IE.