I have a few images generated dynamicaly :
<div class="image">
<?php echo "<img class='logo_client' src='img/clients/".$row['logo_name'].".jpg''>"; ?>
</div>
And I would like them to have rounded corner so that in my CSS I put :
.image {
padding: 0;
width: 100px;
height: 100px;
overflow: hidden;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
behavior: url(css/PIE.php);
}
I can see the rounded corners in Firefox, Chrome and IE9 but it's not working in IE8. The PIE thing is already working with other elements in IE8.
Does anyone know what it could be ?
Thank you very much
The only way I know of making rounded corners work in IE8 and below is with code like this:
<div class="image">
<span class="tl"></span>
<span class="tr"></span>
<span class="br"></span>
<span class="bl"></span>
</div>
and then with CSS like this:
.image { position: relative; }
.tl, .tr, .br, .bl { position: absolute; }
.tl { left: 0; top: 0; width: 20px; height: 20px; background: url(/images/tl.png) no-repeat top left; }
.tr { right: 0; top: 0; width: 20px; height: 20px; background: url(/images/tr.png) no-repeat top left; }
.br { right: 0; bottom: 0; width: 20px; height: 20px; background: url(/images/br.png) no-repeat top left; }
.bl { left: 0; bottom: 0; width: 20px; height: 20px; background: url(/images/bl.png) no-repeat top left; }
where the background images are all images of rounded corners corresponding to that corner, e.g. the bottom right hand corner background image might look like this:
and so one (hope that makes sense)
There might be nicer ways to do this, as the above method is a bit laborious, and not particularly clean.
Saying that, I doubt any ways of getting rounded corners to work in IE8 and below will be particularly "clean". I usually just leave IE8 and below without rounded corners, not that many people even use 7 and 8 anymore in comparison to other browsers.
EDIT:
If I were you I'd steer well clear of code like this "behavior: url(css/PIE.php);" IE behaviours are not supported in other browsers, I think even Microsoft gave up on them.
Finaly I made it work with CSS3 PIE. Rounded corners appear appear in IE7, IE8 and all other browsers. It was a coding mistake, sorry.
Related
I've the follow html with CSS
.image_with_loader_container {
position: relative;
width: 100%;
padding-bottom: 139.34426%;
background: #dbdbdb;
}
.image_with_loader_container img {
border-radius: 4.75%/3.5%;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
<div class="image_with_loader_container">
<img src="..." />
</div>
In this video (Chrome 83) you can see that the border-radius doesn't work very well. You can check this behavior live at https://mtgprint.cardtrader.com .
Any idea to solve this issue?
You are adding rounded corners to the image, but the container with background: #dbdbdb; is still a rectangle. (You can see it better if you set your radius to a large value, like 100%). Try either removing that background, or adding the same border-radius to .image_with_loader_container.
For a new Wordpress template, I designed (in Photoshop) a round-ish header that overlaps the image beneath.
The Design:
My try:
Code:
Right now, I'm using a border radius, since I want to do it in CSS rather than cutting out an image (also for responsive reasons).
border-radius: 100% / 100%;
No matter how I change the values, the border won't become nicely rounded.
The website so far: http://voorbeeld.website/19/
Maybe I was a little too creative in Photoshop, but nothing is impossible! Right?
Use a pseudo element, in this case I used the :before
Make sure the .wrapper's elements also have a position, relative or absolute, or you need to set z-index: -1 to the :before
.wrapper {
position: relative;
height: 200px;
overflow: hidden;
}
.wrapper:before {
content: '';
position: absolute;
top: -200px;
left: -10%;
width: 120%;
height: 400px;
background: lightgray;
border-radius: 50%;
}
.content {
position: relative;
padding: 20px;
text-align: center;
}
<div class="wrapper">
<div class="content">
Put your content here
</div>
</div>
Due to browser performance implications I can't use box-shadow CSS property because I have many similarly looking elements on my page that should have same looking style including shadow. That's the reason I would like to implement shadows using traditional PNG imagery.
Facts
My elements have predefined and more importantly fixed pixel width
They have fluid height (auto) depending on their content
They have content directly in the element and some child elements will be positioned outside their border
CSS3 can be used but performance-critical parts (gradients, shadows...) should be avoided
CSS pseudo elements can be used without limitation
Requirements
There should be no additional wrapper element added in order to have fluid shadow
Application should run smoothly on mobile browsers - shadows seem to slow down performance significantly on mobile devices since their processing power is much lower than desktop computers.
Possible direction
I thought of using :before and :after pseudos to display top-to-bottom and bottom shadows on the containing element, but these pseudos display within their parent element and positioning parent z-index higher than these children has no effect.
Visual demo of end result
This JSFiddle Demo in pure CSS3 that I would like to achieve but using PNG shadows. In reality there are numerous of these boxes so you can imagine mobile browsers are struggling with all these shadows.
Item is one such box (see blow) that needs PNG shadow. Left menu is child element positioned outside of the box.
Display in Chrome
HTML
<div class="item">
<menu>
<li>Yes</li>
<li>No</li>
<li>Maybe</li>
</menu>
<div class="content">
Some content
</div>
</div>
CSS3 LESS
.item {
position: relative;
width: 300px;
background-color: #fff;
box-shadow: 0 0 10px #ccc;
margin: 20px 20px 20px calc(20px + 3.5em);
min-height: 5em;
&:first-child {
margin-top: 0;
}
&:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 10px;
height: 5em;
background-color: #fff;
}
menu {
position: absolute;
top: 0;
left: -3.5em;
width: 3.5em;
margin: 0;
border: 0;
padding: 0;
list-style: none;
background-color: #fff;
box-shadow: 0 0 10px #ccc;
li a {
display: block;
text-align: center;
padding: 2px 0;
}
}
.content {
padding: .75em 1em;
}
}
Probably I am missing something, but looks like you want something in this way:
demo
The CSS is
.base {
width: 300px;
height: 150px;
font-size: 100px;
font-weight: bolder;
background-color: lightgreen;
position: relative;
z-index: auto;
}
.base:after {
content: '';
position: absolute;
top: 30px;
left: 30px;
background-color: green;
z-index: -1;
width: 100%;
height: 100%;
}
.child {
position: absolute;
left: 150px;
top: 50px;
border: solid 1px black;
color: red;
}
And just change the background of the :after to your image.
I have applied this solution to your fiddle.
The relevant CSS is for the before pseudo element:
.item:before {
content: "";
position: absolute;
top: -10px;
left: -10px;
right: -10px;
bottom: -10px;
z-index: -1;
background-image: url(http://placekitten.com/100/100);
background-repeat: no-repeat;
background-size: 100% 100%;
}
I have used a kitten picture, that is being scaled to cover all the needed size. Just change that to whatever you want.
I needed to do it that way because I had onky a pseudo element available.
The key for that to work (and where you probably had the difficulty) is to add z-index: auto to .item
Updated demo
Well, I had said that it wasn't posible, but I have find a way.
The standard technique would be to use 2 elements, just to avoid stretching the image (as you said). The problem is that we only have 1 pseudo element available.
The solution then would be to use 1 pseudo element, but with 2 backgrounds, to solve the issue.
CSS (only relevant part)
.item:before {
background-image: url(http://placekitten.com/320/10), url(http://placekitten.com/320/500);
background-repeat: no-repeat;
background-size: 100% 9px, 100% calc(100% - 9px);
background-position: left bottom, left top;
}
We will need an image (the first one) only 10 px in height, to cover the bottom shadow. And another one, with enough height to cover the maximumitem posible, and that will be used for the remaining part of the shadow. The dark part is that we need now a calc() height, with limited support. (anyway, better than border image)
demo 3
Im using position absolute to give the top left corner of a DIV a rounded corner.
HTML:
<div id="MyDiv">
Some content
<div class="topLeft"> </div>
</div>
CSS:
#MyDiv {
position: relative;
padding: 12px;
background: #fff url('graident.png') repeat-x top left;
}
.topLeft {
position: absolute;
top: 0;
right: 0;
width: 10px;
height: 10px;
background: transparent url('corner.png') no-repeat top right;
}
This works fine in all browsers expcept IE6.
In IE6 the corner.png image seems to be about 1px out at the top corner, essentially not top: 0; and right: 0; but more like top: 1px; right: 1px;
Can anyone explain why this might be happening only in IE6?
The only way I could find the make this work for IE6 is to add
margin-top: -1px;
margin-right: -1px;
to the topLeft class, but unfortunately that will mess up the display in other browsers
I've made some divs and it works as intended in firefox.
But not in internet explorer 8.
Anyone have a tip?
structure is like this:
<div id="imgntxt">
<div id="imgntxtImg">
<div id="imgntxtNav1"></div>
</div>
<div id="imgntxtText">text</div>
</div>
imgContainer gets a image as background by some javascript magic.
css:
#imgntxt
{
padding: 2px;
width: 200px;
}
#imgntxtImg
{
position: relative;
}
#imgntxtText
{
}
#imgntxtNav1, #imgntxtNav2
{
position: absolute;
right: 2px;
bottom: 0;
background: transparent url("next.png") no-repeat top left;
height: 16px;
width: 16px;
}
#imgntxtNav2
{
right: 19px;
background: transparent url("prev.png") no-repeat top left;
}
I can 100% sure since the amount of code your add its not complete, but I think that what its playing you up its the position:absolute in #imgntxtNav1, #imgntxtNav2.
If I am wrong please give more detail.
Did you try locate the images on top instead of bottom?
#imgntxtNav1, #imgntxtNav2
{
position: absolute;
right: 2px;
top: 0;
...
}
Also, why don't you place the images for the navigation in the html directly?
That sounds not only easier but also more correct.