[css-d] Extra Division Height with IE
On the top of the following page I wanted to put an image on the right left
and center of a logo division.
Richardhhall.org
It works fine in firefox (mac PC) and safari, but with IE on PC the
division (grey color) be bigger than 54px, which is the size I defined, so
there is some space around the 54px high images that I don't want.
The html for the logo is
div id=logo
img style=float:left
src=http://richardhhall.org/images/top_left.jpg; alt=Richard
Scream Face width=59 height=54
img src=http://richardhhall.org/images/top_logo.gif;
alt=RichardHHall.org width=243 height=54
/div
The CSS for logo is
#logo {
width: auto;
height: 54px;
background-color : Silver;
background-image:url(http://richardhhall.org/images/rhall.jpg);
background-position : right;
background-repeat : no-repeat;
text-align:center;
}
... Any help appreciated ... Thanks ... Richard
--
Richard H. Hall
http://www.umr.edu/~rhall
Save the internet - Preserve Network Neutrality!
http://www.savetheinternet.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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/
Re: [css-d] Extra Division Height with IE
richard hall wrote:
On the top of the following page I wanted to put an image on the right left
and center of a logo division.
Try setting div with id=main to have margin set to 0. Also try setting
body padding to 0.
Each browser has different default values for padding and margins. Some
people prefer to set all to 0 like so:
* {padding: 0; margin: 0}
and then add back just where they want.
--
Joel Goldstick
www.columbuswebmakers.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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/
Re: [css-d] Extra Division Height with IE
Morning Richard You wrote On the top of the following page I wanted to put an image on the right left and center of a logo division. Richardhhall.org It works fine in firefox (mac PC) and safari, but with IE on PC the division (grey color) be bigger than 54px, which is the size I defined, so there is some space around the 54px high images that I don't want. snipped ... Any help appreciated ... Thanks ... Richard -- Richard H. Hall Add display:block to your image selector images are normally in-line elements resting on the baseline not the bottom of the box. That leaves room for the descenders of lower case letters like j and y You can also use vertical-align:bottom on the img selector... hth Jim Nannery www.beebar.net __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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/
Re: [css-d] Extra Division Height with IE
Jim, Thanks very much. Just wanted to let you know FYI ... Setting img to display:block solved the problem except that with firefox the image I wanted to center now did not respond to the text-align center I set for the logo division. So I set that image to display:inline and it centered, but, since it was the exact height I wanted the log division to be the IE problem came back putting spaces around the image. Luckily, that particular image did not have to be the whole height of the division, so I cropped it a little, which solved the IE problem, but the image aligned to the top and I couldn't get the browsers to respond to vertical-align of any sort. So I made the grey part of the image a little taller on top so it sort of aligns in the middle. Interesting ordeal. ... Thanks very much for your help! ... Richard On 8/9/06 12:06 PM, Jim Nannery [EMAIL PROTECTED] wrote: Morning Richard You wrote On the top of the following page I wanted to put an image on the right left and center of a logo division. Richardhhall.org It works fine in firefox (mac PC) and safari, but with IE on PC the division (grey color) be bigger than 54px, which is the size I defined, so there is some space around the 54px high images that I don't want. snipped ... Any help appreciated ... Thanks ... Richard -- Richard H. Hall Add display:block to your image selector images are normally in-line elements resting on the baseline not the bottom of the box. That leaves room for the descenders of lower case letters like j and y You can also use vertical-align:bottom on the img selector... hth Jim Nannery www.beebar.net -- Richard H. Hall http://www.umr.edu/~rhall Save the internet - Preserve Network Neutrality! http://www.savetheinternet.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- 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/
