CCS Working in FrontPage but NOT in IE???

[shandalus]

I have created a button for one of my web pages that uses both CSS and
a small graphic. It works as expected in the FrontPage 2003 preview
view, but when I view it in IE it doesn't display the same. It omits a
small graphic that is included in the button. How can this be that
FrontPage previews it properly but IE doesn't? Any fixes?

I have saved the web page in question before attempting to preview in
IE. Please help!

In case it matters, here is the code I used to position it:

<div class="button1">
<span class="w3c"></span><span class="spec">XHTML 1.0</span>
</div>

Here is the CSS code:

<style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
..style1 {
color: #484a53;
font-size: 11px;
font-family: tahoma;
}
..style2 {
color: #b8b6b2;
font-size: 11px;
font-family: tahoma;
}
..button1 {
//margin: 1em 0;
//background: url(images/button_image.gif);
width:9em;
font-family:helvetica,arial,sans-serif;
font-size:70%;
font-weight:bold;
}
..button1 a {
display: block;
width: 100%;
}
..button1 a:link,
..button1 a:visited,
..button1 a:hover {
//background-color: #B99E2B;
//background-color: #E2D087;
color: #000000;
text-decoration: none;
}
..button1 a:link,
..button1 a:visited {
border-top: 1px solid #cecece;
border-bottom: 2px solid #4a4a4a;
border-left: 1px solid #cecece;
border-right: 2px solid #4a4a4a;
}
..button1 a:hover {
border-bottom: 1px solid #cecece;
border-top: 2px solid #4a4a4a;
border-right: 0px solid #cecece;
border-left: 1px solid #4a4a4a;
}
..button1 span.w3c {

padding: 0 0.0em;
//background-color: #8E0B01;
background: url(images/button_image.gif);
background-repeat: no-repeat;
vertical-align: middle;
width: 12px;
color: #8E0B01;
}
..button1 span.spec {
padding: 0 0.6em;
background-color: #E2D087;
color: #000000;
vertical-align: middle;
}
-->
</style>

 

[Murray]

<div class="button1">
<span class="w3c"></span><span class="spec">XHTML 1.0</span>
</div>


In this HTML, the first span is empty. Is that a typo, or is that what you
intended? I am guessing what you really wanted was this -

<div class="button1">
<span class="w3c spec">XHTML 1.0</span>
</div>

 

[shandalus]

Thank you, the original text was not a typo it is indeed what I
intended. The first span tag is used to present the small graphic in
the button. I have tried using your code in my web app but it doesn't
display as I intended then - anything else!? The code as I have it does
display perfectly in the FrontPage preview pane.

I very much appreciate your response!


Shannon

 

[Murray]

Well, an empty span tag will have no dimensions, so the image is there, but
you cannot see it. To get around that, you would have to have the image as
the background of the span with some content. However, since <span> is an
inline tag, you cannot give it a width or a height so that it will be large
enough to show the background image (I'm guessing here), so use a <div>
instead of a <span>. Now you can set height/width for the div. Further to
make the background appear plainly to the left of the text in that tag, make
the text right aligned, make the div wide enough to see both, and you/re
set. Oh, you may need to do a background-repeat:no-repeat to keep the image
from repeating.