Web Analytics Made Easy -
StatCounter CSS and FireFox Text display - CodingForum

Announcement

Collapse
No announcement yet.

CSS and FireFox Text display

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • CSS and FireFox Text display

    On the top of my page i have a layer with my name. this displays correctly in IE. but in FireFox it displays between the first and second layer so i can only see half my name. is there any way of getting FF to display it like IE.

    my CSS is
    Code:
    /* CSS Document */
    
    body
    {
     background-color:#EEEEEE; 
    }
    
    /*------------------------------------*/
    /*----------	Text CSS	----------*/
    /*------------------------------------*/
    
    .top
    {
    font-family:Haettenschweiler; color:#FFFFFF; font-size:60px; text-align:center; vertical-align:text-top;
    }
    
    /*------------------------------------*/
    /*----------	DIV layers	----------*/
    /*------------------------------------*/
    #heading 
    {
      position:absolute; 
      width:70%; 
      left: 15%; 
      min-width:44em; 
      max-width:65em; 
      min-height:100%; 
      z-index:1; 
      height:100px; 
      background-color:#000000; 
      top: 50px;
      overflow:auto;
    }
    
    #links
    {
    	position:absolute; 
    	width:70%; left: 15%; 
    	min-width:44em; 
    	max-width:65em; 
    	min-height:100%; 
    	z-index:1; 
    	height:50px;
    	background-color:#FF0000; 
    	top: 150px;
    }
    
    #page_location
    {
    	position:absolute; 
    	width:70%; 
    	left: 15%; 
    	min-width:44em; 
    	max-width:65em; 
    	min-height:100%; 
    	z-index:1; 
    	height:50px;
    	background-color:#FFFFFF;
    	top: 200px;
    	overflow:visible;
    }
    
    #main
    {
    	position:absolute;
    	width:70%;
    	left: 15%; 
    	min-width:44em; 
    	max-width:65em; 
    	min-height:100%; 
    	z-index:1; 
    	height:400px;
    	background-color:#FFFFFF;
    	top: 250px;
    }
    
    #end
    {
    	position:absolute; 
    	width:70%; 
    	left: 15%; 
    	min-width:44em; 
    	max-width:65em; 
    	min-height:100%; 
    	z-index:1; 
    	height:50px;
    	background-color:#000000;
    	top: 650px;
    }
    
    #end_border
    {
    	position:absolute; 
    	width:70%;
    	left: 15%;
    	min-width:44em; 
    	max-width:65em; 
    	min-height:100%; 
    	z-index:1; 
    	height:50px;
    	background-color:#EEEEEE; 
    	top: 700px;
    }
    my HTML is
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <!--[if IE]>
    <style type="text/css">
    #inner{padding-left:1000px;float:left;} 
    #content{margin-left:-1000px;}
    </style>
    <![endif]-->
    <!-- Stop width from shrinking in IE -->
    <link rel="stylesheet" type="text/css" href="cssfile.css">
    </head>
    <body>
      <div id="inner"> 
        <div id="content"> 
    
    <div id="heading"><p class="top">Eamon Doyle</p></div>
    
    <div id="links">links</div>
    
    <div id="page_location">
    Page Location
    <hr color="#0000CC" width="60%" align="left"/>
    </div>
    
    <div id="main">
    Main
    </div>
    
    <div id="end">End</div>
    
    <div id="end_border"></div>
    
      </div>
    </div>
    </body>
    </html>
    join a lotto syndicate http://www.v-w-d.com/156964ED
    the smarter way to play
Working...
X