Mozilla/versus IE width problem

[loudog]

My message board has been fine, but recently a member downloaded mozilla, and now is saying that my board is way wider then her computer screen. Below are the only additions I've made to the board. Any help would be appreciated. You can log into my message board with test, test. http://www.louswheels.netfirms.com/yabbse/index.php

Added new the logo

Koodi [Valitse] Laajenna

<table cellspacing="0" cellpadding="0" border="0" align="center" width="100%" style="position: relative;">
         <tr>
            <td colspan="2" valign="bottom" style="padding: 5px; white-space: nowrap;">';
   // This part is the logo and forum name.  You should be able to change this to whatever you want...
  echo'
             <table cellspacing="0" cellpadding="0" border="0" align="center" width="100%" style="position: relative;">
         <tr>
            <td colspan="2" valign="bottom" style="padding: 5px; font-family: Georgia, serif; font-size: xx-large; white-space: nowrap;">
             <center><img src="', $settings['images_url'], '/smflogo.jpg" align="center"></center>
               </td>
         </tr>


At the bottom before the powered by, and valid logos added this

Koodi [Valitse] Laajenna

// Show the "Powered by" and "Valid" logos, as well as the copyright.  Remember, the copyright must be somewhere!
   echo '
<div align="center"><center>
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="tborder" bgcolor="#FFFFFF">
    <tr>
        <td width="100%"><p align="center"><a
        href="http://www.louswheels.netfirms.com/cgi-bin/links/main.cgi"><font
        face="Arial">Links</font></a><font face="Arial"> | </font><a
        href="http://louswheels.netfirms.com/photoalbum/nfpicturepro/"><font
        face="Arial">Real Rider Reference</font></a><font face="Arial"> | </font><a
        href="http://www.louswheels.netfirms.com/yabbse/index.php"><font
        face="Arial">Message Board</font></a><font face="Arial">
        | </font><a
        href="http://louswheels.netfirms.com/anims/nfpicturepro/"><font
        face="Arial">Custom Animations</font></a><font
        face="Arial"> | </font><a
        href="http://www.louswheels.netfirms.com/asthewheelturns.shtml"><font
        face="Arial">As the wheel turns</font></a><font
        face="Arial"> | </font><a
        href="http://www.louswheels.netfirms.com/cgi-bin/rankmaster/index.cgi"><font
        face="Arial">Hot 100</font></a><font face="Arial"> | </font><a
        href="http://www.louswheels.netfirms.com/caroftheday.shtml"><font
        face="Arial">Car of the Day</font></a><font face="Arial">
        | </font><a
        href="http://www.louswheels.netfirms.com/cgi-bin/dcguest/dcguest.cgi?action=add_form"><font
        face="Arial">Sign Guestbook</font></a><font face="Arial">
        | </font><a
        href="http://www.louswheels.netfirms.com/cgi-bin/dcguest/dcguest.cgi"><font
        face="Arial">View Guestbook</font></a><font face="Arial">
        | </font><a
        href="mailto:[email protected]"><font
        face="Arial">Contact Me</font></a><font face="Arial"> | </font><a
        href="http://www.louswheels.netfirms.com/specials.shtml"><font
        face="Arial">Weekly Specials</font></a><font face="Arial">
        | </font><a
        href="http://louswheels.netfirms.com/customs/nfpicturepro/"><font
        face="Arial">Customs Showcase</font></a>
      <font face="Arial"> | </font><a
        href="http://www.louswheels.netfirms.com"><font
        face="Arial">Home</font></a>
      <br><br><font size="1" face="Arial">
        Copyright 1999-2005 www.diecastdiner.com --- www.Louswheels.netfirms.com © </font></p>
        </td>
    </tr>
</table>
</center></div>


Also if there is any settings I might have wrong. Thanks for your help in advance,

Lou

[helenbpd]

I'm on Mac Firefox and your forum does that to me, too.  But I think I found your troubles.

Replace this:

Koodi [Valitse] Laajenna

<td colspan="2" valign="bottom" style="padding: 5px; font-family: Georgia, serif; font-size: xx-large; white-space: nowrap;">
             <center><img src="http://www.louswheels.netfirms.com/yabbse/Themes/mainpage/images/smflogo.jpg" align="center"></center>
               </td>

with:

Koodi [Valitse] Laajenna

<td colspan="2" align="center" valign="bottom" style="padding: 5px; font-family: Georgia, serif; font-size: xx-large; white-space: nowrap;">
             <img src="http://www.louswheels.netfirms.com/yabbse/Themes/mainpage/images/smflogo.jpg" alt="" /></td>


And it also looks as though your header table isn't closed off properly - just a bit below what you quoted, find this line:

Koodi [Valitse] Laajenna

<a href="http://www.louswheels.netfirms.com/yabbse/index.php?action=register"><img src="http://www.louswheels.netfirms.com/yabbse/Themes/mainpage/images/english/register.gif" alt="Register" style="margin: 2px 0;" border="0" /></a>

and add this after it

Koodi [Valitse] Laajenna


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

