Support » Fixing WordPress » Need some help with this CSS

  • I have just redesigned my blog based on the excellent Vesuvius WordPress Interface v 1.20 by Root. However, there is a bug in the layout (including his original code) that causes a huge amount of whitespace after the top post ONLY in Internet Explorer 6.0 SP2 (the one included with XP SP2, not sure if this occurs in earlier IE versions). Starting with the 2nd post down, the whitespace is normal. I narrowed it down to the left link bar (by turning off such things as the WordPress links, search, calender, etc.), but I cannot figure out for the life of me how to fix this. I notified Root and we have been exchanging e-mails trying to figure out the issue, but I figured I would ask some of the gurus here and see what they can come up with. Any ideas?

Viewing 13 replies - 1 through 13 (of 13 total)
  • You could walk through all of the code, looking for a missing <div> tag or something like that in your page, or a missing ‘{‘ or ‘}’ in your stylesheet. I’ve had that problem once myself, and in my case it was one </div> too much :). So, perhaps this might be the case for you also.

    Yes there certainly is a bug in Vesuvius and I am baffled. Vesuvius uses Ryan Brill’s 3 col negative margin layout proposed at alistapart. Extensive reading of the original article and the comments does not give a clue. Unless I can get this fixed asap vesuvius will be withdrawn from service.

    Mark (podz)


    Support Maven

    Mmm… this is weird. It’s not just an IE6 problem, IE5 and IE5.5 on WinXP show the big space as well. I looked at the CSS and HTML, but they seem okay, validate too. Must be an IE bug.
    I’m too tired to go play around with it now, but have you already tried asking on the css-discuss mailinglist? They’re pretty great at finding solutions.

    Okay… I haven’t got a ready made solution, but I’ve narrowed down the location of the problem.
    I think the ‘feedback’ div is the problem in IE. It’s {clear: both;} causes it to sink below the left floated ‘menu’ div. If this is indeed the problem, then shortening or lengthening the content in the ‘menu’ div should also make the gap smaller and bigger.
    What if you take the clear: both out or if you give the ‘content’ div a left margin of 176px?
    If this doesn’t work, check out the IE float bugs on PositionIsEverything and see if it has to do with those.

    Yes, taking {clear: both;} out of the feedback class takes care of the problem: see here.
    I don’t know what it was there for in the first place, but with the content as provided it doesn’t seem to do any harm.

    Ok muffinboy that edit suggested by you has now been uploaded. That clear both (or though it is clear all there) is in the default. Anyhow the edit is now implemented and should now be running smoothly. If IE users are still experiencing difficulties – feedback would be welcome.

    Thank you muffinboy that has been a very impressive CSS positioning fix by you. We owe you. 🙂

    I am confused 🙂
    Muffinboy’s fix works excellent with the original Vesuvius – I just tested here: this one is with the “original” CSS, having the clear both…
    and here goes with the fix: where the clear:both is taken out.
    However, in my blog where I am using a modified version of Vesuvius, after Muffinboy’s posting, I checked and the clear:both is there (never thought about taking out:) – but I do not have the white space…
    Obviously I have modified something else that had the same effect… if I only knew what have I done 🙂

    The thing about all these CSS positioning questions is that unless you have phenomenal experience or ability even the slightest change anywhere can upset the whole layout. A perfectly good positioning scheme by Ryan Brill was thrown out when it was blended onto the WP index by me. muffinboys brilliant intervention solved it. You now raise a slightly different question. Some of these mysteries are almost unfathomable. Even now many sets of circumstances are still unreported and undocumented. I still can not figure out what the clear: all / both was doing there anyway because the default contains no floats. Any how touch wood – I am really glad we all seem to be running smoothly again. Thanks for everybody’s patience and courtesy in working through a difficult issue. As a result I hope Vesuvius is now more robust and more useable, for the Wp community Thanks.

    @root: thanks 🙂
    @moshu: I did a diff with the original and you hacked around in that css file quite a bit. The problem with css, as Root says, is that there are so many dependencies that if there is ever so slight a problem with the rendering engine, and IE has more than its share of problems in that respect, very, very odd things will happen when changing even the most unlikely element in your code.
    But, looking at your site, you’re not even using the left menu: your ‘menu’ div is empty. You’ve moved all that functionality to the right and hence there are no floats in the ‘menu’ div to wreak havoc in the center column.

    Thanks everyone, that solved the problem!

    You’ve created a new problem.
    The reason that clear was in feedback was because of picture posting. There are two css entries you need to have proper picture posting. First is a float left on .storycontent a img to make the text wrap properly. The second css entry is the clear on feedback to prevent the picture from overlapping the next post.
    What happened is that the clear was actually clearing the menu float, not just the image float.
    Here is a friend’s blog that is having these same issues with the 3 column layout.
    We made one change to the default vesuvius css file. We added a float: left to make the text wrap correctly around the images. You can see how the header from the next post rides up next to the picture. If we now add the clear to feedback to fix that issue, we are back at the beginning.
    My question is now this. How do you have proper wrapping on images and not screw up the menu?

Viewing 13 replies - 1 through 13 (of 13 total)
  • The topic ‘Need some help with this CSS’ is closed to new replies.