Hello everyone:

I've finally broken down to ask for advice. I have read/scanned the lengthy reasoning behind configuration issues, but that doesn't resolve what I need to do to make my site appear in an acceptable manner in the major browsers.

Two weeks ago I posted my incomplete homepage expecting to add subpages, etc. over time. Though IE interprets the page exactly like the Preview screen in HTML Editor 08, I have been at a standstill b/c I can't figure out why FF places most pics (not all of them!) in the upper left corner of the screen. Could someone smarter than me please explain what I must do to correct this? I'm not expecting miracles, just steps to make code changes that would allow a FF user to use my site. It is: www.therenegadebrewer.com.

Thank you kindly,
Dman

Start here:

http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.therenegadebrewer.com%2F

Thank you John. I'll give this a shot and post back later.

drowningman,

You should know that the first error that the validator shows is the cause of some of the later errors. Remove the / in line 8 and then check the validator again.

Your pictures are using absolute positioning. Firefox places them relative to the browser window like it should, but IE seems to be incorrectly positioning them relative to the tables containing them.

There are a couple ways you can fix this:

1) You can remove the absolute positioning from the images and use padding and/or margins instead.

2) You can keep the absolute positioning, but make the following changes to the code:

Each of your images is contained within a table cell (or "td"). For absolute positioning to work, you need to give you images a "positioning context" that will be consistent from one browser to the next.

So you have cells with content, like this:

<td>
.
.
.
</td>

You need to add div tags like this to the cells containing the problem images:

<td>
<div style="position:relative">
.
.
.
</div>
</td>

You also have to modify the absolute styling of the images so they have top:0 and left:0.

With this done you can use visual mode, I assume that's what you used before, to adjust the image positions more precisely.

They should now hold their positions from one browser to the next.

Thank you Bill and Cary. I just don't understand languge enough to figure this out on my own. I'm busy at the moment, but will try your suggestions later tonight/tomorrow. Much appreciated- I'll reply here with the results.
Dman

Here's an example of how you would use the 2nd method I suggested. The following code is from around line 114 of your page:



This code actually has some errors in it.

192 should be 192px so the browser knows it's 192 pixels rather than 192 of some other possible measurement.

464 should be 464px

But don't bother fixing those because we are going to change them to zero anyways.

So using the second method I suggested, when you add the div and change the top and left to zero you should have this:



I could have just used "0" instead of "0px", but hopefully the HTML Editor's visual editing mode will retain the "px" part when/if you end up manually adjusting the position of the image after making the changes above.

Alright, thank you to everybody that posted to help a brewhead out. I think I have the tools to lick this thing.

Cary: I took your advice from the first post and it worked on one of the misplaced pics! (This is a big deal to me). I see you posted again and it makes total sense... Though I'm figuring out the validation site (what a resource!) your example really helped. Very cool.

So can I repay any of you by teaching you how to brew your favorite beer? First round's on me...