firefox 3 messing up styles (FIXES HERE)

[jeronimo]

Hello all

Recently i've upgraded my firefox tot version 3

Now i see that FF is messing up the styles.

Before the upgrade the photo's on my photo page were centered, in FF 3 it is aligned to the left of the screen.

Also the guestbook page is not displayed corectly.

More people with the same problem?

[Pekka]

I've fixed comments layout problems in comments page: http://photography-on-the.net/gallery/comments.php?ee_lang=eng and in photo pages: http://photography-on-the.net/gallery/photo.php?photo=445&exhibition=1&ee_lang=eng&u=598032,15

There is still Firefox 3 misalignment problem in top right menus: http://photography-on-the.net/gallery/list.php?exhibition=16&ee_lang=eng but that is not a serious problem (like overlapping).

I have not tested these fixed in Opera or Safari, but they should look ok with these. Let me know if these help.

EE2 default styles have always had photos aligned to left.

Here's the comments and ratings fixes:

/templates/pages/ee_2_default/comments/embedded/default_XHTML_content.php

<?php
// multicolumn floating embedded comment template for EE 2.0 by Pekka Saarinen 10/2006

// REVISION 2 07/2008 by P.S.

$s_comment_columns = "5"; // maximum columns

if ($currentpage == "photo") { // alternative setting for photo page only
$s_comment_columns = "4";
}

$stored_s_comment_columns = $s_comment_columns;
$commentplatewidth = "100";
if ($s_comment_columns >= $comments_on_current_page) $s_comment_columns = $comments_on_current_page;
$columns = ceil($comments_on_current_page/$s_comment_columns);
$div = intval(100/$stored_s_comment_columns);
$commentswidth = 100/$s_comment_columns;
if ($currentpage == "comments") { // special case for comment page's last page only
if ($comments_on_current_page / $columns < $stored_s_comment_columns) {
$s_comment_columns = intval($comments_on_current_page / $columns);
}
}

$commentplatewidth = $s_comment_columns * $div;
$div = $commentswidth;

if ($comment_counter == 0) {
ob_start();
@include("./" . $comment_embedded_layout);
$ee_embedded_css .= ob_get_contents();
ob_end_clean();
print "<td valign=\"top\" style=\"width: {$div}%;\">";
} elseif ($comment_counter % $columns == 0) {
print "</td><td valign=\"top\" style=\"width: {$div}%;\">";
}

?>


<div class="ee_embedded_comment">

<?php if ($ee_showcomment_setting_photoinfo == "1") { ?>

<div class="ee_comment_headers">

<h3 class="ee_comment_header ee_css_header_small">
<?php print $comment_photo_name_html; ?>
</h3>

<br class="clear" />


<span class="ee_css_paragraph">
<?php print $comment_photo_owner_html; ?>
</span>

<br class="clear" />

<span class="ee_css_paragraph">
<?php print $comment_exhibition_name_html; ?>
</span>


</div>

<?php } // end if photoinfo on ?>

<?php if ($ee_showcomment_setting_thumb == "1") { ?>

<div class="ee_comment_photo_thumbnail">
<?php print $comment_thumbnail_square_html; ?>
</div>

<br class="clear" />

<?php } // end if thumbnail on ?>

<div class="ee_comment_output">


<p class="ee_comment_text ee_css_paragraph">
<?php print $comment_text_html; ?>
</p>

<br class="clear" />

<div class="ee_comment_ratings">
<?php print $comment_ratings_html; ?>
</div>




<div class="clear"></div>

<div class="ee_comment_writer_info ee_css_paragraph">
<p class="ee_css_paragraph">
<?php print $comment_writer_html; ?>

<?php if ($comment_writer_country_html != "") {
print ", " . $comment_writer_country_html;
}
?>
<br class="clear" />
<?php print $comment_date_html; ?>
<br class="clear" />
<?php print $comment_writer_homepage_html; ?>
</p>
</div>

<br class="clear" />

