Help - Search - Members - Calendar
Full Version: Help with IE/FF
HTMLHelp Forums > Web Authoring > Markup (HTML, XHTML, XML)
irok
Can someone tell me why I can't get my code to line up the same in IE 8 and FF 12.
Here is what it looks like in IE 8:
Click to view attachment

And in FF 12:
Click to view attachment

The scroller (crawler) section (middle row) is too wide in FF.
The top and bottom tables line up, just not the center section.

Here is the Code:
CODE
<script type="text/javascript" src="crawler.js">
/* Text and/or Image Crawler Script v1.5 (c)2009-2011 John Davenport Scheuer
   as first seen in http://www.dynamicdrive.com/forums/
   username: jscheuer1 - This Notice Must Remain for Legal Use
   updated: 4/2011 for random order option, more (see below)
*/
</script>
<center><table border='0' bgcolor='#2A3411' cellspacing='2' cellpadding='1' width='758'><tr><td rowspan='2'><img src='5.png' border='0'></td>
<td bgcolor='#000000' align='center' width='48'><font color='#FFFFFF' face='Arial' size='1'><b>Jan</b></td>
<td bgcolor='#000000' align='center' width='48'><font color='#FFFFFF' face='Arial' size='1'><b>Feb</b></td>
<td bgcolor='#000000' align='center' width='48'><font color='#FFFFFF' face='Arial' size='1'><b>Mar</b></td>
<td bgcolor='#000000' align='center' width='48'><font color='#FFFFFF' face='Arial' size='1'><b>Apr</b></td>
<td bgcolor='#000000' align='center' width='48'><font color='#FFFFFF' face='Arial' size='1'><b>May</b></td>
<td bgcolor='#000000' align='center' width='48'><font color='#FFFFFF' face='Arial' size='1'><b>Jun</b></td>
<td bgcolor='#000000' align='center' width='48'><font color='#FFFFFF' face='Arial' size='1'><b>Jul</b></td>
<td bgcolor='#000000' align='center' width='48'><font color='#FFFFFF' face='Arial' size='1'><b>Aug</b></td>
<td bgcolor='#000000' align='center' width='48'><font color='#FFFFFF' face='Arial' size='1'><b>Sep</b></td>
<td bgcolor='#000000' align='center' width='48'><font color='#FFFFFF' face='Arial' size='1'><b>Oct</b></td>
<td bgcolor='#000000' align='center' width='48'><font color='#FFFFFF' face='Arial' size='1'><b>Nov</b></td>
<td bgcolor='#000000' align='center' width='48'><font color='#FFFFFF' face='Arial' size='1'><b>Dec</b></td>
<td bgcolor='#000000' align='center' width='48'><font color='#FFFFFF' face='Arial' size='1'><b>TOT</b></td></tr>
<tr><td bgcolor='#189BC1' align='center' width='48'><font color='#FFFFFF' face='Arial' size='2'><b>-</b></td>
<td bgcolor='#189BC1' align='center' width='48'><font color='#FFFFFF' face='Arial' size='2'><b>-</b></td>
<td bgcolor='#189BC1' align='center' width='48'><font color='#FFFFFF' face='Arial' size='2'><b>-<b></td>
<td bgcolor='#189BC1' align='center' width='48'><font color='#FFFFFF' face='Arial' size='2'><b>-</b></td>
<td bgcolor='#189BC1' align='center' width='48'><font color='#FFFFFF' face='Arial' size='2'><b>-</b></td>
<td bgcolor='#189BC1' align='center' width='48'><font color='#FFFFFF' face='Arial' size='2'><b>-</b></td>
<td bgcolor='#189BC1' align='center' width='48'><font color='#FFFFFF' face='Arial' size='2'><b>-</b></td>
<td bgcolor='#189BC1' align='center' width='48'><font color='#FFFFFF' face='Arial' size='2'><b></b></td>
<td bgcolor='#189BC1' align='center' width='48'><font color='#FFFFFF' face='Arial' size='2'><b></b></td>
<td bgcolor='#189BC1' align='center' width='48'><font color='#FFFFFF' face='Arial' size='2'><b></b></td>
<td bgcolor='#189BC1' align='center' width='48'><font color='#FFFFFF' face='Arial' size='2'><b></b></td>
<td bgcolor='#189BC1' align='center' width='48'><font color='#FFFFFF' face='Arial' size='2'><b></b></td>
<td bgcolor='#787878' align='center' width='48'><font color='#FFFFFF' face='Arial' size='2'><b>0</b></td></tr></table></center>

