SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Zealot
    Join Date
    Dec 2003
    Location
    springfield,IL
    Posts
    102
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Firefox problem aligning

    When view my website, some of pages in my site do not align properly in FireFox. In IE it seem to align without a problem. When I initially view the page in Firefox it sometimes is misalign but if I refresh the page, it corrects itself.

    I have been going nuts in trying to figure this out. I appreciate any help in advance.

    -Chuck


    i.e. First time viewing in Firefox


    If I refresh the page, it looks fine.



    Here is my code: ( The area that is remarked Right Content is where the problem is)

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    	<title>ISCECA - Home</title>
    <link href="style.css" rel="stylesheet" type="text/css">
    <script type="text/JavaScript">
    <!--
    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[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    }
    
    function MM_swapImgRestore() { //v3.0
      var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
    }
    
    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[i][n];
      for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].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[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
    }
    //-->
    </script>
    </head>
    
    <body onLoad="MM_preloadImages('images/iusf_f2.gif','images/avg_f2.gif','images/about_f2.gif','images/home_f2.gif')">
    
    <div class="wrap">
    <div id="top">
    <img alt="" src="images/spacer.gif" width="1" height="45"><br>
    <form action="" style="margin:0; padding:0 ">
      <a href="index.html"><img src="images/head_logo.gif" alt="" border="0" class="abs"></a>
    </form>
    
    </div>
    
    
    
    <div id="content" class="clear">
    <img alt="" src="images/spacer.gif" width="1" height="15"><br>
    
    <img src="images/header.jpg" alt="" width="461" height="119" hspace="10" border="0" align="right">
    
    <a href="index-1.html"><img src="images/about.gif" alt="About" width="112" height="28" hspace="30" border="0" id="Image1" onMouseOver="MM_swapImage('Image1','','images/about_f2.gif',1)" onMouseOut="MM_swapImgRestore()"></a><br>
    
    <a href="index-2.html"><img src="images/iusf.gif" alt="IUSF" width="112" height="28" hspace="30" border="0" id="Image2" onMouseOver="MM_swapImage('Image2','','images/iusf_f2.gif',1)" onMouseOut="MM_swapImgRestore()"></a><br>
    
    <a href="index-3.html"><img src="images/avg.gif" alt="Average Schedule" width="130" height="28" hspace="30" border="0" id="Image3" onMouseOver="MM_swapImage('Image3','','images/avg_f2.gif',1)" onMouseOut="MM_swapImgRestore()"></a><br>
    
    <img src="images/members.gif" alt="Members" width="112" height="28" hspace="30" border="0"><br>
    
    <a href="index.html"><img src="images/home.gif" alt="Home" width="112" height="28" hspace="30" border="0" id="Image4" onMouseOver="MM_swapImage('Image4','','images/home_f2.gif',1)" onMouseOut="MM_swapImgRestore()"></a><br>
    
    <img alt="" src="images/top_line.gif" class="clear"><br>
    <!--_____________________________________________________left_content_____________________________________________________-->
    <div id="left_content">
    <div class="inner">
    <img alt="" src="images/1txt1.gif"><br>
    <br>
    <strong class="t"><a href="index-3.html">Average Schedule </a></strong><br>
    <img alt="" src="images/spacer.gif" width="1" height="4"><br> 
    The ICC approved ISCECA's filing which increases the local switching rate effective November 1, 2006.<br>
    <img alt="" src="images/spacer.gif" width="1" height="9"><br>
    <br>
    <div class="line"><img alt="" src="images/spacer.gif"></div>
    <strong class="t"><a href="index-2.html">IUSF </a></strong><br>
    <img alt="" src="images/spacer.gif" width="1" height="4"><br> 
    The current IUSF surcharge is 0.3481% to be used for the October 2006 thru September 2007 IUSF plan year.
    <br>
    <img alt="" src="images/spacer.gif" width="1" height="9"><br>
    <br>
    <div class="line"><img alt="" src="images/spacer.gif"></div>
    <br>
    </div></div>
    <!--_____________________________________________________end_left_content_____________________________________________________-->
    
    <!--_____________________________________________________right_content_____________________________________________________-->
    <div id="right_content">
    <div class="inner">
    <img alt="" src="images/1txt2.gif"><br>
    <br>
    <img src="images/overview.jpg" alt="overview" width="161" height="71" align="left" class="img" style="margin-bottom:20px ">
    <strong class="red nu">OVERVIEW: </strong><br>
    <img alt="" src="images/spacer.gif" width="1" height="4"><br>
    The Illinois Small Company Exchange Carrier Association, Inc. (&quot;ISCECA&quot;) is an Illinois not-for-profit corporation established pursuant to the Illinois Commerce Commission's <a href="docs/37order.pdf" target="_blank">Thirty Seventh Interim Order</a> dated July 20, 1988  in Docket No. 83-0142.<br>
    <img alt="" src="images/spacer.gif" width="1" height="4"><br>
    <a href="docs/37order.pdf" target="_blank" class="blue u">read more</a><br>
    <div class="line"><img alt="" src="images/spacer.gif"></div>
    </div>
    </div>
    <!--_____________________________________________________________end_right_content_____________________________________________________-->
    </div>
    <img alt="" src="images/spacer.gif" width="1" height="15" class="clear"><br>
    <div id="footer" class="clear bot_txt">
    <img alt="" src="images/spacer.gif" width="1" height="20"><br>
    <img alt="" src="images/spacer.gif" width="5" height="1"><a href="index.html" class="menu"><strong>Home</strong></a><span class="sm">&nbsp;&nbsp;&nbsp;&bull;&nbsp;&nbsp;&nbsp;</span><a href="index-1.html" class="menu">About us</a><span class="sm">&nbsp;&nbsp;&nbsp;&bull;&nbsp;&nbsp;&nbsp;</span><a href="index-2.html" class="menu">IUSF</a><span class="sm">&nbsp;&nbsp;&nbsp;&bull;&nbsp;&nbsp;&nbsp;</span><a href="index-3.html" class="menu">Average Schedule </a><span class="sm">&nbsp;&nbsp;&nbsp;&bull;&nbsp;&nbsp;&nbsp;</span>Members<br>
    <img alt="" src="images/spacer.gif" width="1" height="7"><br>
    <img alt="" src="images/spacer.gif" width="5" height="1">ISCECA &copy; 2007.  Privacy Policy</div>
    </div>
    </body>
    </html>
    This is my CSS file:
    Code:
    .img {margin-right:14px}
    
    body {background:#ffffff;
    color:#858484;
    font-family:tahoma;
    font-size:11px;
    padding:0;
    margin:0;
    line-height:13px;
    text-align:center;
    margin-left:1px;
    }
    
    
    .wrap {background:url(images/bg.gif) left repeat-y #ffffff;
    margin:0px auto;
    padding:0;
    width:710px;
    }
    
    #top {background:url(images/top_px.gif) bottom repeat-x #ffffff;
    margin:0px auto 0px auto;
    width:710px;
    height:102px;
    text-align:left;
    padding:0px;
    }
    
    #content {
    width:710px;
    margin:0;
    padding:0;
    text-align:left;
    height:428px;
    display:table;}
    
    #footer {background:url(images/top_px.gif) top repeat-x #ffffff;
    width:710px;
    height:101px;
    margin:0;
    padding:0;
    text-align:left;}
    
    .line {background:url(images/dot.gif);
    height:1px;
    margin-bottom:15px;
    margin-top:15px}
    
    .copy {color:#5C5C5B; text-decoration:none; line-height:16px}
    
    /*-------------------------------------------------------PAGE_1,2,3,4-------------------------------------------------------*/
    
    #left_content {background:url(images/px.gif) right repeat-y;
    padding:0;
    margin:0;
    text-align:left;
    width:230px;
    float:left;
    }
    
    #right_content {
    padding:0;
    margin:0;
    float:right;
    text-align:left;
    width:480px;
    display:table;
    }
    
    .inner {margin:20px; margin-bottom:0px}
    
    /*--1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111--*/
    
    .gray {color:#858484; text-decoration:underline}
    .gray_l {color:#A8B0B4; text-decoration:none}
    .gray_d {color:#363636; text-decoration:none}
    .red {color:#9C0000; text-decoration:underline}
    .blue {color:#006BA2; text-decoration:none}
    .bot_txt {color:#A6A6A6; text-decoration:none}
    .menu {color:#474747; text-decoration:none}
    
    .abs {vertical-align:middle}
    .big {font-size:12px}
    .n {font-size:11px}
    .sm {font-size:10px}
    
    .clear {
    clear:both}
    
    a {	color:#9C0000; text-decoration:underline}
    
    .abs {vertical-align:middle}
    		
    .form_search { width:135px;
    		height:17px;
    		font-family:tahoma;
    		font-size:11px;
    		border-style:solid;
    		border-width:1px;
    		border-top-color:#404040;
    		border-right-color:#D4D0C8;
    		border-bottom-color:#D4D0C8;
    		border-left-color:#404040;
    		background-color:#ffffff;
    		color:#949494;
    		padding:1px}
    		
    .form_news { width:144px;
    		height:22px;
    		font-family:tahoma;
    		font-size:13px;
    		border-style:solid;
    		border-width:1px;
    		border-color:#808080;
    		background-color:#ffffff;
    		color:#5A5A5A;
    		margin-left:0px;
    		margin-right:0px}
    		
    .form { width:218px;
    		height:21px;
    		font-family:tahoma;
    		font-size:11px;
    		border-style:;
    		border-width:;
    		border-color:#;
    		background-color:#ffffff;
    		color:#484746;
    		margin-left:0px;
    		margin-right:0px}
    		
    .textarea { width:218px;
    		height:81px;
    		font-family:tahoma;
    		font-size:11px;
    		border-style:;
    		border-width:;
    		border-color:#;
    		background-color:#ffffff;
    		color:#484746;
    		overflow:auto;
    		margin-left:0px;
    		margin-right:0px}
    		
    .u		{text-decoration:underline}
    .nu		{text-decoration:none}
    .t 		{text-transform:uppercase}
    
    a:hover{text-decoration:none;}
    .a:hover{text-decoration:underline;}
    .menu:hover{text-decoration:underline;}
    .green:hover{text-decoration:none}

  2. #2
    SitePoint Wizard drhowarddrfine's Avatar
    Join Date
    Aug 2005
    Posts
    3,438
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Assign a height/width to the images. That should fix it.

  3. #3
    SitePoint Zealot
    Join Date
    Dec 2003
    Location
    springfield,IL
    Posts
    102
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    drhowarddrfine,
    I tried that, but still no luck. I appreciate you responding.

    One thing I did notice was that since it is a two column format, anything on the right side (column) gets pushed down to the length of the left column initially.

    Something with my CSS file or DIV tags is not set properly. I hope this helps someone narrow my problem.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •