I am working on a website and doing some testing in IE9.
I have a slideshow section.
Some look like this (correctly displayed): http://i.stack.imgur.com/DbcP5.jpg
And others look like this: http://i.stack.imgur.com/wXEMU.jpg
The button is cut off and the last name from the quote doesn't display. I have narrowed down my issue to be due to the amount of words used in my h2. In other browsers such as Chrome it somehow makes all the words fit and keeps the same font-size. How do I make this work in IE9?
This may be due to varying default user agent stylesheets. Using a CSS reset, like normalize.css, may help you achieve consistency, all else being equal.
You may want to use the old 1.1.3 branch of normalize because you require IE7 support.
Note that IE7 usage is basically nil, I recommend dropping support for it.
Related
There are a number of asterisk (*) types as you can see here:
http://www.eki.ee/letter/chardata.cgi?search=asterisk
Even now, we can see that some of these characters like the one with the code: "204E" also known as "low asterisk" is not rendered in HTML (at least while using Chrome anyway).
You can see the character here:
⁎ -> ⁎
Other similar types work however:
✢ -> ✢
✣ -> ✣
✤ -> ✤
Of course out of all the possible types, the authors of my input data have chosen ⁎ to work with.
It makes me think it should be somewhat general, because I saw solutions where a tiny image was used instead of this character in the entire HTML document. Needless to say I do not like that approach even a bit.
Is there a way to make this work in HTML? Is this possibly a browser specific issue?
UPDATE:
Internet Explorer 9 and Google Chrome also fail to render this special character.
Firefox and Chromium (Ubuntu) seem to be able to render it.
Please note, that I would like to find a general solution if possible.
My HTML code:
<html>
it works in chromium though ⁎
</html>
I use Chromium in Ubuntu, and it works fine in it.
and here goes screen shot of IE, in case you want to see it.
Furthermore: for those looking for a middle asterisk ∗ -> ∗
This primarily depends on the fonts installed in the user’s system, not on browser (though some browsers, most notably IE, might be unable to utilize all the fonts in the system, as they should). Regarding e.g. U+204E, font support is relatively limited: no font shipped with Windows contains it, whereas Linux systems probably have some font that contains it.
Using #font-face for some suitable free font, you could make the character display in most computers (excluding basically just those that have font loading disabled). See my Guide to using special characters in HTML.
In this case, that would probably be overkill, if you just need e.g. a low asterisk. A normal asterisk, in a lowered position, should be sufficient – at least compared with the overall typographic quality of HTML documents. Example:
<style>
.low {
position: relative;
top: 0.55ex;
}
</style>
Compare: *⁎<span class=low>*</span>
(Using relative positioning is safer than using vertical-align, directly or via the sub element, since vertical-align usually messes up line spacing.)
I am using <p> tag for inserting Arabic text into the html page, and giving the CSS property text-align: justify; with particular width and height in pixels.
With this, there would be the paragraph including inconsistent space between the paragraph words; how can we use the same with proper word-stretching (with proper tatweel/kashida) inside the word?
I have tried it with the text-justify: kashida CSS property, but it's only working with IE, not for any other browser! As per the image shows, it is clear that the text-justify: kashida is not supported by Mozilla, and other browsers expect the IE.
How can I get the same behaviour in all browsers, to display the same as Internet Explorer?
Unfortunately seems kashida is dropped from CSS3 text and deferred for CSS4 text, so if you want justify your text with Kashida, you should try porting harfbuzz-old adding kashida algorithm (that its algorithm is removed from newer generation of harfbuzz, ref) which is based on a Microsoft specification that is archived here. Here is Microsoft's kashida insertion priority table that you should try to implement somehow:
ّAdding Kashida («ـ») for text styling on HTML itself is not a good idea (because if user copy the text it will contains added Kashidas and it will make problem for browsers find-in-page) however as current webkitbug/blinkbug (Safari/Chrome) versions do not support joining cursive script characters (like Arabic/Persian) during inline (pseudo)elements there seems there is not any chance you get this type of justification without inserting Kashida (or you should handle oncopy event by your own that has its own problems).
It is also interesting that Microsoft is extended IE Kashida justification implementation to support more interesting things like text-kashida-space (configure ratio of kashida to white space expansion while text justifying). Seems we must wait another decade to these get implemented across all major browsers.
The text-justify property was implemented in IE, and it is not part of any completed CSS specification. It exists in the Working Draft CSS Text Module Level 3, but even there, it is marked as being at risk: “The following features are at risk and may be cut from the spec during its CR period if there are no (correct) implementations: [...] the ‘text-justify’ property, particularly its ‘kashida’ value”.
From the authoring perspective, the best you can do is to hope that other browsers will catch up. The styling requested is relatively complicated and probably not anything you can imitate with JavaScript in the same sense as you can “polyfill” CSS properties
I'm putting together a page, and am really struggling with backgrounds across browsers.
The page uses a number of alpha-blended backgrounds, box shadows and border-radii and it is composited almost entirely using inline styles (essentially there are few/no CSS classes used).
IE9 is my primary browser, and in it, the page looks great. However, on Chrome (and I'm told Firefox), most of my alpha-blended backgrounds render either not-at-all (transparent), or as solid colors! I'm using Standards Mode with an HTML5 !DOCTYPE declaration, so it's not as though I'm leveraging IE quirks or anything!
Clearly on IE versions before 9, the backgrounds (and other things are problematic). But I'm not concerned with supporting ancient software, and those users get a browsing experience that they deserve.
The common refrain for years has been that "transparency on IE sucks!", so I was comfortable in expecting that if I got it to work adequately on IE (typically the worst platform), then the others would just fall in line, but here I am struggling in the opposite direction! I'm using the standard "rgba(r,g,b,a);" directive on the "background-Color" attribute so I'm not using any radical DirectX filters or other magic, nevertheless, on (NOT Internet Explorer 9+) browsers, I'm getting some non-alpha-blended results (sometimes it works, sometimes it doesn't).
The site can be previewed at: https://net-xpert.com/ -- All of the pull-down menus are supposed to have translucent backgrounds, and so too the hovering link-bar at the bottom of the page. Also if you go to the "Ask us a Question" page, the dialog there should have tinted backgrounds on all of the input fields...
Oh, lastly, I am ENTIRELY LOATHE to implement ANY b/s, browser/platform-specific, 'experimental' style-codes! Anything in CSS2/3 is fine, but I simply REFUSE to use any kind of "-browser-some-quirky-CSSAttribute" styles! (I wish more developers would do this too! -- then browser manufacturers would be under greater pressure to adopt these STANDARDS and our lives would be SO MUCH EASIER, but I digress...)
Anyway, any insight on a standards-compliant solution would be greatly appreciated (even if it's just a communal acknowledgement that "ya, Chrome et al is currently not implementing this correctly...", at least then I'll know there's nothing to be done about it...)
Thanks!
Well, this is a very late answer, but maybe this'll still be of use to you (your site still seems to be up and running).
I have a should-work-for-you solution, assuming that you can modify one of your stylesheets. As to WHY you've encountered this problem ..? I can only speculate, because I don't know how to recreate your exact configuration.
The fix;
div[id^=mainMenuOverDiv] {
background-color: rgba(128,128,128,0.9) !important;
}
I'm not a fan of using !important unecessarily, and you may be able to remove that by using greater specificity. I've tested this in Firefox, though and it seems to work - obviously, you'll want to substitute the actual rgba(x,x,x,x) values with your own.
You seem to be using some JavaScript (I'm assuming) which randomizes the DIV ID every time you hover over the menu - but the beginning remains consistent (i.e. one time it will be #mainMenuOverDivjkhasdfsd89f9f9sdfl3l4l34lfdbvbc, then the next, it'll be #mainMenuOverDivLSDklsdkmlzxncbzmxnc90234xcvassf). Using the 'starts with' CSS selector (as provided in the example), you can still isolate the menu despite this potential spanner in the works.
It's interesting (and probably insightful) that this even works, given that inline CSS usually can't be overridden.
As for why this is happening, one possibility is that some JavaScript generated code is not correctly porting over to the non-IE browsers. Alternatively, if you're using it anywhere, code minification may also break some functionality (and vary between browsers) - many minification plugins need to be tweaked for individual setups to ensure that everything continues to work fine as one size does not necessarily fit all. For example, you might find that on one site you can minify everything except the JavaScript, while on another site, JavaScript is fine, but you can't minify inline CSS, etc. Google Analytics code sometimes falls victim to this.
So to my eye, the issue possibly isn't to do with IE/Chrome/Firefox or Safari - transparency is working fine on all of them - I think it's most likely the way your code is being manipulated or delivered to the browser.
Hope that helps in some way. Let me know if you can't use an external stylesheet and I'll try to find an alternative.
I want to make this page look the same across all browsers. Specifically, I want the wrapping point of the text to be exactly the same on all browsers so I can create a PDF version with 100% accuracy. Check this out in FF vs. Chrome, for example.
http://santaspencil.com/desktop/embedded-test/embedded-fonts-test.php
Questions:
- Can it be done?
- Are there alternatives that don't require the user to download a plugin?
You should consider embedding the font file into your CSS. But as usual stone-age IE can not do this as you will need to include an EOT font file on your server.
http://base64fonts.com will convert your font files to base64 and then produce a css code for you to copy and paste in your html. this will help with insuring your font loads across browsers (except IE).
Good luck
... I want the wrapping point of the text to be exactly the same on all browsers ...
Bang head here (sign on brick wall). Web technology doesn't even try to do this. If you figure out a way to provide your own font -such as embedded webfonts- you can SORTA make it work. But if 100% is your goal, you might as well give up sleeping.
One of the neat things about browsers is their "liquid layout" capabitity, automatically rendering a page differently on a tablet than on a desktop to fill the different screen sizes for example. One of the prices you pay for this infinite rerenderability though is inability to specify the appearance exactly. Besides, edge cases will always arise and bite. For example if the available line is 0-73 units and the text you want to put in it is 74 units long, does it "fit" or not??? (i.e. does zero count? and is using up the very last unit a "fit" or an indication of the need to "wrap"?)
The only way to have browsers render your exact appearance is to give them what appears to them to be an image. Displaying the text on your screen, taking a screenshot of it, and making that screenshot into a *.GIF is one way.
A PDF file works too, as it appears to a browser to be a "funny" image with its own rendering engine. Most rendering engines are probably the same (i.e. the ones from Adobe) even if the browsers aren't the same, so it's much more likely to work. Providing PDF documents on the web works pretty well and is pretty widely supported. If a URL looks like http://yoursys.yourdomain/yourpath/yourfile.pdf most browsers will fetch it and start their PDF rendering tool and display it directly ...usually INside the browser window so the user isn't even aware of a different application having been used.
As to the last part of your question, it's the wrong question. It should be "solutions that don't require a plugin THE USER DOESN'T ALREADY HAVE". The advantage of a PDF plugin is the vast majority of users already have it. Not all plugins are evil/inconvenient ...just the less common ones (or the Flash plugin if your target is iPhones where users aren't even allowed to download it:-).
good luck!
This is probably way too late, but I did not know this until today. There is something called a non-breaking space, represented by in HTML, you can use to prevent unwanted line breaks or other such thing. Wikipedia has a pretty good writeup on it.
http://en.wikipedia.org/wiki/Non-breaking_space
Generally, what's the best way to tackle a layout bug in IE6? What are the most common bugs or problems that one should look for when trying to figure out why your page suddenly looks like a monkey coded it?
First Things First
Get yourself the Internet Explorer Developer Toolbar. It's a life saver and works great with IE6 and/or IE7. It's no replacement for Web Developer Toolbar or Firebug for Firefox, but it's better than nothing.
Know Thy Enemy
Read up on the quirks of IE — particularly hasLayout and overflow and the like. There are also many CSS niceties that you'll have to either do without or find alternatives. Look into how many of the popular JavaScript toolkits/frameworks/libraries get around different issues.
Rome Wasn't Built in a Day
The more you have to work with it, the more you'll remember off hand and won't have to lookup as often. There's just no replacement for experience in this. As several have pointed out, though, there are great resources out there on the net. Position Is Everything is certainly up there.
http://www.positioniseverything.net/ will certainly address your problem.
It provides comprehensive and in-depth descriptions of browser bugs along with options to work around them. A must read, in my opinion,
One good way to start learning about how IE happens to be mangling the page is to turn on red borders on different elements with CSS (border: 1px solid red;). This will immediately tell you whether it's a margin problem or a padding problem, how wide the element really is, etc.
The box model is usually the culprit. Basically what this means is that any div you are trying to position and use unsupported CSS with will cause this problem.
You may find it happens if you are using min-{width,height} or max-{width,height}.
this provides a great reference for checking compadibility with different versions.
http://www.aptana.com/reference/html/api/CSS.index.html
Noticed that Marc's post is at a -2 =D. He's only saying "resort to tables" even though they blow, because in sucky browsers like IE6, some of the broken CSS commands work in tables only (who know's why... dam you Bill Gates!!!). Here's a good reference to see what works and doesn't work as far as CSS goes. http://www.quirksmode.org/css/contents.html . It's a great reference to check on what cool effects work/don't work with various, widely used browsers. Also, always have a go-to plan for users who browse with IE6 (even though it's just about as old as mechanical dirt) as many businesses still use older browsers (including non-profits/3rd world countries etc.) So by all means, create the bugged out drop-down menu that looks WAY better than a standard horizontal menu, but create a secondary one specifically for IE6 that becomes the default when the page receives a request from an IE6 browser.
how do you define layout bug? the most frustrating layout implementation (i don't know if this should be defined as bug) in IE is we need to always specify style="display:inline" in the HTML <form> tag so that a blank line won't appear to disturb the form layout.
This question I believe has far too much scope.
Validate your code, and if pain persists, well, good luck.
The only real solutions, as with any other ballpark bug type are to google for a solution, or ask somebody who knows, ( ie: give the exact problem to us here at stackoverflow ).
You can use the IE Dev toolbar to glean an Idea, but many of the bugs are random, inexplicable, and esoteric. IE: the guillotine bug, the random item duplication bug, etc etc, the list goes on, and you can spend hours literally goofing with stupid variables everywhere and achieve nothing.
I have a simple strategy that works every time.
First, I develop the site using commonly accepted CSS to look good in Safari and Firefox 3. See w3schools.com for details on browser support.
Then, I go into IE6 and IE7 and alter the CSS using conditional includes.
This is hack free and lets you handle different browsers (IE6 and IE7 have separate issues).
Most of the issues you'll find come from unsupported features in IE (like min-width), errors in the box model (IE adds unseen extra padding (3px) to some boxes), or positioning issues. Go for those first as they are often the issue.
A common problem is padding not getting added to the width of a block element. So for layout div's, avoid using padding and instead use elements within them to define the padding.
I use Rafel Lima's Browser Selector when I need to tweak differences between IE/Standards browsers. It greatly reduces using "hacks" in your HTML to solve common problems.
You can target CSS statements for different browsers, or even different versions of browsers (Hello IE 6). It's very simple to implement, but requires the user has JavaScript turned on (most do).
.thing { ....}
.ie .thing { ....}
.ie6 .thing { ....}
We had a floating div issue that was only evident in a particular version of IE6. It was fixed by downloading the latest service pack.
In theory, use CSS compatible with IE6 layout bugs, utilise only well known workarounds (css and html filters) and code for them in a way that wont break forward compatibility, test for quirks/strict mode.
In reality, resort to tables.