See what that does for ya.  And then run it through the w3c validator, linked with the button on the very bottom of your forum page, that'll let you know if there are still problems with the html.  Or give me a holler & throw a rotten tomato.

[loudog]

Thanks for the help. I replaced and added what you mention.  Its odd because the table close on that line after register isn't something I've altered, but who knows how it happened.

If any one with Mozilla can surf through my boards real quick to see what they look like, that would be greatly appreciated.

Thanks very much again for the help!!!
PS: Is it ok to install mozilla and IE on the same computer with out any problems? It would be handy for situations like this.

[Jerry]

looks fine on my IE & Firefox

[Oldiesmann]

PS: Is it ok to install mozilla and IE on the same computer with out any problems? It would be handy for situations like this.

Yes, but you want Firefox, not Mozilla (two different things). As long as you don't try to uninstall IE, you should be fine.

[helenbpd]

I really hate to tell you this, but it's still HUGELY wide in Mac Moz Firefox 1.0.  What happens if you remove that colspan="2" ?
Screenshot (@ 800x600, for reference):

[loudog]

I really hate to tell you this, but it's still HUGELY wide in Mac Moz Firefox 1.0.  What happens if you remove that colspan="2" ?
Screenshot (@ 800x600, for reference):

Colspan 2 was part of the original code that came with the theme. So my guess is that if thats the problem, everyone with XP theme would have the same issue. The only thing I changed from original was the alignment of the logo image.

I'm a bit confused on the browsers here. Is there a mozilla firefox, and just firefox, or are these different versions of the same thing. I hate to admit I've always used IE, and don't have a clue as to whats out there.

Thanks again,
Lou

[helenbpd]

Colspan 2 was part of the original code that came with the theme. So my guess is that if thats the problem, everyone with XP theme would have the same issue. The only thing I changed from original was the alignment of the logo image.

Your image is larger than the logo it replaced, and by aligning it in the center,  that pushes everything else waaaay over.  You might also try removing the center alignment & see how you like that look.  (Personally, I'd remove the table altogether & format the header with simple centered divs, but that's me.  )

I'm a bit confused on the browsers here. Is there a mozilla firefox, and just firefox, or are these different versions of the same thing. I hate to admit I've always used IE, and don't have a clue as to whats out there.

Some pretty good (& really important!) info for you here:

http://www.stopie.com
and
http://www.browsehappy.com

H

[loudog]

Ok, I did as you suggested. Basicly, all I did originally was upload a logo named the same (but my logo), and changed the alignment. The rest of the theme code and possition was not changed. I edited the alignment as you suggested the first time, and it did not work.

