Solved: firefox problem

sijet · 20-Jun-2008, 10:38 AM #1

site:
http://ivcfbicol.mine.nu/web

works fine with IE but my banner and menu looks awful

PHP Code:

  <!DOCTYPE html PUBLIC "-//W3C//DTD/XHTML 1.0 Transitional//EN"

  "http://www.w3.org/TR/xhtml1/DTD/xhtml11-transitional.dtd">

<html>

<head>

<!-- DW6 -->

<html xmlns="http://www.w3.org/1999/xhtml\" xml:lang=\"en\">

<meta name="Author" content="JethRO Genesis">

    <meta name="Keywords" content="IVCF BIKOL, IVCF BICOL, IVCF Legazpi">

    <meta name="Description" content="InterVarsity Christian Fellowship">

    <meta name="Copyright" content="jethRO™">

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<title>IVCF :::: Bikol</title>

<link rel="stylesheet" href="3col_rightNav.css" type="text/css">

<style type="text/css">

<!--

body {

    background-color: #FFFFFF;

    background-image: url(images/background.jpg);

}

-->

 
</style>

</head>

<body>

<style type="text/css">

<!--

.style1 {color: #FF0000}

-->

</style>

<table width="952" height="170" border="0" align="center" cellpadding="0" cellspacing="0">

    <tr>

        <td colspan="9">

            <img src="images/bannermenu_01.gif" width="952" height="138" alt=""></td>

    </tr>

    <tr>

        <td>

 
            <img src="images/bannermenu_02.gif" width="133" height="32" alt=""></td>

        <td>

            <a href="./index.php?act=idx">

                <img src="images/index-red_03.gif" width="48" height="32" border="0" alt="¤ IVCF Bikol Homepage ¤"></a></td>

        <td>

            <a href="http://ivcfbicol.mine.nu/forum" target="_blank">

                <img src="images/index-red_04.gif" width="55" height="32" border="0" alt="¤ IVCF Bikol Community Forum ¤"></a></td>

        <td>

            <a href="./index.php?act=board">

 
                <img src="images/index-red_05.gif" width="67" height="32" border="0" alt="¤ IVCF Bikol Bulletin Board ¤"></a></td>

        <td>

            <a href="./index.php?act=gallery">

                <img src="images/index-red_06.gif" width="61" height="32" border="0" alt="¤ IVCF Bikol Gallery ¤"></a></td>

        <td>

            <a href="./index.php?act=members">

                <img src="images/index-red_07.gif" width="77" height="32" border="0" alt="¤ IVCF Bikol Directory ¤"></a></td>

        <td nowrap>

            <img src="images/bannermenu_08.gif" width="69" height="32" alt=""></td>

 
        <td>

            <a href="./index.php?act=register">

                <img src="images/index-red_09.jpg" width="66" height="32" border="0" alt="¤ Register Here ¤"></a></td>

      <td><img src="images/bannermenu_10.gif"></td>

    </tr>

</table><div align="center">

<table width="952" border="0" cellspacing="0" bordercolor="#FFFFFF" bgcolor="#FFFFFF">

  <tr align="left" valign="bottom">

    <td>&nbsp;</td>

    <td><h2 id="pageName">

 
            </h2></td>

    <td valign="top"><div id="login" align="right">

        <b><form name="login-form" id="login-form" method="post" action=""> 

    Username <input accesskey="u" class="log" name="username" type="text" size="10" maxlength="13" id="username" /><br>Password <input accesskey="p" class="log" name="password" type="password" size="10" maxlength="24" id="password" /><br><input accesskey="l" type="submit" class="btnmain" name="cmdlogin" value="Login"/></form></b>

        </div></td>

  </tr>

  <tr valign="top" bgcolor="#FFFFFF">

    <td colspan="3"></td>

 
  </tr>

  <tr>

    <td width="169" height="31" rowspan="2" align="center" valign="top">        <h3><a href="http://www.wowhits.com" target="_blank"> <br>

              <img src="images/wowhits.jpg" alt="" width="111" height="95" border="0"></a> </h3></td>

    <td width="622" rowspan="3" align="center" valign="top"><div id="headlines">

        <div align="center">

  <DIV>

 
       <p class="style1">Casting Crowns - Praise You In This Storm</p>

  </DIV>

  <p>

    <object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/Ji2rLXr3cEU&hl=en"></param><embed src="http://www.youtube.com/v/Ji2rLXr3cEU&hl=en" type="application/x-shockwave-flash" width="425" height="344"></embed></object>

</p>

<div style="text-align: center; margin-left: auto; visibility:visible; margin-right: auto; width:450px;">

    <object type="application/x-shockwave-flash" width="435" height="270" data="http://www.greatprofilemusic.com/loadplaylist/37649462/config_blue_noautostart_shuffle/270/430/true"><param name="bgcolor" value="#e8e8e8"><param name="movie" value="http://www.greatprofilemusic.com/loadplaylist/37649462/config_blue_noautostart_shuffle/270/430/true"></object>

</div>

</div>    </div></td>

    <td width="157" valign="top"></td>

 
  </tr>

  <tr>

    <td height="150" align="right" valign="top" bgcolor="#FFFFFF"><!-- Begin ShoutMix - http://www.shoutmix.com -->

        <iframe title="jetoy" src="http://www4.shoutmix.com/?jetoy" width="168" height="400" frameborder="0" scrolling="auto"> <a href="http://www4.shoutmix.com/?jetoy">View shoutbox</a> </iframe>

        <!-- End ShoutMix --></td>

  </tr>

  <tr>

    <td width="169" valign="top"><p>&nbsp;</p></td>

 
    <td valign="top" bgcolor="#FFFFFF">&nbsp;</td>

  </tr>

</table>

<div id="globalNav"></div> 

<!-- end masthead -->

<!-- end content -->

<!--end navBar div -->

<div id="siteInfo"> 

  <img src="" width="44" height="22"> <a href="#">About Us</a> | <a href="#">Site

  Map</a> | <a href="#">Privacy Policy</a> | <a href="#">Contact Us</a> | Bicol DevTeam &copy; 2008 | <!-- www.bestfreehitcounters.com Code START Your Page ID: 21287 --><img style="border: 0px" src="http://www.bestfreehitcounters.com/count.php?page=21287" alt="Visits"><!-- web count -->

 
</div> 

<br> 

</div>

</body>

</html>

CSS

PHP Code:

  /***********************************************/

/* 3col_rightNav.css                              */

/* Use with template 3col_rightNav.html           */

/***********************************************/

 
/***********************************************/

/* HTML tag styles                             */

/***********************************************/ 

 
.btnmain {

    font-weight: normal;

    background-color: #FFFFFF;

    border: 1px solid #000000;

    cursor: pointer;

    padding: 0px 0px 0px 0px;

    font-size: 0.8em;

    color: #000000;

 
}

.log {

    font-weight: normal;

    background-color: #FFFFFF;

    border: 1px solid #000000;

    padding: 0px 0px 0px 0px;

    font-size: 1.1em;

    color: #000000;

 
}

 
body{

    font-family: Arial,sans-serif;

    color: #333333;

    line-height: 1.166;    

    }

 
a{

    color: #006699;

    text-decoration: none;

}

 
a:link{

    color: #006699;

    text-decoration: none;

}

 
a:visited{

    color: #006699;

    text-decoration: none;

}

 
a:hover{

    color: #006699;

}

j{

 font-family: Verdana, Arial, Helvetica, sans-serif;

 font-size: 100%;

 color: #FF0000;

 
}

h1{

 font: Arial, Helvetica, sans-serif;

 font-size: 100%;

 color: #334d55;

 margin: 0px;

 padding: 0px;

}

 
h2{

 font-family: Arial,sans-serif;

 font-size: 114%;

 color: #006699;

 margin: 0px;

 padding: 0px;

}

 
h3{

 font-family: Arial,sans-serif;

 font-size: 100%;

 color: #334d55;

 margin: 0px;

 padding: 0px;

}

 
h4{

 font-family: Arial,sans-serif;

 font-size: 100%;

 font-weight: normal;

 color: #333333;

 margin: 0px;

 padding: 0px;

}

 
h5{

 font-family: Verdana,Arial,sans-serif;

 font-size: 100%;

 color: #334d55;

 margin: 0px;

 padding: 0px;

}

 
ul{

 list-style-type: square;

}

 
ul ul{

 list-style-type: disc;

}

 
ul ul ul{

 list-style-type: none;

}

 
label{

 font-family: Arial,sans-serif;

 font-size: 100%;

 font-weight: bold;

 color: #334d55;

}

 
 
/***********************************************/

/* Layout Divs                                 */

/***********************************************/

#banner{

    padding: 30px 0px 0px 0px;

}

