Bob,
Unfortunately, the browsers don't properly use padding and margins the same, so there is no easy way to make everything lineup. You can make it "good enough" though.
You will need to modify your stylesheet.css
1) Add the following:
img.floatleft {
float: left;
margin: 0 0.8em 0 0;
}
This will create an img class that we will apply to the photo. The photo will "float: left" so that text will flow around the image on the right side. The right margin is set to 0.8em. Use em so that the spacing will adjust if a user changes the fontsize. As IE7 and Mozilla/Firefox use the padding/margins differently this will go towards making it look better in IE7. While is will work in Mozilla/Firerfox it won't be quite lined up.
2) change the mainContent section:
padding: 20px 0 0 10px;
This will set the top padding to 20px and the left padding to 10px. Again you can play with this to get it the way you want.
Now you will need to modify the bio.html file:
1) Change your DOCTYPE to:
See: http://www.w3.org/QA/2002/04/valid-dtd-list.html
The DOCTYPE you are using is not listed on the w3c.org website and some browsers will go into "Quirk Mode" if the DOCTYPE is not one of the ones listed by w3c.org.
2) Change the for the photo to:
[img]images/bobpeg.jpg[/img]
This will use the new img class so that the margins are set for the image.
These settings look better in IE7 than Mozilla/Firefox but you can play with the margins and padding to see how they change the page.
Keith
Unfortunately, the browsers don't properly use padding and margins the same, so there is no easy way to make everything lineup. You can make it "good enough" though.
You will need to modify your stylesheet.css
1) Add the following:
img.floatleft {
float: left;
margin: 0 0.8em 0 0;
}
This will create an img class that we will apply to the photo. The photo will "float: left" so that text will flow around the image on the right side. The right margin is set to 0.8em. Use em so that the spacing will adjust if a user changes the fontsize. As IE7 and Mozilla/Firefox use the padding/margins differently this will go towards making it look better in IE7. While is will work in Mozilla/Firerfox it won't be quite lined up.
2) change the mainContent section:
padding: 20px 0 0 10px;
This will set the top padding to 20px and the left padding to 10px. Again you can play with this to get it the way you want.
Now you will need to modify the bio.html file:
1) Change your DOCTYPE to:
See: http://www.w3.org/QA/2002/04/valid-dtd-list.html
The DOCTYPE you are using is not listed on the w3c.org website and some browsers will go into "Quirk Mode" if the DOCTYPE is not one of the ones listed by w3c.org.
2) Change the for the photo to:
[img]images/bobpeg.jpg[/img]
This will use the new img class so that the margins are set for the image.
These settings look better in IE7 than Mozilla/Firefox but you can play with the margins and padding to see how they change the page.
Keith