CSS IE issue with Drupal Bluebreeze theme

[chrism2671]

I'm trying to fix a simple IE problem with the CSS on my site.

I've included a screenshot here: <>

As the IE window width is reduced, the left sidebar moves into the
center, rather than sticking to the left window border, obstructing
the text in the content pane. As the window gets smaller, the left sidebar literally swings right into the middle of the content.

I've tried using the IE7.js from googlecode, however it fails to correct the issue.

I've pasted my layout.css below if might help diagnose trhe problem. Note the 'IE fixes' near the bottom.

For those who are interested, this is part of the bluebreeze theme in drupal.

Any help would be much appreciated!

Thanks,
Chris.

___________________________-

/**
* Implentation of the "One True Layout" by positioneverything.net
*/

#main-wrapper {
float: left;
width: 100%;
}

#main {
margin: 0;
}

.withleft #main {
margin-left: 190px;
}

.withright #main {
margin-right: 190px;
}

#sidebar-left {
float: left;
margin-left: -100%;
width: 174px;
padding: 5px 8px 20px 8px;
}

#sidebar-right {
float: right;
margin-left: -100%;
width: 174px;
padding: 5px 8px 20px 8px;
}

#sidebar-right {
.margin-left: -190px; /* IE7 Fix */
}

* html #sidebar-right {
margin-left: -190px; /* IE6 Fix*/
}

#footer {
clear: both;
}

[edited by: SuzyUK at 10:24 am (utc) on April 15, 2008]
[edit reason] please no personal URI's [/edit]

[SuzyUK]

Hi Chris and Welcome to WebmasterWorld!

this is not the one true layout, but as that what the theme says who am I to argue.. did you go to the Drupal Project Support forum, or have you modified the theme yourself?

anyway, this could be two pronged fix.. but if it works the IE margin workarounds should not be necessary, that IE7 workaround is potentially unstable anyway, parse hacks are really not a good idea as there's nothing to say a future generation browser IE or otherwise will not regress to have the same parsing error.

copy your layout.css first in case this doesn't work

then add this bit of code.

#main, .node .content {
display: inline-block; /* TRIP hasLayout for IE */
}
#main, .node .content {
display: block; /* SWITCH back the display property */
}

/* the above has to be in 2 separate rules */

If That works to fix the moving column you might then like to try amending the right sidebar like this..

#sidebar-right {
/* float: right; */
/* margin-left: -100%; */
float: left;
margin-left: -190px;
width: 174px;
padding: 5px 8px 20px 8px;
}

/* remove the next two rules */
/*
#sidebar-right {
.margin-left: -190px;
}

* html #sidebar-right {
margin-left: -190px;
}
*/

if part 2 also works you can the remove the rules that I've commented out.. let us know

[added] it was a bit more complex than I thought.. the fix should have only needed to be applied the #main div, (the container div with margins and no width needs hasLyout triggered), was my theory

..however due to Drupal's heavy use of the

.clear-block

fix in themes, there was a more specific fix needed too, so that the

.node .content

fix might also need to be applied to other .content blocks too. However I don't want to apply it globally as it will affect the .content class inside the blocks too.. I'm trying just to target the content block that would surround the main content of a node and I think that one is standard no matter the node type?

to specifically correct the code for your theme, if you're into editing the template itself your

.page-links div 

does not need the clear-block fix, and because it has it it is clashing with tables in the content (?). It might be easier just to remove the

.clear-block

class just from that div if you can edit the tpl files? or is that inherent in the book module.. hehe sorry you choose!

-Suzy

[edited by: SuzyUK at 11:53 am (utc) on April 15, 2008]

[chrism2671]

Wow - thank you for such a hearty response so swiftly! The theme is based on another theme (a 'blank' theme someone else has devised, maybe called Zen if I recall correctly).

I tried your suggestions but to no avail.

To recap:
*I removed the IE7.js IE fix script and your comments are very well founded.
*I performed the CSS modifications you suggested. These however caused no discernable difference, in either IE or Firefox.
*I commented out the following line from style.css:

div.node div.content .book-navigation .page-links{
background: #C1D4EA;
border:1px solid #2763A5;
border-width:1px 0 1px 0;
padding:5px;
margin:0;
}

