Taquil
|
I've got an Artisteer-Drupal site, currently with a left sidebar and the main content area. I need to insert a 4-px wide graphic image in between them. The client is set on this, must have a line running the whole height of the content box separating the two sections. It should be visible in any browser, naturally, but IE is the de facto standard browser of the audience.
I figured inserting another div into the page.tpl.php file, right after the 'echo art-get_sidebar() function, with the appropriate additions to the style.css sheet, would do it. Turns out that this is far more complicated than that. I'm not an expert in CSS, so this is forcing me to learn way more about it than I ever had before, and it's not going well.
I've gotten it working on some of the pages, in some browsers. On most, though, the sidebar and divider divs look fine, but the content area is pushed down below them both. I've got every div in the css that looks applicable set to 'display:inline' but that has no effect.
Also, the height of the divider div doesn't go the whole height of the layout in IE, which is another problem in addition to the whole formatting issue. The div currently just has 3 <P> tags in it, but it won't go any lower.
I have found a few articles on the net showing how to make 3 columns display at the same height as the tallest one, but so far everything I've tried breaks the page. Any ideas? I'd really appreciate some help here.
PS, the site is an intranet on our private network, so I can't give you the address. I could supply screen shots if anyone can help.
|
| |
Taquil
|
I was able to mostly solve this issue by finding this arcanely named instance in the style.css page and setting the values thusly:
.art-content-layout .art-layout-cell, .art-content-layout .art-layout-cell .art-content-layout .art-layout-cell{display: table-cell; width:100%;padding:0;}
That sorted out the issue of having 3 divs adjacent to each other. With a height:100% setting in the right place, it sorted out the height of the separating 4px div.
Now the trouble is getting it to work properly in IE7. I've broken down all the nested divs, and have been able to get them to appear next to each other finally, but the height of that extra 4px div is still stuck at 1 character height. I've got everything set to height:100% all the way up to the body tag, to no avail, at least not without breaking something else.
|
| |
eadie
|
What you want to do is add a border line to one of the already existing columns. Don't add a whole div just for an image line. search for "css border" on the internet.
|
| |
taquil
|
That would work except for two things. First, one half of the page is always going to be taller than the other, but you don't know which. If you put the border on the left nav column and the main content area is taller, the line runs out and you've got unbordered white space. Similarly, vice versa. Adding a border to each half also doesn't work. Second, it's not a solid color, but something with a stone-like texture. CSS borders won't do that reliably, AFAIK. And yes, I know that this seems like an odd requirement, but the customer is always right.
My solution turned out to be fine except for the fact that IE7 sucks, and naturally is the browser most of the audience will be using for the time being. I was able, after several hours, to work out a fix for IE7. But in the end I created a 960px width image with the bar 200px from the left edge, and made it the background of .art-content-layout, which was the outside nested div holding the main content box of the page. That works fine in all browsers so far and I don't have to worry about pages breaking randomly.
|
| |
|
|