Forum Moderators: not2easy
<snip>
It is showing OK in Firefox but not in IE 8.0.6001
When you refresh the page in IE you can see a gray background that disappears when image is loaded. Any suggestions how to fix it?
Thanks
[.pic {]
[background-color: #CCCCCC;]
[background-repeat: repeat-x;]
[background-position: bottom;]
[border-top-color: #999999;]
[border-right-color: #999999;]
[border-bottom-color: #999999;]
[border-left-color: #999999;]
[padding-top: 1px;]
[padding-right: 1px;]
[padding-bottom: 9px;]
[padding-left: 1px;]
[background-image: url(images/shd.gif);]
[margin-top: 12px;]
[margin-left: 12px;]
[margin-right: 8px;]
[edited by: swa66 at 11:40 pm (utc) on Oct. 9, 2009]
[edit reason] No URLs, please see ToS and Forum Charter [/edit]
Also, declaring border-color: without border-width: will get you nothing - no border at all.
Something like the following will give you a bottom border/edge shadow effect. Plenty of ways to go. I have selected clashing colors and no background-images so that you can actually see what is happening. That is the place to start.
...a border and a shadow...
Extra consideration to give you both. Still multiple options.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
.center {
background-color;
text-align: center;
height: 215px;
margin: 0 auto;
width: 204px;
}
.pic {
border: 2px solid red;
}
</style>
</head>
<body>
<div class="center">
<p>
<img src="aaa.jpg" style="width: 200px; height: 200px;" class="pic" alt="" />
</p>
</div>
<!--##########
I have the following style set to make a border and a shadow in the bottom of the picture:It is showing OK in Firefox but not in IE 8.0.6001
When you refresh the page in IE you can see a gray background that disappears when image is loaded. Any suggestions how to fix it?
-->
</body>
</html>
I wanted to make the borders by having the background show by putting the padding. I'm make a shadow effect under the photograph by putting extra padding on the bottom (9px) and have a background image to align on the bottom that fades from the bck color (#999999) to clear. Again, it works fine in Firefox doesn't show in IE.
Any suggestions about an elegant way to do it? It is going go in the email body.
Here is an example, if it going to show:
[<snip>]
[edited by: swa66 at 5:20 pm (utc) on Oct. 10, 2009]
[edit reason] No links, please see ToS and Forum Charter [/edit]
I saw it then and see it now, but can't use it because it will break the context of the thread.
If my quick hack sample/suggestions are unacceptable, my recommendation is to strip the HTML and CSS down to the problem itself. If the fix is not found during this process, post the test ready code that replicates the problem and we will look at the options.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><META http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
It worked when I switched to the proposed above:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
Thanks for your help
