First, I'm new to Drupal but trying my best. I have built a site for a new charity called Free Cakes For Kids. The site is www.freecakesforkids.com I'm running D6 with a stock theme from Drupal.org called aBeesParadise. The theme is almost perfect for us. Until today I thought everything was going great and then I learned of a problem. If the site is viewed in IE6, all of the content is pushed down on the screen. In a lot of cases people don't even realize that there is content there. I verified that this problem exists on the publishers demo site, so I know it has nothing to do with what I've added. Today I sent an email directly to the publisher as none of the support cases on Drupal have been responded to. Hopefully they will respond, but if not I will need someone that can volunteer to take a look and see if this is a simple fix. We simply don't have the funds to pay someone to fix this. I would hate to change the theme, but it really looks bad in IE6. Please let me know if you can help!
-Craig
Comments
Works for me
Craig,
I just viewed your site with IE6 and it looks fine to me. I'm attaching a screenshot for you to compare with what you are seeing. My version of IE is 6.0.2900.2180.xpsp_sp2_gdr.070227-2254
=Perry
Clarification
The initial home page loads fine in IE6, but clicking through the site the content in the main column is shoved down. Without looking into it too much, I would say the widths are off, and IE6 is shoving it down because the left column is too wide with main column content on interior pages. Just my hunch. :)
Looks like a CSS issue.
Looks like a CSS issue. Should be easy to fix. Probably a margin doubling bug. I didn't look too hard at it, but I would guess that the problem is with the #squeeze div. Try adding display:inline; to body.sidebar-left #squeeze{} on line 437 of style.css.
If that doesn't work play around with the width of the squeeze div and its containing divs. Basically IE6 considers the containing block to be too narrow for the squeeze div to fit next to the sidebar so it is wrapping it underneath the sidebar. If you don't already have it, grab firebug http://getfirebug.com/ and use that to troubleshoot.
Try Validating CSS and xHTML, fix validation errors and move on
Hi, I don't have a whole lot of time to dig around to see what's going on.
I used to have similar sounding problems with IE6.
What I found was that IE6 was super-sensitive to the width of block level elements,
e.g. let's say a block was defined as 100px wide.
It contained 2 blocks floated left and right, each 50px wide, totalling 100px.
If one of the blocks was expanded to 51px (let's say you put a 1px border down the left side of the right block to divide the 2) something had to give, IE6 would wrap the right block below the other, it would remain floated to the right but wrapped below it's neighbour 'cos there wasn't enough room in the containing box.
Diagnosing this problem was made even more difficult, confusing and frustrating by the fact that it only happened on some pages of a site with over 500 pages.
What I eventually worked out was that IE6 wasn't handling itallicized words well.
If an itallicised word occured at the end of a line and was tilting into the boundaries of the containing block level element, then it would force that block level element to widen and thus to wrap as described above.
Remove the itallicized word, or force the line to break somewhere other than the itallicized word and the problem would go away.
Similar problem with long, un-broken words / strings in narrow columns.
I do a lot of 3 column layouts, like your's, lets say I had a string of destination/cities/separated/by/slashes with no spaces because I was trying to fit everything into one line of the column.
Well the unbroken string would force the containing block wider than it was defined to be and cause the block to be wrapped as described above.
I'm not saying that these experiences pin-point your problem but it sounds to me like you have something similar going on.
I did do a quick W3C validation of your xHTML / CSS and neither validate.
I'd start by fixing those issues so you can cross any of those off the list as possible cuplrits and then move onto looking at how your block level elements are defined.
From the previous comment, it sounds like it's not a consistent problem, like maybe if the viewer's screen resolution is wide enough for the layout it's fine. But if the screen resolution is too narrow the layout gets broken.
I don't use IE6 anymore, thank the powers above for IE7 and beyond, and I don't really look back.
I tell people that keeping your browser up to date is part of basic security protocol.
It's free software and the reason it gets updated more than anything else is because security issues are continually discovered.
If I do want to look back then I use http://browserpool.com
I'm new to Drupal too. I was struggling with the Zen theme for a while there, just could not get it to do what I wanted.
Found Raincity's "Basic" theme and am off and running (Basic is Zen with all the extra crap taken out and all the validation errors fixed).
Can't say enough good stuff about "Basic"!!!
The point is that you can't just assume that the themes / modules you use are going to output clean code.
I know now that Zen does not, Basic does!
I know that several modules I use output CSS errors and cause validation to fail.
Having code that validates is the first step in diagnosing difficult, inconsistent problems. . .
In response to gilgabar, et al
I added display: inline; to the styles.css file as gilgabar had suggested. This does appear to have helped the situation! I am thrilled. It doesn't appear to be 100% but is probably workable. If someone has time and can help me look further that would be great. I can point out some of the issues further! Such as why a song we added to the forum page works on IE7 but not 6. Nav bar not ligning up. Just noticed that once in Forums it's still down too far. Anyone know what file handles this?
Thank you again!
-Craig
Update
I found that by trying different values in the style.ccs file, I would have to modify the margin-left value to 143px to make the pages "fit" correctly. Unfortunately this breakes the other graphics of the theme. As far as I can tell so far only IE6 users are affected. Is there any way to work around this?
body.sidebar-left #squeeze {
display: inline;
margin-left: 143px;
width:Auto;
float:left;
For the song I would suggest
For the song I would suggest making sure that a recent version of flash is installed in your copy of IE 6. It works fine in IE6 on my end. I ran into the same issue a while back and I banged my head against a wall for hours trying to figure out why it didn't work until I realized I hadn't installed flash in my dev copy of IE6.
The nav alignment looks like another margin doubling type of bug. I would look at ul.primary-links {} on line 567 of style css and try out another display:inline; and see if that does anything. It looks like the padding on the li elements within that ul are all getting doubled. In general IE6 will double the margin and padding of floated elements. Adding a display:inline; usually fixes it.
In your forum the forum table is simply wider than your layout was designed to handle. Even in Firefox the 'last reply' column gets cutoff instead of getting wrapped underneath. I'm not sure what the best solution would be for that. Perhaps resizing the login/password fields so the sidebar can be narrower and the content area can be wider. Or just changing the login to a link instead, so you login on the login page or use a lightbox dialog. Or make the whole thing wider, but that requires you to redo some graphics.
Update 2
Adding the last display:inline; appeared to have no affect. but based on the information that you and austintnacious provided it's obvious that some items are too wide. I was able to re-word a few items and re-work some thumbnail sizes and most has come into place. If this theme wasn't such a great "fit", pun intended, I'd dump it. Now if I could only get the Forums to lign up. Again, it may just be a matter of changing the topic names. I've been considering looking at the advanced forum, but even that I fear will be too wide, plus it's still in alpha. Any other forum replacement ideas?
Again, I want to thank everyone for the input. With your help we've gone from a crisis to a bump in the road!
Let me know where to send the
-Craig
I had written an involved response but somehow, I lost it. . .
. . . in brief, 'cos I have my own first Drupal project to struggle with. . .
Throwing display:inline at all your suspect block level elements is a hack at best.
It might appear to fix the problem in some cases but it doesn't address the root of the problem.
If you want to end up with a layout you can feel confident in get all the widths dialed in.
It needs to be pixel perfect for IE6.
A 50px wide block with a 1px right border and a 1px left padding is a 52px wide block
If it's supposed to float in a 101px wide block with another 50px wide block it'll wrap in IE6.
(Again, I haven't dealt with or even looked at IE6 for a long time now and good riddance to it!
So my memory of some of these issues might be a bit blurry.)
If the numbers add up then the layout should be stable.
If not try adding positioning. . .
add
position:relative;
top:0px;
left:0px;
z-index:n
where n = a different layer number for each of the block level elements you're working with.
Adjust the vert and horizontal pixel offsets to get the alignment you want / need.
Hope this helps rather than adding to the confusion.
If there's anyway you can convince the client that it's IE6's problem and move on then that's what you should do.
It is IE6's problem!
One word. . . BASIC!!!
If it gets to that point and you are in the market for a new starter theme. . .
BASIC
. . . end of story!!!
And bear it in mind for future projects where you have to do a custom look rather than use an off the shelf design.
Trust me if you're coming at it from the same angle as me, i.e. from the outside, you'll probably get steered towards Zen!
Big mistake, unless you really want to rool up your sleeves and get your hands dirty!