width="100%"

Discussion in 'HTML & Website Design' started by #Darren, Sep 29, 2007.

0
  1. #1
    I am putting up a gallery of pictures all of which are 1024px wide.

    I didn't want them "hanging of the side of the page" and I didn't want to resize them so I was happy when I found the width="100%" code. I applied it as such: <img src="xxxxx.jpg" width="100%"> and it worked in Firefox but it doesn't work in IE, which of course most people still use....

    Hoping someone can give me a fix for IE.

    Thanks,

    Darren.
     
    #Darren, Sep 29, 2007 IP
  2. longhornfreak

    longhornfreak Well-Known Member

    Messages:
    2,067
    Likes Received:
    95
    Best Answers:
    0
    Trophy Points:
    140
    #2
    I know it will work if you use css
     
    longhornfreak, Sep 29, 2007 IP
  3. mightyb

    mightyb Banned

    Messages:
    6,566
    Likes Received:
    405
    Best Answers:
    0
    Trophy Points:
    0
    #3
    There is most likely an element that is stopping it from being 100% wide in IE. Are there any div tags or tables anywhere near your <img src="xxxxx.jpg" width="100%"> ?
     
    mightyb, Sep 29, 2007 IP
    buffalo likes this.
  4. #Darren

    #Darren Guest

    Messages:
    116
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Yep I have this:

    <table cellspacing="0" cellpadding="10" align="center" border="0">

    The reason I put that in there is to seperate the picture from the website header.

    Although it does work when I remove it :)

    Thanks!

    Darren.
     
    #Darren, Sep 29, 2007 IP
  5. HVMDesign

    HVMDesign Well-Known Member

    Messages:
    110
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    105
    #5
    Hello,

    By default, <table> HTML tags are not set to be 100% width. You have to either set it in the CSS, or add the code <table width="100%">. While using tables and images at 100% is not something I would do, it should work for you in most modern browsers.

    You could also try (or similar):

    
<style type="text/css">
#head{
   padding:10px;
}
#head img.wide{
   width:100%;
}
</style>

<div id="head">
   *content here*
   <img src="/img/separate.gif" class="wide" alt="" />
   *content here*
</div>
    HTML:
     
    HVMDesign, Sep 29, 2007 IP