Link to home
Start Free TrialLog in
Avatar of Stanton_Roux
Stanton_RouxFlag for South Africa

asked on

IE versus FIREFOX

HI There

I am using html and firefox to develope a site.I am using nested tables in my code.

The problem is that when I look at a page in IE it looks and works perfectly , but when I look at it in Firefox the table are all over the place.

My HTML and Tables look fine.

Is there any tools to check if your html is well formed ,
Or why doesnt it display the same way.

thanks
Stanton
Avatar of Animasu
Animasu
Flag of United Kingdom of Great Britain and Northern Ireland image

I dont know about well formed but theres a validator http://validator.w3.org/

Can we see some code please?

Thanks

- Animasu
Avatar of Stanton_Roux

ASKER

Its quite a big section of code ,it includes javascript and asp.

I can paste the page if you want
sure that should be ok!
<%@ Language=VBScript %>
<!--#include file="adovbs.inc"-->

<html>
<head>
<title>TimeCode</title>

<script language="JavaScript" type="text/javascript">


// Global variables
var isCSS, isW3C, isIE4, isNN4, isIE6CSS;
// Initialize upon load to let all browsers establish content objects
function initDHTMLAPI() {
    if (document.images) {
        isCSS = (document.body && document.body.style) ? true : false;
        isW3C = (isCSS && document.getElementById) ? true : false;
        isIE4 = (isCSS && document.all) ? true : false;
        isNN4 = (document.layers) ? true : false;
        isIE6CSS = (document.compatMode && document.compatMode.indexOf("CSS1") >= 0) ? true : false;
    }
}
// Set event handler to initialize API
window.onload = initDHTMLAPI;

// Seek nested NN4 layer from string name
function seekLayer(doc, name) {
    var theObj;
    for (var i = 0; i < doc.layers.length; i++) {
        if (doc.layers[i].name == name) {
            theObj = doc.layers[i];
            break;
        }
        // dive into nested layers if necessary
        if (doc.layers[i].document.layers.length > 0) {
            theObj = seekLayer(document.layers[i].document, name);
        }
    }
    return theObj;
}

// Convert object name string or object reference
// into a valid element object reference
function getRawObject(obj) {
    var theObj;
    if (typeof obj == "string") {
        if (isW3C) {
            theObj = document.getElementById(obj);
        } else if (isIE4) {
            theObj = document.all(obj);
        } else if (isNN4) {
            theObj = seekLayer(document, obj);
        }
    } else {
        // pass through object reference
        theObj = obj;
    }
    return theObj;
}

// Convert object name string or object reference
// into a valid style (or NN4 layer) reference
function getObject(obj) {
    var theObj = getRawObject(obj);
    if (theObj && isCSS) {
        theObj = theObj.style;
    }
    return theObj;
}

// Position an object at a specific pixel coordinate
function shiftTo(obj, x, y) {
    var theObj = getObject(obj);
    if (theObj) {
        if (isCSS) {
            // equalize incorrect numeric value type
            var units = (typeof theObj.left == "string") ? "px" : 0
            theObj.left = x + units;
            theObj.top = y + units;
        } else if (isNN4) {
            theObj.moveTo(x,y)
        }
    }
}

// Move an object by x and/or y pixels
function shiftBy(obj, deltaX, deltaY) {
    var theObj = getObject(obj);
    if (theObj) {
        if (isCSS) {
            // equalize incorrect numeric value type
            var units = (typeof theObj.left == "string") ? "px" : 0
            theObj.left = getObjectLeft(obj) + deltaX + units;
            theObj.top = getObjectTop(obj) + deltaY + units;
        } else if (isNN4) {
            theObj.moveBy(deltaX, deltaY);
        }
    }
}

// Set the z-order of an object
function setZIndex(obj, zOrder) {
    var theObj = getObject(obj);
    if (theObj) {
        theObj.zIndex = zOrder;
    }
}

// Set the background color of an object
function setBGColor(obj, color) {
    var theObj = getObject(obj);
    if (theObj) {
        if (isNN4) {
            theObj.bgColor = color;
        } else if (isCSS) {
            theObj.backgroundColor = color;
        }
    }
}

