Hey guys I'm building a website and found out ie8 wouldnt work with rounded corners. After a bit of research I found out that PIE would tackle this problem, and yes it did, but it also screws the complete site over. The divs are scrolling away and the image's ignore the rounded corners :(, anyone that can help. The problem is a bit difficult to discribe so here's the link http://www.k2stuc.nl Hope someone can help me out with getting it compatible with ie8.
You need to add relative positioning to container of PIE element.
.column{position:relative;}
Also in some cases you may need to use zoom:1 property.
Related
I've customized the CSS transitions on the Media Grid plugin and they're working everywhere except IE8. That's fine. I can live without the transitions but I still need the div containing the individuals name and title to appear. Right now they don't show up at all. I've tried everything I can think of but I can't find the answer. Could someone point me in the right direction?
http://clients.weinsteinau.cgvcreative.com/team/
For IE8 I'm afraid you will have to make a separate stylesheet and start from your class .overlays than dig deeper into those divs, you will have to change positioning, height and width. There are a few elements without dimensions and IE8 does not like that. Let me know how it goes, and oh yeah good luck! :)
I am trying to use a CSS3 Border gradient property and using an example from css tricks. I can get it to work using their example but cant seem to get my colours in that i am after and i think it's syntax errors. Is someone able to let me know what i may be missing?
I am after a left and right border on a div with the gradient going from #d1d2cd to #e3e4df 5 pixels wide?
I have mocked up an example in js fiddle: http://jsfiddle.net/DqgPy/
Thanks
I'd recommend checking out a site like:
http://www.colorzilla.com/gradient-editor/
Play around with the gradient settings, and it will auto-generate the CSS you need (including support for older browsers). At the very least, the code provided might help you figure out any of your syntax errors.
I was just wondering if anyone might be able to tell me how to add a left and right sided faded border to my webpages such as on this site:
http://www.farrow-ball.com/colours/paint/fcp-category/list?resetFilters=true
My webpages are of a fixed layout and are 920px in width to the edges of the images / text boxes.
Any help would be greatly appreciated in my quest to learn CSS! I've tried to find tutorials on how to do this or previous topics on this however I must not be putting in the correct keywords because I can't seem to find what I'm after.
Thank you!
you use box-shadow it's supported in most new browser, some uses prefixes though.
there is even a generator available that can come in handy
http://css3gen.com/box-shadow/
I can't seem to get the graphics on the top and the bottom of the navigation menu to have no gaps. Since the top and bottom images need to be stretched it can't be done as a background image. The 3 pieces need to be touching. I have tried using tables, setting margins and padding to 0px on everything, even tried using a css clear file and I still cannot get them touching.
jsFiddle... http://jsfiddle.net/PerryCS/JXVGM/1/
Am I trying to force the browser to do something it's not capable of doing? Where is the extra spacing coming from?
Please and thank you!
I don't mind trying things out. I have spent about 11 hours fiddling with this and I'm very frustrated at the lack of understanding on my part at why there is still a space. Ugh.
Needs to work on IE7 and above please. :)
Add display: block to .navribbon img: http://jsfiddle.net/thirtydot/JXVGM/2/
In the bottom cap of this page (bottom with corners) I seem to be having a weird IE6 issue. I've tried Google with no luck, as really, how do you ask this question.
In IE6, the corner images that are floated left and right seem to cause the whitespace to drop.
http://www.duncanhadleytriathlon.ca/
Any suggestions for why this may be?
Are you using paddings? If so, you must subtract the padding from your other values (left/right).
I don't know if it helps or not but I noticed that there is also an issue (probably the same one that you said) in Firefox 3.6.3.
I suggest you use the DD_roundies javascript for making rounded corners in IE browsers. It can be found at:
www.dillerdesign.com/experiment/DD_roundies/
[Edit]: The issue that i said is about the green panel's rounded corner at the bottom of the page.
My suggestion would be to use position: absolute to place the images instead.
Other ideas would be:
Drop #mtmi and just make the background of #mtm white (you'd need to modify the images to make the background black instead of transparent.
Even possibly drop #mtm and but the images directly in #main
Ignore old browers and use CSS3 rounded corners.