FIXED!!! Browser compatibility: different setups in Firefox and IE??

[styzer]

Well, I was able to finally get started on my wb version of this site. Now, when I save a page in the WYSIWYG window (default wysiwyg), everything looks great in Firefox, in IE, the tables are busted... anyone encountered this before?

Look at this in both browsers:

http://www.petitsgroupes.org/wb/

Thanks for any help!

andre

[ruebenwurzel]

Hello,

looked at your site right now and see no differences in FF and IE. So what is your problem?

One tip, the default WYSIWYG HtmlArea is a little bit outdated. I recommand to use FCKEditor (can be downloaded from our addons page) as this is the newest and fastest editor.

Install it as modul and make it in options - advanced settings to your default WYSIWYG.

Matthias

[kweitzel]

Same here ... with FF and IE6 no displaz issue ...

cheers

Klaus

[styzer]

I installed FCK and love how it works!

Now look at these screenshots: http://www.petitsgroupes.org/screenshots.htm

Something is definitely off, if I could find that, I'd be happy. HOW do you insure browser compatibility "out-of-the-box" without needing to tweak this and that?

Also notice how the text has too much space between lines?

Thanks!

andre

 

[kweitzel]

I see now one of your 2 faults in IE6. In the code, it is in context with the buffered menu look for "ob_start")

Before that the DIV "<div id="wrapper-menu-page">" is opened, but also directly closed since there is no submenu. By putting the DIV into the check result of the buffer, it should disappear.

Look for this code here:

Code:

<div id="wrapper-menu-page">
<?php ob_start();     // start output buffer
show_menu(1,1,-1,true,'<li>[a][menu_title][/a]</li>','','','','','');    // call menu
$foo=ob_get_contents();    // put outputbuffer in $foo
ob_end_clean();             // clear outputbuffer
if ($foo<>"") {  // some code to execute cause there is some block
  echo '<div id="menu-page">';
  echo '<h3>Menu</h3>'; 
  echo '<ul>';
  echo $foo; 
  echo '</ul>';                              // show the block (as saved in $foo)
  echo '</div>';
    } else { // some code for no info
}
?>
</div>

and change it into this here:

Code:

<?php ob_start();     // start output buffer
show_menu(1,1,-1,true,'<li>[a][menu_title][/a]</li>','','','','','');    // call menu
$foo=ob_get_contents();    // put outputbuffer in $foo
ob_end_clean();             // clear outputbuffer
if ($foo<>"") {  // some code to execute cause there is some block
  echo '<div id="wrapper-menu-page">';
  echo '<div id="menu-page">';
  echo '<h3>Menu</h3>'; 
  echo '<ul>';
  echo $foo; 
  echo '</ul>';                              // show the block (as saved in $foo)
  echo '</div>';
  echo '</div>';
    } else { // some code for no info
}
?>

It should get rid of that "DIV". Note, that I put the opening DIV into the Output (echo lines).

cheers

Klaus

[styzer]

Hey Klaus, thanks for this...

The changes should be done in the index.php file of the template I'm using. I'm saying this because someone else may also wonder like I did...

However, including this wrapper is not helping, even if I delete the first mention, or include both.

Notice that in IE, you can see a tab with nothing on it at the top of the content area. I think that could be my problem. But how do I take it off?

andre

[kweitzel]

That's where I changed the code for ... I didn't get to see any other issues in IE6

cheers

Klaus

[styzer]

Hi Klaus,

well, I'm still stuck here. I wrote the company who provided that template and see what they say... will let you know what I find out...

Regards,

andre

[styzer]

I FOUND A SOLUTION!!! 

Looking through the CSS file (style.css) of my particular template, I saw this things which has added to the code:

overflow: hidden; /* no idea why this works, but it fixes a FF problem */

So I figured, why not try it on other entries? and this is what fixes this strange compatibility problem. I inserted the code into :

#wrapper-menu-top, #header, #wrapper-content, #wrapper-footer

as follows (I added a small comment like the original code...) :

/* Set the page width */
#wrapper-menu-top, #header, #wrapper-content, #wrapper-footer {
   width: 85%;
   margin: 0 auto;
   text-align: left;
   overflow: hidden; /* no idea why this works, but it fixes a IE problem */
}

Thought I'd share the discovery...   Now my site looks identical both in FF and IE. If anyone is using other browsers let me know if it shows proper.

OTHER PROBLEMS : THE LITTLE PIECE OF TAB STILL SHOWS... only renaming the menu.png file masks it.

The space between lines of text was too wide: the CSS code for line-height had a value of : 180%;

Changing this to 100% fixed it.

Finally, I'd like to know how to get rid of the "intro" title on the pages...

andre

[ruebenwurzel]

Hello,

look for a similar line in the index.php of your template and delete it or replace it with whatever you want:

Code:

<h1><?php page_title('', '[WEBSITE_TITLE]'); ?></h1>

Matthias

[styzer]

HI Matthias,

This would eliminate the whole header in fact. What I needed was to delete this one:

<h2><?php page_title('','[PAGE_TITLE]'); ?></h2>

I still have a space gap in IE between the header and the top of the content, but we're getting closer...

andre

[ruebenwurzel]

Hello,

I still have a space gap in IE between the header and the top of the content, but we're getting closer...

With the tip above you only deleted the in this area is something displayed. To minimize or delete this area you have again to change the index.php and/or the css.

Pleas don't understand me wrong, we ar willing to help everyone with issues, but changing an template to the wishes of the users is something different. I recommand to learn a little bit html and css styling. 

The code you have to look for in the index.php is:

Code:

<div id="wrapper-header">
<div id="header">
<div id="wrapper-header2">
<div id="wrapper-header3">
<h1></h1>
</div>
</div>
</div>
</div>

and the related css is:

#wrapper-header {
   background: transparent url('images/bg.png') top center repeat-x;
}

#header {
   background: #2b1517 url('images/topbanner2.jpg') no-repeat center top;
}

#wrapper-header2 {
   background: transparent url('images/bg02-tan-left.png') top left no-repeat;
}

#wrapper-header3 {
   background: transparent url('images/bg02-tan-right.png') top right no-repeat;
   overflow: hidden; /* no idea why this works, but it fixes an IE problem */
}

#header h1 {
   margin: 0 20px;
   padding: 0px;
   height: 192px;
   line-height: 3em;
   color: #ccc;
   font-size: 100%;
}

As you seems to not need the h1 part, why simply delete it in index.php and css?

Matthias

[styzer]

Hi Matthias,

Could you rephrase this: "With the tip above you only deleted the in this area is something displayed." I don't quite understand what you are saying. Maybe try in French?

andre

[ruebenwurzel]

Hello,

better i don't try it in french, think you will understand much more less then my bad english 

Could you rephrase this: "With the tip above you only deleted the in this area is something displayed."

Every template is designed in cells or boxes wich are styled in the css file. What i try to say is, if you only delete the content of a cell or a box you don't delete the cell or box itself. If this cell or box has a height defined in the css, the heigth stays in the layout, nor matter if there is a content in it or not.

Hope this is clearer now

Matthias

[styzer]

Very clear, indeed!

Thanks again for all the help and support so far, I'm playing with the CSS and PHP...

andre
http://www.petitsgroupes.org/wb

[styzer]

The space gap is controlled by this line of CSS code:

#wrapper-menu-page {
   float: right;
   width:180px;
   margin: 0px 0px 0em 0em;

The "margin" part needed to be zeroed...

As for the little piece of tab showing in IE, I simply deleted the line:

background: transparent url('images/menu.png') no-repeat;

Off to more adventures with WB... 

andre