// Set the visibility of an object to visible
function show(obj) {
    var theObj = getObject(obj);
    if (theObj) {
        theObj.visibility = "visible";
    }
}

// Set the visibility of an object to hidden
function hide(obj) {
    var theObj = getObject(obj);
    if (theObj) {
        theObj.visibility = "hidden";
    }
}

// Retrieve the x coordinate of a positionable object
function getObjectLeft(obj)  {
    var elem = getRawObject(obj);
    var result = 0;
    if (document.defaultView) {
        var style = document.defaultView;
        var cssDecl = style.getComputedStyle(elem, "");
        result = cssDecl.getPropertyValue("left");
    } else if (elem.currentStyle) {
        result = elem.currentStyle.left;
    } else if (elem.style) {
        result = elem.style.left;
    } else if (isNN4) {
        result = elem.left;
    }
    return parseInt(result);
}

// Retrieve the y coordinate of a positionable object
function getObjectTop(obj)  {
    var elem = getRawObject(obj);
    var result = 0;
    if (document.defaultView) {
        var style = document.defaultView;
        var cssDecl = style.getComputedStyle(elem, "");
        result = cssDecl.getPropertyValue("top");
    } else if (elem.currentStyle) {
        result = elem.currentStyle.top;
    } else if (elem.style) {
        result = elem.style.top;
    } else if (isNN4) {
        result = elem.top;
    }
    return parseInt(result);
}

// Retrieve the rendered width of an element
function getObjectWidth(obj)  {
    var elem = getRawObject(obj);
    var result = 0;
    if (elem.offsetWidth) {
        result = elem.offsetWidth;
    } else if (elem.clip && elem.clip.width) {
        result = elem.clip.width;
    } else if (elem.style && elem.style.pixelWidth) {
        result = elem.style.pixelWidth;
    }
    return parseInt(result);
}

// Retrieve the rendered height of an element
function getObjectHeight(obj)  {
    var elem = getRawObject(obj);
    var result = 0;
    if (elem.offsetHeight) {
        result = elem.offsetHeight;
    } else if (elem.clip && elem.clip.height) {
        result = elem.clip.height;
    } else if (elem.style && elem.style.pixelHeight) {
        result = elem.style.pixelHeight;
    }
    return parseInt(result);
}

// Return the available content width space in browser window
function getInsideWindowWidth() {
    if (window.innerWidth) {
        return window.innerWidth;
    } else if (isIE6CSS) {
        // measure the html element's clientWidth
        return document.body.parentElement.clientWidth
    } else if (document.body && document.body.clientWidth) {
        return document.body.clientWidth;
    }
    return 0;
}

// Return the available content height space in browser window
function getInsideWindowHeight() {
    if (window.innerHeight) {
        return window.innerHeight;
    } else if (isIE6CSS) {
        // measure the html element's clientHeight
        return document.body.parentElement.clientHeight
    } else if (document.body && document.body.clientHeight) {
        return document.body.clientHeight;
    }
    return 0;
}



</script>

<script language="JavaScript" type="text/javascript">
var scrollEngaged = false;
var scrollInterval;
var scrollBars = new Array();

function getElementStyle(elemID, IEStyleAttr, CSSStyleAttr) {
    var elem = document.getElementById(elemID);
    if (elem.currentStyle) {
        return elem.currentStyle[IEStyleAttr];
    } else if (window.getComputedStyle) {
        var compStyle = window.getComputedStyle(elem, "");
        return compStyle.getPropertyValue(CSSStyleAttr);
    }
    return "";
}

function scrollBar(ownerID, ownerContentID, upID, dnID) {
    this.ownerID = ownerID;
    this.ownerContentID = ownerContentID;
    this.index = scrollBars.length;
    this.upButton = document.getElementById(upID);
    this.dnButton = document.getElementById(dnID);
    this.upButton.index = this.index;
    this.dnButton.index = this.index;
   
    this.ownerHeight = parseInt(getElementStyle(this.ownerID, "height", "height"));

    this.contentElem = document.getElementById(ownerContentID);
    this.contentFontSize = parseInt(getElementStyle(this.ownerContentID,
        "fontSize", "font-size"));
    this.contentScrollHeight = (this.contentElem.scrollHeight) ?
        this.contentElem.scrollHeight : this.contentElem.offsetHeight;
    this.initScroll = initScroll;
}

