View Full Version : CSS sidebar issues
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.
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?
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.
30th August 06, 09:17 PM
The site is currently at www.goatfishdesign.com/mock/index.php
"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!
31st August 06, 02:07 PM
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">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
font: 12px Arial, Helvetica, sans-serif;
margin: 0 auto;
margin: 10px 10px 10px 0;
margin: 10px 0 10px 0;
margin: 0 0 15px 0;
<p>This is the header. It is full-width by default, and all content goes beneath it.</p>
</div><!--// end #header //-->
<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><!--// end #left_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><!--// end #right_column //-->
<p>This is the footer. It has a property of clear: both; to clear the left_column and right_column floats.</p>
</div><!--// end #footer //-->
</div><!--// end #container //-->
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.
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.
That's easier than this:
<table cellpadding ..... id="foo3"></table>
<table> has many repeat with <tr> and <td>. <div> is only once.
1st September 06, 05:39 AM
Thanks very much for the help! I'll take in your suggestions and try a different layout.
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)
vBulletin® v3.8.4, Copyright ©2000-2013, Jelsoft Enterprises Ltd.