Intermittent padding problem IE6 + 7

[pealo86]

Very strange this, see the following website:

http://bit.ly/gBadVR

 

Every now and then, the padding will not appear properly. There is supposed to be a gap of approx 10pixels around the content in the main content area and in the sidebar (I have attached a screenshot to illustrate what I mean).

 

Obviously this problem doesn't occur in any decent browsers. I just find that say, around 1 in every 10 times, IE will not load the padding on these elements!

 

Even when it does work properly, there is a delay of a second or two where the padding does not show up, but then it will suddenly load it and display it properly.

 

I don't suppose anybody has any ideas what the problem might be?! I even tried removing all .js files but still no luck

 

[attachment deleted by admin]

[fathernugen]

Hello,

 

Do you have more than one style sheet styling this website?

 

If you have more than one css file you might have style override from from styles you might have declared twice?

 

I'm just having a stab in the dark here. I think I might be having the same problem on a site I'm helping out with:

 

http://www.sittingspiritually.co.uk/

 

The slider moves about when viewed in internet explorer and sometimes in safari.

 

The solution for you might well work for me

 

 

[internet explorer must die]

 

[fathernugen]

I just thought of something else;

 

Do you use eric meyers css reset by any chance? http://meyerweb.com/eric/tools/css/reset/

 

Your browser could be using default values if you haven't reset them.

 

 

[pealo86]

Yup, I'm using multiple stylesheets and Meyer's reset. The wierdest part of the puzzle is that the problem only crops up now and then, not all the time. Which makes me think it's probably nothing to do with the code in my stylesheets.

 

I have heard from somebody else that it might be the fact that I'm using @import which is causing a delay for the stylesheets to be loaded. Never had this problem using @import before though

 

And on top of that I like using @import as it keeps things organised by saving me from adding extra HTML.

 

IE ruining things as always...

[cssfreakie]

would be awesome if you could be more precise, but since i also like guessing, here is what i think could cause the same:

in the left part of your website, you use cufon. the span containing that cufon stuff has a padding. since the cufon takes time to render i think that is what causes the symptom

<span class="label">
....cufon inside here
</span>

css:

#sidebar .cta a .label {
    background: url("../image/sidebar-cta/a-label.png") repeat scroll 0 0 transparent;
    bottom: 0;
    color: #FFFFFF;
    font-weight: bold;
    height: 25px;
    left: 0;
    padding: 10px 10px 0 0;
    position: absolute;
    text-align: right;
    width: 270px;
}

 

maybe try to set it to display none and ones the site has been fully loaded use javascript to set it to display:inline;

[pealo86]

Thanks, it was somehow related to Cufon in the end you're right!

 

I actually can't remember how I got around it in the end, I think it was something to do with the width of ul#nav.

 

It's still a little dodgy in IE6, but IE7 seems okay now

[cssfreakie]

for IE include a stylesheet with conditional comments and for anything that is the first element that is floated (so that can be float:right or left add:

display:inline;

 

If you have no idea, add display inline for all elements that are floated since it wont matter but it's extra style to be loaded. make sure you have a fixed height or width, for anything that has min-height or min-width.

 

ones you have done that most things should be fixed if not let us know, and a bit more precise.