Need help eliminating CSS lag 1

[rgstewart]

I have a problem that has been bugging the CRAP out of me, and I want to know if anyone can help (before I shoot myself!).

I have a page written in XHTML Transitional, with an imported CSS (using @IMPORT so that older browsers will show only the 'plain' version).

My problem is that every time I clear the cache and reload the page, there is a lag while the CSS loads, during which everyone can see the unformatted content. It's the ladies' equivalent of leaving the toilets with your skirt tucked into your knickers!!!

Can anyone tell me WHY this lag occurs? I thought it might be because I was setting some fairly heft BG images using the CSS, but I took all those out and, well, it ISN'T that.

I'm at the end of my rope. HELP.

 

[Foamcow]

I *think* that the "lag" is due to you using @import

Try the same thing with a <link> tag instead and see if you get the same problem.

http://www.foamcow.com

- Web design and ranting

http://www.toccoagames.com

- Day of Defeat gaming community
"I'm making time

 

[rgstewart]

The problem there is that older browsers that can't handle some of the CSS properly will be able able to see it and implement it badly. I want to avoid this - and the only way I can do that is by importing a style sheet.

I'll try the LINK version to see if the lag dies (just in case) - if it does I'm in diffs!

Thanks for the info - any other suggestions welcome!

 

[ChrisHunt]

Like a lot of things in design, it's a matter of balance. If you [tt]<link>[/tt] your stylesheet, you'll mess your site up for the tiny fraction of users with version 4 browsers. If you [tt]@import[/tt] it, you'll (apparently) affect the experience of everybody who visits your site. Your call.

Something else you could consider is to have two CSS files. One that you [tt]<link>[/tt] containing just font, colour, margins and other simple stuff that even NS4 can handle; one that you [tt]@import[/tt] containing the more complex stuff. You should also try to optimise your CSS to keep the download time down.

Does this site have a URL so we can see for ourselves?

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[rgstewart]

The page is at

http://homepage.ntlworld.com/gareth.stewart/dev/

I know there are layout issues - up til this morning I had only checked it on IE6 for PC ... when I checked it this morning on IE5.1 for MAC I discovered the layout is pretty shady (there's something wrong with the footer - in IE5.1 for MAC it only seems to clear the floated div DIRECTLY to its left, rather than ALL floated divs)

Any and all advice welcomed - I will try to use LINK and see if it makes any difference.

 

[Foamcow]

I didn't see any lag in Windows Firefox.
Looks very nice. Good job.

The footer doesn't move down on long pages though (don't know if that is one of the issues you are referring to).

http://www.foamcow.com

- Web design and ranting

http://www.toccoagames.com

- Day of Defeat gaming community
"I'm making time

 

[rgstewart]

Yep - that's one of the issues. I *think* the problem is that the footer div (having been set to float: clear is only clearing the div immediately to it's left (the one with the verse in it), NOT all the divs to the left. When the content div is longer than the verse div, the footer doesn't seem to take that into account, and only clears the verse div.

Any suggestions, anyone?

I was hoping someone could point me towards a good article explaining how nested divs treat inheritance - especially in terms of the parent div 'inheriting' the height of the child div. I know this is the opposite of what inheritance *should* mean, but I'm getting tired of parent divs appearing to be 1px tall when the content is much bigger. Why can the parent div just expand with the child content?

 

[Vragabond]

To answer your last question. It does. But only when it has children that are inside a normal flow of the document (not absolutely positioned or floated) and its height is not explicitly set.

 

[rgstewart]

What happens if you need to float 2 divs to make a column effect, and you want to place them in a 'wrapper' which has a solid colour background right to the bottom, set by the longest div content? If you float the divs you take them out of the normal flow, and the wrapper barely shows at all - so what CAN you do?!

Please help!

 

[Vragabond]

<style type="text/css">
#wrapper {
	background: red;
	border: 2px dotted black;
	width: 80%;
}

#left {
	float: left;
	background: blue;
	width: 20%;
	height: 300px;
}

#right {
	float: left;
	background: yellow;
	width: 80%;
	height: 650px;
}

#clearer {
	clear: both;
	height: 10px;
}
	
</style>

<div id="wrapper">
 <div id="left"></div>
 <div id="right"></div>
 <div id="clearer"></div>
</div>

This simple code will expand the wrapper div to fit the longer of the two nested divs. The heights are in there for demonstrational purposes so that I don't have to use lots of text to show this. You can change the height of the elements and see that it will follow.

 

[rgstewart]

I'm a bit confused now ... you said that the 'wrapper' will only stretch to the size of its biggest content if the content inside was NOT floated or absolutely position. Yet your solution to my question (which works perfectly, btw!) uses a wrapper with three floated divs ... ? Call me stoopid, but shouldn't that NOT work?

However, since it DID work, what about the other age-old quandry - how do I get the wrapper to fill the whole screen bar a footer div, which if the content is not sufficient to fill the screen will hug the bottom of the browser window?

Also, has anyone any ideas why the CSS seems to take a second to kick in, leaving my unformatted sight on view? I have a broadband connection, so I can eliminate it being to do with the CSS download time (the CSS document is 3Kb). What else can it be?!

 

[Vragabond]

Well, element #clearer is not floated, it is actually the reason why this works. If elements are floated, they will float to the right or left of the other element (dependent on the setting) if there is room. If not, they will still float but below the shortest element in height where they can fit. Normal elements will wrap around the floated element and create the desired effect. To break from the floating, you need to specify clear: both; (or left or right respectively), to create the first element which is no longer floated but is in the normal document flow, right beneath the longest floated element. This is why the example works: There is an element below all the floated elements, which is not floated and as such is in the normal flow and this one defines to which point the wrapper will expand. Hope this is clear enough.

Second question, I don't know if that is possible. CSS needs a specific height for the parent element to understand 100% (which is the neccessary attribute for this to work). It works with a little bit of JavaScript but without that, I don't think you can make it work (with a correct doctype -- standards mode) at least.

I unfortunately have no idea why the delay is happening to you.

 

[rgstewart]

Thanks - that explains a few things! However ... (don't you just HATE it when people say that!) ... I have been experimenting with the wrapper code, and in IE6 at least it seems that the wrapper takes its height off the tallest floated div inside. I worked this out by making 2 divs float inside a wrapper div, then placing a footer div UNDER the wrapper.

Is this one of IE6's quirks, and something that other browsers (like IE for mac and Firefox) won't exhibit?