Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Jul 2009
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Image looks fine in Firefox; too big in IE.

    I am not a professional designer, but I am helping out a friend. I cannot for the life of me figure out why the image at the top of this page requires IE users to scroll, though Firefox users don't have to.

    http://www.mattjonesband.com/Mattindex.html

    Incidentally, I am using a Mac and coding everything by hand in TextEdit. If anyone has an idea as to what I'm doing wrong, I'd appreciate any help at all! Also, why are some people getting a "suspiscous page" warning when opening this site?

    Thanks for all the helpful advice your forum has already provided! I've been lurking for ages before breaking down to post.
    -99

  • #2
    Regular Coder
    Join Date
    Jul 2008
    Posts
    157
    Thanks
    9
    Thanked 13 Times in 13 Posts

    markup?

    I'm on a MAC Firefox so I cannot figure out your problem/question (suspect width="100%" but cannot remember or find reference to IE behavior). However, you probably have "quirks mode" the way you mixed

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Matt Jones Band</title>
    <style type="text/css"> ... h3 {text-align:center; color:#3C0005; font:14pt "times" "times new roman" "serif"} ....</style> 
    </head>
    <body>
    <!--[if IE]> <p>This page may not load properly in Internet Explorer.</p> <![endif]--> 
    <a name="top"></a>
    <table width="800" align="center" border="0" cellpadding="0" cellspacing="0"> <tr> <td>
    <img src="MattJonesBannerTextNEW.jpg" width="100%" alt="Pre-order the new Matt Jones EP now"><h7>Matt Jones photograph by <a href="http://www.maryanneventrice.com" target="_blank">Maryanne Ventrice.</a></h7><br><br>
    </td> </tr> </table> . . . 
    </body></html>
    Compare this with Dreamweaver's HTML and XHTML markup (below thumbnails).

    Also improper nesting, etc.

    Code:
    <h3><center><a href="http://www.MySpace.com/mattjonesband" target="_blank">MySpace</a> :: ... :: 
    <a href="http://www.ilike.com/artist/Matt+Jones+New+York" target="_blank">iLike</a>
    <p><a href="#top">Back to Top</a></h3></center>
    Attached Thumbnails Attached Thumbnails Image looks fine in Firefox; too big in IE.-xhtml.png   Image looks fine in Firefox; too big in IE.-html.png  

  • Users who have thanked waxdoc for this post:

    ninetynine (07-23-2009)

  • #3
    Regular Coder noneforit's Avatar
    Join Date
    Apr 2009
    Location
    England
    Posts
    268
    Thanks
    10
    Thanked 20 Times in 20 Posts
    Looks the same in IE8 and FF3

    The actual size of the image is 1440px wide but your HTML says to nest the image within a table that has a fixed width of 800px. The image will then adjust itself to be 800x383 instead of the tru size of 1440x690. My advice would be to simply resize the photo to 800x383 (assuming thats the size you want it) and change the width=100% to 800 pixels so the image will not try to strech or shrink, it willl simply stay the set width

  • Users who have thanked noneforit for this post:

    ninetynine (07-23-2009)

  • #4
    New to the CF scene
    Join Date
    Jul 2009
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Thank you to everyone!!

    I am terrible at the nesting thing; thank you for pointing it out. I'm going to try resizing the image now and see if I can't get this scroll bar to disappear. Thank you for your help!
    -99

  • #5
    Regular Coder
    Join Date
    Jul 2008
    Posts
    157
    Thanks
    9
    Thanked 13 Times in 13 Posts

    an interetng link re IE

    This is what I was thinking of ... it has to do with centering horizontal lists in IE, but Stu Nicholls' article might be of interest:
    http://www.webreference.com/programm...s_lists/2.html

    The above suggestion to size your image to its actual size makes sense.

    You declared a style rule for H3 to have text-align: center so you do not need the deprecated <CENTER> tag in the footer. And you should not nest a block-level <P> tag (which was not closed </P>) inside the <H3>tag</H3>. If you want a separate paragraph that is centered, you could add attribute to opening tag <P text-align="center">like so</P>.

    I capitalized the tags just for emphasis, all elements should be lowercase.

  • #6
    Regular Coder
    Join Date
    Apr 2008
    Posts
    685
    Thanks
    15
    Thanked 105 Times in 104 Posts
    Quote Originally Posted by waxdoc View Post
    This is what I was thinking of ... it has to do with centering horizontal lists in IE, but Stu Nicholls' article might be of interest:
    http://www.webreference.com/programm...s_lists/2.html

    The above suggestion to size your image to its actual size makes sense.

    You declared a style rule for H3 to have text-align: center so you do not need the deprecated <CENTER> tag in the footer. And you should not nest a block-level <P> tag (which was not closed </P>) inside the <H3>tag</H3>. If you want a separate paragraph that is centered, you could add attribute to opening tag <P text-align="center">like so</P>.

    I capitalized the tags just for emphasis, all elements should be lowercase.
    Most of this only really matters for XHTML though and he is using HTML 4 (even though he has got some XHTML mixed up in there inside his form with self closing tags )

    Also it's pretty outdated to use tables for a layout, as tables should only be used when displaying tabular layout, a div/float approach is usually used to achieve a desired effect.

    Also there is no such element as H7, it's only up to H6 !

  • #7
    New to the CF scene
    Join Date
    Jul 2009
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Thanks again for your advice.

    I know I shouldn't use tables, but I have not yet figured out how to do layout using div and float tags. I'm going to fix the code I have and make the image size smaller in Photoshop. Thanks again for all your help! I guess I'm in over my head here...

  • #8
    New to the CF scene
    Join Date
    Jul 2009
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts

    All better now!

    Thanks to all of you who chimed in on this. I have fixed all the issues, and the site looks fine now!


  •  

    Posting Permissions

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