<div class="ee_comment_reply ee_css_paragraph">
<?php if ($comment_reply_html != "") {
print "<p class=\"ee_css_paragraph\">";
print $comment_reply_html;
print "</p>";
}
?>
</div>
</div>


</div>





/templates/pages/ee_2_default/comments/embedded/default/default_XHTML_css.php

<style type="text/css" media="screen"> <!--


.ee_embedded_comment_plate {
float: left;
position:relative;
width: <?php print $commentplatewidth; ?>%;
margin: -4px 0px 0px 0px;
padding: -4px 0px 0px 0px;
filter:alpha(opacity=90);
-moz-opacity:0.9;
opacity: 0.9;
}


.ee_embedded_comment {
float: left;
position:relative;
margin: 0px -15px 30px -5px;
padding: 10px 0px 7px 10px;
width: 100%;
}


.ee_comment_output {
float: left;
position:relative;
margin: 0px 0px 0px -0px;
padding: 5px 5px 0px 5px;
width: 90%;
}

.comment_photo_thumbnail {
float: left;
position:relative;
margin: 0px 10px 0px 0px;
padding: 0px 10px 0px 0px;
}


.ee_comment_photo_info {
float: left;
position:relative;
padding: 0px 15px 0px 0px;
}

.ee_comment_text {
float: left;
position:relative;
padding: 0px 10px 0px 0px;
}

.ee_comment_writer_info {
float: left;
position:relative;
padding: 5px 10px 0px 0px;
}

.ee_comment_reply {
float: left;
position:relative;
padding: 5px 10px 0px 0px;
}

.ee_comment_ratings {
float: left;
position:relative;
padding: 5px 20px 0px 0px;
}



.ee_comment_header {
float: left;
position:relative;
margin: 0px 0px 5px 0px;
padding: 0px 0px 0px 0px;
}

.ee_comment_headers {
margin: 0px 0px 10px 0px;
padding: 0px 0px 0px 0px;
}






--> </style>




/templates/pages/ee_2_default/comments/ratings/default_XHTML_css.php

<style type="text/css" media="screen"><!--

/* ee_css_rating_cell is one cell in each rating graph.
Any color definition overrides separate style colors */
.ee_css_rating_cell {
width: 5px;
height: 5px;
position: relative;
float: left;
padding: 0px;
margin: 0px 1px 0px 0px;
}

.ee_rating_label {
position: absolute;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
z-index: 100;
float: left;
}

.ee_rating_value {
position: relative;
float: right;
width: 60px;
margin: 0px 0px 0px 80px;
padding: 6px 0px 0px 0px;

}

.ee_rating_block {
position: relative;
float: left;
padding: 0px;
margin: 0px;
width: 100%;
}

.ee_nullsize {
font-size: 1px;
}

.ee_rating_item {
position: relative;
padding: 0px;
margin: 0px;
border-style: none;
border-width: 0px;
width: 100%;
white-space: nowrap;
height: 12px;
}

--></style>




/templates/pages/ee_2_default/comments/default_XHTML_content.php

<?php print "<?xml version=\"1.0\" encoding=\"{$charset_code_html}\"?>"; ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="imagetoolbar" content="no" />
<title><?php print $comments_title_html; ?></title>
<meta http-equiv="Content-Type" content="text/html; charset=<?php print $charset_code_html; ?>" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta name="description" content="<?php print $content_description_html; ?>" />
<meta name="keywords" content="<?php print $content_keywords_html; ?>" />
<meta name="generator" content="Exhibit Engine <?php print $version; ?>" />
<meta name="robots" content="index,follow" />


<link rel="stylesheet" type="text/css" media="screen,projection" href="./stylesheet.php?style_id=<?php print $style_id; ?>&amp;currentpage=<?php print $currentpage; ?>" />

</head>

<body class="ee_css_background">




<?php




print $header_html;
@include("./templates/extra_components/vertical_shadow.php"); // shadow

if ($s_on == "0") {
print $s_off_message;
exit();
}

?>

<div class="exhibit_engine ee_css_background">

