My website DIV box disappears! Why?!

[agemmell]

Hello gang!

I hope this is the right place to post this question:

On my newly created website (still being developed so don't laugh!) I notice that sometimes the left box doesn't display.

What seems to happen is this:
1) I surf to my home page.
2) The home page downloads and images and text appear as they should do.
3) The page finishes loading - and then suddenly the left box disappears revealing the black background behind!

These 3 steps happen in about 1 second so you have to be quick to notice it!

When I refresh the page the left box reappears and stays there like it should do. What worries me is that other visitors won't know to refresh the page to make the left box reappear - nor should they have to. So what's happening here?

I notice this doesn't happen in FireFox, only in IE - so perhaps it's IE doesn't like my CSS?

NOTE: When I say "left box" I am referring to the left side of my website and NOT to the {LEFT} template RepTag. Infact, my site template only uses HEADER, CONTENT and FOOTER - it does NOT use the LEFT or RIGHT template boxes.

Please try it out for yourself in FireFox and IE and tell me if you get the same weird disappearing left box:

http://www.jinja-ninja.co.uk/index.php

All comments are welcome.

[pepe]

Are you using floating elements???

There is a problem whith such FLOATS in IE... but there is a workaround...

[Kosse]

Please try it out for yourself in FireFox and IE and tell me if you get the same weird disappearing left box:

http://www.jinja-ninja.co.uk/index.php

All comments are welcome.

FF ok
IE it dissapears...
Must be your css indeed

this part:

Code: Select all

#left{
position:relative;
background-image:url(/picture/bg1.gif);
border-left:11px solid #404040;
border-right:11px solid #404040;
text-align:center;
/* DEBUG 
border:1px dashed orange;
/* /DEBUG */
width:367px; /* For IE5/Win */ 
voice-family: ""}"";
voice-family:inherit;
width:345px; /* Actual Value */
}
/* "be nice to opera" hack */
html>body #left{
width:345px; /* Actual Value */
}

Try with IE conditional comments, easier to debug

Your design is cool so far

Cheers

[agemmell]

Thanks Kosse - that CSS you highlighted is a fix I took straight out of a CSS book I own. It's meant to trick FF and IE to display the correct widths. Are you suggesting that this hack is the problem? Or are you being more general and saying it is something to do with the entire #left CSS style that is the problem?

Try with IE conditional comments, easier to debug

What are IE conditional comments?

Thanks for your help with this!

[Kosse]

For conditionnal comments see:
http://www.quirksmode.org/css/condcom.html

means you make a new css file that works with IE only, example IE 5, IE 6, etc. Usefull when IE 7 will be out.

Put this in your header:

Code: Select all

<!--[if IE]>
<style type="text/css">@import "phpwcms_template/inc_css/ie.css";</style>
<![endif]-->

means that you made a new css file you called ie.css and there you put the css intented only for IE

As for the left I have not looked into it deeper but look sweird and the box that disappears/reappears is in that id, so, yes I think there is the prob.

Cheers

[DeXXus]

It may be that because that block's CSS class (#left) has position:relative;
BUT the "rounded-corners" graphic (for it) is part of the DIV above it -and- the CSS class (#top1) has *NO* postion "specified"...

IE may be "balking" temporarily or something. Maybe specifying position:relative; for (#top1) would change that. I don't have access to IE right now, to play.

[agemmell]

Thanks DeXXus, I think simply adding "position:relative" may have worked!

I will keep an eye on it and make sure it's definitely working over the weekend. If it doesn't work then I'll have to do what Kosse suggests and make a seperate CSS file for IE.

Thanks guys.

[agemmell]

Addendum:

I'm beta testing Shiny's WCMSBlog module and he recently recommended adding a XHTML DOCTYPE by way of a temporary fix for an IE/moo.fx bug.

Well, the thought occured to me that if I am using CSS heavily (which I am) then I probably should be using an XHTML DOCTYPE anyway!

So I changed line 157 in the index.php file:

Code: Select all

$content['page_start']  = '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">';

to:

Code: Select all

$content['page_start']  = '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">';

This fixed the WCMSBlog problem and highlighted a few other CSS issues I had - which I quickly cleaned up.

I wonder if making this change should be recomended for everyone?

[juergen]

Hello

Does anyone know disadvantages in changing doctype to get rid of this IE Problem ?

[update]

Hi DF6IH

perhaps could be that the ie versions before5 or 5.5 or 6 will handle it different then again (or even famous opera changes behavior from version to version or even ff- there is the "quirks-mode" (nice word for dealing with a quierky behavior) beeing disallowed then, I think. But there are some real css-cracks here who should now more than just my shadowy piece of a glimpse of it

There is no chance to get rid of these inconsistencies between browsers when trying to satisfy them all but ending up with perhaps several style sheets and some conditional comments...

Greetings
claus

[Oliver Georgi]

So I changed line 157 in the index.php file:

Code: Select all

$content['page_start']  = '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">';

to:

Code: Select all

$content['page_start']  = '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">';

This fixed the WCMSBlog problem and highlighted a few other CSS issues I had - which I quickly cleaned up.

I wonder if making this change should be recomended for everyone?

This is not recommend!

Oliver

[Kosse]

This is not recommend!

Oliver

mmmmmh, why? because of content part not being compliant (? and in this case it's a matter of choice, wheter your site is valid or not...) or because of phpwcms will not work after that (then it is NOT recommended for sure --> but my experience has shown me it does work, maybe I missed a point)? Thanks for enlightning me on that one.

Cheers

[Oliver Georgi]

It's really because of invalid source. Not more

Oliver

[Kosse]

Genau, thx for reply and good luck with server (and 1.3), works fine from here (Brussels), it's quick!

Cheers