[SOLVED]Conflicts between CSS and Javascript after customizing Slider Theme

AlainC.

Joined: 2006-11-13
Posts: 50

Posted: Mon, 2007-04-02 21:06

Hello,

After trying for guite some times now, I'm completely lost...

I'd customized Slider theme you'll find the edited theme.tpl and theme.css files at the end of this post..
The gallery pages are displayed fine if I use Safari, Firefox, Netscape or Opera, but in IE it's another story...
The big pictures are comppletly on the right side of the page and cropped...
You can see there: http://www.onzeroadagain.org/gallery2/main.php?g2_itemId=123

I've tried several options in the theme.css and theme.tpl files but none of them are working, so it seems that there are some contradictions between CSS and Javascript and that I've to do some editing in the javascript file, but I'm really not sure, and I don't know where I have to work, I'm clueless actually with this language

So the theme.tpl:

Quote:

{*
* $Revision: 1.7 $
* If you want to customize this file, do not edit it directly since future upgrades
* may overwrite it. Instead, copy it into a new directory called "local" and edit that
* version. Gallery will look for that file first and use it if it exists.
*}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
{* Let Gallery print out anything it wants to put into the <head> element *}
{g->head}

{* If Gallery doesn't provide a header, we use the album/photo title (or filename) *}
{if empty($head.title)}
<title>{$theme.item.title|default:$theme.item.pathComponent|markup:strip}</title>
{/if}

{* Include this theme's style sheet *}
<link rel="stylesheet" type="text/css" href="{g->theme url="theme.css"}"/>
{if $theme.pageType == 'album' || $theme.pageType == 'photo'}{literal}
<style type="text/css">
body.gallery { overflow: hidden; }
#gallery { margin: 0; padding: 0; border-width: 0; } /*For IE*/
</style>
<script type="text/javascript">

</script>
{/literal}{/if}
</head>

<body class="gallery">
<--Here starts my Editing-->
<div id="header">
<h1 class="Style1">Carnets de Route</h1>

</div>
<div id="gauche">

<dl id="menu">
<dt><a href="http://www.onzeroadagain.org/accueil.html" target="_parent">Accueil</a></dt>
<dt><a href="http://www.onzeroadagain.org/portfolio.html" target="_parent">Port Folio</a></dt>
<dt></dt>
<dt>CARNETS DE ROUTE</dt>

<dt onclick="javascript:montre('smenu1');"><a>Paysages</a></dt>
<dd id="smenu1">
<ul>
<li><a href="main.php?g2_itemId=990">Antarctique (Coul.)</a></li>
<li><a href="main.php?g2_itemId=127">Bryce Canyon (Coul.)</a></li>
<li><a href="main.php?g2_itemId=133">Bryce Canyon NB</a></li>
<li><a href="main.php?g2_itemId=123">Quebec</a></li>
<li><a href="main.php?g2_itemId=125">Mauricie NB</a></li>

</ul>
</dd>
<dt onclick="javascript:montre('smenu2');"><a>En Ville</a></dt>
<dd id="smenu2">
<ul>
<li><a href="main.php?g2_itemId=934">Alcatraz</a></li>
<li><a href="main.php?g2_itemId=137">Golden Gate</a></li>
<li><a href="main.php?g2_itemId=486">New York </a></li>
<li><a href="main.php?g2_itemId=135">Montréal/Québec</a></li>

</ul>
</dd>
<dt onclick="javascript:montre('smenu3');"><a>Spectacles</a></dt>
<dd id="smenu3">
<ul>
<li><a href="main.php?g2_itemId=129">Babylon circus</a></li>
<li><a href="main.php?g2_itemId=14">Biocide</a></li>
<li><a href="main.php?g2_itemId=143">Mystic Mötorcycle </a></li>
</ul>
</dd>
<dt onclick="javascript:montre('smenu4');"><a>Reportages</a></dt>
<dd id="smenu4">
<ul>
<li><a href="main.php?g2_itemId=131">W.C.C.</a></li>
<li><a href="main.php?g2_itemId=141">Vieilles Voitures </a></li>

</ul>
</dd>
<dt onclick="javascript:montre('smenu5');"><a>Portraits</a></dt>
<dd id="smenu5">
<ul>
<li><a href="main.php?g2_itemId=139">Tigrou </a></li>

</ul>
</dd>

<dt></dt>
<dt><a href="http://www.onzeroadagain.org/matos.html" target="_parent">Matériel et
films</a></dt>

<dt><a href="http://www.onzeroadagain.org/liens.html" target="_parent">Liens</a></dt>
<dt><a href="http://www.onzeroadagain.org/mecontacter.php" target="_blank">Me Contacter</a></dt>
</dl>

</div>
<--End of My Editing-->
<div {g->mainDivAttributes}>
{if $theme.pageType == 'album' || $theme.pageType == 'photo'}
{g->theme include="slider.tpl"}
{elseif $theme.useFullScreen}
{include file="gallery:`$theme.moduleTemplate`" l10Domain=$theme.moduleL10Domain}
{else}
<div id="gsHeader">
<img src="{g->url href="images/galleryLogo_sm.gif"}" width="107" height="48" alt=""/>
</div>

<div id="gsNavBar" class="gcBorder1">
<div class="gbSystemLinks">
{g->block type="core.SystemLinks"
order="core.SiteAdmin core.YourAccount core.Login core.Logout"
othersAt=4}
</div>
<div class="gbBreadCrumb">
{g->block type="core.BreadCrumb"}
</div>
</div>

{if $theme.pageType == 'admin'}
{include file="gallery:`$theme.adminTemplate`" l10Domain=$theme.adminL10Domain}
{elseif $theme.pageType == 'progressbar'}
{g->theme include="progressbar.tpl"}
{elseif $theme.pageType == 'module'}
<table width="100%" cellspacing="0" cellpadding="0">
<tr valign="top">
<td id="gsSidebarCol">
<div id="gsSidebar" class="gcBorder1">
{* Show the sidebar blocks chosen for this theme *}
{foreach from=$theme.params.sidebarBlocks item=block}
{g->block type=$block.0 params=$block.1 class="gbBlock"}
{/foreach}
{g->block type="core.NavigationLinks" class="gbBlock"}
</div>
</td>
<td>
{include file="gallery:`$theme.moduleTemplate`" l10Domain=$theme.moduleL10Domain}
</td>
</tr>
</table>
{/if}

<div id="gsFooter">
{g->logoButton type="validation"}
{g->logoButton type="gallery2"}
{g->logoButton type="gallery2-version"}
{g->logoButton type="donate"}
</div>
{/if}
</div>

{g->trailer}
{g->debug}
</body>
</html>

And the them.css file

Quote:

/****************************
* Slider theme for Gallery2
* @author Alan Harder <alan.harder@sun.com>
* $Revision: 1.16 $ $Date: 2005/08/18 17:38:51 $
*/
body {
margin : 0;
padding : 0;
background : black;
color : white;
}

div#imagearea {
position: absolute;
left: 350px; top: 80px;
right: 0;
bottom: 40px;
overflow: hidden;
text-align: center;
}
div#imagearea img {
display: block;
margin: auto;
}
div#header h1 {
text-align: center;
color: white;
font-size:45px;
}