#masthead{

    padding: 0px 0px 0px 0px;

        }

#login{

    font-size: 70%;

    padding: 5px 0px;

    color: #000000;

}

#menu{

    float: right;

    font-size: 75%;

    color: #000000;

    

}

#navBar{

    margin: 0px;

    padding: 0px;

}

#menuBar{

    margin: 0px;

}

 
#headlines{

    border: 0px solid #cccccc;

    padding: 0px;

}

 
#articles{

    padding: 40px;

    text-align: justify;

}

 
#content{

    /*background-image: url('./images/cellpic.gif');

    background-repeat: repeat-y;*/

    border: 1px solid #cccccc;

    padding: 0px 0px 0px 0px;

    font: Arial, Helvetica, sans-serif;

}

 
/***********************************************/

/* Components                                  */

/***********************************************/

 
#siteName{

    font-size: 100%;

    margin: 0;

    padding: 0 0 0 5px;

    background-image: url('./images/cellpic3.gif');

    }

#MainNav{

    margin: 0;

    font-size: 65%;

    padding: 0px 0px 2px 5px;

    border-top: 1px solid #FFFFFF;

    background-image: url('./images/cellpic1.gif');

}

 
/************* #globalNav styles **************/

 
#globalNav{

    padding: 10px 0px 0px 10px;

    border-bottom: 1px solid #CCC;

    color: #cccccc;

}

 
 
