[joedw8]

Hi everyone,

I'm designing my site using a template, 3col_leftNav.css. I've made a few changes to the CSS but I didn't change the original widths of the columns - the left column is 20% of the page, middle column 55%, and right column 20%. When I view the page in Internet explorer and the page is maximized, everything looks fine. When I click "Restore Down," the entire page has tables, pictures and text overlapping the column borders slightly and when you scroll to the right there is a huge white space after the third column. I notice that this site does something similar when you "restore down" the page - the Google Ads overlap the banner but everything looks fine when you maximize the screen.

What can I do to keep the content within the three columns the same relative size to the window and prevent the content from overlapping to the next column on the "restore down" view? I have tried changing the widths of the columns and tables within the columns to pixels and percentages but it hasn't made a difference. I appreciate your help.

Attached is the source from the problem page.

Thanks again. If you know of any companies that provide online or phone technical support for Dreamweaver 8 (other than Adobe), I would appreciate that information as well.

[tomdkat]

Two questions:

1) Can you post where you found the template you're using?
2) Can you post a screenshot of what you see, with IE both maximized and windowed?

Thanks!

Peace...

[joedw8]

Hello,

I got the template from Dreamweaver 8 - Page Designs (CSS), Three-Column Left Nav. Below are the screenshots. I cropped the screenshots because of the file size limits but you should be able to see the difference b/w windowed and maximized.

The first shows most of the overlap and the second is full screen - no problems. All of the images on the page (and throughout the site) are in tables. I did this for what seemed to be better organization and I wanted to easily put AdSense code in later. At first I thought something was wrong with the original template that all the pages are based off of, but then I remembered that I made all the regions in the template-based pages editable. thanks for your help.

joe

[tomdkat]

Could you also attach the '3col_leftNav.css' file so I can get the page properly loaded on my machine?

EDIT: Here is a CSS three column layout I've used in the past that works in IE and the other modern browsers. Attached is a screenshot of how your site layout could look using this template.

Peace...

[joedw8]

I tried to attach the CSS file and it was rejected as an invalid file. Do you know if I can save it in another format, which format for this message board, and how?! Thanks.

joe

[joedw8]

Here goes nothing, not sure which format I should save the Css file under

[tomdkat]

Thanks for posting the CSS file. I'll play with this tomorrow when I have access to both IE 6 and IE 7.

Peace...

[tomdkat]

Ok, I've tried your page in IE 6 and I'm not seeing what you're seeing. Attached are screenshots. If I make the IE window any more narrow than in the two "windowed" screenshots, the Google ad moves below the navigation on the left.

Now, in Firefox, I saw the behavior you demonstrated in your screenshots. So, I employed a "trick" I learned while working on another site. Let's see if it will help you.

What appears to be happening is when the browser window is narrow, the images are WIDER than the DIVs they are contained in and the text starts to "spill over", as you can see. My having the ad images be scaled instead of having a fixed size, the page will behave more like what I think you will want.

Here are the changes:

Change:
<td><div align="left"><img src="file:///C|/Users/Joe Lopatka/Pictures/Google AdSense 160x90 4 link units.gif" width="160" height="90" /></div></td>

to
<td><div align="left"><img src="file:///C|/Users/Joe Lopatka/Pictures/Google AdSense 160x90 4 link units.gif" style="max-width: 160px; max-height: 90px; width: 75%; height: 75%;" /></div></td>

********************

Change:

<td><img src="file:///C|/Users/Joe Lopatka/Pictures/Google Adsense 160x90 5 link units.gif" width="160" height="90" /></td>

to

<td><img src="file:///C|/Users/Joe Lopatka/Pictures/Google Adsense 160x90 5 link units.gif" style="max-width: 160px; max-height: 90px; width: 75%; height: 75%;" /></td>

********************

Change:

<td><img src="file:///C|/Users/Joe Lopatka/Pictures/Google Adsense Medium Rect 300x250.gif" width="300" height="250" /></td>

to

<td><img src="file:///C|/Users/Joe Lopatka/Pictures/Google Adsense Medium Rect 300x250.gif" style="max-width: 300px; max-height: 250px; width: 75%; height: 75%;" /></td>