#gauche {
position : absolute;
top : 100px;
}
#menu {
position : absolute;
top : 20px;
left : 0;
}
#menu {
width : 230px;
}
#menu dt {
cursor : pointer;
margin : 2px 0;
height : 20px;
line-height : 20px;
text-align : center;
font-size : 20px;
border : 1px solid black;
color: white;
background : black;
}
#menu dd {
border : 1px solid black;
}
#menu li {
text-align : right;
}
#menu li a, #menu dt a {
color : white;
text-decoration : none;
display : block;
border : 0 none;
height : 100%;
}
div#image img {
border: 2px solid #ffffff;
padding: 3px;
}

div#titlebar {
position: absolute;
left: 350px; bottom: 0;
right: 25px;
min-height: 19px;
text-align: center;
border-top-width: 1px;
}
div#tools_left { float: left; }
div#tools_left img { margin-right: 1px; display: none; }
div#tools_right { float: right; }
div#tools_right img { margin-left: 1px; display: none; }

div#thumbs {
overflow: auto;
white-space: nowrap;

}
div#thumbs img{
border: 1px solid #ffffff;
padding: 2px;
}

div.sliderHoriz {
width: 100%;
height: auto;
clear: both;
border-top-width: 1px;
}
div.sliderHoriz img {

display: inline;
vertical-align: middle;
margin: 5px 3px;

}
div.sliderVert {
position: absolute;
left: 0; top: 0;
width: auto;
height: 100%;
text-align: center;
border-right-width: 1px;
}
div.sliderVert img {
display: block;
margin: 2px auto;
}