<center><div class="marquee" id="glb"><img src="recent/rf_title.png" width="84" height="87" border="0" alt="Recent Finds"><a href="3170" target="_self"><img src="recent/rf_24f.png" width="84" height="87" border="0" alt="Recent Find"></a><a href="3335" target="_self"><img src="recent/rf_32f.png" width="84" height="87" border="0" alt="Recent Find"></a><a href="3369" target="_self"><img src="recent/rf_25f.png" width="84" height="87" border="0" alt="Recent Find"></a><a href="3305" target="_self"><img src="recent/rf_33f.png" width="84" height="87" border="0" alt="Recent Find"></a><a href="3371" target="_self"><img src="recent/rf_26f.png" width="84" height="87" border="0" alt="Recent Find"></a><a href="3302" target="_self"><img src="recent/rf_35f.png" width="84" height="87" border="0" alt="Recent Find"></a><a href="3358" target="_self"><img src="recent/rf_27f.png" width="84" height="87" border="0" alt="Recent Find"></a><a href="3339" target="_self"><img src="recent/rf_28f.png" width="84" height="87" border="0" alt="Recent Find"></a><a href="3347" target="_self"><img src="recent/rf_29f.png" width="84" height="87" border="0" alt="Recent Find"></a><a href="3360" target="_self"><img src="recent/rf_30f.png" width="84" height="87" border="0" alt="Recent Find"></a><a href="3348" target="_self"><img src="recent/rf_31f.png" width="84" height="87" border="0" alt="Recent Find"></a><a href="3306" target="_self"><img src="recent/rf_34f.png" width="84" height="87" border="0" alt="Recent Find"></a><a href="3277" target="_self"><img src="recent/rf_40f.png" width="84" height="87" border="0" alt="Recent Find"></a><a href="3319" target="_self"><img src="recent/rf_39f.png" width="84" height="87" border="0" alt="Recent Find"></a><a href="3055" target="_self"><img src="recent/rf_16f.png" width="84" height="87" border="0" alt="Recent Find"></a><a href="3085" target="_self"><img src="recent/rf_17f.png" width="84" height="87" border="0" alt="Recent Find"></a><a href="3106" target="_self"><img src="recent/rf_18f.png" width="84" height="87" border="0" alt="Recent Find"></a><a href="3307" target="_self"><img src="recent/rf_36f.png" width="84" height="87" border="0" alt="Recent Find"></a><a href="3155" target="_self"><img src="recent/rf_20f.png" width="84" height="87" border="0" alt="Recent Find"></a><a href="3160" target="_self"><img src="recent/rf_21f.png" width="84" height="87" border="0" alt="Recent Find"></a><a href="3176" target="_self"><img src="recent/rf_22f.png" width="84" height="87" border="0" alt="Recent Find"></a><a href="3359" target="_self"><img src="recent/rf_37f.png" width="84" height="87" border="0" alt="Recent Find"></a><a href="3379" target="_self"><img src="recent/rf_38f.png" width="84" height="87" border="0" alt="Recent Find"></a></div></center>
<script type="text/javascript">
marqueeInit({
    uniqueid: 'glb',
    style: {
        //'padding': '1px',
        'width': '758px',
        'height': '90px',
                'border': '2px solid #293704',
                'background': '#293704'
    },
    inc: 5, //speed - pixel increment for each iteration of this marquee's movement
    mouse: 'cursor driven', //mouseover behavior ('pause' 'cursor driven' or false)
    moveatleast: 2,
    neutral: 150,
    savedirection: true,
    random: true
});
</script>
<center><table border='0' bgcolor='#2A3411' cellspacing='2' cellpadding='1' width='758'><tr><td rowspan='2'><img src='tally.png' border='0'></td>
<td bgcolor='#000000' align='center' width='48'><font color='#FFFFFF' face='Arial' size='1'><b>Jan</b></td>
<td bgcolor='#000000' align='center' width='48'><font color='#FFFFFF' face='Arial' size='1'><b>Feb</b></td>
<td bgcolor='#000000' align='center' width='48'><font color='#FFFFFF' face='Arial' size='1'><b>Mar</b></td>
<td bgcolor='#000000' align='center' width='48'><font color='#FFFFFF' face='Arial' size='1'><b>Apr</b></td>
<td bgcolor='#000000' align='center' width='48'><font color='#FFFFFF' face='Arial' size='1'><b>May</b></td>
<td bgcolor='#000000' align='center' width='48'><font color='#FFFFFF' face='Arial' size='1'><b>Jun</b></td>
<td bgcolor='#000000' align='center' width='48'><font color='#FFFFFF' face='Arial' size='1'><b>Jul</b></td>
<td bgcolor='#000000' align='center' width='48'><font color='#FFFFFF' face='Arial' size='1'><b>Aug</b></td>
<td bgcolor='#000000' align='center' width='48'><font color='#FFFFFF' face='Arial' size='1'><b>Sep</b></td>
<td bgcolor='#000000' align='center' width='48'><font color='#FFFFFF' face='Arial' size='1'><b>Oct</b></td>
<td bgcolor='#000000' align='center' width='48'><font color='#FFFFFF' face='Arial' size='1'><b>Nov</b></td>
<td bgcolor='#000000' align='center' width='48'><font color='#FFFFFF' face='Arial' size='1'><b>Dec</b></td>
<td bgcolor='#000000' align='center' width='48'><font color='#FFFFFF' face='Arial' size='1'><b>TOT</b></td></tr>
<tr><td bgcolor='#189BC1' align='center' width='48'><font color='#FFFFFF' face='Arial' size='2'><b>94</b></td>
<td bgcolor='#189BC1' align='center' width='48'><font color='#FFFFFF' face='Arial' size='2'><b>78</b></td>
<td bgcolor='#189BC1' align='center' width='48'><font color='#FFFFFF' face='Arial' size='2'><b>96<b></td>
<td bgcolor='#189BC1' align='center' width='48'><font color='#FFFFFF' face='Arial' size='2'><b>62</b></td>
<td bgcolor='#189BC1' align='center' width='48'><font color='#FFFFFF' face='Arial' size='2'><b>34</b></td>
<td bgcolor='#189BC1' align='center' width='48'><font color='#FFFFFF' face='Arial' size='2'><b>58</b></td>
<td bgcolor='#189BC1' align='center' width='48'><font color='#FFFFFF' face='Arial' size='2'><b>22</b></td>
<td bgcolor='#189BC1' align='center' width='48'><font color='#FFFFFF' face='Arial' size='2'><b></b></td>
<td bgcolor='#189BC1' align='center' width='48'><font color='#FFFFFF' face='Arial' size='2'><b></b></td>
<td bgcolor='#189BC1' align='center' width='48'><font color='#FFFFFF' face='Arial' size='2'><b></b></td>
<td bgcolor='#189BC1' align='center' width='48'><font color='#FFFFFF' face='Arial' size='2'><b></b></td>
<td bgcolor='#189BC1' align='center' width='48'><font color='#FFFFFF' face='Arial' size='2'><b></b></td>
<td bgcolor='#787878' align='center' width='48'><font color='#FFFFFF' face='Arial' size='2'><b>444</b></td></tr></table></center>


