[css-d] Unwanted margin in IE7 when applying border to an image
I have a page which has two full width images in the header, one below the
other. I want to have a thin white line between the two. I tried hr / but
ran into problems in IE, so tried a border-top on the lower image.
No problem in FF3, but IE7 is introducing extra space (margin ?) above the
border. I've not tried IE6 yet.
http://www.holidaymullandiona.co.uk/pages/home1.php
The CSS for the border (styled on the page) is:
img {border: 0; margin: 0; padding: 0;} /* just in case it were set differently
elsewhere */
img#sl {border-top: 1px solid #FFF;}
The DOCTYPE is xhtml transitional, and the HTML and CSS validate.
I wondered about a box model problem, but thought these were fixed in IE7 ?
Any suggestions, please ?
--
Tim Dawson
Maolbhuidhe
Fionnphort
Isle of Mull PA66 6BP
01681 700718
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Unwanted margin in IE7 when applying border to an image
Perhaps you should try display:block; for the two images. Otherwise they
will be displayed as inline elements.
Regards,
Simone
2008/9/12 Tim Dawson [EMAIL PROTECTED]
I have a page which has two full width images in the header, one below the
other. I want to have a thin white line between the two. I tried hr /
but
ran into problems in IE, so tried a border-top on the lower image.
No problem in FF3, but IE7 is introducing extra space (margin ?) above the
border. I've not tried IE6 yet.
http://www.holidaymullandiona.co.uk/pages/home1.php
The CSS for the border (styled on the page) is:
img {border: 0; margin: 0; padding: 0;} /* just in case it were set
differently
elsewhere */
img#sl {border-top: 1px solid #FFF;}
The DOCTYPE is xhtml transitional, and the HTML and CSS validate.
I wondered about a box model problem, but thought these were fixed in IE7 ?
Any suggestions, please ?
--
Tim Dawson
Maolbhuidhe
Fionnphort
Isle of Mull PA66 6BP
01681 700718
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
--
Simone Haider
Nullstars OG
Westbahnstrasse 19
A-1070 Vienna
Phone: +43 650 44 77 655
Email: [EMAIL PROTECTED]
Web: www.nullstars.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Unwanted margin in IE7 when applying border to an image
--- On Fri, 9/12/08, Simone Haider | Nullstars [EMAIL PROTECTED] wrote: 2008/9/12 Tim Dawson [EMAIL PROTECTED] No problem in FF3, but IE7 is introducing extra space (margin ?) above the border. I've not tried IE6 yet. Perhaps you should try display:block; for the two images. Otherwise they will be displayed as inline elements. If you're aligning other elements alongside the image, this might not be ideal. You could also check out vertical-align: bottom on the image - see the following for a bit of info. http://www.fiveminuteargument.com/image-space __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Unwanted margin in IE7 when applying border to an image
Bobby Jack wrote: --- On Fri, 9/12/08, Simone Haider | Nullstars [EMAIL PROTECTED] wrote: 2008/9/12 Tim Dawson [EMAIL PROTECTED] No problem in FF3, but IE7 is introducing extra space (margin ?) above the border. I've not tried IE6 yet. Perhaps you should try display:block; for the two images. Otherwise they will be displayed as inline elements. If you're aligning other elements alongside the image, this might not be ideal. You could also check out vertical-align: bottom on the image - see the following for a bit of info. http://www.fiveminuteargument.com/image-space Thank you, both. 'display: block;' seems to have done the trick for IE7 at least. The images are the full width of the page, so there's nothing to display beside them. Tim Dawson -- Tim Dawson Maolbhuidhe Fionnphort Isle of Mull PA66 6BP 01681 700718 __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
