filter: progid:DXImageTransform.Microsoft.Shadow(color='#b0b0b0', Direction=135, Strength=3);
That is the line I have in my CSS and it gives the shadow so it is good. The problem comes when i want the same thing on the left side too. If i just add the same line again and change the line, the second line gets executed only so now there is shadow on left side but not right. How can i put it on both sides?
Note: This is only for IE, I already have it working on Chrome and Mozilla.
Try to do this:
<div style="width:240px; height:160px; padding:10px; filter:progid:DXImageTransform.Microsoft.Shadow(color='Red', Direction=135, Strength=4);">
<div style="width:240px; height:160px; padding:10px; font:bold 13pt verdana; filter:progid:DXImageTransform.Microsoft.Shadow(color='Red', Direction=45, Strength=4); border:1px solid #000">
This is the DIV content.
</div>
</div>
Unfortunately you cannot put it on both sides, i had tried this earlier. Have a look at the options for the direction property.
Related
I have an element that has a bottom border and it I would like to show it on top of an image, however, when I move the relevant div down (using negative bottom margin) the border goes under an image element that is underneath. Is there a way to set it on top?
I tried z-index but to no avail. And I have to have the "top" div have the border.
<div class="top">One</div>
<div class="block"><img src="http://placekitten.com/200/300"></div>
.top {border-bottom:5px solid red; margin-bottom:-3px; z-index:5;}
http://jsfiddle.net/gdRWy/1/
Image hosted by Placekitten and taken by: Pieter Lanser
Thanks guys
http://jsfiddle.net/gdRWy/3/
position:relative; /* this is enough */
See my earlier comment
<div class="top">One</div>
<div class="block"><img src="http://placekitten.com/200/300"></div>
.top {border-bottom:5px solid red; margin-bottom:-3px; z-index:5; position:relative;}
I'm totally clueless to describe my problem clearly enough so I tried to make a jsfiddle as simple as possible here: http://jsfiddle.net/Emf2f/. On Chrome+IE, my image is under #div3, while on Firefox, is next to #div3. Why does this happen? which result is more "standard"?
<div id="div1">
<div id="div2">
<div id="div3"> Text </div>
</div>
<img src="http://img805.imageshack.us/img805/758/txgo.jpg" />
</div>
#div1{
width:500px;
overflow:auto;
border:1px solid red;
}
#div2{
margin-bottom:-1px;
}
#div3{
background:cyan;
float:left;
width:200px;
height:100px;
}
I would use "clear" around the object that you do not want the image to appear inline with. You can read more about positioning here: http://w3schools.com/css/css_float.asp
The site has the exact example you are trying to accomplish.
I added your image into a div tag (div4) then placed the clear:both in the css file for that div and it works properly in Chrome, IE and FF.
div4{Clear:both;}
Let me know if this helps. Thanks.
From a content perspective they are all doing the same thing showing the img inline (as per the HTML spec), what differs is the default overflow behavior. In Chrome and IE they are wrapping as per text (this is actually what I would imagine the correct behavior is) whereas Firefox is not. If you want the image to always display below, mark it as display:block;
I have the following CSS and HTML:
.TestPadding{
width:29px;
text-align:center;
height:18px;
padding:3px 0px 2px 0px;
margin:2px 1px;
font-family:Trebuchet MS;
font-weight:bold;
font-size:13px;
border:2px solid black;
float:left;}
<div class="TestPadding">1</div>
<div class="TestPadding">2</div>
<div class="TestPadding">3</div>
<div class="TestPadding">4</div>
<div class="TestPadding">5</div>
<div class="TestPadding">6</div>
<div class="TestPadding">7</div>
<div class="TestPadding">8</div>
<div class="TestPadding">9</div>
<div class="TestPadding">10</div>
The problem is that the rendering is different in IE and Chrome. Here's what it looks like:
Chrome is on top and IE on the bottom. On IE, the numbers don't look vertically aligned. I tried making all sorts of combinations on the CSS but none have given me a consistent vertical alignment and sizing.
If you want to try it out, there's a **fiddle here.**
Thanks.
Try using line-height:18px; and no vertical padding (padding:0 2px;).
You could always use a little IE hack:
_padding-top:4px (for example)
If you do choose to go down the IE hack root, here's how to apply to the different versions of IE:
padding-top:4px\9; - IE8 and below
*padding-top:4px; - IE7 and below
_padding-top:4px; - IE6
Al
Do not use padding but use line-height (preferable use the unit em) on the divs.
By the way, I suggest that you even don't use divs but a list (ul width lis).
They are correctly middle-aligned in IE. Try adding a q in one of the boxes, and you'll see exactly what I mean.
You can "fix" this and get Chrome's look by adding: line-height: 18px;.
It's because Chrome and IE have different values for default line-height.
Set the line-height to 19px and it should vertically align in both browsers
Currently I'm getting like this in Chrome, Safari, Mobile Safari and Opera. edges are rough.
img {border-radius: 10px; border:3px solid red}
See this example in Google Chrome or Opera or iPad http://jsfiddle.net/4PLUG/2/show/
Borders are fine in Firefox.
and in IE9 border edges are fine but it has a different problem. it shows some space between border and images
How to get the result like Firefox in all other browser?
You can give extra div to your img tag like this:
body {padding:100px}
img {
vertical-align:bottom;
position:relative;
z-index:-1;
}
div{
overflow:hidden;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
border:3px solid red;
display:inline-block;
}
http://jsfiddle.net/4PLUG/4/
/* just make sure you're including border radius for all browsers rendering engines */
.img-border{
border-radius:15px;
-moz-border-radius:15px;
-webkit-border-radius:15px;
border:3px solid red;
}
all browsers have different CSS capabilities, and handle them differently.
if you want the corners to look exactly the same in all browsers, you'll just have to put the curves in the actual image, and not rely on CSS.
An alternative is to use a background image on a div instead, which may get better clipping.
You might want to try wrapping the images in a block element and floating 4 divs in all four corners with border images as a background. Make sure the image itself has an border as well, this makes using radius borders in images quite a lot easier if you have more than one size of images that needs 'm.
I've done this effect with two divs using z-index.
<div class="picture-wrapper">
<div class="mask">
</div><!-- end mask -->
<div class="picture">
<img src="" />
</div><!-- end picture -->
</div><!-- end picture-wrapper -->
Set your background image on mask to the red borders with the middle cut out (png), then use z-index to stack it above the picture div.
Should work cross browser, the only thing is it doesn't account for dynamic widths/height in the images, it assumes all images are the same. AND you're doing a request for that extra mask image.
Up to you.
for img tags , percent border radius work perfectly:
.roundcornerimg{border-radius: 50%;}
<img src='imageurl' class='roundcornerimg'/>
link the image in the body:
<img src="image.jpg">
add your sizing to the image:
<img src="image.jpg" width="100%" height="30%">
Then add in the inline CSS.
<img src="image.jpg" width="100%" height="30%" style ="border:solid thick black;border-radius="25px">
By adding in the inline CSS, the border and border radius will take effect on the image. Just dont style this particular image in the stylesheet because specificity may mess with the inline CSS.
So here is my CSS problem with IE 8.
I have a parent div and 2 child div. I want the parent divs width to be increased based on the width of the inner -child div's. It works well in Firefox, but in IE8, the first child div's width going to the entire page width when I have a float:right for the inner element of that div.
My HTML markup
<div class="divPageContainer">
<div id="pnlOrderOptions" class="pnlOrderOptions">
<div class="divOrderOptions">
some content
</div>
</div>
<div class="divOrderDetails" id="pnlOrderDetails">
<div style="height:20px;width:800px;border:3px solid red;padding:2px;">this width of this red box can be vary from 100 to 1000</div>
</div>
</div>
and the CSS
.divPageContainer
{ width:auto;
float:left;
margin-left:8px;
height:auto;
border:1px solid black;
}
.pnlOrderOptions
{
min-height:10px;
height:auto;
overflow:auto;
margin-top:30px;
border:1px solid orange;
width:auto;
}
.divOrderOptions
{
margin-left:7px;
font-family:Verdana;
font-size:12px;
width:400px; min-height:10px;height:auto;
border:1px solid #858A8D;
float:right; padding:5px;
background-color:#F0F6F8;
}
.divOrderDetails
{
float:left;
margin-top:4px;padding:3px;
border:2px solid blue;
min-height:10px;height:auto;
}
It works well in Firefox; here it is:
And in IE I am getting (I reduced the red bordered divs width to 400 from 800 to get a good snapshot because my monitor is a wide one )
One thing I noticed is that this problem came when I deploy this as a intranet web application. It works well in local development machine. I remember some IE7 compatibility problem used to appear when we deploy sites to intranet.
The ultimate result I am looking for is the div with content "somecontent" here should be the right most side (not to the page but based on the width of the second div, which will change dynamically) ie it should behave like my Firefox screenshot.
The float right thing is a known bug in IE and FX 2.
Can you use display:inline-block; instead? There is a way to get it to work on non-inline elements for IE.
EDIT: You'd have to set text-align:right on the parent of the inline-block.
EDIT #2: Here is an example of the fix I was talking about: http://work.arounds.org/sandbox/64/run
Please let me know if this isn't what you need or if it doesn't work for you.