thanks
pandy
It would be a lot easier if you could link to the page so we can see the images.
irok
You have to join our forum to see the images live, that's why I took a snap shot of them and placed the code here.
Is there something else you need off the page that would help?
pandy
The base URL for the images.
irok
QUOTE(pandy @ Aug 3 2012, 11:50 AM) *

The base URL for the images.


Is this what you need?
http://i1075.photobucket.com/albums/w427/okmdclub/
pandy
Yeah. But it wasn't enough. Doesn't look anything like your screen cap. Probably need the URL to the script and any style sheets too. Maybe the rest of the HTML.
irok
QUOTE(pandy @ Aug 3 2012, 01:12 PM) *

Yeah. But it wasn't enough. Doesn't look anything like your screen cap. Probably need the URL to the script and any style sheets too. Maybe the rest of the HTML.


Being that it's a Proboards forum I don't have access to their CSS if that needs to be altered.
But here is the whole HTML from the page, I'll attach it as a txt file:
Click to view attachment
pandy
Yeah, that worked out of the box. Strange though. Fist I see the image scroller fine. When I reload the page I get the alt text.

Anyway, it looks the same as in FF in Iron too (same as Chrome), so I guess it's IE that gets it wrong. I'll see if I can figure out what's JS and what's CSS and what's HTML in this.
pandy
Oh. I had accidentely disabled images in my browser. That's why they disappeared. tongue.gif

Anyway, I guessed right. There is no doctype so browsers will be in Quirks Mode. When I add a doctype that triggers Standards Mode IE displays the scroller wider, just as the other browsers.

I haven't searched for it, but somewhere you define a width for the scroller and the two bars above and below it. When in Quirks Mode IE doesn't understand the Standards way of defining 'width'. 'width' is only the width of the content. The width of any borders and padding is added to that. In Quirks IE sees 'width' as what you could call total width, that is including borders and padding.

The correct and easiest way to fix it is to add a doctype that triggers Standards Mode and recalculate the widths. If you run this forum on your own domain, that shouldn't be a problem. If it's a hosted forum you probably can't.

http://hsivonen.iki.fi/doctype/
irok
QUOTE(pandy @ Aug 3 2012, 04:32 PM) *

Oh. I had accidentely disabled images in my browser. That's why they disappeared. tongue.gif

Anyway, I guessed right. There is no doctype so browsers will be in Quirks Mode. When I add a doctype that triggers Standards Mode IE displays the scroller wider, just as the other browsers.

I haven't searched for it, but somewhere you define a width for the scroller and the two bars above and below it. When in Quirks Mode IE doesn't understand the Standards way of defining 'width'. 'width' is only the width of the content. The width of any borders and padding is added to that. In Quirks IE sees 'width' as what you could call total width, that is including borders and padding.

The correct and easiest way to fix it is to add a doctype that triggers Standards Mode and recalculate the widths. If you run this forum on your own domain, that shouldn't be a problem. If it's a hosted forum you probably can't.

http://hsivonen.iki.fi/doctype/



Thanks for all you detective work etc, I appreciate it smile.gif
No the forum is run on Proboards so I don't think there is anything I can do as I only have access to the header and footer section of the page.
Well as I said thanks for all you work.

pandy
It is a way, I think, but it's ugly. Make the widthswhat works for FF et al. Then embed a CSS block and define widths that work for IE there. Hide the CSS from other browsers than IE with a conditional comment.

Note that CSS blocks should be in HEAD. But if this hasn't changed in later versions of IE it will accept if they are in BODY as well. Test if it does before you put too much work into it.

http://msdn.microsoft.com/en-us/library/ms537512.aspx
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2014 Invision Power Services, Inc.