Album list not centered in Firefox

markvicious · May 30, 2007, 12:36:51 AM

When I am logged in, the album list is centered and everything is fine. When I am logged out on Firefox, the table is to the left instead of centered. Everything is centered and fine when in IE though. I think the solution to this problem is using <center></center> instead of align= center... but I am not sure where to put this code.

Link: www.desertedhospitals.com/photos

Joachim Müller · May 30, 2007, 09:10:44 AM

Your markup contains an error: edit http://www.desertedhospitals.com/photos/themes/igames/template.html, find

Code Select

<center><div<div align="center"><img src="http://www.desertedhospitals.com/top.jpg" width="643" height="174" align="top" /></div>
<table width="488" height="33" border="0" align="center"></center

and replace with

Code Select

<div align="center"><img src="http://www.desertedhospitals.com/top.jpg" width="643" height="174" align="top" /></div>
<table width="488" height="33" border="0" align="center">

To align the coppermine content properly, assign the proper CSS styling to this section:

Code Select

<div id="GALLERY">
      {ADMIN_MENU}
      {GALLERY}
</div>

However, fix your markup first, it is invalid and will confuse browsers.

markvicious · May 30, 2007, 05:24:35 PM

I tried adding the CSS but couldn't get it to work. What am I supposed to be adding so it is centered?

Joachim Müller · May 30, 2007, 07:30:46 PM

You have assigned an ID for the div container, but you failed to give it any attributes in your stylesheet. What should happen in your opinion?

Either edit http://www.desertedhospitals.com/photos/themes/igames/style.css and add (in a new line) something like

Code Select

#GALLERY {
  text-align:center;
}

or edit http://www.desertedhospitals.com/photos/themes/igames/template.html and replace

Code Select

<div id="GALLERY">
      {ADMIN_MENU}
      {GALLERY}
</div>

with something like

Code Select

<div id="GALLERY" style="text-align:center;">
      {ADMIN_MENU}
      {GALLERY}
</div>

markvicious · May 30, 2007, 10:26:03 PM

Tried both, neither of them worked. :-\

Joachim Müller · May 31, 2007, 08:11:58 AM

*sigh*
Try wrapping your stuff into another container then that has a width of 100%. This is plain HTML/CSS, not rocket science.

markvicious · June 03, 2007, 11:23:45 PM

Quote from: GauGau on May 31, 2007, 08:11:58 AM
Try wrapping your stuff into another container then that has a width of 100%.

I don't know what that means.

Simple html or not, it isn't easy for people who aren't familiar with it. Especially for people who have never done CSS...

markvicious · June 16, 2007, 02:52:41 AM

is this still fixable? I'd appreciate anyone's help. Thanks

Nibbler · June 16, 2007, 03:06:28 AM

No point looking into such issues until you at least have valid HTML to begin with...

Quote
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<body>
<div align="center"><img src="http://www.desertedhospitals.com/top.jpg" align="top" /></div>
<table border="0" align="center">
<tr>
<td rowspan="1" colspan="1" width="53" height="16">
   <a href="http://www.desertedhospitals.com/main.html" target="_self"><img name="header1" src="http://www.desertedhospitals.com/Main3.jpg" border="0" alt="" /></a></td>
   <td rowspan="1" colspan="1" width="71" height="16">
   <a href="http://www.desertedhospitals.com/photos" target="_self"><img name="header1" src="http://www.desertedhospitals.com/Photos3.jpg" border="0" alt="" /></a></td>
<td rowspan="1" colspan="1" width="88" height="17">

   <a href="http://www.desertedhospitals.com/purchase.html" target="_self"><img name="header1" src="http://www.desertedhospitals.com/purchase3.jpg" border="0" alt="" /></a></td>
<td rowspan="1" colspan="1" width="68" height="17">
   <a href="http://www.desertedhospitals.com/extras.html" target="_self"><img name="header1" src="http://www.desertedhospitals.com/extras3.jpg" border="0" alt="" /></a></td>
