1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

image size

Discussion in 'HTML & Website Design' started by dourvas, Nov 4, 2009.

  1. #1
    hallo there,

    i posted this post today at php topic. since i got no answear yet i thouhgt that i probably made a mistake and i should post it here. i am sorry if i caused any trouble....

    i ve implemented this site
    http://iek-kozan.koz.sch.gr/

    i have problem with the main image up to the page. the image is 1440X186 pixel

    i placed it in a table like this
    
    
    <table width="80%" cellspacing="0" cellpadding="0" align="center" bgcolor=#E87400>
    <tr>
    <td  width="78%"><img src="images/main banner.jpg" width="90% alt=""></td>
    .
    .
    
    Code (markup):
    the browsers firefox, safari, opera dispalys the image just fine. the IE dispalys the image giantly



    In this point i would like to say that i set the image so big in order to be able to see it right when a user's monitor is set to big analysis

    what should i do in order to display the image the same in different browsers and in different monitor analysis????

    p.s soon, i wiil change the code soon into

    
    
    <td  width="78%"><img src="images/main banner.jpg" width="492" height="84" alt=""></td>
    
    Code (markup):
    in this code it works fine in all browsers but only in monitor analysis 1024X768......... i dont want just that.....
     
    dourvas, Nov 4, 2009 IP
  2. togu25

    togu25 Peon

    Messages:
    157
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Firefox and IE having different type. I think the solution is you must resize you picture.
     
    togu25, Nov 4, 2009 IP
  3. Astroman

    Astroman Well-Known Member

    Messages:
    2,355
    Likes Received:
    71
    Best Answers:
    0
    Trophy Points:
    135
    #3
    You need to change width="90% to this width="90%"
     
    Astroman, Nov 4, 2009 IP
  4. dourvas

    dourvas Peon

    Messages:
    31
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    what do u mean by image resize. how do i do that????
    AAA!!!!!!!!!! it wasn t the " i corrected it and ... nothing
     
    dourvas, Nov 4, 2009 IP
  5. Gayantha

    Gayantha Peon

    Messages:
    13
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #5
    I guess that's not a good idea..

    why don't you try with Left Corner+Repeated Middle+Right Corner Image? (using CSS)

    assume [ is left, | is middle & ] is right,
    if browser is 800px wide, it would be [||||||||]
    if browser is 1024px wide, it would be [|||||||||||]

    ( | repeats according to client's browser width ) ;)
     
    Gayantha, Nov 4, 2009 IP
  6. bluebenz

    bluebenz Well-Known Member

    Messages:
    876
    Likes Received:
    9
    Best Answers:
    2
    Trophy Points:
    138
    #6
    I never use percentage in image width..
    is it a correct html tag / syntax?
     
    bluebenz, Nov 4, 2009 IP
  7. dourvas

    dourvas Peon

    Messages:
    31
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #7
    Gayantha could be more specific about what you re saying??. i am not very experienced with css....
     
    dourvas, Nov 4, 2009 IP
  8. forextrendalerts

    forextrendalerts Guest

    Messages:
    132
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #8
    use Image::Size;
    # Get the size of globe.gif
    ($globe_x, $globe_y) = imgsize("globe.gif");
    # Assume X=60 and Y=40 for remaining examples

    use Image::Size 'html_imgsize';
    # Get the size as 'width="X" height="Y"' for HTML generation
    $size = html_imgsize("globe.gif");
    # $size == 'width="60" height="40"'

    use Image::Size 'attr_imgsize';
    # Get the size as a list passable to routines in CGI.pm
    @attrs = attr_imgsize("globe.gif");
    # @attrs == ('-width', 60, '-height', 40)

    use Image::Size;
    # Get the size of an in-memory buffer
    ($buf_x, $buf_y) = imgsize(\$buf);
    # Assuming that $buf was the data, imgsize() needed a
    $ reference to a scalar
     
    forextrendalerts, Nov 4, 2009 IP
  9. Astroman

    Astroman Well-Known Member

    Messages:
    2,355
    Likes Received:
    71
    Best Answers:
    0
    Trophy Points:
    135
    #9
    Did you try putting a height in for the image too?
     
    Astroman, Nov 5, 2009 IP
  10. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #10
    I had a large image once where I made it smaller by setting height and width in percentages. IE6 and 7 (didn't check 8) screwed it up until I resized the browser, where it then did fine.

    Know that 90% is 90% of the parent, in this case a td. Tell us again why you put the image in a table??
     
    Stomme poes, Nov 5, 2009 IP
  11. dourvas

    dourvas Peon

    Messages:
    31
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #11
    first of all i did not get what forextrendalerts is saying. if u could be more specific i would appreciate it.

    i made this site with tables. it is ready - working for some time. i had the image put in the td of the table by that code months ago.

    
    <td  width="78%"><img src="images/main banner.jpg" width="492" height="84" alt=""></td>
    
    Code (markup):
    in my screen alalysis(1024X768) the image was shown pretty well. i completed the site which is pretty big (up to 70 php files) by these settings. last week i was using a better screen with big analysis. i noticed that the picture was too little in that monitor. now, i can not change the table. i must find a way that works good into tables

    the site is
    http://iek-kozan.koz.sch.gr/
    if you check it u ll see tha it works great with firefox, opera, safari using any screen analysis. if u try it with IE (i use IE 7) you ll see why i am so dissapointment
    
    <td  width="78%"><img src="images/main banner.jpg" width="90%" alt=""></td>
    
    Code (markup):
    i tried to put percentages in height too but nothing

    please someone give an idea. i did not get what forextrendalerts and Gayantha were trying to tell me......:(
     
    dourvas, Nov 5, 2009 IP
  12. forextrendalerts

    forextrendalerts Guest

    Messages:
    132
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #12
    In the image statement, add an option which defines the size of the image (in pixels). For example, if the image is 50x75, the HTML code would be:
    <a href="example.gif"><img src="example.gif" alt="" width="50" height="75"></a>
     
    forextrendalerts, Nov 5, 2009 IP
  13. dourvas

    dourvas Peon

    Messages:
    31
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #13
    yes i know. u obviously did not read my post carefully. i did that. but when a users screen is too wide (e.x 1440 width) the icon remains its width and a huge empty space shows inside the td of the table... iwant the icon to strech when the monitor strech so that there r not enpty spaces in big screen analysis. i should probably say that the table that contains the td with the image is set to 80% width
    
    <table width="80%" cellspacing="0" cellpadding="0" align="center" bgcolor=#E87400>
    <tr>
     
    <td  width="78%"><img src="images/main banner.jpg" width="90%" alt="">
    </td>	
    <td align='center' valign='middle' width="12%"> 
    .
    .
    image show
    
    Code (markup):
    again.. this code works ok with all browsers i tried except IE 7
     
    dourvas, Nov 6, 2009 IP
  14. dourvas

    dourvas Peon

    Messages:
    31
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #14
    what should i do.? i want to keep my table width in 80% of the screen. i want the image inside the td of the table to strech in or out regarding the analysis of the user monitor. using percentages in image width i accomplish that but it wont work with IE 7. i want another solution wich works everywhere........

    someone any ideas............
     
    dourvas, Nov 6, 2009 IP
  15. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #15
    Um, in IE is the image stopping with growing when the screen makes it bigger than how it normally is?

    OKay here is a page I once tried out dynamic image resizing. IE had an issue but it wasn't that it wouldn't let the image grow. However,
    the largest possible size for that image is actually how big it is. Meaning, the image is not asked to grow larger than it is. I did this so the image wouldn't look ugly stretched when enlarged. Browsers suck at enlarging images.

    So possibly it would help if your image actually is as large as you think it might need to be. Then it only gets shrunk in browsers, never made bigger than it is.

    But second, in IE if I open IE6 or IE7 as a small browser, the image is not sitting correctly. If I then go and grab the edge of the browser window and pull the browser a bit bigger, suddenly everything works ok in IE as well.

    Are you pulling the browser window larger or smaller, by grabbing the edge of it with your mouse?

    I looked at your page and I don't see the image growing at all. This is Firefox 3.0 on Ubuntu Linux.
     
    Stomme poes, Nov 6, 2009 IP
  16. dourvas

    dourvas Peon

    Messages:
    31
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #16
    u dont see the image growing because i set the width and heigth in pixel (width=500 heigth=100). The site serves some people that uses IE and i recieved many complains for that image. I also used a picture that has width 1440! (for the reason u metioned yourself)- in IE it wouldn t shrink.
    though, when i use percentages the picture resizes on every other browser except IE

    u resize your image using css. i am not so good at it. could u write here the code u used??
     
    dourvas, Nov 6, 2009 IP
  17. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #17
    You can go to the site and View Source in your browser and you'll see the HTML and CSS for the image.

    <img class="indeximg" src="img/frontpage2.jpg" width="68%" height="68%" alt="">

    The only CSS I have for it is for IE6, where instead of letting the image grow and shrink, I set pixels.
    * html .indeximg {width: 530px; height: 322px;}

    I did this because of the problem I mentioned earlier, IE6 was extra bad at correctly sizing the image on first load. I could not assume people would resize their browsers to fix it. IE7 was also not great but did it better than IE6.
     
    Stomme poes, Nov 8, 2009 IP
  18. dourvas

    dourvas Peon

    Messages:
    31
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #18
    sorry i thought u used css. i ve already tried this. my big image wont shrink in IE. i use IE 8...

    let me ask something else.

    u re getting somehow (javascript??) the browser that the user use and depenting on that u load another image?

    it sounds like a good idea. is that possible??
     
    dourvas, Nov 8, 2009 IP
  19. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #19
    Nope, I don't have any JS.

    I have one large image. But I use (inappropriately) the height and width attrbutes of the <img> tag to set the size relative to its container. The image is 725px × 460px in actuality. But in the HTML I set height and width in % and that does make it change in all browsers. IE does not show the image correctly on the first load though. I have to jiggle the edges of the browser with my mouse first to get IE6 and 7 to do it right.

    However nothing on my page is in a table. The image is sitting with some divs around it. Since you have your image inside a table, I'm wondering if IE is not resizing the table or the table cell correctly.

    Depending on how you want it to look, another thing you can do is easier:

    If your page never gets wider than x pixels (I dunno how wide you want your site to go), then you can make your image (in photoshop or whatever) as wide as the widest it will ever be.
    I would do two images. Esp since you have text in that image, you should have text in the HTML.

    With CSS you can have the image as a background of the td and having an HTML <img> tag for the text part.

    So for the td
    <td class="image">
    <img src="img/frontpagetitle.jpg" width="265" height="76" alt="Ι.Ε.Κ ΚΟΖΑΝΗΣ" />
    </td>

    td.image {
    width: 78%;
    height: 76px;
    background: url(img/frontpage2.jpg) 100% 0 no-repeat;
    }

    So the background image sits in the td and the right side, with the ball, always sticks to the td's right side.

    Meanwhile the left side has the HTML image, with alt text so everyone knows the text there. I like this solution the best. You have two images, a small one with just the text (cut it out of your current image, in photoshop or whatever you have) and a large one that's the same height, but very very wide. As the td stretches, more of the background image appears.
     
    Stomme poes, Nov 9, 2009 IP
  20. Deus Ex

    Deus Ex Peon

    Messages:
    531
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #20
    use javascript for cross-browser compatibility of the image, for tables are different in coding for past versions of IE (5,6,7)
     
    Deus Ex, Nov 9, 2009 IP