<div class="page_top">
<table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td>
<h1 class="comments_header ee_css_header_large">
<?php print $comments_title_html; ?>
</h1>


<div class="clear"></div>

<div>
<p class="subheader ee_css_paragraph">
<?php print $comments_info_html; ?>
<br class="clear" />
<?php print $comment_showall_text_html; ?>
</p>
</div>

</td><td>

<div class="commentlist_columns">
<div class="navigation ee_css_paragraph">
<div class="comments_sort form_input">
<div class="ee_css_capitalize">
<div class="comments_form_label ee_css_form_label">
*</div>
<?php print $comments_sort_html; ?>
</div>
</div>

<div class="clear"></div>

<div class="comments_perpage form_input">
<div class="ee_css_capitalize">
<div class="comments_form_label ee_css_form_label">
<?php print $comments_display_textlabel_html; ?>
*</div>
<?php print $comments_perpage_html; ?>
</div>
</div>

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


<div class="clear"><br /></div>

<div class="ee_comments_output">
<div class="comments_pageselector_back">
<div class="comments_pageselector">
<div class="comments_pageselector_previous">
<?php print $pageselector_previous_link_image_html; ?>
</div>
<div class="comments_pageselector_dropdown ee_capitalize">
<?php print $pageselector_form_start_html; ?>
<?php print $pageselector_dropdown_html; ?>
<?php print $pageselector_form_submit_html; ?>
<?php print $pageselector_form_end_html; ?>
</div>
<div class="comments_pageselector_next">
<?php print $pageselector_next_link_image_html; ?>
</div>
<div class="comments_pageselector_info ee_css_comments_pageselector_info">
<?php print $found_items_and_perpage_html; ?>
</div>
</div>
</div>





<div class="ee_embedded_comment_plate">
<table border="0" cellpadding="0"><tr>
<?php print $comments_html; ?>
</td></tr></table>
</div>


<br class="clear" />


<div class="languagemenu ee_css_paragraph">
<?php print $languagemenu_html; ?>
</div>


<div class="form_label ee_css_form_label login ee_css_paragraph">
<?php
print $login_html;
print $logged_info_html;
if ($logout_link_html != "") print " | " . $logout_link_html;
?>
</div>

<br class="clear" /><br class="clear" /><br class="clear" /><br class="clear" />

</div>




</div>

<div class="navigationfooterholder">
<div class="navigationfooter">
<?php
print $footer_html;
?>
</div>
</div>


</body>
</html>




/templates/pages/ee_2_default_UDM/comments/default_XHTML_content.php

<?php print "<?xml version=\"1.0\" encoding=\"{$charset_code_html}\"?>"; ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="imagetoolbar" content="no" />
<title><?php print $comments_title_html; ?></title>
<meta http-equiv="Content-Type" content="text/html; charset=<?php print $charset_code_html; ?>" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta name="description" content="<?php print $content_description_html; ?>" />
<meta name="keywords" content="<?php print $content_keywords_html; ?>" />
<meta name="generator" content="Exhibit Engine <?php print $version; ?>" />
<meta name="robots" content="index,follow" />


<link rel="stylesheet" type="text/css" media="screen,projection" href="./stylesheet.php?style_id=<?php print $style_id; ?>&amp;currentpage=<?php print $currentpage; ?>" />

<!-- ULTIMATE DROP DOWN MENU Version 4.5 by Brothercake -->
<!-- http://www.udm4.com/ -->
<link rel="stylesheet" type="text/css" media="screen,projection" href="udm/udm-style.php" />

</head>

<body class="ee_css_background">




<?php




print $header_html;
@include("./templates/extra_components/vertical_shadow.php"); // shadow

if ($s_on == "0") {
print $s_off_message;
exit();
}

?>

<div class="exhibit_engine ee_css_background">

<div class="page_top">
<table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td>
<h1 class="comments_header ee_css_header_large">
<?php print $comments_title_html; ?>
</h1>


<div class="clear"></div>

<div>
<p class="subheader ee_css_paragraph">
<?php print $comments_info_html; ?>
<br class="clear" />
<?php print $comment_showall_text_html; ?>
</p>
</div>

