Another IE/CSS div problem I am sure someone here can fix.

[MeanSEO]

This is my first heavy CSS site and I thought I ironed out all of my problems but apparently not.

The site design is fluid and in Firefox works perfectly. In higher resolution on a new screens it looks great – but in IE only if you resize the window down to a small size and the "content Div" slips down the page below the fold.

I know this is a real easy fix to lock the "content div" in the upper left position where it belongs and let the right hand side and the bottom of the "content div" stay fluid.

Here is the site: http://www.yoursmokies.com

Here is the css that has the div codes:

/***********************************************/
/* HTML tag styles */
/***********************************************/
body{font-family: Arial,sans-serif; color: #333333; line-height: 1.166; margin: 0px;padding: 0px;background: #cccccc url(http://www.yoursmokies.com/i/bg_grad.jpg) fixed;}

/* Layout Divs */
#pagecel1{ position:absolute; top: 0px;left: .75%;right: .75%;width:98.1%;background-color: #013300; border:solid 2px #000000;}
#tl {position:absolute; top: -1px;left: -1px;margin: 0px;padding: 0px; z-index: 100;}
#tr {position:absolute; top: -1px;right: -1px; margin: 0px;padding: 0px;z-index: 100;}
#navbar{background:url(http://www.yoursmokies.com/i/your-smokies-side.jpg) no-repeat;float: left;width:210px; padding: 0px; font: small Verdana,sans-serif;}
#content{background-color:#FFFFFF; padding: 0px;margin:0px 0px 0px 202px;border-left: 1px solid #013300;}
#photos1{background-color:#FFFFFF; padding: 5px; width:670px}
#photos2{background-color:#FFFFFF; padding: 5px; width:670px}
#photos3{background-color:#FFFFFF; padding: 5px; width:670px}
#featuread{background-color:#ffffcc; font: Courier-New; padding: 10px; border:solid 1px #000000; }
/* Component Divs */

/************** pageName styles ****************/
#siteName{ margin: 0px;padding: 16px 0px 8px 0px;color: #ffffff;font-weight: normal;}
#pageName{ background:url(http://www.yoursmokies.com/i/your-smokies-top.jpg) no-repeat #013300; padding: 0px 0px 0px 10px;margin: 0px;height:100px;}
#pageName h2{font: bold 175% Arial,sans-serif;color: #000000;margin:0px;padding: 0px;}

/************** footer ****************/
#footer{clear: both;border-top: 1px solid #000000;font: Arial,sans-serif; color: #ffffff; padding: 10px; margin-top: 0px;text-align: center;}
#footer a{font: Arial,sans-serif;color: #FFFFFF; text-decoration: none;}
#footer a:hover{text-decoration: underline; color:yellow;}

/************ navlinks styles **************/
.navlinks{margin: 7px;padding: 0px;}
.navlinks h3{padding: 10px 0px 2px 10px;border-bottom: 1px solid #000000;}
.navlinks a:link, .navlinks a:visited { display: block; border-top: 1px solid #000000;border-bottom: 1px solid #000000; background-color: green; width:181px; height:20px; font-weight: bold;padding: 3px 0px 3px 8px;color: #FFFFFF; text-decoration: none}
.navlinks a:hover{border-top: 1px solid #000000;background-color: #000000;background-image: none;font-weight: bold;text-decoration: none;color:yellow;}

/**************** navtitle styles *****************/
.navtitle{margin: 10px; padding: 0px;}
.navbanner {background:green; text-align:center; align:center; margin:10px 0px; padding:10px 0px; width:200px;}
/********************* end **********************/

[Tim]

A quick look at the css suggests to me that if the content, photo1, photo2 and photo3 divs had a width set to auto (width: auto;) it should work better. The 670px width on the photo divs seems to be the culprit.

Hope that helps.

[MeanSEO]

Originally Posted by Tim

A quick look at the css suggests to me that if the content, photo1, photo2 and photo3 divs had a width set to auto (width: auto;) it should work better. The 670px width on the photo divs seems to be the culprit.

I have tons of ads going onto that site and I wanted to have fixed sized divs to insert the adds and text and fill with background highlights.

I set the content div to width:auto but that did not help.

[imvain2]

Since, I haven't made an entire website in CSS I maybe missing something here.

In regards to your statement: I know this is a real easy fix to lock the "content div" in the upper left position where it belongs and let the right hand side and the bottom of the "content div" stay fluid.

Do you mean you know how to do that, but you choose not to?

The first thing that came to mind is absolute positioning (locking) the left hand corner at top of 101px.

The last time I had a problem with IE vs Firefox, I did something that Css positioning gurus could tell you a better way. I simply wrote an ASP script to see if the browser was IE or firefox. If IE, my style was writting for firefox, if not it was written for IE.

[MeanSEO]

Originally Posted by imvain2

Do you mean you know how to do that, but you choose not to?

The first thing that came to mind is absolute positioning (locking) the left hand corner at top of 101px.

Don't know how. Trial and errored the rest of the code and its perfect and validates.

How should the statement read to lock that div at 101?

[imvain2]

As I'm also a newbie to CSS, I know this would work in general so please forgive me if it doesn't work in your case.

Essentially it would be the same as your tr style.
Please note X in left would be whatever the width of the left hand column is. And the reason why I choose 101, is because I noticed your header background image is 100px tall. So I suppose 100, would work also.


position:absolute;top:101px;left:X;

[MeanSEO]

Originally Posted by imvain2

position:absolute;top:101px;left:X;

Won't work.

In IE the page blows out very wide and when you resize smaller (but while stile very wide) you have to use a left right scroll to read text.

In FF its better but the word wraping doesn't work as well as before.

[stevealmond]

I am certainly not the worlds top css expert, but how about;

position: absolute;
top: 101px;
left: 0px;
height: 1000px;
width: 100%;

A quick explanation;

The container's position is fixed, and it starts at pixel 101 from the top and pixel 0 from the left. The container has a width of 100% of the width of the resolution that is being used, i.e. 800px, 1024px, etc. Finally the height of the container is 1000px.

Obviously all the parameters can be changed to alter the layout, i.e.

position: absolute;
top: 10%;
left: 20px;
height: 30%;
width: 40%;

However I am not sure what you are trying to fix here, as I am using I.E. and I have viewed your site at all resolutions available, i.e. 600/800, 1024/768, etc, and everything seems to look fine.

Steve

[noel_x99]

I'm with Steve. I'm viewing in different resolutions in IE and FF and I'm not seeing the problem. Looks fine to me in IE 6.

[martindow]

I would suggesting posting on this board
http://css-discuss.org/
which specialises in sorting problems with pure css layouts.
Best wishes
Martin

[Tim]

It's definitely better now you've removed the width attribute on the photo divs. The content div still bobs down at about 700px browser width though but that's less than before. I have no idea what's causing it. Interesting how a band of white stays at the top of the space and how that and the top of the dropped content div 'slide' up and down as you scroll. If you ever solve the problem, please let us know how.

Good luck.

[speed]

The column drops because the AdSense becomes too wide to fit in column when you make the window narrow, remove it and the right column plays nice until you get to the width of the pictures plus all those s.

http://www.cssplay.co.uk/boxes/minwidth.html might be of use

[ksawatzk]

You might try reading this about positioning:
http://builder.com.com/5100-31-5074891.html?tag=ra
it doesn't have all the answers, but a start, anyway.

Keeping your left nav static (position: absolute, etc.)
and then for the directory info using:
position: relative;
(then maybe float: left; width: X%;, etc.)

Making 2 DIV STYLE wrappers for the nav and directory might make it easier also?

#navwrapper {
position: absolute;
etc...
}
#directorywrapper {
position: relative;
float: left;
etc...
}

PS- looking at it with both IE and FF I'm not noticing any particular problem either..

[MeanSEO]

Originally Posted by Tim

It's definitely better now you've removed the width attribute on the photo divs. The content div still bobs down at about 700px browser width though but that's less than before. I have no idea what's causing it. Interesting how a band of white stays at the top of the space and how that and the top of the dropped content div 'slide' up and down as you scroll. If you ever solve the problem, please let us know how.

Good luck.

While I removed the width on that div, ads such as on http://www.yoursmokies.com/smokiescabinstn.html are what is going to be the problem.

ksawatzk: I am going to try your link. I will also try your code.

stevealmond: and others does anyone have a problem with the page http://www.yoursmokies.com/smokiescabinstn.html in 800 x 600 in a slight smaller than full size window?

I know in the most common resolutions the issue is not happening and FF is bullet proof. My problem the market this is for is a little behind the times.

I promise that when teh solution is found I will post it. I love the concept of this design but these little CSS glitches are driving me nuts.

[ksawatzk]

Yes, http://www.yoursmokies.com/smokiescabinstn.html does scroll slightly right @ 800... due to the cabin rental ad.

Can you reduce the cellpadding on the ad to maybe 2-3px? Or at least the left/right padding. (padding-left: 2px;) I think it will fit fine w/ less padding @ 800.

[lightning]

I'd sure like to know how to fix this problem. I have many pages with 2 div columns. When the right div has a n image in it and the screen width is too narrow to display it all, the browser moves the entire column down below the div column on the left.

To the user, it looks like the column disappears. They don't think to scroll down to see if the column is somewhere below.

That's a flaw that makes a lot of web developers shy away from css and stick with tables. I personally hate tables, and I'd like to have my div columns line up side-by-side no mather what the width.

[ksawatzk]

Originally Posted by lightning

I'd sure like to know how to fix this problem. I have many pages with 2 div columns. When the right div has a n image in it and the screen width is too narrow to display it all, the browser moves the entire column down below the div column on the left.

To the user, it looks like the column disappears. They don't think to scroll down to see if the column is somewhere below.

That's a flaw that makes a lot of web developers shy away from css and stick with tables. I personally hate tables, and I'd like to have my div columns line up side-by-side no mather what the width.

I use a table layout with minimal to extensive CSS much of the time, but it depends on the circumstances, I guess. You can define your absolute positions for tables whether they are 1-2-3 columns wide, of course... sometimes I'll put a blank 180px column on the left and define the nav location w/CSS into that area. Just depends.

(Couldn't you make your image slightly smaller?)

[MeanSEO]

Originally Posted by ksawatzk

Yes, http://www.yoursmokies.com/smokiescabinstn.html does scroll slightly right @ 800... due to the cabin rental ad.

Can you reduce the cellpadding on the ad to maybe 2-3px? Or at least the left/right padding. (padding-left: 2px;) I think it will fit fine w/ less padding @ 800.

Scrolling in IE? That's fine - as a matter of fact great! I just don't want the whole content div to drop down out of site.

Cant thank you all enough for the help!

[lightning]

Okay, I fixed my problem, too. I'm a big fan of floating divs side by side using relative positioning. By changing the to absolute positioning I was able to achieve my desired result.

Thanks.

[stevealmond]

Originally Posted by suesheboy

stevealmond: and others does anyone have a problem with the page http://www.yoursmokies.com/smokiescabinstn.html in 800 x 600 in a slight smaller than full size window?

I know in the most common resolutions the issue is not happening and FF is bullet proof. My problem the market this is for is a little behind the times.

I promise that when teh solution is found I will post it. I love the concept of this design but these little CSS glitches are driving me nuts.

OK I've got the problem. It only appears on small resolutions. The problem is caused by the banner http://www.yoursmokies.com/i/c/amrbanner.jpg that you have on that page which is a fixed 560 x 100 px jpg. Alongside the jpg you have your menu buttons, as you decrease the size of the window eventually something has to give, and so the banner and everything underneath it drops down out of sight.

The only solution is to change the jpg size properties from fixed to percentage, and so as the window shrinks so does the size of the jpg.

Steve