CSS sidebar issues [Archive]

Jpesci

30th August 06, 03:49 AM

This problem is a little difficult to explain, so I've provided a picture to help illustrate the problem I'm having.

http://img170.imageshack.us/img170/7295/sidebarproblemza6.jpg

The red box at the bottom is a table cell with a repeat-y and css background image applied to it. Above the empty section, sits a sidebar. I have dynamic blog content on the left that extends the page when new articles are posted. When viewed in Firefox, the image displays properly and the repeat-y cell extends upward and meets with the sidebar, so when you post new articles the sidebar stays in place, and the page extends as it should. However, when viewing in IE, I get the illustrated result. Is there any way to get that cell to repeat upward to close the gap in IE, or would I have better luck figuring out some other way to do it?

frankiejr

30th August 06, 04:40 AM

If I'm following you correctly here, the best and easiest way to do that with CSS is to do the following:

Enclose the entire layout inside a "container" div
Create your "fake" columns with 2 floated divs over a vertically repeating background image (the background image will mimic full height columns)

We could give you some more detailed help if you could provide a link and/or code though.

.frankiejr

Jpesci

30th August 06, 09:17 PM

The site is currently at www.goatfishdesign.com/mock/index.php

CSS: http://www.goatfishdesign.com/mock/style.css

"Create your "fake" columns with 2 floated divs over a vertically repeating background image (the background image will mimic full height columns)"

How exactly do I do this? Thanks for your help!

frankiejr

31st August 06, 02:07 PM

Jpesci,

I didn't look any further in your code once I saw all the tables. However, I can give you a simple base to work from so you can begin to understand where to start.

Below is just some starter code with simple comments to start you out (I didn't comment the elements that are named to be self-explanatory). Also, I'm using an external stylesheet... I'm doing this so you can just copy/paste into a new HTML file and take a look at how it works.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>PAGE_TITLE</title>
<style type="text/css">
body {
background: gray;
font: 12px Arial, Helvetica, sans-serif;
text-align: center;
}

#container {
width: 500px;
background: red;
text-align: left;
margin: 0 auto;
}

#header {
height: 50px;
background: silver;
color: #FFF;
}

#left_column {
float: left;
width: 350px;
background: olive;
margin: 10px 10px 10px 0;
}

#right_column {
float: left;
width: 130px;
background: #FFF;
margin: 10px 0 10px 0;
}

#footer {
clear: both;
width: 500px;
background: silver;
}

p {
margin: 0 0 15px 0;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<p>This is the header. It is full-width by default, and all content goes beneath it.</p>
</div>
<div id="left_column">
<p>This is the left column, where all your main content would go. It is floated to the left with a left-margin of 10px.</p>
<p>When you remove the background colors, the container (which is colored red in this sample HTML) would be where your background image would go, repeated vertically.</p>
</div>
<div id="right_column">
<p>This is the right column, where your submenu, calendar, etc. would reside. It is also floated left, but it has no margin.</p>
</div>
<div id="footer">
<p>This is the footer. It has a property of clear: both; to clear the left_column and right_column floats.</p>
</div>
</div>
</body>
</html>

Good luck!

Game Makker

31st August 06, 03:59 PM

Yeah I would agree. Tables and css aren't the best mix especialy for the entire site. I recommened using divs and other (x)html tags as it is far easier to see what is going on with clear indented code rather than the hundreds of tables and cells.

Jen

1st September 06, 04:15 AM

I agree with Game Makker. I can't imagine how you can find the table tag for css styling.

<div id="foo"></div>
<div id="foo2"></div>

That's easier than this:

<table cellpadding ..... id="foo3"></table>
<tr>
<td width="...>
</tr></td>

<table> has many repeat with <tr> and <td>. <div> is only once.

Jpesci

1st September 06, 05:39 AM

Thanks very much for the help! I'll take in your suggestions and try a different layout.

Game Makker

1st September 06, 12:21 PM

Its not really the layout more the way in which you achieved it. It is quite possible to achieve the same layout with less mark up and css. Try it out. We can help you with any problems (hopefully anyways)