www.webdeveloper.com
Results 1 to 9 of 9

Thread: Need help removing space in between header image and border in IE

  1. #1
    Join Date
    Jul 2012
    Posts
    10

    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>

    Here's the relevant CSS:

    header img {
    height: 190px;
    width: 1000px;
    border-top-width: 2px;
    border-top-style: solid;
    border-top-color: black;
    border-bottom-width: 2px;
    border-bottom-style: solid;
    border-bottom-color: black;
    padding-top: 0;
    padding-bottom: 0;
    }

    header {
    width: 1000px;
    left: 172.5px;
    }

    Take a look at the source code of the actual page here

    Any help with this will be much appreciated.

    Thanks.

  2. #2
    Join Date
    Mar 2011
    Posts
    1,138
    The page looks identical in IE9 and Firefox to me. No space between the image and the border that I can see.
    Rick Trethewey
    Rainbo Design

  3. #3
    Join Date
    Jun 2009
    Location
    Chi town. IL68 ICAO code home airport, literally.
    Posts
    157
    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.

  4. #4
    Join Date
    Jul 2012
    Posts
    10
    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.

  5. #5
    Join Date
    Jul 2012
    Posts
    10
    That's weird, there is a definite space on my IE9 browser rendering. Wonder why I see it and you don't.

  6. #6
    Join Date
    Jun 2009
    Location
    Chi town. IL68 ICAO code home airport, literally.
    Posts
    157
    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.

  7. #7
    Join Date
    Jul 2012
    Posts
    10
    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.

  8. #8
    Join Date
    Jun 2009
    Location
    Chi town. IL68 ICAO code home airport, literally.
    Posts
    157
    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.

  9. #9
    Join Date
    Oct 2012
    Posts
    11
    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>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles