FF/IE Problem

Discussion in 'CSS' started by Java Junkie, Jul 15, 2007.

0
  1. #1
    Hello,

    I'm VERY new to CSS and really just futzing around trying to throw together a non-commercial website and am having problems getting it to display correctly in IE. I know that IE doesn't exactly "play well" with CSS but I do know what I WANT my page to do can be done, I'm just obviously not doing it right. Anyone able to take a quick peek at my coding and let me know what I'm doing wrong?


    -
    Java (the beverage, not the language) Junkie
     
    Java Junkie, Jul 15, 2007 IP
  2. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Can you provide the code for your page (using the forum's bbCode or a link - since you're new here, the link will not be active, and will be displayed as plain text)?
     
    Dan Schulz, Jul 15, 2007 IP
  3. Java Junkie

    Java Junkie Peon

    Messages:
    6
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    ok :) - I'm trying to get header3.gif to be horizontally centered within the container. In FF it is, however in IE it aligns to the right. Not quite sure how to get it to center in both. Any help would be much appreciated




    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    <!--
    body {
    font: 100% Verdana, Arial, Helvetica, sans-serif;
    background-color: #1D0707;
    margin: 0;
    padding: 0;
    text-align: center;
    color: #000000;
    }
    .oneColFixCtrHdr #container {
    width: 1024px;
    text-align: center;
    margin-top: 0px;
    background-image:url(images/BackgroundTile.jpg);
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
    border-top-width: 5px;
    border-right-width: 5px;
    border-bottom-width: 5px;
    border-left-width: 5px;
    border-top-style: inset;
    border-right-style: outset;
    border-bottom-style: outset;
    border-left-style: inset;
    border-top-color: #dddddd;
    border-right-color: #dddddd;
    border-bottom-color: #dddddd;
    border-left-color: #dddddd;
    }
    .oneColFixCtrHdr #header {
    background: #;
    height: 156px;
    padding: 0;
    }
    .oneColFixCtrHdr #header h1 {
    margin: 0;
    padding: 10px 0;
    }
    .oneColFixCtrHdr #mainContent {
    padding: 0 20px;
    }
    .oneColFixCtrHdr #footer { background-image:url(images/BottomBar.gif);
    height: 114px;
    padding: 0 10px;
    }
    .oneColFixCtrHdr #footer p {
    margin: 0;
    padding: 10px 0;
    }
    #apDiv1 {
    position:absolute;
    left:126px;
    top:143px;
    width:1006px;
    height:32px;
    background-image: url(images/MenuBar.gif);
    right: auto;
    }
    #apDiv2 {
    position:fixed;
    left:auto;
    top:auto;
    width:1024px;
    height:156px;
    z-index:2;
    background-image: url(images/Header3.gif);
    bottom: auto;
    }
    .oneColFixCtrHdr #container #mainContent table {
    }
    .oneColFixCtrHdr #mainContent {
    }
    .oneColFixCtrHdr #container #mainContent table {
    overflow: scroll;
    }
    .oneColFixCtrHdr #container #mainContent table {
    overflow: scroll;
    }
    #apDiv3 {
    position:absolute;
    left:287px;
    top:342px;
    width:651px;
    height:313px;
    z-index:3;
    overflow: auto;
    }
    -->
    </style>
    <script type="text/javascript">
    <!--
    function MM_swapImgRestore() { //v3.0
    var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a)&&x.oSrc;i++) x.src=x.oSrc;
    }
    function MM_preloadImages() { //v3.0
    var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a.indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a;}}
    }

    function MM_findObj(n, d) { //v4.01
    var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
    if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[n];
    for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers.document);
    if(!x && d.getElementById) x=d.getElementById(n); return x;
    }

    function MM_swapImage() { //v3.0
    var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
    if ((x=MM_findObj(a))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
    }
    //-->
    </script>
    </head>

    <body class="oneColFixCtrHdr" onload="MM_preloadImages('images/HomeOff.gif','images/PhilosophyOn.gif','images/HierarchyOn.gif','images/FAQon.gif','images/ConductOn.gif','images/MemberOn.gif','images/ContactOn.gif')">


    <div id="apDiv3">
    <p>filler</p>
    </div>
    <div id="container" align="center">
    <div id="header" align="center">
    <div align="center" class="oneColFixCtrHdr" id="apDiv1">
    <table width="100%" border="0" align="center">
    <tr align="center" valign="middle">
    <td height="27" valign="middle"><a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Home','','images/HomeOn.gif',1)"><img src="images/HomeOff.gif" name="Home" width="43" height="25" border="0" id="Home" /></a></td>
    <td height="27" valign="middle">&nbsp;</td>
    <td height="27" valign="middle"><a href="philosophy.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Philosophy','','images/PhilosophyOn.gif',1)"><img src="images/PhilosophyOff.gif" name="Philosophy" width="81" height="25" border="0" id="Philosophy" /></a></td>
    <td height="27" valign="middle">&nbsp;</td>
    <td height="27" valign="middle"><a href="hierarchy.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Hierarchy','','images/HierarchyOn.gif',1)"><img src="images/HierarchyOff.gif" name="Hierarchy" width="78" height="25" border="0" id="Hierarchy" /></a></td>
    <td height="27" valign="middle">&nbsp;</td>
    <td height="27" valign="middle"><a href="faq.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('FAQ','','images/FAQon.gif',1)"><img src="images/FAQoff.gif" name="FAQ" width="35" height="25" border="0" id="FAQ" /></a></td>
    <td height="27" valign="middle">&nbsp;</td>
    <td height="27" valign="middle"><a href="conduct.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Conduct','','images/ConductOn.gif',1)"><img src="images/ConductOff.gif" name="Conduct" width="67" height="25" border="0" id="Conduct" /></a></td>
    <td height="27" valign="middle">&nbsp;</td>
    <td height="27" valign="middle"><a href="membershipinfo.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Membership Info','','images/MemberOn.gif',1)"><img src="images/MemberOff.gif" name="Membership Info" width="120" height="25" border="0" id="Membership Info" /></a></td>
    <td height="27" valign="middle">&nbsp;</td>
    <td height="27" valign="middle"><a href="contact.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Contact','','images/ContactOn.gif',1)"><img src="images/ContactOff.gif" name="Contact" width="66" height="25" border="0" id="Contact" /></a></td>
    </tr>
    </table>
    </div>
    <div id="apDiv2" align="center"></div>
    <!-- end #header --></div>
    <div id="mainContent">
    <h1>&nbsp; </h1>
    <table width="750" height="440" border="0" align="center" cellspacing="60" background="images/PhilosophyParchment.gif">
    <tr align="right" class="oneColFixCtrHdr">
    <td class="oneColFixCtrHdr"><h1>&nbsp;</h1>
    <p>&nbsp;</p>
    </td>
    </tr>
    </table>
    <h1>&nbsp;</h1>
    <!-- end #mainContent --></div>
    <div id="footer">
    <p>Footer</p>
    <!-- end #footer --></div>
    <!-- end #container --></div>
    </body>
    </html>
     
    Java Junkie, Jul 15, 2007 IP
  4. webdesigner

    webdesigner Well-Known Member

    Messages:
    489
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    110
    #4
    To center your header is fairly simple, if you use this as a guide:

    CSS:
    HTML:
     
    webdesigner, Jul 16, 2007 IP
  5. Java Junkie

    Java Junkie Peon

    Messages:
    6
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Ok I changed that (thank you so much btw) but now the Z indexes for apDiv1 and apDiv2 are negated. How do I get abDiv2 on a higher priority z-index than apDiv1 while maintaining the alignment? :)
     
    Java Junkie, Jul 16, 2007 IP