#globalNav img{

 display: block;

}

 
#globalNav a {

    font-size: 90%;

    padding: 0 4px 0 0;

}

 
/*************** #pageName styles **************/

 
#pageName{

    font-size: 80%;

    float: left;

    margin: 0px;

    padding: 0px 0px 0px 45px;

}

#page{

    float: left;

    font-size: 100%;

    padding: 0px 0px 0px 0px;

}

/************* #breadCrumb styles *************/

 
#breadCrumb{

    font-size: 80%;

    padding: 2px 0px 0 5px;

    

    

}

 
 
/************** .feature styles ***************/

 
.feature{

    padding: 0px 0px 10px 10px;

    font-size: 80%;

    text-align: justify;

    font: Arial, Helvetica, sans-serif;

}

 
.feature h3{

    padding: 30px 0px 5px 0px;

    text-align: center;

}

 
.feature img{

    float: left;

    padding: 10px 10px 0px 0px;

}

 
 
/************** .story styles *****************/

 
.story{

    clear: both;

    font-size: 80%;

    text-align:justify

}

 
.story p{

    padding: 0px 0px 0px 0px;

}

 
 
/************* #siteInfo styles ***************/

 
#siteInfo{

    clear: both;

    border: 1px solid #cccccc;

    font-size: 75%;

    color: #cccccc;

    padding: 10px 10px 10px 10px;

}

 
#siteInfo img{

    padding: 4px 4px 4px 10px;

    vertical-align: middle;

}

 
 
/************* #search styles ***************/

 
#search{

    padding: 0px;

    border-bottom: 1px solid #cccccc;

    font-size: 90%;

}

 
#search form{

 margin: 0px;

 padding: 0px;

}

 
#search label{

    display: block;

    margin: 0px;

    padding: 0px;

}

 
 
/*********** #navBar link styles ***********/

 
#navBar ul a:link, #navBar ul a:visited {display: block;}

#navBar ul {list-style: none; margin: 0; padding: 0;}

 
/* hack to fix IE/Win's broken rendering of block-level anchors in lists */

#navBar li {border-bottom: 1px solid #EEE;}

 
/* fix for browsers that don't need the hack */

html>body #navBar li {border-bottom: none;}

 
 
 
/*********** #sectionLinks styles ***********/

 
#menuBar ul a:link, #navBar ul a:visited {display: block;}

#menuBar ul {list-style: none; margin: 0; padding: 0;}

 
/* hack to fix IE/Win's broken rendering of block-level anchors in lists */

#menuBar li {border-bottom: 1px solid #EEE;}

 
/* fix for browsers that don't need the hack */

html>body #menuBar li {border-bottom: none;}

 
 
#sectionLinks{

    margin: 0px;

    padding: 0px;

    font-size: 90%;

}

 
#sectionLinks h3{

    padding: 10px 0px 2px 10px;

}

 
#sectionLinks a {

    display: block;

    padding: 2px 0px 2px 10px;

}

 
#sectionLinks a:hover{

    background-color: #EFEFEF;

    text-shadow:Black;

}

 
 
/*********** .relatedLinks styles ***********/

 
.relatedLinks{

    margin: 0px;

    padding: 0px 0px 10px 10px;

    font-size: 90%;

}

 
.relatedLinks h3{

    padding: 10px 0px 2px 0px;

}

 
.relatedLinks a:link,

.relatedLinks a:visited {

    display: block; 

}

 
/************** #advert styles **************/

 
#advert{

    padding: 30px 0px 10px;

}

 
#advert img{

    display: block;

}

 
 
/************** #headlines styles **************/

 
#headlines{

    margin: 0px;

    padding: 5px;

    font-size: 80%;

}

 
#headlines p{

    padding: 0px;

}

 
 
.banner {

    background-repeat: no-repeat;

    background-image: url('./images/banner.jpg');

}

Mr.LLB · 20-Jun-2008, 10:42 AM #2

works in FF for me.......can you please attach a screenshot of what the problem is

sijet · 20-Jun-2008, 10:53 AM #3

here it is

tomdkat · 20-Jun-2008, 12:05 PM #4

I see the same thing as you, sijet. I think it's the DOCTYPE you're using. You're specifying a XHTML DOCTYPE, which puts the browser into "standards" mode but your HTML isn't compliant with the XHTML standards:

http://validator.w3.org/check?uri=ht...Inline&group=0

I would try backing off to a HTML 4 DOCTYPE, like this one:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

However, BEFORE changing your DOCTYPE to an arbitrary one, read this to learn more about how the DOCTYPE affects the browser.

Peace...

sijet · 20-Jun-2008, 12:17 PM #5

wow! tnx a lot! its working now.

tomdkat · 20-Jun-2008, 12:24 PM #6

Did you use the DOCTYPE I posted above?

Peace...

sijet · 20-Jun-2008, 12:45 PM #7

yes i dit and its working now

tnx again

Search
Search in:
Show Threads Show Posts
Advanced Search