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
Related
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 a webpage that calls up a fancybox contact form. it works perfectly in Internet Expolorer .... perfect padding .. perfectly centered .. no problem.
In Firefox, however, the same form when called up has scrollbars both horizontally and vertically. Any size adjustment to the window produces the same result. Even if you remove ALL content ... its the same result.
Being relatively new I have search and found no solution to the problem and have tried EVERY available answer listed on the internet. what am I missing? You can view a test page to see what I mean at http://www.e-scapez.com/test/test.html.
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.
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.