SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict ozmart2004's Avatar
    Join Date
    Feb 2004
    Location
    Albury, NSW, Australia
    Posts
    215
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help with aligning images in IE/Mozilla

    I have a page where I have a banner div where I have inserted a banner image and then I used a sliver to fill up the extra space.

    In Mozilla it lines up fine but in IE it looks a pixel out. (see jpg attachment)

    Also See http://www.nitramedia.com.au

    I've tried a few things but can't seem to discover what IE wants.

    Here's the css code I used for the Divs:

    Code:
    #container {
    			width: 760px;
    			\width: 780px;
    			w\idth: 760px;
    			border: 1px solid gray;
    			margin: 10px;
    			margin-left: auto;
    			margin-right: auto;
    			padding: 10px;
    		}
    #banner {
    			padding: 0;
    			margin-bottom: 0px;
    			background-color: #CCC;
    			border: 1px solid #999999;
    			background-image:url(../images/sliver.jpg);
    		}
    and here's the HTML

    Code:
    <div id="banner"><img src="images/header.jpg" alt="DDT" width="700" height="210"/></div>

    Appreciate any help.

    Thks
    Martin
    Albury, Australia
    Attached Images Attached Images

  2. #2
    SitePoint Enthusiast 2kool2's Avatar
    Join Date
    May 2001
    Location
    UK
    Posts
    63
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Martin,

    Would it not be best to oversize the banner img and place it in the div as a background?

    Or add a border to give the same effect as the sliver?
    mike 2k: )2
    <work> http://webSemantics.co.uk </work>
    <rest> http://2kool2.com/ </rest>
    <play> http://bangersandmash.com/ </play>

  3. #3
    SitePoint Addict ozmart2004's Avatar
    Join Date
    Feb 2004
    Location
    Albury, NSW, Australia
    Posts
    215
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, when I do that the banner div shrinks down to the minimum size and only the top bit of the image can be seen.

    What do I have to do to make the div size to the background image?

  4. #4
    SitePoint Enthusiast 2kool2's Avatar
    Join Date
    May 2001
    Location
    UK
    Posts
    63
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Martin.

    Try it like this.

    Create a banner, let's say 760px by 210px. Oversize it if you wish it should make no difference. Then size the div width & height to display it.

    CSS:

    #banner {width:760px; min-width:760px; height:210px; background:url(../images/banner.gif) no-repeat center top; padding:0; margin:0; border:0}

    HTML:

    <div id="#banner"></div>

    That should be enough to do it.

    Better still would be to add text to the div, in leiu of alt tags or CSS off, in a span and shift it off screen.

    HTML:

    <div id="banner"><span>DDT: Distributed Development Team</span></div>

    CSS:

    #banner {as previous example}
    #banner span {width:1760px; display:block; margin-left:-1000px}


    hope it helps
    mike 2k: )2
    <work> http://webSemantics.co.uk </work>
    <rest> http://2kool2.com/ </rest>
    <play> http://bangersandmash.com/ </play>


Bookmarks

Posting Permissions

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