I am having issues with weird black lines being displayed through a website I work on in IE 9. I have tried turning off compression but I am at a loss as to what to do about this. Has anyone seen this or can you give me some suggestions?
Web page: http://3dprinterhub.com
IE9 Screenshot: http://i.imgur.com/mLaOB.png
Those "weird black lines" are coming from the A links in your menu.
You have hidden the actual text in the menu by using "span.help" with "visibility: hidden", but the actual A links themselves are still visible (hence the visible lines).
If you add "visibility: hidden" or "text-decoration: none" to your "a.nav_button" and "a.nav_buttons" CSS rules, then the underlines will disappear.
Related
I encountered a weird Firefox's behaviour. It renders SVG images cutting parts of them or not displaying them at all, but only certain of images, not all of them. Chrome and IE are displaying them properly. Here is a link to the website I put said images on:
funjo.pl
Images which are not being displayed properly are logo in top menu bar and big blue logo with transparency on the big very top banner. The funny thing is that two icons a bit down on the same page (three rolls and woman's legs), which are also SVGs are being displayed properly. Could someone please tell me what's going on? I suppose there is something wrong with SVG image code itself but I can't detect what exactly.
I'm not pasting whole images' code beacuse it's too much of it. You can download these images from http://funjo.pl/media/2016/06/logo.svg and http://funjo.pl/media/2016/06/logo2.svg.
PS: If you really want me very badly to paste the whole code let me know.
PS2: I created all of SVGs on the website using Corel X7, if this information helps in anything.
PS3: I'm using the newest FF v 46.0.1.
Actually I've found a solution myself, it helped perfectly but required few more steps after exporting SVG in Corel X7 (as I mentioned in my post above there were two images, one of them with transparency). So here are the steps I made to make it being displayed properly in FF (a bit trial and error procedure but works):
I exported both SVGs again removing transparency from the one which was originally transparent, so no transparency at all in both SVG images. The one used as logo in menu bar contained all the elements grouped (logo and text were both separate but grouped), I ungrouped those elements and made them as one.
I removed height and width attributes from both SVGs.
I added preserveAspectRatio="none" attribute so I could manage width and height of the image separately, just like raster images (this CSS Tricks article helps a lot with understanting the whole resizing process).
I used SVG Optimiser tool to remove all the unnecessary bits from my images and to slim them down a little.
I downloaded optimised SVGs from above mentioned tool's website, uploaded them to my website's FTP.
I added height:(some)px and width:auto attributes in CSS
I added transparency for the one which was supposed to be transparent via CSS - opacity:0.7 in this case.
Refreshed the website and voilà, it works like a charm. Hope it will help someone with the similar problem as mine.
EDIT
Here are images to compare, working one and not working one.
PS: After some more trials and errors I found out that changing standard text to curves in Corel X7 makes FF render the SVG image properly without above steps, but it doesn't change the fact that it worked properly in Chrome and IE anyway even if the text wasn't changed to curves before export. Plus FF didn't display SVG exported with transparency at all and Chrome and IE did.
You could open a working and failing SVG file into your text editor and find differences in the generated HTML.
I guess there is a difference the way you save it or how the vectors and layers are put. Maybe some transparent layer on top off the image renders strange?
Applying a width of 300px or above gave me the correct results as in chrome and IE.
So just give a width as below and probably you can adjust the width as per your requirement.
Hope it helps.
<img style="width: 300px;" src="http://funjo.pl/media/2016/06/logo.svg" alt="Funjo">
I solved it by removing commas , by spaces
I have an ecommerce website which uses Wordpress CMS and Woocommerce plugin.
The product images looks good on all the browsers except Internet Explorer.
When a category page loads, the product images have some white dots that disappear after the page completly loads. But on Internet Explorer the dots don't disappear.
I've read something about the jQuery fadeIn function. But I don't know the solution for this.
You can see below the problem:
Full screen image: here
Still no answer. This is important. Any help will be great.
It's an Internet Explorer bug, which appears when using fadeIn animations. You have to adjust the black level of the image by replacing real black (#000000) with very dark gray (e.g. #010101).
You can use Gimp to replace the colors: Colors > Map > Color Range Mapping
More information here, here, here and here.
I have this problem in many places. Here is one:
<button type="button" name="remove_subnmc" class="btn"><img src="/static/img/delete.png"/></button>
The button simply appears as empty in IE7. It looks fine in all other browsers.
Without the class="btn" it looks even worse.
I'm using Django, but I don't think that's relevant so I haven't tagged it.
Setting the width of the button manually can fix this, even if you pick the exact width the button was already displayed at.
Interestingly, setting a min-width of at least the image size, on either the image or the button, while not changing the button at all, will fix this as well. Any smaller than that and the image is shrunken accordingly. In this case all of my buttons have 16px images and all of my buttons are at least this wide, so a general min-width applied to all of my buttons in IE7 is an acceptable solution.
However, if I wanted to add a wider button image in some cases I would need to make specific exceptions for that just for IE7, so if anyone knows a more elegant solution I would love to hear it.
I can't get my head around why the columns move when I hover over the last image on the row.
http://www.heritageglass.com.au/projects
On my mac it works in all browsers.
In windows 7 it works in the latest versions of IE and Chrome, it doesn't work in IE8 and Chrome v26. - the client views in IE8 so I have to get as close as I can to it.
Unfortunately I cannot show you the test results as they are done on the development site on our server, but this is what I have tried and no luck:
DOCTYPE is valid.
Added <meta http-equiv="X-UA-Compatible"content="IE=edge,chrome=1" /> to development site.
increasing the width of the container the images are in
(portfolio-full).
eliminating the padding-right of the last-child (but only applies to
the very last image - useless).
changing the negative padding to negative top and left.
position: relative to static and hover state.
eliminating margins and applying padding instead.
no borders on the actual columns, just image.
Any ideas?
Check for any spaces or extraneous data inserted before the doctype. If anything is there at all, including white space, IE will go into quirks mode.
In my application I have a row of buttons (for BBcode) that is included in various places. Each button is an empty div with fixed dimensions, a background image and an onclick handler. This has worked very well in all browsers - so far.
Now I have added one more instance of this row, but this time it is inside an absolutely positioned pop-up div. (At least that's the one notable difference that I can think of, because otherwise it's the exact same code.) This also works in all browsers except for IE8, where clicking the buttons does not do anything. Unless I switch on compatibility mode, in which case it works pretty much fine.
Isn't there any other way to make Internet Explorer behave like it should?
I had the same problem in IE8. The transparent areas in the DIVs were not clickable. An easy solution is to set the background-image to a transparent .gif.
My solution in CSS:
background-image: url("images/pixel.gif");
...where pixel.gif is a 1x1 transparent image.
I've found the solution. It was the "float:left" attribute on the buttons that made it fail.
Which is rather strange because in all the other places where this code was included, it also had the float - and it worked. Even in IE8.
Anyway, removing it and using "display:inline-block" for the placement did the trick.