schwim
January 29, 2010, 6:02am
1
Hi there everyone,
I’ve got a gallery install that I altered the template of to utilize the main site’s tabled theme as a wrapper. In Firefox and Opera the gallery is staying inside the intended cell, but in IE8 and IE7, the page is stretching and blowing apart the table.
I was wondering if someone could take a look at the page with web dev or similar and tell me what I might need to change or add in theme.css to force the page to stay inside the boundaries on IE?
The gallery page can be found here .
Thanks in advance for any help you can provide,
Hi, did you manage to fix it? I’m viewing in IE7/8/FF and all 3 browsers are identical?
schwim
January 29, 2010, 4:50pm
3
hi there,
Could you try it again? I was trying something else that worked even more poorly than my first attempt
Of note, I last tried assigning a padding to the container div that holds the gallery output(you can see it in the output with 100px on left and right). On Firefox it squeezed the gallery and on IE, it squeezed the gallery, but blew apart the container just as much as it had without the padding.
I’m totally stumped on this one.
I took my container (sans gallery) and it passes the validator as transitional, so I don’t think I’m dealing with an open container of any kind(I also use the template on other areas of the site without issue).
thanks,
Hi, the only problem in that page is that IE is just expanding each <td> (even ones you set a width to) to expand.
Unless you want a complete recode I’d recommend going back to the other fix you had.
schwim
January 29, 2010, 6:45pm
5
Hi there Ryan,
The problem is that I don’t have another fix.
Without the gallery code(just the template), it looks fine in IE. Also, this very same template works fine wrapping around phpBB3(found here ).
In my mind, this seems to tell me that there’s something in the gallery css that is causing the issue, would this be right?
I’ve used the same type of wrap in other places, so I think I’m dealing with an element that isn’t playing nice.
thanks,
You could place table-layout:fixed on the outer most table here (inline styles to demonstrate
<body class="gallery">
<div id="gallery" class="opera">
<div align='center'>
<table width='90%' border='0' cellpadding='0' cellspacing='0' style="table-layout:fixed;">
Then to fix whitespace under the images you could set the vertical alignment to bottom to get rid of it
img{vertical-align:bottom;}
schwim
January 29, 2010, 7:28pm
8
Hi there Ryan,
I must be misunderstanding you. I tried adding nothing but the table-width: fixed and ended up with what’s in the attachment. Basically, it destroyed the table surrounding the gallery code and the gallery code went out to 95% of the page.
Did I implement it incorrectly?
thanks,
You must have since I made a local copy to test it before I posted
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en-US" xmlns="http://www.w3.org/1999/xhtml">
<head>
<base href="http://www.husaberg.org/gallery/main.php" /><!--
<link rel="stylesheet" type="text/css" href="main.php?g2_view=imageframe.CSS&g2_frames=none"/>
<link rel="stylesheet" type="text/css" href="modules/core/data/gallery.css"/>
<link rel="stylesheet" type="text/css" href="modules/icons/iconpacks/silk/icons.css"/>-->
<link rel="alternate" type="application/rss+xml" title="Photo RSS" href="main.php?g2_view=slideshow.SlideshowMediaRss&g2_itemId=7"/>
<script type="text/javascript" src="http://www.husaberg.org/gallery/main.php?g2_view=core.CombinedJavascript&g2_key=1f3a86aa6c3e732ce434cbc51ebf93d2"></script>
<script type="text/javascript" src="main.php?g2_view=slideshow.DownloadPicLens&g2_file=js&g2_v=1.3.1.14221"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Unofficial Husaberg - Gallery</title>
<link rel="stylesheet" type="text/css" href="themes/matrix/local/theme.css"/>
<link rel="stylesheet" href="/template/style.css" type="text/css" />
<style>
img{vertical-align:bottom;}
</style>
</head>
<body class="gallery">
<div id="gallery" class="opera">
<div align='center'>
<table width='90%' border='0' cellpadding='0' cellspacing='0' style="table-layout:fixed;">
<tr>
<td width='37'><img src='/template/images/header_t_l.png' alt='' title='' /></td>
<td style="background-image: url(/template/images/header_t.png)">
<table width='100%' border='0' cellpadding='0' cellspacing='0'>
<tr>
<td width='10'>
<img src='/template/images/blank.gif' height='115' width='1' alt='' title='' />
</td>
<td width='300' valign='bottom'>
<img width='300' height='100' src='/template/images/logo.png' alt='Unofficial Husaberg' title='Unofficial Husaberg' />
</td>
<td width='30'>
</td>
<td align='center' valign='middle'>
<!--Advertising-->
</td>
<td width='10'>
</td>
</tr>
</table>
</td>
<td width='37'><img src='/template/images/header_t_r.png' alt='' title='' /></td>
</tr>
<tr>
<td><img src='/template/images/header_b_l.png' alt='' title='' /></td>
<td style="background-image: url(/template/images/header_b.png)">
<div align='center'>
<table cellpadding="0" cellspacing="0" class="pill">
<tr>
<td class="pill_l"> </td>
<td class="pill_m">
<div id="pillmenu">
<ul id="mainlevel-nav"><li><a href="/index.php" class="mainlevel-nav" >Home</a></li><li><a href="/forum" class="mainlevel-nav" >Forum</a></li></ul>
</div>
</td>
<td class="pill_r"> </td>
</tr>
</table>
</div>
</td>
<td><img src='/template/images/header_b_r.png' alt='' title='' /></td>
</tr>
<tr>
<td colspan='3'>
<div align='center'>
<table width='100%' border='0' cellpadding='0' cellspacing='0'>
<tr>
<td width='11' style="background-image: url(/template/images/shadow_l.png)"></td>
<td bgcolor='#f7f7f7'>
<div align='center'>
<table width='95%' border='0' cellpadding='0' cellspacing='0'>
<tr>
<td colspan='3'><img src='/template/images/spacer.png' height='25' width='1' alt='' title='' /></td>
</tr>
<tr>
<td width='13'><img src='/template/images/content_t_l.png' width='13' height='13' alt='' title='' /></td>
<td style="background-image: url(/template/images/content_t.png)"> </td>
<td width='13'><img src='/template/images/content_t_r.png' width='13' height='13' alt='' title='' /></td>
</tr>
<tr>
<td style="background-image: url(/template/images/content_l.png)" width='13'> </td>
<td bgcolor='#ffffff'>
<div align='left' style="padding-left:100px; padding-right:100px">
<div id="gsNavBar" class="gcBorder1">
<div class="gbSystemLinks">
<span class="block-core-SystemLink">
<a href="main.php?g2_view=core.UserAdmin&g2_subView=core.UserLogin&g2_return=%2Fgallery%2Fmain.php%3F">Login</a>
</span>
<span class="block-core-SystemLink">
<a href="main.php?g2_view=core.UserAdmin&g2_subView=register.UserSelfRegistration&g2_return=%2Fgallery%2Fmain.php%3F">Register</a>
</span>
</div>
<div class="gbBreadCrumb">
<div class="block-core-BreadCrumb">
<span class="BreadCrumb-1">
Gallery</span>
</div>
</div>
</div>
<table width="100%" cellspacing="0" cellpadding="0">
<tr valign="top">
<td id="gsSidebarCol">
<div id="gsSidebar" class="gcBorder1">
<div class="block-search-SearchBlock gbBlock">
<form id="search_SearchBlock" action="main.php" method="get" onsubmit="return search_SearchBlock_checkForm()">
<div>
<input type="hidden" name="g2_return" value="/gallery/main.php"/>
<input type="hidden" name="g2_formUrl" value="/gallery/main.php"/>
<input type="hidden" name="g2_authToken" value="fe3a70e44e34"/>
<input type="hidden" name="g2_view" value="search.SearchScan"/>
<input type="hidden" name="g2_form[formName]" value="search_SearchBlock"/>
<input type="text" id="searchCriteria" size="18"
name="g2_form[searchCriteria]"
value="Search the Gallery"
onfocus="search_SearchBlock_focus()"
onblur="search_SearchBlock_blur()"
class="textbox"/>
<input type="hidden" name="g2_form[useDefaultSettings]" value="1" />
</div>
<div>
<a href="main.php?g2_view=search.SearchScan&g2_form%5BuseDefaultSettings%5D=1&g2_return=%2Fgallery%2Fmain.php%3F"
class="gbAdminLink gbLink-search_SearchScan advanced">Advanced Search</a>
</div>
</form>
</div>
<div class="block-core-ItemLinks gbBlock">
<a href="main.php?g2_view=rss.SimpleRender&g2_itemId=7" class="gbAdminLink gbLink-rss_SimpleRender">RSS Feed for this Album</a>
</div>
<div class="block-imageblock-ImageBlock gbBlock">
<div class="one-image">
<h3> Random Image </h3>
<a href="v/Meets-and-Greets/AUS_FR08_preride/Force_Ride_07_006.jpg.html">
<img src="d/27841-2/Force_Ride_07_006.jpg" width="150" height="113" class="giThumbnail" alt="Orangeberg fires the weapon into action"/>
</a> <h4 class="giDescription">
Orangeberg fires the weapon into action
</h4>
<p class="giInfo">
<span class="summary">
Date: 05/05/2007
</span>
<span class="summary">
Views: 216
</span>
</p>
</div>
</div>
</div>
</td>
<td>
<script type="text/javascript">
// <![CDATA[
var el = document.getElementById("gsSidebarCol");
var text = el.innerText; // IE
if (!text) text = el.textContent; // Firefox
if (!text || !text.match(/\\S/)) el.style.display = 'none';
// ]]>
</script>
<div id="gsContent" class="gcBorder1">
<div class="gbBlock gcBackground1">
<table style="width: 100%">
<tr>
<td>
<h2> Gallery </h2>
<p class="giDescription">
This is the main page of your Gallery
</p>
</td>
<td style="width: 30%">
<div class="block-core-ItemInfo giInfo">
<div class="date summary">
Date: 01/28/2010
</div>
<div class="owner summary">
Owner: schwim
</div>
<div class="size summary">
Size: 2 items
(10020 items total)
</div>
</div>
</td>
</tr>
</table>
</div>
<div class="gbBlock">
<table id="gsThumbMatrix">
<tr valign="top">
<td class="giAlbumCell gcBackground1"
style="width: 33%">
<div>
<a href="v/Members/">
<img src="d/41-3/Members.jpg" width="150" height="113" id="IFid1" class="ImageFrame_none giThumbnail" alt="Members"/>
</a>
</div>
<p class="giTitle">
Album: Members
</p>
<div class="block-core-ItemInfo giInfo">
<div class="date summary">
Date: 12/01/2004
</div>
<div class="owner summary">
Owner: schwim
</div>
<div class="size summary">
Size: 299 items
(8588 items total)
</div>
<div class="viewCount summary">
Views: 23157
</div>
<div class="summary-newitems summary">
<span class="giUpdated">Updated</span>
</div>
</div>
</td>
<td class="giAlbumCell gcBackground1"
style="width: 33%">
<div>
<a href="v/Meets-and-Greets/">
<img src="d/27629-3/Meets-and-Greets.jpg" width="150" height="113" id="IFid2" class="ImageFrame_none giThumbnail" alt="Meets and Greets"/>
</a>
</div>
<p class="giTitle">
Album: Meets and Greets
</p>
<div class="block-core-ItemInfo giInfo">
<div class="date summary">
Date: 08/08/2005
</div>
<div class="owner summary">
Owner: schwim
</div>
<div class="size summary">
Size: 8 items
(1430 items total)
</div>
<div class="viewCount summary">
Views: 4076
</div>
<div class="summary-newitems summary">
<span class="giUpdated">Updated</span>
</div>
</div>
</td>
<td> </td>
</tr>
</table>
</div>
<div id="gsPages" class="gbBlock gcBackground1">
<div class="block-core-Pager">
Page:
<span>
1
</span>
</div>
</div>
</div>
</td>
</tr>
</table>
<div id="gsFooter">
<a href="http://gallery.sourceforge.net"><img src="images/gallery.gif" alt="Powered by Gallery v2.3" title="Powered by Gallery v2.3" style="border-style: none" width="80" height="15"/></a>
</div>
</div>
</td>
<td style="background-image: url(/template/images/content_r.png)" width='13'> </td>
</tr>
<tr>
<td width='13'><img src='/template/images/content_b_l.png' width='13' height='13' alt='' title='' /></td>
<td style="background-image: url(/template/images/content_b.png)"> </td>
<td width='13'><img src='/template/images/content_b_r.png' width='13' height='13' alt='' title='' /></td>
</tr>
</table>
<br />
</div>
</td>
<td width='11' style="background-image: url(/template/images/shadow_r.png)"></td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td width='37'><img src='/template/images/footer_b_l.png' alt='' title='' width='37' height='57' /></td>
<td style="background-image: url(/template/images/footer_b.png)">
</td>
<td width='37'><img src='/template/images/footer_b_r.png' alt='' title='' width='37' height='57' /></td>
</tr>
</table>
</div>
</div>
<script type="text/javascript">
// <![CDATA[
search_SearchBlock_init('Search the Gallery', 'Please enter a search term.', 'Searching in progress, please wait!');
// ]]>
</script>
</body>
</html>
Go near the top, I used <base href=“” /> to make every link/stylesheet etc based off your server, then I used the vertical-align:bottom for images, and then the table-layout:fixed to fix the issue.
schwim
January 29, 2010, 8:21pm
10
Hi there Ryan and thanks very much for your help. I had a heck of a time implementing the simple changes you suggested, resulting in blank pages. While trying to find out what I was doing wrong, it seems that the page began showing up correctly in IE. The odd thing is that I haven’t yet implemented the style change you listed. Is this still necessary?
Thanks for all your help thus far.
Well I don’t know why it randomly would fix, however I’d implimenet my code just to be on the safe side :). My code shouldn’t have been too hard to impliment, just the img{vertical-align:bottom;} to be added to your CSS file, and then just adding the table-layout:fixed…shoudl take 10 seconds lol
schwim
January 29, 2010, 8:39pm
12
I agree, however it took me less time to write the whole template than it did to implement your two lines…
Such are the limitations that are my mind.
thanks,