function initScroll() {
    this.upButton.onmousedown = handleScrollClick;
    this.upButton.onmouseup = handleScrollStop;
    this.upButton.oncontextmenu = blockEvent;

    this.dnButton.onmousedown = handleScrollClick;
    this.dnButton.onmouseup = handleScrollStop;
    this.dnButton.oncontextmenu = blockEvent;
   
    var isIEMac = (navigator.appName.indexOf("Explorer") != -1 && navigator.userAgent.indexOf("Mac") != -1);
    if (!isIEMac) {
        document.getElementById("innerWrapper0").style.overflow = "hidden";
    }
}

function handleScrollStop() {
    scrollEngaged = false;
}

function blockEvent(evt) {
    evt = (evt) ? evt : event;
    evt.cancelBubble = true;
    return false;
}

function handleScrollClick(evt) {
    var fontSize;
    evt = (evt) ? evt : event;
    var target = (evt.target) ? evt.target : evt.srcElement;
    var index = target.index;
    fontSize = scrollBars[index].contentFontSize;
    fontSize = (target.className == "lineup") ? fontSize : -fontSize;
    scrollEngaged = true;
    scrollBy(index, parseInt(fontSize));
    scrollInterval = setInterval("scrollBy(" + index + ", " +
        parseInt(fontSize) + ")", 100);
    evt.cancelBubble = true;
    return false;
}

function scrollBy(index, px) {
    var scroller = scrollBars[index];
    var elem = document.getElementById(scroller.ownerContentID);
    var top = parseInt(elem.style.top);
    var scrollHeight = parseInt(scroller.contentScrollHeight);
    var height = scroller.ownerHeight;
    if (scrollEngaged && top + px >= -scrollHeight + height && top + px <= 0) {
        shiftBy(elem, 0, px);
    } else {
        clearInterval(scrollInterval);
    }
}

</script>
<script type="text/javascript">

function initScrollers() {
    scrollBars[0] = new scrollBar("outerWrapper0", "innerWrapper0", "rollover22",
        "rollover23");
    scrollBars[0].initScroll();
}

</script>


</head>
<body onload="initDHTMLAPI(); initScrollers()">
<!--#include file="Topnav.asp"-->

