O
Oliver Wong
I've got a pair of images to give a rounded-edge look to some of my blocks
of texts. messageBarTop.gif is 723px wide by 9px tall, and
messageBarCenter.gif is 723px wide by 5 px tall. Here's the HTML code I'm
using:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
..messageBarTop {
background: url(img/messageBarTop.gif) no-repeat;
width: 723px;
height: 9px;
margin: 0;
border: 0;
padding: 0;
float: top;
}
..messageBarCenter {
background: url(img/messageBarCenter.gif) top left repeat;
width: 713px;
padding: 0 5px 0 5px;
margin: 0;
}
</style>
</head>
<body>
<div class="messageBarTop"></div>
<div class="messageBarCenter">System is unavailable. Please try at a
later time.</div>
</body>
</html>
This seems to work fine in Firefox, but in IE6, there's a big white gap
between the .messageBarTop div and the .messageBarCenter div. If I set the
height of messageBarTop to 0px, Firefox correctly doesn't display the
messageBarTop.gif image at all, whereas IE displays it with the identical
big white gap, leading me to believe that IE6 is ignoring that my
specified height alltogether.
What can I do to get rid of the gap in IE6?
- Oliver
of texts. messageBarTop.gif is 723px wide by 9px tall, and
messageBarCenter.gif is 723px wide by 5 px tall. Here's the HTML code I'm
using:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
..messageBarTop {
background: url(img/messageBarTop.gif) no-repeat;
width: 723px;
height: 9px;
margin: 0;
border: 0;
padding: 0;
float: top;
}
..messageBarCenter {
background: url(img/messageBarCenter.gif) top left repeat;
width: 713px;
padding: 0 5px 0 5px;
margin: 0;
}
</style>
</head>
<body>
<div class="messageBarTop"></div>
<div class="messageBarCenter">System is unavailable. Please try at a
later time.</div>
</body>
</html>
This seems to work fine in Firefox, but in IE6, there's a big white gap
between the .messageBarTop div and the .messageBarCenter div. If I set the
height of messageBarTop to 0px, Firefox correctly doesn't display the
messageBarTop.gif image at all, whereas IE displays it with the identical
big white gap, leading me to believe that IE6 is ignoring that my
specified height alltogether.
What can I do to get rid of the gap in IE6?
- Oliver