however, this also did not have any effect (in this case, I didn't expect it to)

I have posted on the Bluebreeze theme's issue list
[drupal.org...]
however it would appear that any repairs are a firmly DIY affair.

Any other ideas for what might work? Any idea what the name of this bug is that causes this behaviour? Maybe I can read up on it!

Thanks again Suzy much appreciated!

[SuzyUK]

no problems Chris..

I was on Drupal most of the afternoon anyway..

don't understand why the fix didn't work though admittedly I tested on a much trimmed version.

*I performed the CSS modifications you suggested. These however caused no discernable difference, in either IE or Firefox.

It shouldn't make any difference in FF, it's an IE only fix.. cheeky question, did you refresh the cache and/or ctrl+F5 after after you uploaded your changed layout.css? have you caching enabled in your admin?

*I commented out the following line from style.css:

No you shouldn't need to do that, in the tpl.php file (forget which one, probably book or node) there sdhould be aline that's applying the clear-block class to the page links div.. it's that class that's causing the problem,, however my workaround should fix it without needing to touch this just didn't know if you were into editing your drupal template files or not ;)

I'll run another full check, but can you upload the changed layout.css and refresh the drupal cache

[SuzyUK]

hang on my bad.. It fixed it in IE Quirks, and IE7 Strict.. but not IE6 strict :(.. sorry had the quirks switch in as it was quicker testing that than switching browsers all the time.. sorry.. will find it though

[chrism2671]

Caching was disabled throughout the test. I made sure I was doing a full refresh (on IE, ctrl-R).

I didn't expect any differences on FF, so just as well there weren't any! :-)

I have a feeling that a fix for this will help many people and really liberate this quite attractive theme into the community!

Thanks again for all your input, it's much appreciated- hopefully we can fix it!

[SuzyUK]

OK, I'm sorry I can't seem to bulletproof the actual layout for IE6 there's just too much in the content that is stretching the middle div.. and because of the way the side borders are generated I can't fix it with the divs that are already there :(

table.wikitable, table.prettytable, and unfortunately unfixable the <pre> element .. I was able to fix it when it was just tbales involved but when I hit the pre there was nothing going to make that baby overflow properly..

so after trying varying solutions, the only thing I can come up with which is that you add an extra wrapper div into the theme itself, how are you at editing the page.tpl.php?

if you can get an extra wrapper div in, it needs directly nested in the #main div

e.g.

<div id="main" class="clear-block"><div class="contentwrap">

then close it before main's closing div too

then add to your layout.css

/* for IE6 and below to stop elements that are too wide from stretching the layout */
* html .contentwrap {width: 100%; overflow: hidden; }

I'll see how I get on patching the them, but if as you say it's a modded zen-theme, then perhaps it's there the query and patch need to be.. will look later as I have a modded theme that I need to port to 5.x and It would probably make a good theme to add to repository as it's very similar to this one (why I recognised the code ;))

If you need help to mod the page.tpl.php give me a shout back

-Suzy

[SuzyUK]

Caching was disabled throughout the test.

hehe, OK thanks for not taking offence when I first asked it's one of those Drupal things.. it was my fault ;)

[edited by: SuzyUK at 7:34 pm (utc) on April 15, 2008]

[chrism2671]

BRILLIANT SUZY! The contentwrap class fixed it! Who's have thought it would be so simple? You're a genius! Do you know how to patch the drupal bluebreeze distro or shall I have a go? It would be great to mark off the issue!

[SuzyUK]

great :).. I wonder if the "bootstrap" would fix more that that theme? will be having a look at mine and the zen-wireframe so will make sure to test for this ;)

Do you know how to patch the drupal bluebreeze distro or shall I have a go?

No, I don't know how have never gotten into yet, you feel free to thanks.. and at least the issue links to this thread.

[SuzyUK]

btw.. did you also try the amended column CSS which would allow you to remove the 2 IE fixes (Part 2) of the first suggestion.. that should still work to allow those 2 IE workarounds to go?

-Suzy

[chrism2671]

I put those modifications back in and it works perfectly!