</td><td>

<div class="commentlist_columns">
<div class="navigation ee_css_paragraph">
<div class="comments_sort form_input">
<div class="ee_css_capitalize">
<div class="comments_form_label ee_css_form_label">
*</div>
<?php print $comments_sort_html; ?>
</div>
</div>

<div class="clear"></div>

<div class="comments_perpage form_input">
<div class="ee_css_capitalize">
<div class="comments_form_label ee_css_form_label">
<?php print $comments_display_textlabel_html; ?>
*</div>
<?php print $comments_perpage_html; ?>
</div>
</div>

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


<div class="clear"><br /></div>

<div class="ee_comments_output">
<div class="comments_pageselector_back">
<div class="comments_pageselector">
<div class="comments_pageselector_previous">
<?php print $pageselector_previous_link_image_html; ?>
</div>
<div class="comments_pageselector_dropdown ee_capitalize">
<?php print $pageselector_form_start_html; ?>
<?php print $pageselector_dropdown_html; ?>
<?php print $pageselector_form_submit_html; ?>
<?php print $pageselector_form_end_html; ?>
</div>
<div class="comments_pageselector_next">
<?php print $pageselector_next_link_image_html; ?>
</div>
<div class="comments_pageselector_info ee_css_comments_pageselector_info">
<?php print $found_items_and_perpage_html; ?>
</div>
</div>
</div>





<div class="ee_embedded_comment_plate">
<table border="0" cellpadding="0"><tr>
<?php print $comments_html; ?>
</td></tr></table>
</div>


<br class="clear" />


<div class="languagemenu ee_css_paragraph">
<?php print $languagemenu_html; ?>
</div>


<div class="form_label ee_css_form_label login ee_css_paragraph">
<?php
print $login_html;
print $logged_info_html;
if ($logout_link_html != "") print " | " . $logout_link_html;
?>
</div>

<br class="clear" /><br class="clear" /><br class="clear" /><br class="clear" />

</div>




</div>

<div class="navigationfooterholder">
<div class="navigationfooter">
<?php
print $footer_html;
?>
</div>
</div>

<!-- PHP generated menu script [any modules or extensions must come AFTER this] -->
<script type="text/javascript" src="udm/udm-dom.php"></script>

</body>
</html>

[Pekka]

I've fixed now also the top right menu alignment problem, see updated look in http://photography-on-the.net/gallery/list.php

Here are all the changed templates (including ratings fix) zipped from respective folders (UDM or not).

287871
287872

Tested only with Firefox 3 and IE 7.

Now, if someone would tell me how to make IE dropdowns look like Firefox's I'd be very happy.... :)

[malum]

Thanks for the fixes :)

[MMCM]

Im currently trying to update my gallery, and I'm having the following (minor?) issues:
- Downloading the updates using wget directly on the server does not work, because I'm required to login to the website.
- Files use CR-LF (DOS/Windows) style line delimiters, maniupulating those on the server (edit, diff, patch, ...) requires dos2unix first
- since I already made some modifications to the default style, it's hard to find what changes are necessary. Publishing changes as patch files (a common way outside the Microsoft-Windows-Universe) would help.
- those fixes contain at least one bug, already fixed by other persons (the use of the ASCII 240 instead of "&nbsp;", which causes problems with UTF-8 )
- to be continued...

So here's my suggestion (which will help and simplify development too, once EE is open source):
Setup a repository on the server (subversion, git, ...) and GUI for it (trac, ...).

http://en.wikipedia.org/wiki/Subversion_(software)
http://en.wikipedia.org/wiki/Git_(software)
http://en.wikipedia.org/wiki/Trac

This will help installing EE (simply check out from the server) and update to the latest code (simply update from the server). With the GUI, you can see what files changed in a given revision of EE, report bug, submit patches, and many things more.
And: theres only one place, where you get your updates from, no more searching the forum and figuring out, what's the latest patch, and which one replaces another :-(

best regards
Martin