So.... I now got rid of the table settings (I only used table because I had intended to add links to the rest of my site but haven't yet). I also moved the logo above the board code as per below. The orginal possition was  directly after this 

Koodi [Valitse] Laajenna

<td colspan="2" align="center" valign="bottom" style="padding: 5px; font-family: Georgia, serif; font-size: xx-large; white-space: nowrap;">
I moved it here.

Koodi [Valitse] Laajenna

// This part is the logo and forum name.  You should be able to change this to whatever you want...
  echo'
<div align="center"><img src="http://www.louswheels.netfirms.com/yabbse/Themes/mainpage/images/smflogo.jpg" alt="" /></div>
             <table cellspacing="0" cellpadding="0" border="0" align="center" width="100%" style="position: relative;">
         <tr>
              <td colspan="2" align="center" valign="bottom" style="padding: 5px; font-family: Georgia, serif; font-size: xx-large; white-space: nowrap;">
             </td>
</tr>
         <tr id="upshrinkHeader"', empty($options['collapse_header']) ? '' : ' style="display: none;"', '>
            <td valign="top">
               <div class="headertitles" style="margin-right: 5px; position: relative;"><img src="', $settings['images_url'], '/blank.gif" height="12" alt="" /></div>
               <div class="headerbodies" style="position: relative; margin-right: 5px; background-image: url(', $settings['images_url'], '/box_bg.gif);">
                  <img src="', $settings['images_url'], '/' , $context['user']['language'] , '/userinfo.gif" style="position: absolute; left: ', $context['browser']['is_ie5'] || $context['browser']['is_ie4'] ? '0' : '-1px', '; top: -16px; clear: both;" alt="" />
                  <table width="99%" cellpadding="0" cellspacing="5" border="0"><tr>';

   if (!empty($context['user']['avatar']))
      echo '<td valign="middle">', $context['user']['avatar']['image'], '</td>';

   echo '<td width="100%" valign="top" class="smalltext" style="font-family: verdana, arial, sans-serif;">';


If you have a chance, let me know if this did the trick. I'll have to look into other browsers. Thanks for the links!!

[helenbpd]

Ah, I gotcha now.  But alas, no joy in mudville over here, still honking huge. 

I'm thinking the table cells still technically want to make the space for both the text and logo that were originally removed, so I'd just give your logo its own div at the top.  (The <align="center"> is deprecated and won't work reliably later on in newer browsers, so you might as well switch the centering to your CSS now.)  It can do whatever it wants in there now without messing the rest of the header boxes up.

I copied your template & fiddled and the following works great on my Mac FireFox & Camino (both are Mozilla), Safari, Netscape, Opera, even MacIE.

Use this revised chunk from <body> to the <tr id="upshrinkHeader"> :

Koodi [Valitse] Laajenna

<body>

<div id="headerarea" style="padding: 12px 30px 4px 30px;">
<div id="logo"><img src="http://www.louswheels.netfirms.com/yabbse/Themes/mainpage/images/smflogo.jpg" alt="" /></div>
<table cellspacing="0" cellpadding="0" border="0" align="center" width="100%" style="position: relative;">
<tr>
<td>
<table cellspacing="0" cellpadding="0" border="0" align="center" width="100%" style="position: relative;">

<tr id="upshrinkHeader">

and stick this anywhere in your style.css:

Koodi [Valitse] Laajenna


div#logo {
margin-right: auto;
margin-left: auto; 
text-align: center;
}

If you want the logo to have some more space (once it scooted over on top of the actual forum, it looks maybe a tiny bit cramped?), you could add a little padding to the bottom of the div#logo like maybe:

Koodi [Valitse] Laajenna

padding-bottom: 10px;


You can always go back later and add menu items or whatever to that first set of rows & cells, but now the logo won't be in the way & you won't have to account for its size in the table.

Lemme know if that works!  (nice graphics, btw)

[loudog]

My actual index file on my end, there is coding to fix errors in IE, and other hidden codes only seen from the admin end. I will show them below from body, to upshrink header so you can see what I would be replacing. If its still ok to replace all this, then that is cool, but I didn't know for sure.

I'm have a bad computer week. I got a new one because the old one died, and now I lost most of my old software I'm so used to. I'm even having a hard time unzipping a .tar to get  a clean version of XP's index template for some reason which never used to be a problem. I'm using evaluation win zip versus a full older version from my old computer.

Anway here is the code below. I can't thank you enough for all the help!!!

Koodi [Valitse] Laajenna

// Because of the way width/padding are calculated, we have to tell Internet Explorer 4 and 5 that the content should be 100% wide. (or else it will assume about 108%!)
   echo '
   <div id="headerarea" style="padding: 12px 30px 4px 30px;', $context['browser']['needs_size_fix'] && !$context['browser']['is_ie6'] ? ' width: 100%;' : '', '">';

   // The logo and the three info boxes.
   echo '
      <table cellspacing="0" cellpadding="0" border="0" align="center" width="100%" style="position: relative;">
         <tr>
            <td colspan="2" valign="bottom" style="padding: 5px; white-space: nowrap;">';
   // This part is the logo and forum name.  You should be able to change this to whatever you want...
  echo'
             <table cellspacing="0" cellpadding="0" border="0" align="center" width="100%" style="position: relative;">
         <tr>
            <td colspan="2" valign="bottom" style="padding: 5px; font-family: Georgia, serif; font-size: xx-large; white-space: nowrap;">
             <center><img src="', $settings['images_url'], '/smflogo.jpg" align="center"></center>
               </td>
         </tr>
         <tr id="upshrinkHeader"

[helenbpd]

Whups, my error -yes, it's the same thing 'cept for the browser detect schtuff.  Here ya go:

Koodi [Valitse] Laajenna

// Because of the way width/padding are calculated, we have to tell Internet Explorer 4 and 5 that the content should be 100% wide. (or else it will assume about 108%!)
   echo '
   <div id="headerarea" style="padding: 12px 30px 4px 30px;', $context['browser']['needs_size_fix'] && !$context['browser']['is_ie6'] ? ' width: 100%;' : '', '">';
// Here's your groovy logo div.
<div id="logo"><img src="http://www.louswheels.netfirms.com/yabbse/Themes/mainpage/images/smflogo.jpg" alt="" /></div>
//Here's the table with the news box, etc.
<table cellspacing="0" cellpadding="0" border="0" align="center" width="100%" style="position: relative;">
      <tr>
            <td>
                  <table cellspacing="0" cellpadding="0" border="0" align="center" width="100%" style="position: relative;">
//Everything that comes after this next bit will be upshrunk.
                       <tr id="upshrinkHeader">

Sorry to hear about your computer troubles, that stinks!     (I'm on a Mac & Windows stuff is gibberish to me even under perfect circumstances.  )

[Pat-]

hm

[loudog]

I used your code, and I got some parse errors. I figured it was most likely on my part.

I managed to get a clean file of XP (after changing unzip software, its amazing how the free stuff works the best LOL), and cut the code from body to upshrink from the clean file to start fresh.

I then removed the default forum title code, and logo code, and simply inserted the code you gave me for the logo. Also added code for CSS. I ran it through the HTML, and CSS validators, and everything was perfect.

If you can...... let me know if this works, but I think it should.

Thanks so much for all the help. Its times like this I truly enjoy the internet,  when people work to help each other out. Thanks again,
Lou

[helenbpd]

Yay, it worked!  it's gorgeous! 

Glad to help, Lou - it helps me figure out my own HTML/CSS questions, too.

Yay!

H

[loudog]

AWESOME!!! Thanks again!!

[helenbpd]

Le's hope your other Mozilla/Firefox users think so, too.