div#options {
display: none;
position: absolute;
left: 0; top: 0;
overflow: auto;
z-index: 1;
border-width: 2px;
border-style: ridge;
background-color: inherit;
background-color: expression(parentElement.currentStyle.backgroundColor);
}
div#options #gsSidebar {
border-right-width: 0;
}
#gsSidebar .block-core-SystemLink {
display: block;
}

/* ********************************************************************************
* Building blocks
* h2, h3, p, etc Standard html tags
* div.gbBlock Sidebar or content section with style for contained lists
* ul.gbBreadCrumb List of links/path elements
* table.gbDataTable Table for data/form elements with styles for shading rows
*/

#gallery h2, #gallery h3, #gallery h4, #gallery form {
margin: 0;
padding: 0;
}

#gallery p {
margin: 0.6em 0;
padding: 0;
}

.gbBlock {
padding: 0.7em;
border-width: 0 0 1px 0;
border-style: inherit;
border-color: inherit;
/* IE can't inherit these */
border-style: expression(parentElement.currentStyle.borderStyle);
border-color: expression(parentElement.currentStyle.borderColor);
}

.gbBlock ul {
margin: 0;
padding: 0;
list-style-type: none;
}

.gbBlock ul ul {
margin: 0 0 0.5em 1.0em;
}

.gbBlock li {
padding: 6px 0 0 0;
}

#gallery .gbBlock h3 {
margin-bottom: 0.5em;
}

#gallery .gbBlock h4 {
margin-top: 0.5em;
}

#gsNavBar div.gbBreadCrumb {
margin: 0;
padding: 4px 8px;
}

table.gbDataTable {
padding-bottom: 4px;
}

table.gbDataTable th, table.gbDataTable td {
padding: 4px;
}

.giBlockToggle {
padding: 0 0.4em 0.1em;
}
.giBlockToggle:hover {
cursor: pointer;
}

.gbMarkupBar {
margin: 4px 0;
}

#gallery .gbMarkupBar input {
margin: 0;
padding: 0;
}

/* ********************************************************************************
* Sections
* body.gallery Page body in G2 standalone (doesn't apply to embedded)
* #gallery Page container
* #gsNavBar Top bar with breadcrumb and other links
* #gsSidebar Sidebar
* #gsContent Main content
*/

body.gallery {
margin: 0;
padding: 0;
}

#gallery {
padding: 8px;
}
#gallery.rtl {
direction: rtl;
}

#gsNavBar {
border-top-width: 1px;
border-bottom-width: 1px;
}

#gsNavBar div.gbSystemLinks {
padding: 4px 6px;
}

#gsNavBar div.gbSystemLinks span {
padding: 0 4px;
}

#gsSidebar {
border-right-width: 1px;
width: 175px;
overflow: hidden;
}
#gsSidebarCol {
width: 1%; /* Expand to fit content ("0" bad4 firefox, "1px" bad4 opera) */
}

td.giAlbumCell, td.giItemCell {
padding: 1em;
text-align: center;
}

#gallery td.giAlbumCell select, #gallery td.giItemCell select {
margin-top: 0.8em;
}

/* So imageframed thumbs can be centered */
td.giAlbumCell table, td.giItemCell table {
margin: auto;
}

#gsPages span {
padding: 0 0.3em;
}

#gallery #gsSidebar ul {
font-size: 1em;
}

/* ********************************************************************************
* Matrix Theme for Gallery 2
* by Ross A. Reyman, Jon Huang, and Chad Kieffer
* updated by Alan Harder
*/

/* ********************************************************************************
* Building blocks
* #gallery Default font/color settings
* .gcBackground1,2.. Palette of backgrounds
* .gcBorder1,2.. Palette of borders
* a, h2, h3, etc Standard html tags
* .giTitle, .giSubtitle, .giDescription, .giInfo, .giSuccess, .giWarning, .giError
* Palette of text styles
* div.gbBreadCrumb List of links/path elements
* table.gbDataTable Table for data/form elements with styles for shading rows
* div.gbTabBar UI component for selectable tabs
* .autoComplete* Styles for autoComplete popup lists
*/

#gallery {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 62.5%;
color: white;
background-color: black;
}
body.gallery {
background-color: black;
}

.gcBackground1 {
background-color: black;
}

.gcBackground2 {
background-color: black;
}

.gcBorder1 {
border: 0 solid #ccc;
}

.gcBorder2 {
border: 0 solid #888;
}

#gallery a {
font-weight: bold;
text-decoration: none;
color: #6b8cb7;
}
#gallery a:hover {
text-decoration: underline;
color: #f4560f;
}
#gallery a:active {
text-decoration: none;
color: #f9c190;
}

#gallery img {
border-width: 0;
}

#gallery h2, #gallery h3, #gallery h4 {
font-family: "Trebuchet MS", Arial, Verdana, Helvetica, sans-serif;
}

#gallery input:focus, #gallery textarea:focus {
background-color: #ffc;
color: green;
}

#gallery input.inputTypeSubmit, #gallery input.inputTypeButton { /* No input[type=submit] in IE */
color: #green;
background-color: #eee;
border-width: 2px;
border-style: solid;
border-color: #e7e7e7 #666 #666 #e7e7e7;
}

#gallery select {
font-size: 1em;
}

.giTitle, #gallery h2, #gallery h3, #gallery h4 {
font-size: 1.3em;
font-weight: bold;
}

#gallery pre, #gallery tt {
font-family: Courier New;
font-size: 1.2em;
}

.giSubtitle {
font-size: 0.9em;
font-weight: normal;
vertical-align: text-bottom;
}

.giDescription {
font-size: 1.1em;
line-height: 1.4em;
}

.giInfo {
font-size: 0.9em;
color: #888;
}

.giInfo span.summary {
display: block;
}

.giSuccess, .giWarning, .giError {
font-weight: bold;
}

.giSuccess { color: #5c0; }
.giWarning { color: #c50; }
.giError { color: #a44; }

.giNew, .giUpdated {
border-width: 2px;
border-style: ridge;
padding: 0 3px;
line-height: 1.9em;
}

#gsNavBar div.gbBreadCrumb {
font-size: 1.1em;
font-weight: bold;
}

#gsNavBar div.gbBreadCrumb a, #gsNavBar div.gbBreadCrumb span {
padding: 0 0 0 14px;
background: url('../matrix/images/icon_path_separator.gif') no-repeat left;
}

#gsNavBar div.gbBreadCrumb a.BreadCrumb-1 { /* no :first-child in IE */
padding-left: 0;
background-image: none;
white-space: nowrap;
}
#gallery.IE div.gbBreadCrumb span {
display: inline-block; /* IE loses padding-left on wrapped inline nowrap element */
padding-right: 4px; /* IE has less space at right of each span */
}

#gsNavBar div.gbBreadCrumb span.BreadCrumb-1 { /* no :first-child in IE */
padding-left: 0;
background-image: none;
}

#gsNavBar div.gbSystemLinks {
float: right;
}

table.gbDataTable th {
text-align: left;
background-color: #e7e7e7;
}

.gbEven {
background-color: grey;
}

.gbOdd {
background-color: grey;
}

