Positioning problem 2

[mainmast]

Hello,

Whenever someone tries to load my website (

http://www.wochelp.com/wochelp/index.aspx)

the red boxes on the left sometimes gets pushed up into the header graphic. It fixes itself once you refresh it, and it happens in both FireFox and IE.

The boxes are not dynamically made yet, so I really don't know what the problem is. Can anyone point me in the right direction?

http://www.wochelp.com/wochelp/includes/css/main.css

is the stylesheet.

Thanks!

 

[BillyRayPreachersSon]

Everything looks fine for me in both IE and Firefox - first time. What browser versions are you using?

Dan


[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[mainmast]

FireFox 1.0.7 and IE 6.0.

Like I said it only happens once in a while, and a refresh fixes it. Kind of weird...


Thanks!

 

[KevinADC]

could be a problem with the style sheet getting loaded slowly sometimes.

 

[mainmast]

I think that is what it is, because sometimes it fixes itself without a refresh a bit after it loads. Would breaking up the CSS file into multiple files help it load faster?

 

[cLFlaVA]

probably not.

1) how big is your css file?
2) how are you including it in your html page?

using @import, as i discovered recently in this forum, is slower than using the more common method.

*cLFlaVA
----------------------------
[tt]your mom goes to college[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[mainmast]

The CSS file is only 3KB, and I include it like:

<link rel="stylesheet" href="main.css" type="text/css">

The red boxes are made with div id's, would that be a problem?

 

[cLFlaVA]

hmm,

my next suggestion would be to fix your html validation errors:

http://validator.w3.org/check?uri=http://www.wochelp.com/wochelp/index.aspx

your css validates.

*cLFlaVA
----------------------------
[tt]your mom goes to college[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[KevinADC]

yes, fix all errors, but I know of no way to force a external style sheet to load faster. Could just be a slow or overused server too. The style sheet has to be fetched and read from disk just like the html page. Maybe try putting the style sheet right into the page itself and see if that clears it up. Might give an indication if having them as seperate files is contributing to the problem. If not, you may have to live with this problem.

 

[mainmast]

Most of the errors it gives me is having more than one instance of a div. Each news post (each box on the left) is a seperate div, but the same div name for the CSS. What's wrong with doing that?

 

[cLFlaVA]

div id? an element with an id is unique. you can't have two different elements with the same id.

you can, however, have two or more elements with the same CLASS.

ILLEGAL:

<div id="specialDiv">stuff</div>
<div id="specialDiv">more stuff</div>

ALLOWED:

<div class="specialDiv">stuff</div>
<div class="specialDiv">more stuff</div>

to style a class, simply use the "." in your stylesheet instead of the "#".

*cLFlaVA
----------------------------
[tt]your mom goes to college[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[mainmast]

Ah, I think I understand now. Makes sense, thanks!

I'll fix the errors and get back when I do.

Thanks a lot!
Brandon

 

[mainmast]

The errors have been fixed. I re-validated my CSS to make sure it was still good as well, and it checked out good. However, the red boxes still get pushed up to the top sometimes, but as always a refresh fixes it.

Any other ideas?

Thanks!

 

[Vragabond]

Funny thing is I have opened (and re-opened or refreshed) your page at least twenty times both in IE and Mozilla and problem did not show up once.

 

[BillyRayPreachersSon]

Same here.

mainmast,

Is it just YOUR pc that it breaks on, or have you seen it happening on any other PC?

Dan


[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[Vragabond]

Interestingly enough, I have just tested it on my work computer and experienced the problem.

I do believe your problem originates in the fact that you're using tables and absolute positioning. Let me explain a bit.

Tables are by default rendered sequentially meaning that table gets rendered then it expands to fit all the content. That is why you see a lot of "shaking" when you load pages that rely on tables a lot -- original tables expands to fit all the pictures that are loaded after the rest of the text.

Same thing is happening on your page, with one exception. Your first table has no content before the picture is loaded, so it is 0 pixels high. Then you have two paragraphs following that. And then your absolutely positioned contentLeft. Now, before the header picture is loaded, the contentLeft is positioned absolutely at the position under zero sized table and two paragraphs. Then picture is loaded and while in normal circumstances would push the content lower, this does not happen in your case, since it was positioned absolutely, or taken out of the flow.

Solutions which are more benefitial to you than not are plenty.

I would start with removing the table from the header. It is just a picture. You do not need to put one picture in a one cell table. At most, you could use a div or even just the image.

Then again, the other problem, being absolute positioning is also best removed. I checked your page without that declaration and it looks the same. It is completely superfluous -- and rather than helping is just confusing browsers.

The rest of your code also needs work. The second table in the header also seems to not be necessary but if it is, it should definitely not be in a paragraph.

Try the changes I suggested and tell us how it went.

 

[mainmast]

I did everything you suggested, including the removal the table for the navigation.

Before I removed the absolute declaration (after all the other changes) and it seemed to have fixed the problem. However, once I removed the declaration FireFox stayed the same but the width of ContentLeft (the red boxes) went to half the wanted size. I have left it like that to see if you can tell me what is wrong now...

Thanks for your help!

 

[mainmast]

Well, nevermind. I added the absolute declaration back on my local copy and it still loads the boxes on top of the graphic.

However, from what I can see it doesn't with the declartion removed. However IE still has the width problem described in my above post.

Any thoughts?