*********************

What that does is sets the max size of the image to the actual dimensions of the image. This prevents the image from being scaled LARGER than its actual size. When the browser window is smaller, the image will be 75% of the width/height of the DIV the image (or Google ad, in this case) is in.

Give that a try and see how it works you for you.

Peace...

[joedw8]

Hey tomdkat,

I tried your suggestions and the two google ads in the left column were still overlapping and the image was distorted. When I put the code in for the image in the middle column it changed the entire layout of what I was seeing in DW and the preview was still overlapping. I read somewhere that only IE 7 supports min/max-widths and I wonder if that has something to do with it. Thanks for your help anyway and if you have any other suggestions I'm more than willing to try them.

joe

[tomdkat]

Originally Posted by joedw8

I tried your suggestions and the two google ads in the left column were still overlapping and the image was distorted. When I put the code in for the image in the middle column it changed the entire layout of what I was seeing in DW and the preview was still overlapping. I read somewhere that only IE 7 supports min/max-widths and I wonder if that has something to do with it. Thanks for your help anyway and if you have any other suggestions I'm more than willing to try them.

Can you post a *link* to the actual page with the changes in place so I can see what you actually did?

One strong suggestion I have is to ditch using IE but that's probably not practical for you so start using IE 7.

Seriously, I the screenshots I posted above were in IE 6 and I didn't encounter any overlapping issues at all. Granted, I was loading only "half" the page (since you didn't make all of the content available) but what I could load seemed to behave itself in IE 6 on my computer. If your site isn't hosted anywhere, please post the current HTML *and* CSS files you're working with and I can verify the changes you made.

Also, what screen resolution are you running and how narrow are you actually making the browser window before it starts misbehaving?

Peace...

[joedw8]

bump

[joedw8]

Hi Tomdkat and others,

I recently realized that I was previewing in IE 7, not IE 6. I have read about problems with CSS and internet explorer 7, but am still unsure of how to keep the content from overlapping when the screen is not maximized. I tried changing the code as you suggested and the overlap was still there - the images were distorted and the layout changed. I am limited to previews in IE 7 and Firefox 2. Firefox 2 shows no overlapping at all. Below are screenshots from IE 7 (overlap problems) and Firefox 2. Please help and thank you for reading! Could it just be that DW8 and IE 7 are not compatible? If so, what are my options, buy CS3? There has to be a simple solution, I just have no idea what it is!

[tomdkat]

It's not a DW issue but an HTML/CSS issue.

Check your inbox.

EDIT: Also, what screen resolution are you running at?

Peace...

[tomdkat]

Ok, I've been playing around with this and in the other thread you started on this issue, someone mention dropping use of HTML tables inside the 3 column DIVs you have. I worked on another site (similar to yours) which had problems and the problems were due to use of tables. Why I didn't remember that in this case, I don't know but hats off to that other poster (in your other thread) which mentioned dropping the HTML tables.

I've worked up a page that basically works in IE 7 the same as the other browsers. For now, I'll attach screenshots and I'll post some notes. I'll go into greater detail later on.

Here is a synopsis of what I did:

• Dropped the HTML tables
• Implemented dynamic image scaling (width: 100% with max-width)
• Gave the navigation column a min-width (to prevent text spill-over)

Those are the main things. Again, I'll go into greater detail on what I did later on.

These screenshots are in IE 7 on Windows XP running at 1024x768. One is with IE maximized and the others are of the page with IE windowed.

Peace...

[joedw8]

Hello,

Is it possible to have the windowed screen appear as the example below? I don't know if I am going to be able to make all the suggested changes to the format and tables (and how to later put in the AdSense code without the tables). I would just like the windowed screen to be a smaller "snapshot" of the overall site with scrollbars allowing you to move up/down and to the right. I think w/ the suggested changes there will still be a huge blank space to the right of the third column and I don't want the pictures to be on top of each other. Tomdkat I don't mean to undermine your help so far (and I really appreciate all the help) but I don't know if I will be able to implement the changes - I have no experience with coding, only design on DW8. Thank you.