2 replies [Last post]
waplespunk
Offline
newbie
Last seen: 14 years 50 weeks ago
Joined: 2007-01-15
Posts: 7
Points: 0

I thought I had this site all ready, but I just ran into a problem that I'd never noticed before and kicked myself for it.

I'm using a technique similar to the one shown at http://alistapart.com/articles/fauxcolumns/, where if you want an 880px wide layout with three fixed colums, you create one bitmap that contains all three columns.

It's less flexible, as you are set to a fixed width, but it's the only one I've been able to get to work properly (until now). See, I want to have images for the backgrounds of the left and right columns, and not just a solid color (if anyone wants to help me with that, here's your invitation).

So what's happening is that I created my 880px wide background and set the body tag in my css to have:
background: #fff url('images/001_page_bg-center.jpg') repeat-y 50% 0;

Now that I think about it, why wouldn't my 'fullpage' div show the background? It's only showing for the body tag.

Anyway, what's happening is that when I shrink size of the FireFox browser down to narrower than 880px, the background is still centering while the page content is left justified and just hiding the right column. The image keeps centering 50% from the left side of the browser so that the backgrounds are no longer behind the columns, but rather moving left. Unfortunately, I think that's how it's supposed to work.

However, when I make the IE6 browser smaller, both the content and the background stay centered until I hit the 880px mark, at which point both the content and the background image just stay left justified while the page gets cut off from the right. This is how I want it to look in both browsers, but I'm not sure what to do to get this to work.

Any advice?

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 15 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Thanks for the detailed

Thanks for the detailed explanation but it's not much good to us if we can't see a link to the page or your code.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

waplespunk
Offline
newbie
Last seen: 14 years 50 weeks ago
Joined: 2007-01-15
Posts: 7
Points: 0

Here's all the data

Sorry I didn't post this with my original post.

You can view the page at http://www.allizdog.com/temp/3cols/default.htm and the style sheet at http://www.allizdog.com/temp/3cols/3cols_style.css

To see what's happening, you have to open it in both IE and Firefox. I've only tested in IE6 and Firefox 2, so not sure what happens in other browsers.

Something else that I'd like to be able to do is center the horizontal navigation on the header. For some reason I can'f figure out how to fix that.

And again, if someone can help me make this in a way where the left, center and right all have background images that can fill to the bottom, while the center is liquid, that'd be a great bonus.

CSS:

body { font-family: Arial; color: #000; font-size: 9pt; font-style: normal; font-weight: normal; text-align: center; padding: 0px; margin-top: 0em; margin-bottom: 0em; margin-right: auto; margin-left: auto; width: 880px; height: 100%; background: #fff url('images/001_page_bg-center.jpg') repeat-y 50% 0; }

#fullpage {
margin-right: auto;
margin-left: auto;
top: 0px;
width: 880px;
height: 100%;
background: #fff url('images/001_page_bg-center.jpg') repeat-y 50% 0;
border: 0px solid #0f0;
}

#header {
height: 125px;
width: 880px;
top: 0;
border-top: 0px solid #000;
border-right: 0px solid #000;
border-left: 0px solid #000;
font-family: Arial;
}

#leftcontent {
float: left;
width: 140px;
color: black;
}

#centercontent {
float: left;
background: #ffffff;
min-width: 600px;
width: 600px;
border: 0px solid #000;
/*
The style rule immediately following this rule offers another chance for CSS2
aware browsers to pick up the values meant for correct box-model implementations.
It uses a CSS2 selector that will be ignored by IE5x PC.
*/
voice-family: "\"}\"";
voice-family: inherit;
width: 600px;
}

html>body #centercontent {
min-width: 600px;
width: 600px;
}

#rightcontent {
float: right;
width: 140px;

color: black;
}

#footer {
float: left;
background: #ffffff;
width: 880px;
border-top: 2px solid #000;
border-bottom: 2px solid #000;
font-family: Arial;
text-align: center;
}