<td rowspan="1" colspan="1" width="73" height="27">
   <a href="http://www.desertedhospitals.com/about.html" target="_self"><img name="header1" src="http://www.desertedhospitals.com/about3.jpg" border="0" alt="" /></a></td>
<td rowspan="1" colspan="1" width="63" height="17">
   <a href="http://www.desertedhospitals.com/contact.html" target="_self"><img name="header1" src="http://www.desertedhospitals.com/contact3.jpg" border="0" alt="" /></a></td>
<td rowspan="1" colspan="1" width="80" height="17">
<a href="http://www.desertedhospitals.com/forum" target="_self"><img name="header1" src="http://www.desertedhospitals.com/forum1.jpg" border="0" alt="" /></a></td>
</tr>
</table>

<BODY BGCOLOR="4A4A4A">
<html dir="ltr">

http://validator.w3.org/check?uri=http%3A%2F%2Fwww.desertedhospitals.com%2Fphotos%2F

markvicious · June 16, 2007, 03:44:45 AM

Could you correct that code for me please? I just tried by using the errors from the site you posted and it was fine in Firefox but then it screwed up the IE view.... ughh

thanks for your reply

markvicious · June 16, 2007, 04:39:01 AM

<div align="center"<img src="http://www.desertedhospitals.com/top.jpg" align="top" <table border="0" align="top">
<tr>
<td rowspan="1" colspan="1" width="53" height="16">
   <a href="http://www.desertedhospitals.com/main.html" target="_self"><img name="header1" src="http://www.desertedhospitals.com/Main3.jpg" border="0" alt=""/></a></td>
   <td rowspan="1" colspan="1" width="71" height="16">
   <a href="http://www.desertedhospitals.com/photos" target="_self"><img name="header1" src="http://www.desertedhospitals.com/Photos3.jpg" border="0" alt=""/></a></td>
<td rowspan="1" colspan="1" width="88" height="17">
   <a href="http://www.desertedhospitals.com/purchase.html" target="_self"><img name="header1" src="http://www.desertedhospitals.com/purchase3.jpg" border="0" alt=""/></a></td>
<td rowspan="1" colspan="1" width="68" height="17">
   <a href="http://www.desertedhospitals.com/extras.html" target="_self"><img name="header1" src="http://www.desertedhospitals.com/extras3.jpg" border="0" alt=""/></a></td>
<td rowspan="1" colspan="1" width="73" height="27">
   <a href="http://www.desertedhospitals.com/about.html" target="_self"><img name="header1" src="http://www.desertedhospitals.com/about3.jpg" border="0" alt=""/></a></td>
<td rowspan="1" colspan="1" width="63" height="17">
   <a href="http://www.desertedhospitals.com/contact.html" target="_self"><img name="header1" src="http://www.desertedhospitals.com/contact3.jpg" border="0" alt=""/></a></td>
<td rowspan="1" colspan="1" width="80" height="17">
<a href="http://www.desertedhospitals.com/forum" target="_self"><img name="header1" src="http://www.desertedhospitals.com/forum1.jpg" border="0" alt=/></a></td></tr>

<BODY BGCOLOR="4A4A4A">

Ok, so I have it centered, but now the links is below the "album list" and not centered. This is because I am missing this:

<div align="center"<img src="http://www.desertedhospitals.com/top.jpg" align="top" <table border="0" align="top"></table>

When I have that in, the links are where they are supposed to be but then the whole category part isn't centered. So now we know where the error is.

Also, I don't know what I did but my top logo isn't showing in IE...

I'd appreciate if someone could send the final code to fix all this, the problem is so close to being fixed!

markvicious · June 20, 2007, 04:58:35 PM

Do you see what I mean? In firefox it looks like it even loads right but then it moves when it is done loading.

coppermine-gallery.com/forum

News:

Album list not centered in Firefox

markvicious

Joachim Müller

markvicious

Joachim Müller

markvicious

Joachim Müller

markvicious

markvicious

Nibbler

markvicious

markvicious

markvicious