Need help removing space in between header image and border in IE
I have a header image that is suppose to have a 2px solid black border around it, right? Everything looks great in Firefox and Chrome, but IE9 will includes an extra space in between the border and the image. I've tried to get rid of it by changing the margins and padding with no luck. Can anybody lend a hand?
Here's the relevant markup in HTML:
<body>
<header>
<img src="contactbenjamin.jpg" alt="Contact Benjamin Heading."/>
</header>
Add this to the start of your CSS. This will solve it, although it will remove all borders, and paddings that are automatic, but inturn you have great control since you style it through your CSS knowing its all the same.
HTML Code:
* {
padding:0;
margin:0;
}
For want of a nail...the horseshoe was lost. For want of a horseshoe, the steed was lost. For want of a steed...the message was not delivered. For want of an undelivered message.....the war was lost.
I tried your suggestion, UAL225, but I still have that stupid space in between the image and the border in IE9. Strange how
rtrethewey (above comment) says he doesn't see the space on his IE9.
I dont see the space either to be honest, but I know that code removes all spacing and padding around your images and such. If this is the case, you may want to check your browser and or reinstall it.
For want of a nail...the horseshoe was lost. For want of a horseshoe, the steed was lost. For want of a steed...the message was not delivered. For want of an undelivered message.....the war was lost.
Yeah, thanks for your help. You know what is interesting? I just discovered in IE9 that when I zoom in or zoom out of the page the space I'm talking about goes away. Weird that it's not consistent. I'm probably viewing my page at a different zoom setting than you.
I just zoomed out on your page as well, and saw it. Although you shouldnt worry about this since most people are using 100% zoom and dont change it unless by accident. If you noticed if you keep zooming out, the space goes away.
For want of a nail...the horseshoe was lost. For want of a horseshoe, the steed was lost. For want of a steed...the message was not delivered. For want of an undelivered message.....the war was lost.
Let me know weather this one is working in your computer
<html ><body>
<header style="width: 1000px; left: 172.5px;">
<div style="border-top-style:solid; border-top-width: 100px; border-top-color:Black;border-bottom-color:Black; border-bottom-style:solid; border-bottom-width:25px;" >
<img src="apple.jpg" alt="Contact Benjamin Heading."
style="width: 1000px; height:190px" /></div>
</header>
</body>
Reply With Quote
Bookmarks