<table  width="100%" height="100%" cellpadding=0 cellspacing=0>
  <tr>
   <td height=5></td>
   </tr>
      <tr>
            <td >
            
              <table cellpadding=0 cellspacing=0   border=0 width=100% height=100%>
             
                <tr>
                        <td width=310 valign=top   >
                        
                                    <table cellpadding=0 cellspacing=0  width="100%" border=0   >
                                         <tr class="ContentBG">
                                         
                                                <td align=left width=15 ><IMG SRC="Images/Home/frame_texture/left.gif" ></td>
                                                <td align=left  style="height: 5px; width=264 ; background-image: url(Images/Home/frame_texture/mid.gif);" ></td>
                                                <td align=right width=15 ><IMG SRC="Images/Home/frame_texture/right.gif"  ></td>
                                         </tr>
                                          <tr class="ContentBG" >
                                            <td ></td>
                                                <td height=20>
                                                    <Font class="HeaderFont">NEWS & EVENTS</Font>
                                                   
                                                </td>
                                                <td ></td>
                                         </tr>
                                        <tr class="ContentBG" >
                                            <td></td>
                                                <td  background="Images/Home/underline_pixel.gif" height=3></td>
                                                 <td ></td>
                                        </tr>
                                        <tr class="ContentBG" >
                                            <td></td>
                                                <td  height=3></td>
                                                 <td ></td>
                                        </tr>
                                        <tr class="ContentBG" >
                                            <td ></td>
                                                <td   >
                                                
                                                      <div id="pseudoWindow0" style="position:relative; border:0px">
                                                            <div id="outerWrapper0" style="position:relative; border:0px;
                                                                  height:90px; width:300px; overflow:hidden; background-color:#2c2c2c" >
                                                            <div id="innerWrapper0" style="position:relative; top:0px; left:0px;  border:0px;
                                                                  background-color:#2c2c2c ; height : 230px ; width:280px;">
                                                            <table cellpadding=0 cellspacing=0>
                                                            
                                                             
                                                            <%
                                                                        strSql = "SELECT * FROM NewsEvents where charType='N' order by datEventDate desc "
                                                                        Set rsNewsEvents = conn.execute(strSql)
                                                                        While Not rsNewsEvents.EOF
                                                                              
                                                            %>
                                                            
                                                            <tr class="ContentBG">
                                                             
                                                               <td><IMG SRC="Images/Home/bullet.gif">&nbsp;</td>
                                                               <td><font class=White ><%=rsNewsEvents("strHeading")%></font></td>
                                                            </tr>
                                                             <tr class="ContentBG">
                                                              <td></td>
                                                              <td><%=rsNewsEvents("strShortDesc")%>&nbsp;&nbsp;<a href="" class="BotNavOn">Read more</a></td>
                                                             </tr>
                                                             <tr class="ContentBG">
                                                             
                                                               <td height=10></td>
                                                               <td></td>
                                                            </tr>
                                                              <%
                                                                        rsNewsEvents.movenext
                                                                        Wend
                                                                        
                                                                        rsNewsEvents.Close
                                                                        set rsNewsEvents=nothing
                                                                  %>
                                                                  
                                                            
                                                            </table>
                                                            </div>
                                                            </div>
                                                            
                                                            <A id="scoll1"  onMouseOver="document.rollover22.src=image24.src" onMouseOut="document.rollover22.src=image23.src">
                                                            <img id="rollover22" name="rollover22" class="lineup" src="images/home/scrollup_os.gif" height="12" width="13"
                                                                  alt="Scroll Up" border="0" style="position:absolute; top:0px; left:295px" /></a>
                                                            
                                                            <A id="scoll2"  onMouseOver="document.rollover23.src=image26.src" onMouseOut="document.rollover23.src=image25.src">
                                                            <img id="rollover23" name="rollover23" class="linedown" src="images/home/scrolldown_os.gif" height="12" width="13"
                                                                  alt="Scroll Down"  style="position:absolute; top:70px; left:295px" /></a>
                                                            </div>

                                                                                                
                                                </td >
                                                <td ></td>
                                        </tr>
                                           <tr class="ContentBG">
                                            <td></td>
                                                <td  height=10></td>
                                                 <td ></td>
                                        </tr>
                                         <tr class="ContentBG">
                                         
                                                <td align=left width=10 ><IMG SRC="Images/Home/frame_texture/left.gif" ></td>
                                                <td align=left  style="height: 5px; width=274 ; background-image: url(Images/Home/frame_texture/mid.gif);" ></td>
                                                <td align=right width=10 ><IMG SRC="Images/Home/frame_texture/right.gif"  ></td>
                                         </tr>
                                         
                                           <tr >
                                            <td></td>
                                                <td  height=5></td>
                                                 <td ></td>
                                        </tr>
                                       
                                         <tr class="ContentBG">
                                         
                                                <td align=left width=15 ><IMG SRC="Images/Home/frame_texture/left.gif" ></td>
                                                <td align=left  style="height: 5px; width=264 ; background-image: url(Images/Home/frame_texture/mid.gif);" ></td>
                                                <td align=right width=15 ><IMG SRC="Images/Home/frame_texture/right.gif"  ></td>
                                         </tr>
                                          <tr >
                                            <td></td>
                                                <td  height=5></td>
                                                 <td ></td>
                                          </tr>
                                           <tr class="ContentBG">
                                            <td></td>
                                                <td  height=30 >
                                                
                                                <table border=0 cellpadding=0 cellspacing=0>
                                                
                                                      
                                                      <form>
                                                 <tr>
                                                  <td></td>
                                                 
                                                  <td>  <Font class="HeaderFont">SUBSCRIBE</Font></td>
                                                   <td align=right >&nbsp; <INPUT type="text" ID="txtSubscribe" NAME="txtSubscribe" size=30 background-image='Images/home/subscribe.gif' class=Timecodebtn></td>
                                                  <td></td>
                                                 </tr>
                                                 <tr >
                                                      <td></td>
                                                      <td  height=5></td>
                                                      <td ></td>
                                                </tr>
                                                 <tr>
                                                  <td></td>
                                                    <td></td>
                                                  <td align=right>
                                                  <A id="sbtnSubscribe"  onMouseOver="document.rollover24.src=image28.src" onMouseOut="document.rollover24.src=image27.src">
                                                  <IMG id="rollover24" name="rollover24" SRC="Images/Home/submit_os.gif"></a></td>
                                                  <td></td>
                                                  </tr>
                                                      </form>            
                                                </table>
                                                
                                                
                                                </td>
                                                 <td ></td>
                                        </tr>
                                         <tr class="ContentBG">
                                         
                                                <td align=left width=10 ><IMG SRC="Images/Home/frame_texture/left.gif" ></td>
                                                <td align=left  style="height: 5px; width=274 ; background-image: url(Images/Home/frame_texture/mid.gif);" ></td>
                                                <td align=right width=10 ><IMG SRC="Images/Home/frame_texture/right.gif"  ></td>
                                         </tr>
                                         
                                         
                                        <tr >
                                            <td></td>
                                                <td  height=5></td>
                                                 <td ></td>
                                        </tr>
                                       
                                         <tr class="ContentBG">
                                         
                                                <td align=left width=15 ><IMG SRC="Images/Home/frame_texture/left.gif" ></td>
                                                <td align=left  style="height: 5px; width=264 ; background-image: url(Images/Home/frame_texture/mid.gif);" ></td>
                                                <td align=right width=15 ><IMG SRC="Images/Home/frame_texture/right.gif"  ></td>
                                         </tr>
                                         
                                           <tr class="ContentBG" valign=top>
                                            <td></td>
                                                <td  height=70>
                                                
                                                <%
                                                      strSql = "SELECT * FROM CompanyDetails WHERE intCompanyDetailsId = 1"
                                                      Set rsCompanyDetails = conn.execute(strSql)
                                                      
                                                %>
                                                      <table border=0 cellpadding=0 cellspacing=0>
                                                       <tr>
                                                       <td width=10></td>
                                                        <td height=5></td>
                                                      
                                                       </tr>
                                                       <tr>
                                                        <td><IMG SRC="Images/Home/email.gif"></td>
                                                        <td>&nbsp;&nbsp;<a href="mailto:<%=rsCompanyDetails("strEmail")%>" class="BotNavOn"><%=rsCompanyDetails("strEmail")%></a></td>
                                                        <td width=40></td>
                                                        <td><IMG SRC="Images/Home/bullet.gif"></td>
                                                        <td>&nbsp;&nbsp;<%=rsCompanyDetails("strAddr1")%></td>
                                                       </tr>
                                                       <tr>
                                                        <td></td>
                                                        <td><font class=White>&nbsp;&nbsp;Tel : </font><%=rsCompanyDetails("strTel")%></td>
                                                        <td></td>
                                                        <td></td>
                                                        <td>&nbsp;&nbsp;<%=rsCompanyDetails("strAddr2")%></td>
                                                       </tr>
                                                        <tr>
                                                        <td></td>
                                                        <td><font class=White>&nbsp;&nbsp;Fax : </font><%=rsCompanyDetails("strFax")%></td>
                                                        <td></td>
                                                        <td></td>
                                                       <td>&nbsp;&nbsp;<%=rsCompanyDetails("strAddr3")%></td>
                                                       </tr>
                                                        <tr>
                                                        <td></td>
                                                        <td></td>
                                                        <td></td>
                                                        <td></td>
                                                        <td>&nbsp;&nbsp;<%=rsCompanyDetails("strAddrCity")%></td>
                                                       </tr>
                                                      </table>
                                                
                                                
                                                </td>
                                                 <td ></td>
                                        </tr>
                                         <tr class="ContentBG">
                                         
                                                <td align=left width=10 ><IMG SRC="Images/Home/frame_texture/left.gif" ></td>
                                                <td align=left  style="height: 5px; width=274 ; background-image: url(Images/Home/frame_texture/mid.gif);" ></td>
                                                <td align=right width=10 ><IMG SRC="Images/Home/frame_texture/right.gif"  ></td>
                                         </tr>
                                    
                                    </table>
                                    </td>
                                    
                                                                           
                                          <td width=10>&nbsp;</td>
                                          <td width=430 valign=top align=right  height=100 >
                                          
                                          <table cellpadding=0 cellspacing=0 width="100%" border=0   ID="Table1">
                                         <tr class="ContentBG" >
                                         
                                                <td align=left width=10 ><IMG SRC="Images/Home/frame_texture/left.gif" ></td>
                                                <td align=left  style="height: 5px; width=400 ; background-image: url(Images/Home/frame_texture/mid.gif);" ></td>
                                                <td align=right width=10 ><IMG SRC="Images/Home/frame_texture/right.gif"  ></td>
                                         </tr>
                                         
                                       
                                        <tr  class="ContentBG" >
                                            <td width=5></td>
                                                <td  height=200 align=center >text</td >
                                                <td ></td>
                                        </tr>
                                        <tr class="ContentBG" >
                                         
                                                <td align=left width=10 ><IMG SRC="Images/Home/frame_texture/left.gif" ></td>
                                                <td align=left  style="height: 5px; width=400 ; background-image: url(Images/Home/frame_texture/mid.gif);" ></td>
                                                <td align=right width=10 ><IMG SRC="Images/Home/frame_texture/right.gif"  ></td>
                                         </tr>
                                         
                                       <tr   >
                                            <td width=5></td>
                                                <td  height=5 align=center ></td >
                                                <td ></td>
                                        </tr>
                                         <tr  class="ContentBG" >
                                            <td width=5></td>
                                                <td  height=90 align=center >ANIMATED GIF</td >
                                                <td ></td>
                                        </tr>
                                       
                                    
                                    </table>
                        
                  </td>
                  </tr>
                  </table>
            
                  
            </td>
             
            </tr>
  <tr><td height=5></td></tr>
