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.
Related
I am working with SVG the first time and came across this problem:
I am using some SVGs for icons and everything works fine - except for one icon that renders incorrectly in Firefox on Windows. Firefox on OS X however renders it just fine.
Here is an anonymized version of the header I am placing SVG icons in:
http://files.uiux.de/140618_header/
That problem persists regardless if I use the Sprite utilized in the above example or if I use separate files for each icon.
Here are two screenshots of the render-issue I am experiencing. The problem is that little 'dent' on the lower end of that earphone:
We've saved those SVGs in Illustrator and used SVG 1.1 as export-setting.
Can someone point out what the problem seems to be here?
I'm not seeing that error in the sample header when I look at it with my version of FF (30).
It looks to me as if the artifact/'dent' you are seeing is caused by the left-most column of pixels of the envelope icon next to the phone in the sprite sheet. You can tell if you zoom up the image.
What I do, to make sure things like this don't happen, is to not put icons hard up next to each other in the spritesheet. Leave a few pixels gap between them.
I'm getting strange problem with pie.htc and IE8. I have many elements on page that has rounded corners but pie works only for one element. My CSS is correct - I mean selectors are correctly assigned to pie behavior.
What elese could be wrong?
I have some experience using css3 pie and they have not been great. Here are the fixes i have used:
The elements that you are applying the behavior library too need to be position: relative for a start, so check that first. It may fix it.
If you want it to work in IE6 and 7 you need to add zoom: 1. I know you said you were using IE8 but my customers have said that in the past and it has been in compatibility mode, so always best to add that setting.
CSS 3 Pie does not support browser zooming either on background images so check that you are viewing the website in the 100% view and no other.
Hope that has helped. If you could post a jsfiddle then I could try and help further. If not check the css3pie known issues http://css3pie.com/documentation/known-issues/
Found a solution. Problem was that for these elements was used background with filter. Also css3pie sets background for these elements. After removing this filter everything works fine.
I have buttons in different sizes and different colours in one sprite, using sliding doors technique, everything is fine in all major browsers but, when I am trying to run this in IE7, IE8 , everything seems fine, except :active state, it only works in the right corner of the button. Any suggestions ? url: http://www.dmitree.com/temp/cb/buttons2/buttons2.html
Inside anchor class"button" you have span. you have applied height as well as line height properties on this span. I guess If you remove height and only keep line height will resolve your issue.
but Please check in other browsers too. as removing height for IE may or may not affect other browsers.
additional resource: http://www.jankoatwarpspeed.com/make-fancy-buttons-using-css-sliding-doors-technique/
hope this helps
I am having a problem occurring only in Firefox for Windows (although I admit I am using Browserlab to test, and crossing my fingers it is accurate!)
The test page is here: http://carolineelisa.com/rkl/index2.html
Currently in FF3-4 the grey background to the footer is not the full width of the page. Sometimes it is the width of the main left hand column above it, but sometimes wider...
I have tried giving it a width of 100%, using clear fixes, removing floats from its child divs and even the columns above it, removing scripts from the page, all with no luck.
Any ideas on how to fix this? Thanks in advance.
You should give the footer element a min-width of 930px (which is your main contents width) so that it does not inherit from the body.
The problem you describe only happens (in my windows and FF) when the page is re-sized and the horizontal scrollbar appears.
i'm suffering some odd changes in margin when viewing my page in IE8 compatibility mode (ie7). Specifically in 2 areas. The Primary navigation and the footer.
As you can see the navigation is experiencing a much larger margin from the left then what is seen in IE8/FF/Chrome/Safari
http://demo.carbonium.no/iebug1.png
Below the advertising there is supposed to be space. This problem persists in all IE browsers but not in FF/Chrome/Safari
Here is a link to the actual site
Alright, i found a work around to the problem i was having with the navigation. Using absolute positioning and Z-index:1; to take the element out of the natural document flow solved the problem. Also it would seam that replacing margins with padding can to some degree give you the same result. Either way i am still confused as to why IE7 causes this particular issue.