Forum doesn't display properly in Internet Explorer, can anyone help?

[Daniel15]

My forum does not appear properly in Internet Explorer, and I still haven't figured out why. . .  Basically, if you view the forum in IE, there's a huge gap at the top, and the forum is pushed a fair way down the page.  In Opera (and Firefox I presume), it display properly.
Anyone know what I'm doing wrong? The URL is hxxp: www. daniel15. com/forum/

Thanks!
--Daniel15

[femlow]

Well I'm sure there is a problem, and I dont how to fix it, but it displays properly for me and I'm using IE7... just so you know.

[Daniel15]

Well I'm sure there is a problem, and I dont how to fix it, but it displays properly for me and I'm using IE7... just so you know.

Oh, OK, thanks for telling me that
I tested it in IE6, but have not yet tested it in IE7. If it works fine (as you said), I'll edit the notice shown to IE users

[Element]

So, it works with Firefox and Opera, but not IE so you say?
Baha, sorry, I just had to bring that up.
Im actually thinking of moving to Opera due to the massive amount of resource usage firefox takes up.

[Daniel15]

So, it works with Firefox and Opera, but not IE so you say?

Yeah, which was why I didn't buther fixing it

Im actually thinking of moving to Opera due to the massive amount of resource usage firefox takes up.

Opera has a somewhat high memory usage, but that's due to the in-memory cache (it's quite good - you click the "Back" button and it loads the previous page instantly). If you want to limit the memory usage, there's an option to limit how much memory is used for the cache

[KGIII]

IE's rendering is awful... IE7 is slightly better. FF isn't too bad. Opera wins the cookies though.

[squeeks]

you may not have noticed, but even in firefox, on a 1024x768 res monitor display, if i view any sidebar such as bookmarks or history the page with columns display goes to he(ck)ll.  .  . 

every browser has their quirks (see quirksmode. org) -

i've seen so much commentary on IE//Firefox it makes me laugh - things like with blog php comments such as:
"we use tables because IE does not render div's properly"
and in another different blog:
"we use div's because IE does not render tables properly"

chances are although you think your page looks and acts the way you want it to in firefox (consider what i mentioned 'bout viewing sidebars), it is firefox that is rendering it wrong - this is usually the case - according to standards of how CSS and HTML should be displayed, firefox falls short of the mark time and time again, much moreso than any other major browser (i kid you not) - when you hear otherwise it basically means that someone's CSS and/or HTML are not up to standards.    .    .   

AND believe me - i am not bias - the above statement comes from many years of objective observation and testing - hey, if it was the other way around, i'd tell you so.    .    .    .    .   
-------------------------

first of all, in the site-hidecols. css, you're using the CSS property "visibility" to control the side column "toggle" when what you really want to be using is the "display" property.    .    .   

visibility - preserves area of element even when 'hidden'
display - does NOT preserve area of element when NOT displayed

so instead of:

Code:

#left {
          visibility: hidden;
          width: 0px;
          height: 1px; /* Hack for IE, otherwise it stretches the page vertically :( */
          overflow: hidden;
}

it should be:

Code:

#left {
          display: none;
          overflow: hidden;
}

----- BUT.    .    .   
- because you want to toggle AND below i supply an easier method to toggle - within the HTML 'dispay' should be an inline style (style="display: none;"):

Code:

<div id="left" style="display: none;">

or leave out the inline style if you want the page to load initially with columns showing.    .    .   

same applies for #right of course.   

while on the topic of this toggle - it can be accomplished better and more effieciently.    .    .    .   

your toggle link calls the function toggleStyleSheet( ) from siteFunctions. js that in turn calls getActiveStyleSheet( ) and setActiveStyleSheet( ) - each (EACH!) of those functions then calls getElementsByTagName( ) getAttribute( ) and indexOf( ) - etc.     etc.     - and a bunch of other stuff in there.    .    .   

consider on top of that you are juggling two extra seperate CSS' < this is why on slower connections the columns appear first, because the page waits till the all CSS gets loaded to make them dissappear - so when the page first loads the effect is >there they are--FLASH--now they're gone< not so good.   