</table>

<!--#include file="footer.asp"-->

</body>
</html>


could you send me the website as well please,
Thanks

- Animasu
http://www.timecode.co.za/stansite/home.asp?mnuID=1

go to this link check it out in IE versus Firefox
Looks fine to me... they both look identical


- Animasu
you serious

what version of firefox you using .
Can you see the word submit and a submit text box
underneath the events.

Maybe its broken in both you browsers
Sorry sorry! i see it, i must have missed that part, i see submit but its not standing out like it is in IE7
Give me a few, ill see what i can do!
-Animasu
The subcribe section is not visible in Mozilla,,,,

Avatar of DreamMaster
DreamMaster

Hi Stanton_Roux,

Scrolling doesn't work the way you'd expect either in Firefox. Try taking out the part where you are putting in all the news. Just take out that block and see what happens then. I am pretty sure the error is in there. If the page works as expected without the news messages and the scrolling. Try taking out this block:

<%
        strSql = "SELECT * FROM NewsEvents where charType='N' order by datEventDate desc "
        Set rsNewsEvents = conn.execute(strSql)
        While Not rsNewsEvents.EOF
             
%>

<tr class="ContentBG">

 <td><IMG SRC="Images/Home/bullet.gif">&nbsp;</td>
 <td><font class=White ><%=rsNewsEvents("strHeading")%></font></td>
</tr>
<tr class="ContentBG">
<td></td>
<td><%=rsNewsEvents("strShortDesc")%>&nbsp;&nbsp;<a href="" class="BotNavOn">Read more</a></td>
</tr>
<tr class="ContentBG">

 <td height=10></td>
 <td></td>
</tr>
<%
        rsNewsEvents.movenext
        Wend
       
        rsNewsEvents.Close
        set rsNewsEvents=nothing
   %>

See if it works then. The scrolling part seems to be the problem, so it would be wise to disect the error accordingly and make the problem smaller...

Regards,
Max.
ASKER CERTIFIED SOLUTION
Avatar of DreamMaster
DreamMaster

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Sorry about that Animasu, just trying to help along ;) I just hope it helps.

Regards,
Max.
:) its ok! Thats what this place is for, to help people!

- Animasu!
Thanks guys

Saved me rewriting the whole page
Your welcome! and thank you too :)

- Animasu
Glad to have helped. :)

Regards,
Max.