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
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!
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.
These are two of the pages in question I have issues with viewed in IE7 or in IE8 in compatibility mode.
http://ancientadornment.com/medievalbeads.aspx
http://ancientadornment.com/egyptianbeads.aspx
These pages have text without line breaks in them, and it's causing the DIV to stretch out to the length of the page instead of the 100% I have specified. Any idea why this is happening? It looks good in IE8, IE9, and Firefox, but I cannot seem to get this to work. I put it in a DIV of 100%, and it still does it. I have tried to set a maximum width, but that has no effect.
Any ideas? Thanks.
IE (especially 7) tends to have a lot of issues like this one. It may be better to try and work with IE7 separately by over-riding all of the issues in a separate css file. To make a seperate css file do this:
<!--[if IE 7]><link rel="stylesheet" href="YourFile.css" type="text/css" media="screen, projection"/><![endif]-->
I have always found that editing the css in my default css file to fix IE 7 issues will always cause more issues in other browsers
Our website www.phototulip.com displays fine in Safari and Firefox but not in IE7.
The main content seems to display on the bottom right hand side and the nav bar shifts slightly to the left. I've tried to adjust sidebar and content widths but with no success.
I was wondering if anyone could help.
You have a few places where your markup is invalid (one or more <div> tags aren't closed properly) that could, potentially affect the layout. FireFox tends to be a bit more forgiving about that sort of thing than IE.
Other things to check are that your content area & sidebar have explicit widths set and that they aren't too wide for the container they're in.