Image looks fine in Firefox; too big in IE.

ninetynine · 07-21-2009, 09:47 PM

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

waxdoc · 07-22-2009, 12:35 AM

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>

noneforit · 07-22-2009, 04:51 PM

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

ninetynine · 07-22-2009, 06:37 PM

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

waxdoc · 07-22-2009, 09:01 PM

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.

Scriptet · 07-22-2009, 09:11 PM

Quote:

Originally Posted by waxdoc

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 !

ninetynine · 07-23-2009, 04:47 PM

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...

ninetynine · 07-23-2009, 09:14 PM

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