Hi folks. I'm just tinkering with some css and found that whenever this page (<!-- m --><a class="postlink" href="http://www.vagusnet.com/ptest">http://www.vagusnet.com/ptest</a><!-- m -->) is loaded or refreshed, Mozilla based browsers seem to have a bit of a seizure and make a strobing duplicate of the middle portion of the page for a second or so.
I managed to get a screen capture of the flicker (<!-- m --><a class="postlink" href="http://www.vagusnet.com/ptest/verystrange.jpg">http://www.vagusnet.com/ptest/verystrange.jpg</a><!-- m -->) and noticed it's only the top section that gets duplicated.
Any ideas as to what the chuff is going on here?
I've seen that before many times. That's because the HTML file is being Download ed, and having the CSS styles applied at the same time. This might also occur if you throw in some position: relative; rules to get IE to behave. If the end result is what you want, don't worry about it 
Ok. Sounds fair enough. Just thought it looked a bit ugly.
Something else I suppose I should have asked at the same time too really was what's the deal with the divs for the boxes on the left with the text in 'em?
There's no gap between them at default, but if the text size changes via css or by browser settings (Ctrl & + and Ctrl & - in FF) then the gaps change size too. The larger the text, the larger the gap (which I never defined in the first place) becomes.
Make sure that the tag that directly contains the text doesn't have a top margin. Gecko browsers bleed top and bottom margins over the edges of parent block elements if that parent doesn't have top or bottom padding. I always thought is was kind of strange, but it's because of Collapsing Margins (<!-- m --><a class="postlink" href="http://www.w3.org/TR/CSS21/box.html#collapsing-margins">http://www.w3.org/TR/CSS21/box.html#collapsing-margins</a><!-- m -->). Also make sure no top padding in those boxes is using em for a unit of measure, or percentage for that matter.I hate it when the page does that flashing thing so what I do is to set all divs to visibility:hidden and then using the body onLoad command, call up a js function that sets the style to visible.
Not sure how compliant that is but it gets the clients off my backOriginally posted by Lunadog
I hate it when the page does that flashing thing so what I do is to set all divs to visibility:hidden and then using the body onLoad command, call up a js function that sets the style to visible.
Not sure how compliant that is but it gets the clients off my back
Man is that risky. If you've got javascript disabled you can't see your site. If you've done any hacking for IE, use html>body <tag, class or ID> {} to reset the positioning to what standards browsers can handle (usually position: static; will suffice).
Seriously, just tell the clients that it's a goofy behavior of Gecko browsers and that the page renders fine. Just basically tell them to put up with it, more eloquently of course
EDIT: If they want more of an explanation, tell them the browser is displaying and positioning items in real time. The browser doesn't figure everything out ahead of time and then display the page. It displays the page as the browser figures out where everything goes. If they are REALLY annoyed by it, have them submit a bug report at mozilla.org.Get what you say but some clients are very visually orientated and, to be honest, couldnt care less about compatability, accessability etc.
Wish it were the case that I could make them do things properly but if its a case of losing the job or doing things that make them happy, theres only really one choice for me - rent needs to be paid after all
Originally posted by Lunadog
Get what you say but some clients are very visually orientated and, to be honest, couldnt care less about compatability, accessability etc.
Wish it were the case that I could make them do things properly but if its a case of losing the job or doing things that make them happy, theres only really one choice for me - rent needs to be paid after all
I here ya. You can't save the world. Even if it sometimes needs itLol. Too true.
I managed to get a screen capture of the flicker (<!-- m --><a class="postlink" href="http://www.vagusnet.com/ptest/verystrange.jpg">http://www.vagusnet.com/ptest/verystrange.jpg</a><!-- m -->) and noticed it's only the top section that gets duplicated.
Any ideas as to what the chuff is going on here?
I've seen that before many times. That's because the HTML file is being Download ed, and having the CSS styles applied at the same time. This might also occur if you throw in some position: relative; rules to get IE to behave. If the end result is what you want, don't worry about it Ok. Sounds fair enough. Just thought it looked a bit ugly.Something else I suppose I should have asked at the same time too really was what's the deal with the divs for the boxes on the left with the text in 'em?
There's no gap between them at default, but if the text size changes via css or by browser settings (Ctrl & + and Ctrl & - in FF) then the gaps change size too. The larger the text, the larger the gap (which I never defined in the first place) becomes.
Make sure that the tag that directly contains the text doesn't have a top margin. Gecko browsers bleed top and bottom margins over the edges of parent block elements if that parent doesn't have top or bottom padding. I always thought is was kind of strange, but it's because of Collapsing Margins (<!-- m --><a class="postlink" href="http://www.w3.org/TR/CSS21/box.html#collapsing-margins">http://www.w3.org/TR/CSS21/box.html#collapsing-margins</a><!-- m -->). Also make sure no top padding in those boxes is using em for a unit of measure, or percentage for that matter.I hate it when the page does that flashing thing so what I do is to set all divs to visibility:hidden and then using the body onLoad command, call up a js function that sets the style to visible.Not sure how compliant that is but it gets the clients off my back
Originally posted by Lunadog I hate it when the page does that flashing thing so what I do is to set all divs to visibility:hidden and then using the body onLoad command, call up a js function that sets the style to visible.
Not sure how compliant that is but it gets the clients off my back
Man is that risky. If you've got javascript disabled you can't see your site. If you've done any hacking for IE, use html>body <tag, class or ID> {} to reset the positioning to what standards browsers can handle (usually position: static; will suffice).
Seriously, just tell the clients that it's a goofy behavior of Gecko browsers and that the page renders fine. Just basically tell them to put up with it, more eloquently of course
EDIT: If they want more of an explanation, tell them the browser is displaying and positioning items in real time. The browser doesn't figure everything out ahead of time and then display the page. It displays the page as the browser figures out where everything goes. If they are REALLY annoyed by it, have them submit a bug report at mozilla.org.Get what you say but some clients are very visually orientated and, to be honest, couldnt care less about compatability, accessability etc.
Wish it were the case that I could make them do things properly but if its a case of losing the job or doing things that make them happy, theres only really one choice for me - rent needs to be paid after all
Originally posted by Lunadog Get what you say but some clients are very visually orientated and, to be honest, couldnt care less about compatability, accessability etc.
Wish it were the case that I could make them do things properly but if its a case of losing the job or doing things that make them happy, theres only really one choice for me - rent needs to be paid after all
I here ya. You can't save the world. Even if it sometimes needs it
Lol. Too true.