bottom line - this is what you really should (or could) be doing.    .    .    .   

--- instead of calling the function toggleStyleSheet( ) create a new function to call, let's name it toggleColumns( ), and pass the elements to act on via its parameters - so on your HTML page it should look like this:

Code:

<a href="#" onclick="toggleColumns(left,right);">Toggle side columns</a>

--- the function toggleColumns( ) in your js file should look like this:

Code:

function toggleColumns(lefty,righty) {
          //display the columns if not displayed or hide if displayed
          if (lefty.style.display=="none" && righty.style.display=="none") {
                    lefty.style.display="";
                    righty.style.display="";
          else{
                    lefty.style.display="none";
                    righty.style.display="none";
          }
}

--- so then you can delete the following from your HTML's head:

Code:

          <!-- Default stylesheet - Show left and right columns -->
          <link title="Show side columns" rel="alternate stylesheet" href="http://www.daniel15.com/site-showcols.css" type="text/css" />
          <!-- Default stylesheet - Hide left and right columns -->
          <link title="Hide side columns" rel="stylesheet" href="http://www.daniel15.com/site-hidecols.css" type="text/css" />

and you're all done making toggle easy.    .    .    .   


another note: technically - in your generated HTML you have a double slash where i THINK there should only be one one (unless you have a no-named folder):
<link rel="stylesheet" href="hxxp: //www. daniel15. com//site-style. css" type="text/css" />
and
<script language="JavaScript" type="text/javascript" src="hxxp: //www. daniel15. com//siteFunctions. js"></script>

-------------------------

now on to your question (sorry for getting sidetracked)

remember many years ago when i said how some designers comment "we use tables because IE does not render div's properly"
and others comment "we use div's because IE does not render tables properly"? well, done properly IE displays both correctly (of course) - the main thing is to know what situation calls for what format - since you want more of a grid effect what you really want is a table instead of div's - you problem really is that you're trying to get the effect of a table out of div's.   

so within the gererated HTML you can get rid of 4 divs (bodyContainer, left, right, body) and place the following table:

Code:

<table id="bodyContainer" cellpadding="0" cellspacing="0" border="0">
    <tr valign="top">
        <td id="left" width="145" style="display: none;">

[ left column content ]

        </td>
        <td id="body">

[ main content - including the toggle call as above ]

        <td id="right" width="139" style="display: none;">

[ right column content ]

        </td>
    </tr>
</table>

now you're almost done - only thing left is to get rid of what looks like some CSS hacks (oh and unfortunately then one more thing).    .    .   

get this area of site-style. css to look like this:

Code:

/* Left column */
#left {
          padding: 5px;
          width: 145px;
          font-size: 8pt;
}

/* Right column */
#right {
          padding: 5px;
          width: 139px;
          font-size: 8pt;
}

/* Main body text */
#body {
          padding: 5px 20px 5px 20px;
          background-color: rgb(255, 255, 255);
          border-left: 1px solid rgb(180, 180, 180);
          border-right: 1px solid rgb(180, 180, 180);
          border-bottom: 1px solid rgb(180, 180, 180);
}

beyond a few deleted properties, i was not sure padding: 5px 20px; was correct, so i did what i know is correct - also the width property might be optional for such attributes are now in my table example.   

now.    .    .   

unfortunately then one more thing

i noticed the left column had a url that in length was/is longer than a width of 145 and pushing the table cell too wide - i tried (just a little bit) to get overflow: hidden; to work on that table cell with no luck - i suppose either you could turn it into a text link (which by default would then wrap) or, hate to say it, within the left table cell contain all in a div with the overflow: hidden; property --- ug.    .    .    .   

-------------------------

conclusion

much easier to design for IE or another browser that displays HTML and CSS as standards say such is to be displayed, then hack for firefox, than it is to design for firefox and then hack for IE and such.    .    .   

know when div's are called for and know when a table is called for (side note: i could see right away this called for a table but for your benefit first started in on trying to get it to work properly with the divs > ug - i gave up).   

other notes (IMHO):
looking at your design i would just use the left column and get rid of displaying redundant info - in the left column you can combine Latest Blog Posts and Most Popular Topics - everything else seems redundant.   

