I have the following code in my style sheet
#banner
{
background: #fff6dd;
border-top: 5px solid #952845;
border-bottom: 5px solid #952845;
height: 50px;
}
#banner img
{
padding-left: 10px;
padding-top: 5px;
padding-bottom: 5px;
}
h1
{
font-size: 150%;
color: #952845;
float: right;
padding-right: 300px;
}
The HTML code for the banner is as follows:
<div id="banner">
<h1>Sacramento Public Library</h1>
<img src="colorlogo2.gif" alt="Sacramento Public Library Logo">
</div>
When viewing in Firefox the bottom padding is ignored and the bottom of
the colorlogo2.gif sit on top of the bottom border. The h1 is in the
middle of the of the banner.
When viewing in IE there is a 5px space with the background color of
#fff6dd between the bottom border and the graphic. The h1 is at the top
of the banner.
What need to be changed in the code for both browsers to behave like IE?
Margo Warner
Information Technology Analyst
Sacramento Public Library
828 I Street
Sacramento, CA 95814
916-264-2894
[EMAIL PROTECTED]
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
