# Dreamweaver overlapping content when screen is not maximized



## joedw8 (Oct 9, 2007)

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

*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 (May 6, 2006)

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 (Oct 9, 2007)

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 (May 6, 2006)

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 (Oct 9, 2007)

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 (Oct 9, 2007)

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


----------



## tomdkat (May 6, 2006)

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 (May 6, 2006)

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]







[/TD]

to
[TD]







[/TD]

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

Change:

[TD]







[/TD]

to

[TD]







[/TD]

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

Change:

[TD]







[/TD]

to

[TD]







[/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 (Oct 9, 2007)

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:up:


----------



## tomdkat (May 6, 2006)

joedw8 said:


> 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 (Oct 9, 2007)

bump


----------



## joedw8 (Oct 9, 2007)

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 (May 6, 2006)

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 (May 6, 2006)

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 (Oct 9, 2007)

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.


----------



## tomdkat (May 6, 2006)

joedw8 said:


> Is it possible to have the windowed screen appear as the example below?


Actually, yeah it is.  In the example you posted, the page *does not* scale itself as the screenshots I posted do. In fact, one of the early iterations of my example did the same thing so it's really easy to do. 



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


It's easier than you might think.  From what I could tell in your original HTML, the adsense stuff were images (GIFs) so it's simply a matter of putting the right URL in for the ad image and voila, it's there. 



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


Again, the Chicago Times example you posted screenshots of isn't a "snapshot" but a partial view of the page. It doesn't scale or anything as mine does. Piece of cake to do. 



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


Look at the "ie7-full" screenshot I posted above. That's running IE7 maximized at 1024x768 screen resolution and there isn't much space on either side of the far left and far right columns. Additionally, in this particular version I setup the content to have a width of 975px, so when viewed at 1280x1024 (or wider), the content will remain centered in the browser window, thus keeping everything nice and "tidy" looking.  With your original HTML, when viewed at high resolutions, the page would fill the browser window but smaller images of the houses would be spread farther apart and the header didn't stretch along the top, etc.



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


You can still use DW8 to do the things I did and I really didn't do anything "magical".  Your original problem related to the page behavior when the browser was windowed and I presented one (of many) solutions to deal with that. The important thing to make note of here is dropping the use of HTML tables has resulted in the most flexibility and cross-browser compatibility.

Peace...


----------



## tomdkat (May 6, 2006)

Ok, as to the specifics of what I did, the changes I made were really minor, now that I think about it.  Here are the gory details:

First, I put all of the content on your page in a DIV, like this:


```
<body>
<div class="pagebody">
[rest of original HTML goes here]
</div>
</body>
</html>
```
Then, I gave the "pagebody" class a definition like this:


```
.pagebody {
border: 1px solid #cccccc;
display: block;
height: 100%;
margin-left: auto;
margin-right: auto;
position: relative;
width: 975px;
margin-top: 0;
padding-top: 0;
top: 0;
}
```
This makes the page content appear in a 975 pixel wide area that is centered in the browser window. I chose 975 pixels since that is the width of the header image and the navigation menu. Technically, if we stop here, you should have the behavior you want, i.e. similar to the Chicago Tribune site you reference above.

I then noticed the Google adsense images were in tables, so there were several tables on the page. I simply removed the table definitions and let the images exist in whatever DIV the table was in. This reduces the complexity of rendering the page since there aren't so many tables to deal with.

Then, I added some styling to make the images scale as the browser window is made smaller but since you're not interested in that, I won't get into that. Lastly, I gave the new DIV I added a border and changed the border on the footer to give the entire page a nice and consistent border. 

So, as you can see, the above CSS styling and the addition of the DIV that contains the rest of your page content is the minimum you'll need for the behavior you desire.

Peace...


----------

