Topic: Simple Portal and IE

[xrunner]

I have checked how Simple Portal looks on several computers using the IE browser and it does not look correct under IE, but does under other browser (FF, Chrome).
The entire right hand column is not appearing. Also, the middle boxes are reversed from what they should be (looks OK under FF and Chrome).

It is not the theme because it happens under the default theme.

What is the problem? I want my portal to appear correct for all users out there.

Here is a link to a test forum I have Simple Portal on - you can see what it looks like - I invite you to use both FF and IE to look at it -

http://www.atheistthinktank.net/test/index.php

[xrunner]

I have figured out the issue with Simple Portal and IE this morning - it has to do with the following controls -

Width of Left Side Blocks
Width of Right Side Blocks

If you decide to use percentages, such as 50% for the blocks, IE will not display the page properly. If you use pixels, IE will display it properly. There must be a compatibility or coding issue with Simple Portal's percentage sizing method that works differently in IE than the other browsers. Again, all that comes from the mod installation - not the user!

I bet you if the Simple Portal support page were to test this out, they would see the same issue with IE. Right now I can tell they are not using the percentage size option for the left and right side blocks right now.

[AngelinaBelle]

If you use 50% of the width for the left side block, and 50% for the right side block, that should, theoretically, leave 0% for the center column.


It looks like IE recognizes that, and tries another way to render it -- its choice does not make much sense.
I did try 33% and 33% -- but this also does not work well in IE.
I would recommend a straight pixel width.

On top of that, I found a problem with portal.css.

Code: (find in portal.css) [Select]


#sp_center
{
vertical-align: top;
width: 100%;
}


Code: (replace) [Select]


#sp_center
{
vertical-align: top;
}


[xrunner]

If you use 50% of the width for the left side block, and 50% for the right side block, that should, theoretically, leave 0% for the center column.

Well, it doesn't work the way you describe. It still leaves a center column using 50% for each side.

It looks like IE recognizes that, and tries another way to render it -- its choice does not make much sense.
I did try 33% and 33% -- but this also does not work well in IE.
I would recommend a straight pixel width.

Yes, that's what I changed it to after I found this.

On top of that, I found a problem with portal.css.

Code: (find in portal.css) [Select]


#sp_center
{
vertical-align: top;
width: 100%;
}


Code: (replace) [Select]


#sp_center
{
vertical-align: top;
}


Is that related to the IE problem? Perhaps the next release of this Mod will make it more compatable with IE.

[AngelinaBelle]

I think the browser works its way through something like this:
1) set the left column to (whatever you requested)
2) set the center column to 100% .  oops.  No. can't do that. 100% minus whatever it gave up to the left column
3) nothing left over for the right column. ignore the 50%
Somehow, column widths done in pixels override column widths done in %, so everything comes out fine when you use pixel widths for left and right columns.
-----
Edit: corrected typo.
 

[KathyL]

I'd like to know the status is of the problem that affects IE if the width of the right side block is expressed as a percentage.  It isn't listed in the bug tracker so I'm wondering if anyone is working on a fix for it.

I really like SP and have spent quite a lot of time integrating it into a test copy of my forum - I was planning on going live with it in a few weeks time.  However, this problem is a show stopper for me because many of my forum members use mobile devices and, as a result, I need to support a variety of screen resolutions.

Thanks,

Kathy

[AngelinaBelle]

Code: (find in portal.css) [Select]


#sp_center
{
   vertical-align: top;
   width: 100%;
}


Code: (replace) [Select]


#sp_center
{
   vertical-align: top;
}


It is a CSS problem. Please give this a try.

[KathyL]

Cool - thanks (I didn't realise this was the fix)!!   

[[SiNaN]]

SP is pretty much compatible with IE. At least I have been trying to make it. I think I added width: 100%; originally for IE8 compatibility. I'll check it again in the next version.