div.gbTabBar {
font-size: 0.9em;
font-weight: bold;
margin: 0.8em 0 0;
padding: 6px;
background: url('../matrix/images/tab_bg.gif') repeat-x bottom;
white-space: nowrap;
}

div.gbTabBar span.o {
padding: 6px 0 5px 8px;
background: url('../matrix/images/tab_left.jpg') no-repeat left top;
}
#gallery.IE div.gbTabBar span.o {
display: inline-block; /* IE loses padding-left on wrapped inline nowrap element */
margin-bottom: 1px; /* ..and then adds padding differently with inline-block.. */
}
/* IE may clip off the right end of a long set of tabs, so allow IE to wrap them */
#gallery.IE div.gbTabBar { padding-bottom: 0; white-space: normal; }
#gallery.IE div.gbTabBar span.giSelected { margin-bottom: 0; }

#gallery div.gbTabBar span span {
padding: 6px 12px 5px 4px;
background: url('../matrix/images/tab_right.jpg') no-repeat right top;
}

#gallery div.gbTabBar a {
color: #777;
text-decoration: none;
}

#gallery div.gbTabBar a:hover {
color: #333;
}

#gallery div.gbTabBar span.giSelected {
padding-bottom: 6px;
background-image: url('../matrix/images/tab_left_on.jpg');
}

#gallery div.gbTabBar span.giSelected span {
color: #333;
padding-bottom: 6px;
background-image: url('../matrix/images/tab_right_on.jpg');
}

.autoCompleteBackground {
border: 1px solid #ccc;
border-top-style: none;
margin: 0;
}

.autoCompleteHighlight {
text-decoration: underline;
}

.autoCompleteNotSelected {
background-color: #eee;
padding: 3px 4px 3px 17px;
}

.autoCompleteSelected {
background-color: #ffc;
padding: 3px 4px 3px 17px;
}

#gallery .gbMarkupBar input {
font-size: 1.1em;
}

#ProgressBar #progressDone {
background-color: #fd6704;
border: thin solid #ddd;
}

#ProgressBar #progressToGo {
background-color: #eee;
border: thin solid #ddd;
}

.giSearchHighlight {
font-weight: bold;
background-color: #ff6;
}

/* ********************************************************************************
* Sections
* #gallery Page container
* #gsNavBar Top bar with breadcrumb and other links
* #gsSidebar Sidebar
* #gsContent Main content
* #giFormUsername Form field for entering a username
* #giFormGroupname Form field for entering a group name
*/

#gsNavBar div {
margin-top: 0.1em; /* Align system links with breadcrumb */
font-weight: bold;
}

#gsSidebar div ul { /* no > in IE */
font-size: 1.1em;
font-weight: bold;
}
#gsSidebar div ul ul { font-size: 1.0em; }

#gsSidebar ul span {
color: #999;
}

#giFormUsername, .giFormUsername {
background: url('../matrix/images/userinfo.png') no-repeat 0 1px;
padding-left: 17px;
}

#giFormGroupname {
background: url('../matrix/images/groupinfo.png') no-repeat 0 1px;
padding-left: 17px;
}

#giFormPassword {
background: url('../matrix/images/key7-16-bw.gif') no-repeat 0 1px;
padding-left: 17px;
}

/* Opera ignores padding in form inputs; put icons on right side instead */
#gallery.opera #giFormUsername, #gallery.opera .giFormUsername,
#gallery.opera #giFormGroupname, #gallery.opera #giFormPassword {
background-position: right center;
}

div.block-search-SearchBlock a.advanced {
display: block;
padding: 3px;
}

div.block-core-ItemLinks {
margin: 3px 0;
}
div.block-core-ItemLinks a {
padding: 3px;
}
div#gsSidebar div.block-core-ItemLinks a {
display: block;
}

div#gsSidebar div.block-core-PeerList a {
display: block;
padding: 3px;
}

div#gsSidebar div.block-core-PeerList span {
font-weight: bold;
display: block;
padding: 3px;
}

div#gsSidebar div.block-core-PeerList span.current {
color: #0b6cff;
}