#MyPlaceContainer_Left {
float: none;
border: 0px none;
top: 140px;
text-align: left;
height: 220px;
width: 140px;
padding: 5px 0px 0px 0px;
background: url('images/myplace_bg.gif') repeat-y 0 0;
}

#MyPlaceContainer_Right {
display: none;
float: left;
border: 0px none;
top: 140px;
height: 220px;
width: 120px;
padding: 0px;
background: url('images/myplace_bg.gif') repeat-y 0 0;
}

#ExtraContentLeft1 {
border: 0px;
height: 250px;
width: 120px;
padding: 0px 10px 30px 10px;
}

#ExtraContentRight1 {
display: none;
border: 0px;
height: 250px;
width: 120px;
padding: 0px 10px 30px 10px;
}

#ExtraContentLeft2 {
display: none;
border: 0px;
height: 250px;
width: 120px;
padding: 0px 10px 30px 10px;
}

#ExtraContentRight2 {
border: 0px;
height: 610px;
width: 120px;
padding: 0px 10px 30px 10px;
}

pre {
margin: 0px 10px 10px 10px;
}

#rightcontent p {
font-size: 10px
}

p {
color: black;
font-size: 100%;
font-style: normal;
margin: 0px 0px 10px 0px;
text-align: left;
}

.lefttext {
text-align: left;
}

.righttext {
text-align: right;
}

.left {
float: left;
border-width: 0;
}

.right {
float: right;
text-align: right;
border-width: 0;
}

.center {
text-align: center;
border-width: 0;
}

.title {
font-style: italic;
}

.header_text {
color: black;
font-size: 8pt;
font-style: normal;
margin-top: 0pt;
margin-bottom: 0pt;
}


.imageleft {
float: left;
border-width: 0;
}

.imageright {
float: right;
border-width: 0;
}

/* Header */

#HeaderContainer {
width: 880px;
height: 125px;
background: #CAD5CD url('images/Header_Center_BG.jpg') repeat-x;
}

#HeaderLeft {
float: left;
width: 60px;
height: 100px;
color: black;
background: #000 url('images/header_left.jpg') no-repeat;
}

#HeaderContent1 {
float: left;
width: 360px;
height: 100px;
overflow: hidden;
voice-family: inherit;
}

#HeaderContent2 {
float: left;
width: 380px;
overflow: hidden;
voice-family: inherit;
padding-top: 7px;
}

#HeaderRight {
float: right;
width: 60px;
height: 100px;
color: black;
background: #000 url('images/header_right.jpg') no-repeat;
}

#HeaderFooter {
float: left;
background-color: #CAD5CD;
width: 880px;
height: 25px;
font-family: Arial;
}

/* Header Nav Bar */

#HeaderNavContainer {
width: 880px;
background-color: #CAD5CD;
border-bottom: 2px solid #000;
}

#HeaderNavContainer ul {
text-align: center;
height: 25px;
padding: 0;
margin: 0;
color: #000;
font-family: arial;
font-size: 100%;
font-weight: normal;
}

#HeaderNavContainer ul li {
display: inline;
}

#HeaderNavContainer ul li a {
float:left;
padding: 5px 12px;
background-color: #CAD5CD;
color: #000;
text-decoration: none;
font-weight: normal;
border-right: 1px solid #94B473;
}

#HeaderNavContainer ul li a:hover {
background-color: #E3EAE6;
color: #000;
}

#navlist li a:active {
color: #000;
text-decoration: none;
background: #CC3333;
}

#HeaderNavList li a:hover {
color: #000;
text-decoration: none;
background: #CC3333;
}

.altButtonFormat {
background-color: #006730;
border: none;
font-size: 9pt;
font-weight: normal;
color: white;
}

.altTextBox {
background-color: #ffffff;
border: #BAC9BF 1px solid;
font-family: Arial;
font-size: 8pt;
font-weight: normal;
text-align: left;
color: black;
}