i have been trying to create a sort of image slideshow. the problem is that in firefox it displays correctly
with rounded corners , but in chrome the rounded corners ( using css3 ) are being 'hidden' at the back although it is there .
here's a demo of my work :
http://anisa.me/work/
Any help would be highly appreciated .
I succeeded in achieving what you wanted using jQuery ...
First load jQuery correctly (currently not loaded) and add this css rule
#bi-max { border-radius: 0 0 0 10px; }
Then using JavaScript :
$('#bi-max').css("background","url("+jQuery("#bi-max img").attr('src')+")");
$('#bi-max img').css("opacity","0")
This way the background of the big image container change to be like the big image ... with the border radius hiding the rest of it.
Then we set the background of the A elements to the images they contain
$('#bi-min a').each(function(){
jQuery(this).css("background","url("+jQuery(this).find("img").attr("src")+")");
})
$('#bi-min a img').css("opacity","0");
Then we use jQuery to set the rounded corner to the lower right corner of the last A element.
$('#bi-min a:last').css("border-radius","0 0 10px 0")
Can post it to jsfiddle if you find it hard to follow.
Regards
Your question is not quite right. It should sound like "Why does FF show rounded image corners correctly?" :) FF is the only one, who supports it.
Possible solutions:
If an image has fixed size, you can insert some html element (span or div) with the same size and make your image as a background to this element. The image must be hidden then.
An example: http://arsen.ws/folio/craft-design/cosmic-games.html
Save corners as separate images and position each of them absolutely above appropriate corner of the image.
Use JS library to round corners http://www.netzgesta.de/corner/
Related
Link referenced to in the text below: http://www.massgeneral.org/international/dev/full-screen.aspx
If you preview the CSS for the div with the class "anythingNavWindow", you can see a background image (sprite) that is being used to cast a shadow effect, giving the navigation window of the thumbnail slider the visual of the thumbnails being behind the triggers.
Well, unfortunately, when viewing in IE8, the shadow moves with the thumbnails when you transition using the sliders to view the additional thumbnails in the slider. Every other browser handles the background image properly, which is to have it be stationary and not move with the thumbnail slider.
The actual transition of the thumbnails is taking place on a parent container, not the parent container with the class "anythingNavWindow", so I'm not sure why this is occurring. Any assistance would be greatly appreciated.
I don't believe this is an issue with the slider, but more of an issue with the CSS.
Here is a jsFiddle ready to be tampered with: http://jsfiddle.net/jodriscoll/fKCFE/
div.anythingNavWindow {
width: 616px !important;
background: url('http://www.massgeneral.org/assets/js-plugins/images/bg-slideshow-shadows.png') no-repeat 0 0 transparent;
}
Things I've tried:
Setting the position to "fixed", somehow ends up hiding the entire DIV container.
Setting the background position using the "background-position-x" & "background-position-y" does nothing
Any help would be greatly appreciated!
Thanks!
Try backgroundPositionX and backgroundPositionY
IE8 uses that, for some stupid reason.
Sometimes when I hover over images and what not, I see a tiny triangle linking the pop up thing to it's image. For example, the tiny triangle next to your username on the center top of the stackoverflow page. How do I do that? Do you use CSS3 for this? Thanks.
Use this in your HTML source:
▾
You can see the result here: ▾
Or here.
Unicode character U+25BC is a solid triangle pointing down: ▼. You can also finagle html block elements to look like triangles by giving them a width and height of zero and applying special border properties to three of the element's sides. This technique is known as the CSS triangle hack.
You can do it without using image or any unicode character. this trick used by twitter bootstrap to make tooltips. the idea is by using a small box under your popup with a big transparent border but only showing the top border, all done by using css.
check out the explanation here. and a live demo here
Here you go - Its a Unicode Symbol. The full chart is over at Wikipedia.
I have a menu with 5 items of varying text length - home, about us, contact us, etc
In the mockup in photoshop, I created a background image for the hover state but if it's longer than the text it gets cut off and it doesn't work in IE. The image is 105 X 28. Here's a link to example You'll see when you hover the background image gets cutoff. How can I fix this? Thanks
add a css rule to #main-nav li a{ min-width: 105px;}
I would recommend having a fixed size though ie 105px.. and then text-align:center for each of the menu items so they all line up nicely .. but that is up to you
The buttons aren't wide enough for the background image.
Give each li tag either the style width: 105px; height: 28px; or make a CSS class with that styling and apply the class to each one.
You can try using a rectangular background image and using the CSS border-radius attribute to round the corners.
If that doesn't get you the look you want or isn't compatible enough, the usual way is to make the image in three parts. The two ends plus a middle section that can be stretched or tiled.
A third approach is to use a rectangular background image again, and then creates "masks" which are images of the corner cutouts (which are same color as background) that are overlayed on the main background image to make the corners appear rounded. I haven't seen this approach as much since the border-radius attributes became widely supported.
Here is a pure CSS solution...
http://jsfiddle.net/wdm954/tAaCF/1/
Basically using CSS3 border-radius and box-shadow to replace the need for an image. This is going to be a bit less stylish in older browsers. For simple styling like this it shouldn't be a deal breaker if those who are already suffering through a lack of CSS3 across the Web don't get to see some pretty rounded corners. The older browsers will still show a blue background on hover.
Is there something like this that can work with IE? No images and with borders?
http://www.css3.info/preview/rounded-border/
I haven't tried but you can have a look on this
Nifty Corners Cube: rounded corners without images -
URL is http://www.html.it/articoli/niftycube/index.html
OR you can try
JQuery Corners -
http://www.atblabs.com/jquery.corners.html
Example usage -
<div style="background-color:#acc; padding:10px" class="rounded">
Example with different x and y sizes.
</div>
<script>$(document).ready( function(){
$('.rounded').corners("30px 10px");
});</script>
Works with:
* iPhone
* Chrome
* Firefox
* Safari 2+
* Opera 9.0+
* Internet Explorer 6+
* and probably more...
With CSS3 you can achieve this without using any images.
But isn't supported in many browsers.
Try Nifty Corners Cube, but it doesn't allow you to have a border color different form the inner background color. You will need to find a workaround (nifty corner inside a nifty corner). You can also checkout jQueryUI's themeroller. It uses images but you can use it to design your own theme and all you have to do is download the whole package containing the scripts, styles and images. Check out the part where you can create Highlight / Error.
Here's a sample of the nifty corners cube inside another nifty corner. Just view the source. Nifty Corners Cube sample
Try this one:
http://www.cssplay.co.uk/boxes/curves.html
This method uses no images, no javascript, but a little bit of extra HTML with CSS.
Basicly, this method is based on the use bullets (•). Bullets are given the desired color and placed in the four corners of the box. The box is relatively positioned, the bullets are positioned absolutely. That is they are positioned absolutely relative to the parent box.
Please go to: http://jlecologia.com/page1c.html to see the problem
The top box look fine but in IE6 there is a double top and bottom border.
can somebody point me ut what i have done wrong ?
Or can anybody tell me a javascript rounded box that accept to do that effect with the border that is unequal. I have test some and they all fail, so i have done the picture round box but i like the jQuery javascript approach better.
Take a look at the JQuery's round corner plugin
And here is a demo
The default for background images to to have them repeat.
Try: background: transparent url(../images/roundbox-top.jpg) 0 0 no-repeat;
Edited after comment to provide full solution:
IE6 sets the height of empty divs to your font-size if the height specified in the css is less than the font-size.
On #roundbox .top and #roundbox .bottom, put
font-size:0;
line-height:0;
That will collapse the div to the right height.
In addition to the change you've made for the bottom border, setting the font-size of the element with class "top" to 7px fixes it in my IE6.
Try using the web developer toolbar in Firefox to validate the CSS and HTML. I did a quick check and there are multiple errors in each. The rendering difference, I suspect, is because IE does not handle malformed content as well as FF. In particular, even small errors in CSS files tend to snowball in IE and melt down an otherwise good layout. Not sure if IE7 and IE8 have made any improvements in this regard.