Orientation Of Jpg In Header

[AlleghanySchools]

I am a novice web designer attempting to redesign our outdated high school website. When I view the main page in IE 6.0, all is in order. In IE 7.0 the full-width .jpg in the header bounces off to the right of the page.The header code is<div id="container"> <div id="header"> <div align="right" class="style5"><img src="../AHS temp/header.jpg" alt="AHS Header" width="810" height="130" border="0" usemap="#Map" /><map name="Map" id="Map"><area shape="rect" coords="605,104,692,121" href="http://10.5.254.254/timekeeper/start.aspx" alt="Timekeeper Login" /><area shape="rect" coords="706,106,801,120" href="http://www.alleghany.k12.nc.us/exchange" alt="Faculty Email" /></map><img src="../AHS temp/picture-row.jpg" alt="AHS Students" width="807" /> </div> </div> <div id="content"><table width="100%" border="1" cellpadding="0" cellspacing="0" bordercolor="#EEF17C"> <tr> <td width="12%" bgcolor="#EEF17C"> <table border="0" cellpadding="3" cellspacing="0"> <tr> <td>The page can be viewed at:http://www.alleghany.k12.nc.us/ahs and linking to the word "New" which is located at the bottom of the left sidebar.On my links on the left, the only buttons programmed at this time are Home and Our School.The css is located at http://www.alleghany.k12.nc.us/ahstemp/styles.cssThanks!

[thescientist]

yikes, IE6? unless a majority of the people at your school use IE6, or that's all you got, I would at least make sure you are using a Strict DTD, and ideally develop for something like Firefox or Chrome, and tweak to work in IE.

[AlleghanySchools]

yikes, IE6? unless a majority of the people at your school use IE6, or that's all you got, I would at least make sure you are using a Strict DTD, and ideally develop for something like Firefox or Chrome, and tweak to work in IE.

Thanks ... there are only a few IE6 users but we are upgrading those machines soon, so should be no problem. Appreciate your help!

[jeffman]

Your CSS defines your #container div as 790px wide. Your jpg is 795px wide, but your <img> tag stretches it to 810px. So 810px it is.The div will not grow to fit 810px or 795px. So the image hangs out. To fix this, change the image or change the div.And, yes, use a strict DTD and write strict code. If you don't, your box sizes in IE6-7 will be drastically different from box sizes in all other browsers. (A box is any element that can be thought of as a square/rectangle, like a div or a table or a text input.)And do yourself a favor. If you can possibly help it, do not define dimensions in your CSS and in your tags. Stick to CSS. You want to be able to study one document at a time to double-check consistency.

[AlleghanySchools]

Your CSS defines your #container div as 790px wide. Your jpg is 795px wide, but your <img> tag stretches it to 810px. So 810px it is.The div will not grow to fit 810px or 795px. So the image hangs out. To fix this, change the image or change the div.And, yes, use a strict DTD and write strict code. If you don't, your box sizes in IE6-7 will be drastically different from box sizes in all other browsers. (A box is any element that can be thought of as a square/rectangle, like a div or a table or a text input.)And do yourself a favor. If you can possibly help it, do not define dimensions in your CSS and in your tags. Stick to CSS. You want to be able to study one document at a time to double-check consistency.

Thanks so much. Re your last paragraph, would you give me an example from my code to what you are referring? I have learned CSS by studying The Missing Manual series and I'm not quite sure what you are suggesting.

[thescientist]

what he's saying is *your <div> (#container) is only 790 px's wide*your image itself as a file is 795 px's wide (conflict 1)*the <img> tag you actually use to show the image sets the width of the image to 810 px's wide (conflict #2)So, your div will grow to 790 px's, but your img itself would exceed that by 5 px, and then you declare its width in your HTML as being 20 pixels wider than the div. What DD was trying to point out is that you are confusing the browser by setting all these conflicting widths for the div and the image. If you want a 790 px wide div, then make the image itself 790 pixels (or smaller), and don't give it a width in the <img> tag.

[AlleghanySchools]

what he's saying is *your <div> (#container) is only 790 px's wide*your image itself as a file is 795 px's wide (conflict 1)*the <img> tag you actually use to show the image sets the width of the image to 810 px's wide (conflict #2)So, your div will grow to 790 px's, but your img itself would exceed that by 5 px, and then you declare its width in your HTML as being 20 pixels wider than the div. What DD was trying to point out is that you are confusing the browser by setting all these conflicting widths for the div and the image. If you want a 790 px wide div, then make the image itself 790 pixels (or smaller), and don't give it a width in the <img> tag.

Thanks again. I understand that part. Just did not understand what he meant by one document.

[thescientist]

sorry. He means just keep it all one document, i.e. your stylesheet.

[jeffman]

You have a tag like this:<img src="../AHS temp/picture-row.jpg" alt="AHS Students" width="807" />And it defines a width for the element. This is actually correct (or at least not incorrect). But I think it is bad practice from a developer's perspective. When you also define widths in your CSS sheet (internal or external) it is easy to forget that any changes in one will require changes in the other.When all the width properties are defined in the same place, it is easier to keep track of them.

[ApocalypeX]

The text is on top of the headerwhen I view it on FF.Your code looks abit messy, keep it simple then start adding bit by bit more features.