/* ***************************************************** */
/* Dynamic blocks */
/* ***************************************************** */

div.block-comment-ViewComments {
margin: 5px;
}

div.block-comment-ViewComments div.one-comment {
border: 1px solid #e7e7e7;
padding: 5px;
margin-bottom: 5px;
}

div.block-comment-ViewComments h3 {
}

div.block-comment-ViewComments span {
padding-right: 5px;
}

div.block-comment-ViewComments p.info {
font-style: italic;
text-align: right;
font-size: 0.95em;
}

div.block-core-GuestPreview {
float: right;
}
#gallery.rtl div.block-core-GuestPreview {
float: left;
}

span.block-core-SystemLink {
}

div.block-exif-ExifInfo {
margin: 5px;
}

span.bsw_ButtonDisabled {
color: #999;
}

span.bsw_ButtonEnabled {
color: #000;
cursor: pointer;
}

table.bsw_ParamTable {
width: 100%;
border: 1px solid #999;
border-collapse: collapse;
}

tr.bsw_ParamHeaderRow {
background-color: #EEE;
}

tr.bsw_ParamHeaderRow td {
font-weight: bold;
text-align: center;
border: 1px solid #999;
}

td.bsw_BlockCommands {
white-space: nowrap;
text-align: center;
}

Any help will be very appreciated
Thanks in advance
Alain

Gallery version = 2.1.2 noyau 1.1.0.2
PHP version = 4.4.4 cgi
Serveur Web = Apache
Base de données = mysql 5.0.24a-log, lock.system=flock
Boîtes à outils = ArchiveUpload, ImageMagick, Gd
Accélération = none, none
Système d'exploitation = Linux web203.start.ha.ovh.net 2.4.32-mutu #1 SMP Thu Feb 9 02:28:10 CET 2006 i686
Thème par défaut = classic
Langage = fr_FR
Navigateur Web = Mozilla/5.0 (Macintosh; U; Intel Mac OS X; fr; rv:1.8.1.2) Gecko/20070219 Firefox/2.0.0.2

floridave

Joined: 2003-12-22
Posts: 27300

Posted: Tue, 2007-04-03 01:02

You will have to experiment. Trying different combinations:

.gcBackground1 {
    background-color: black;
width: 700px;
}

.gcBackground2 {
    background-color: black;
width: 700px;
}
div#thumbs {
    overflow: auto;
    white-space: nowrap;
width: 700px;
	
}

div#imagearea {
    position: absolute;
left: 250px; top: 80px;
    right: 0;
    bottom: 40px;
    overflow: hidden;
    text-align: center;
}
div#titlebar {
    position: absolute;
left: 250px; bottom: 0;
    right: 25px;
    min-height: 19px;
    text-align: center;
    border-top-width: 1px;
}

another suggestion:
change the doctype <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Good luck

Dave
_____________________________________________
Blog & G2 || floridave - Gallery Team

AlainC.

Joined: 2006-11-13
Posts: 50

Posted: Tue, 2007-04-03 16:56

Hello Dave,
I've tryied your suggestion on the CSS, just put a bigger width (1000px), the site is looking like having passed through some crusher with 700px,
I'm waiting for news from a friend now, I don't have IE on my computer, Mac...
I'mm keep you updated anyway..
Thanks for your time
Alain

AlainC.

Joined: 2006-11-13
Posts: 50

Posted: Tue, 2007-04-03 17:31

Ok, changing the CSS, is not improving the situation, just making it more ugly with the other browsers..
I didn't understant about the Doctype, changing it, ok, but for what?

About this layup problem, I wonder if it's not coming from the slider.js file, but where to play???

Alain
PS I've edited only the french part of the site, so you can see the galleries with the "new" css..
here: http://www.onzeroadagain.org/gallery2/main.php?g2_itemId=125

floridave

Joined: 2003-12-22
Posts: 27300

Posted: Tue, 2007-04-03 19:46

looking at your source you have a bunch of unneeded code that IE might not like:

<select id="links_0">
</select>

..

<select id="links_1">
</select>
..
..

Have you tried to remove the left side navigation? or position it differently?

Dave
_____________________________________________
Blog & G2 || floridave - Gallery Team

floridave

Joined: 2003-12-22
Posts: 27300

Posted: Tue, 2007-04-03 19:54

Disabling JS seems to have fixed the issue.
The navigation JS you use could be the issue. Is the left navigation just the gallery? If so why not use the DHTML album select?

Dave
_____________________________________________
Blog & G2 || floridave - Gallery Team

AlainC.

Joined: 2006-11-13
Posts: 50

Posted: Tue, 2007-04-03 20:08

Euh, sorry, I'm lost there...
All theses unnedded code are generated by the slider theme itself, not part of my customization..
The only think I've done is adding the navigation menu, to browse throught the site, on the left side of the gallery, and the title...
And what's this dhtml album select?
I'd followed COR's tutorial, to tweaken the slider theme (http://codex.gallery2.org/Gallery2:How_I_integrated_the_slider_theme_into_my_website )
Alain

floridave

Joined: 2003-12-22
Posts: 27300

Posted: Tue, 2007-04-03 20:36

Does removing the navigation menu you added fix the issue?

Dave
_____________________________________________
Blog & G2 || floridave - Gallery Team

AlainC.

Joined: 2006-11-13
Posts: 50

Posted: Tue, 2007-04-03 21:13

Hi Dave,
Yes , it is working fine without the menu, and when I look how my gallery pages are displayed with IE, I have the feeling that IE tries to get a page width like: menu width + gallery pages width, instead of incorporating the menu in the page like the other browsers.

Don't know if I'm clear, maybe I can turn it this way: somehow IE "thinks" it has to display the slider theme on 100% of the page width but on my page it "found" the menu wich occupy let say 20% of the width and IE is making the addition 100%+20%=120% and it's not working...

It's maybe a completely stupid theory, but I'm a newbie in web design, so I try to understand...
Let me know...

Alain

PS: this is extracted from the slider.js file wich drives the slider theme, and I wonder if it might come from there (that's where I get my "theory")

Quote:

if (app_is_ie) {
image_area.style.width = title_div.style.width = '100%';
thumb_div.style.overflow = 'scroll';
document.body.parentNode.style.overflow = 'hidden';
document.onkeydown = app_onkeydown;
}

floridave

Joined: 2003-12-22
Posts: 27300

Posted: Wed, 2007-04-04 02:31

I don't have a extra sidebar to test so can only offer suggestions.

in the JS file find app_is_ie And give a smaller percentage or a absolute value.

Dave

_____________________________________________
Blog & G2 || floridave - Gallery Team

AlainC.

Joined: 2006-11-13
Posts: 50

Posted: Wed, 2007-04-04 10:00

Ok, I'll try, like I said in my previous post i had the suspition that the problem was coming from there, so there's only on way to know....
thanks for all your help
Alain

AlainC.

Joined: 2006-11-13
Posts: 50

Posted: Wed, 2007-04-04 13:25

Hey Dave,
Problem solved! Yo a bottle of rhum!!!

My theory was correct: the problem was laying there:

Quote:

f (app_is_ie) {
image_area.style.width = title_div.style.width = '100%';
thumb_div.style.overflow = 'scroll';
document.body.parentNode.style.overflow = 'hidden';
document.onkeydown = app_onkeydown;
}

As I thought... I put around 65% instead of 100 and now, in IE the gallery looks like pretty much as with the other browsers
Pfiuuu, lot of headhaches...
Thank you very much for your help and your time
heve a nice day
Alain
PS: how do I close the topic?

floridave

Joined: 2003-12-22
Posts: 27300

Posted: Wed, 2007-04-04 14:03

No need to close or you can edit the title of your first post [solved]
Glad you got it sorted, you did it all anyway.

Dave
_____________________________________________
Blog & G2 || floridave - Gallery Team

[SOLVED]Conflicts between CSS and Javascript after customizing Slider Theme

XUser login