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
Related
I created a new pinned-tab icon for Safari 9 on El Capitan as documented by Apple here but I can't seem to get Safari to actually show it when I pin my tab.
Here's the line in my header:
<link rel="mask-icon" href="https://towatchlist.com/img/twl.svg" color="red">
Safari does show the image just fine when I follow the link to the SVG file, but the pinned tab icon still shows the auto-generated letter image even after reloads and pin/unpin etc.
I tried opening up GitHub's SVG (which is working) and copying the general markup there but that didn't fix things either. I also poked through the Safari console briefly but didn't see it even attempting to land the SVG file.
Any suggestions on how to even debug this or ideas on what is going wrong?
Looks like Safari is aggressively caching (even the absence of) these icons. Found the answer over on Super User:
Delete the contents of the following folder:
~/Library/Safari/Template Icons
And then restart Safari.
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.
How does jQueryMobile shows "..." when there's not enough space to view all the text?
Is it an CSS attribute?
There is a CSS attribute for this -- it is text-overflow:ellipsis;.
However, there is one problem with it: it doesn't work in Firefox. It works in all other browsers, but not Firefox, not even FF4. I understand it's planned for FF5 or FF6.
In Firefox, it would need to be done using pure Javascript, which is where the JQuery would need to do some work. To do it accurately, it would need to calculate the physical size of the text in pixels, character by character. It is possible that it does use the CSS property in other browsers. It would make sense.
See this post: text-overflow:ellipsis in Firefox 4? (and FF5) for a further discussion of this issue specific to Firefox.
What is the best way to link to the icons of websites? Meaning, given a hostname, what src should I put in an <img> tag to link to the 16x16 icon?
I was just doing http://<hostname>/favicon.ico. It seems some .ico files aren't liked by different browsers. Chrome seems to like them all, but Safari, FF and IE all have problems with various icons.
Example page: http://paultarjan.com
Think the problem is just that those browsers don't support the .ico file format in img tags. You probably need to make a proxy for it that converts to png or something. Though, testing that just now, Safari seems to load that example one just fine. One strange thing about that one though: it's 32x32.
Also, though almost everyone does use /favicon.ico, you can actually use anything and define it in a <link> tag in the head of your pages. I don't how much this matters for what you're doing, but technically you can't rely on it being called that.
If this doesn't help then please specify how the .ico files "aren't liked" by different 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.