finally - as i said, every browser has its quirks - and this might be just in IE - but the 'popups' (sort'ta "snap" things) were slipping under the form fields - some years back at DevGuru (devguru. com - sorry i can't be more specific), i saw an article on how to get 'popups' to properly cover form input fields - i just looked at devguru and could not find it there easily - so i googled and without looking much further i found what seems to be some infior solutions but solutions non-the-less > hxxp://tanny. ica.  com/ICA/TKO/tkoblog. nsf/archive?openview&title=Web+Development&type=cat&cat=Web+Development < (i guess you'll have to fix the url) perhaps you can google some better solutions.  .  . 

[Daniel15]

squeeks, thanks for your comments

you may not have noticed, but even in firefox, on a 1024x768 res monitor display, if i view any sidebar such as bookmarks or history the page with columns display goes to he(ck)ll.  .  .

I didn't test it with any sidebars open... I'll have a look at this.

chances are although you think your page looks and acts the way you want it to in firefox (consider what i mentioned 'bout viewing sidebars), it is firefox that is rendering it wrong - this is usually the case - according to standards of how CSS and HTML should be displayed, firefox falls short of the mark time and time again, much moreso than any other major browser (i kid you not) - when you hear otherwise it basically means that someone's CSS and/or HTML are not up to standards.    .    .  

I designed it for any standards-compliant browser. The main browser I use is Opera, which is one of the most standards compliant browser (if not the most standards compliant). The first thing I always do is make sure it works in Opera.

first of all, in the site-hidecols. css, you're using the CSS property "visibility" to control the side column "toggle" when what you really want to be using is the "display" property.    .    .   

visibility - preserves area of element even when 'hidden'
display - does NOT preserve area of element when NOT displayed

Thanks for that, I'll change it. I wasn't sure what to do, as I'm still new to CSS.

your toggle link calls the function toggleStyleSheet( ) from siteFunctions. js that in turn calls getActiveStyleSheet( ) and setActiveStyleSheet( ) - each (EACH!) of those functions then calls getElementsByTagName( ) getAttribute( ) and indexOf( ) - etc.     etc.     - and a bunch of other stuff in there.    .    .

I didn't really look through the code much, someone gave it to me (they got it off a JavaScript website). This one stores the style in a cookie so the user can save their preference.
I'll look at recoding it later.

another note: technically - in your generated HTML you have a double slash where i THINK there should only be one one (unless you have a no-named folder):

That's my fault, but I didn't notice it until now. In my index.template.php file (main site/forum template), I have:

Code:

$settings['siteURL'] = 'http://www.daniel15.com/';

And then later on, I add '/site-style.css' to that variable to get the URL for the stylesheet. I need to remove the slash from one of them. I didn't notice this while designing the site, as I didn't put a slash on the end of the URL at that time.

so within the gererated HTML you can get rid of 4 divs (bodyContainer, left, right, body) and place the following table:

This is where I disagree. Tables were designed to be used for tabular data, not for layout. Something like a forum's topic index would use tables, as it needs to show data in a tabular fashion.
There's heaps of designs which use pure CSS for a 3-column layout (most done by people much better at CSS than me ). Take a look at some of the designs on www.oswd.org for example.

much easier to design for IE or another browser that displays HTML and CSS as standards say such is to be displayed, then hack for firefox, than it is to design for firefox and then hack for IE and such.    .    .  

I'm not designing for a particular browser, I'm designing for any standards-compliant browser. As much as people say it is, IE is not standards compliant. If IE followed standards, there wouldn't need to be all those IE-specific hacks in the CSS file.

other notes (IMHO):
looking at your design i would just use the left column and get rid of displaying redundant info - in the left column you can combine Latest Blog Posts and Most Popular Topics - everything else seems redundant. 

Originally (when I used SMF 1.0), I had a 2-column layout (left and main), but nobody liked it. The 3-column was the standard layout, and members could choose to use the 2-column layout in their profile. Since upgrading to SMF 1.1, I haven't had a chance to update the 2-column layout to support SMF 1.1. Once I do so, I'll put it back up

finally - as i said, every browser has its quirks - and this might be just in IE - but the 'popups' (sort'ta "snap" things) were slipping under the form fields

You mean the Snap Preview Anywhere popups? I don't write their code, and hence I can't really do much about that.


Again, thanks for your comments, I'll keep them in mind

[squeeks]

ah yes, yes.  .  . 

two (and 1/2) mistakes on my part:

1 - nice to have column display remembered via cookies -- i don't think my function example will do that and so it should not be used (unless you find out otherwise ) - i'd recommend however intergrating its overt method of directly accessing style attributes rather than juggling whole style sheets -- if you want some help on how to intergrate that within the functions you are using, just ask - i'd be happy to.  .  . 

2 - yes, i was confused, and notice directly after finishing my post that indeed you were on opera and not firefox - my bad.  .  . 

1/2 - typo > in my table example i forgot the 2nd </td> tag to terminate the #body cell

-----------------------------------

you are correct - we do dissagree on div vs.   table - if you look closely at all you're attempting, you'll begin to notice most of your efforts are made trying to get div's to act like a table:

the floats, the drastic margins, the heights of 100%, etc ---

i'd say just give that table layout example a spin one time --- and if it ain't truely what you're trying to do, let me know and i'll finish the div layout i started workin on - i was half way there anyway.  .  . 

yes - oswd is heavily into div's - here's why > it's a template site (and all) and as you've noticed, div's are containers that can have dynamic page placement by way of its assigned attributes and properties - and so yes, when a general layout is specifically designed to be dynamic (mostly as far as page placment is concerned - for templates or template-like designs) and expected to be implimented in different ways by different users, so each user can decide where on the page they want what - then indeed div's are the way to go, even when emulating tables - this is why div's are gaining so much popularity within php scripts - so the resulting layout is easier for the user to customize.  .  . 

but if the end result is known and consists of mere simple columns (and/or rows of such) then the default should be a table - consider a div is a "Generic Block-level Container", meaning by nature, its default is such that it's to be displayed on its own line > nothing to either side --- hence the need for the float property (etc.  etc) when the nature of it being a block element is undesired - basically it becomes a wrestling match > wrestling the div's to act as desired.  .  . 

so i still hold if desired layout is known to be mere simple columns (and/or rows of such) then indeed a table is what is called for.  .  . 

funny thing is, my table example is just as easy to customize (if not easier) as a div design -- imagine instead of columns to the side, a top and bottom row was desired --- then merely add </tr><tr> between the cells (td's) - or hey how bout top and left -- then add colspan="2" into first td tag and a </tr><tr> after that td -- much easier than wrestling with div's --- and all still can toggle.  .  .    --- otherwise, whattaya gotta do for div's > floats, drastic margins, heights of 100%, etc > wrestle ---

[squeeks]

hmmm - hey there - in the table example instead of:

overflow: hidden;

it LOOKS LIKE you can use...

table-layout: fixed;

to style the table

and the effect then would be that the table cells hide the "overflow" as a div would with the property "overflow: hidden"

[Tags:]

Jump to: Please select a destination: ----------------------------- News and Updates ----------------------------- => G³ Solutions => News => Sites of Interest => Suggestion Box => MyWebPeople - Blogs for Normal People ===> Updates and News ===> Bug Reports ===> Feature Requests ===> Support Requests ===> MyWebPeople Blogs Feedback ----------------------------- Microsoft Windows Help ----------------------------- => Windows 9x/ME Help => Windows 2k/NT Help => Windows XP Help => Windows Vista => Windows as a Server ----------------------------- Applications - Questions, Comments, or Discussion ----------------------------- => Office Products => General Security => Help with Other Software => Favorite Software ===> Freeware Downloads => Anything Else ----------------------------- Hardware ----------------------------- => General/Advice => Diagnostics => Installing/Upgrading ----------------------------- Web Development ----------------------------- => Web Development - General ===> Web Development - Resources => Databases => Dynamic Languages => Markup Languages ----------------------------- General ----------------------------- => General and Off Topic Banter. ===> Movies and Television ===> Music ===> Games => Humor => Test => Bit Bucket