SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Zealot matches's Avatar
    Join Date
    Aug 2006
    Posts
    196
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question CSS working in IE but not FF

    In IE it works fine but in FF it not showing the footer. I have taken the images out to make it easier to see. Here is the CSS and HTML.


    Here is a link to the page: Click Here

    Code:
    	html,body
    {
    	background: #EEEEEE;
    	margin:10px;
    	font-family: arial;
    	font-size: 12px;
    	padding:0;
    }
    	
    	a
    {
    	display:block;
    	color: #006;
    	padding:10px;
    }
    
        #outer 
    {
         min-height: 100%
    }
    
        * html #outer
    {
        height: 100%
    }
    
    /* Special Divs */
    	div#container
    {
    	text-align:left;
    	width:790px;
        height: 100%;
    	margin:0 auto;
    	border-style:solid;
    	border-color:#9E924F;
    	border-width:1px;
    }
    
    	div#header
    {
    	position:relative;
    	height:249px;
    	/*background-image:url(images/idea2_r1_c1.jpg);*/
    }
    
    	div#middle
    {
        margin: 0px auto;
        float:left;
        height: 100%;
    	/*background-image:url(images/idea2_r3_c1.jpg);*/
    }
    
    	div#navigation
    {
    	float:right;
    	width:170px;
    	padding-right: 1.18cm;
    }
    
    	div#content
    {
        margin: 0px auto;
    	float:left;
    	width:485px;
    	padding-left: 1.18cm;
    }
    
    	div#extra
    {
    	float:right;
    	clear:right;
    	width:170px;
    	padding-right: 1.18cm;
    }
    
    	div#footer
    {
    	width:100%;
    	height:224px;
    	/*background-image:url(images/idea2_r5_c1.jpg);*/
    }
    
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    <head>
    <title>Layout 33</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    <link rel="stylesheet" type="text/css" href="styles.css" />
    </head>
    <body>
        <div id="container">
    
          <div id="header"></div>
          
            <div id="middle">
            
              <div id="content"> 
                <p><strong>1) Content here.</strong> column long long column very long 
                  fill fill fill long text text column text silly very make long very 
                  fill silly make make long make text fill very long text column silly 
                  silly very column long very column filler fill long make filler long 
                  silly very long silly silly silly long filler make column filler make 
                  silly long long fill very.</p>
                <p>very make make fill silly long long filler column long make silly silly 
                  column filler fill fill very filler text fill filler column make fill 
                  make text very make make very fill fill long make very filler column 
                  very long very filler silly very make filler silly make make column 
                  column </p>
                <p>fill long make long text very make long fill column make text very 
                  silly column filler silly text fill text filler filler filler make make 
                  make make text filler fill column filler make silly make text text fill 
                  make very filler column very </p>
                <p>column text long column make silly long text filler silly very very 
                  very long filler fill very fill silly very make make filler text filler 
                  text make silly text text long fill fill make text fill long text very 
                  silly long long filler filler fill silly long make column make silly 
                  long column long make very </p>
    		      <p>column text long column make silly long text filler silly very very 
                  very long filler fill very fill silly very make make filler text filler 
                  text make silly text text long fill fill make text fill long text very 
                  silly long long filler filler fill silly long make column make silly 
                  long column long make very </p>
    		      <p>column text long column make silly long text filler silly very very 
                  very long filler fill very fill silly very make make filler text filler 
                  text make silly text text long fill fill make text fill long text very 
                  silly long long filler filler fill silly long make column make silly 
                  long column long make very </p>
    		      <p>column text long column make silly long text filler silly very very 
                  very long filler fill very fill silly very make make filler text filler 
                  text make silly text text long fill fill make text fill long text very 
                  silly long long filler filler fill silly long make column make silly 
                  long column long make very </p>
              </div>
              
              <div id="navigation"> 
                  <p><strong>2) Navigation here.</strong> long long fill filler very fill 
                    column column silly filler very filler fill fill filler text fill very 
                    silly fill text filler silly silly filler fill very make fill column text 
                    column very very column fill fill very silly column silly silly fill fill 
                    long filler </p>
              </div>
              
    	    </div><!-- middle -->
        	
    	    <div id="footer"></div>
        	
        </div><!-- container -->
    
    </body>
    </html>

  2. #2
    SitePoint Wizard drhowarddrfine's Avatar
    Join Date
    Aug 2005
    Posts
    3,438
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It doesn't show the footer because there is nothing in the footer. Also, IE is incorrectly expanding the main div to contain the floated elements which is not correct behavior. Firefox is performing correctly. Add overflow:auto; to #container. In addition, you are missing the closing slash for the meta tag.

  3. #3
    SitePoint Zealot matches's Avatar
    Join Date
    Aug 2006
    Posts
    196
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Now I have different Problem

    It works great in FF. But there is a big space between the content and the footer in IE. When I remove the float attribute from the footer it fixes IE but the footer will not show up in FF.

    It also validates. So I am really not sure what is going on now. Thank you for any assistance.


    Click Here

    Code:
    	html,body
    {
    	background: #EEEEEE;
    	margin:10px;
    	font-family: arial;
    	font-size: 12px;
    	padding:0;
    }
    	
    	a
    {
    	display:block;
    	color: #006;
    	padding:10px;
    }
    
        #outer 
    {
         min-height: 100%
    }
    
        * html #outer
    {
        height: 100%
    }
    
    /* Special Divs */
    	div#container
    {
    	text-align:left;
    	width:790px;
    	margin:0 auto;
    	overflow: hidden;
    	border-style:solid;
    	border-color:#9E924F;
    	border-width:1px;
    }
    
    	div#header
    {
    	position:relative;
    	height:249px;
    	background-image:url(images/idea2_r1_c1.jpg);
    }
    
    	div#middle
    {
        margin: 0px auto;
        background: #0000FF;
        float:left;
        height: 100%;
    	background-image:url(images/idea2_r3_c1.jpg);
    }
    
    	div#navigation
    {
    	float:right;
    	width:170px;
    	padding-right: 1.18cm;
    }
    
    	div#content
    {
        margin: 0px auto;
        float:left;
    	width:475px;
    	padding-left: 1.18cm;
    }
    
    	div#extra
    {
    	float:right;
    	clear:right;
    	width:170px;
    	padding-right: 1.18cm;
    }
    
    	div#footer
    {
        background: #FF0000;
    	width:100%;
    	margin: 0px auto;
        float:left;
    	height:224px;
    	background-image:url(images/idea2_r5_c1.jpg);
    }
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    <head>
    <title>Layout 33</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
    <link rel="stylesheet" type="text/css" href="styles.css" />
    </head>
    <body>
        <div id="container">
    
          <div id="header"></div>
          
            <div id="middle">
            
              <div id="content"> 
                <p><strong>1) Content here.</strong> column long long column very long 
                  fill fill fill long text text column text silly very make long very 
                  fill silly make make long make text fill very long text column silly 
                  silly very column long very column filler fill long make filler long 
                  silly very long silly silly silly long filler make column filler make 
                  silly long long fill very.</p>
                <p>very make make fill silly long long filler column long make silly silly 
                  column filler fill fill very filler text fill filler column make fill 
                  make text very make make very fill fill long make very filler column 
                  very long very filler silly very make filler silly make make column 
                  column </p>
                <p>fill long make long text very make long fill column make text very 
                  silly column filler silly text fill text filler filler filler make make 
                  make make text filler fill column filler make silly make text text fill 
                  make very filler column very </p>
                <p>column text long column make silly long text filler silly very very 
                  very long filler fill very fill silly very make make filler text filler 
                  text make silly text text long fill fill make text fill long text very 
                  silly long long filler filler fill silly long make column make silly 
                  long column long make very </p>
    		      <p>column text long column make silly long text filler silly very very 
                  very long filler fill very fill silly very make make filler text filler 
                  text make silly text text long fill fill make text fill long text very 
                  silly long long filler filler fill silly long make column make silly 
                  long column long make very </p>
    		      <p>column text long column make silly long text filler silly very very 
                  very long filler fill very fill silly very make make filler text filler 
                  text make silly text text long fill fill make text fill long text very 
                  silly long long filler filler fill silly long make column make silly 
                  long column long make very </p>
    		      <p>column text long column make silly long text filler silly very very 
                  very long filler fill very fill silly very make make filler text filler 
                  text make silly text text long fill fill make text fill long text very 
                  silly long long filler filler fill silly long make column make silly 
                  long column long make very </p>
              </div>
              
              <div id="navigation"> 
                  <p><strong>2) Navigation here.</strong> long long fill filler very fill 
                    column column silly filler very filler fill fill filler text fill very 
                    silly fill text filler silly silly filler fill very make fill column text 
                    column very very column fill fill very silly column silly silly fill fill 
                    long filler </p>
              </div>
              
    	    </div><!-- middle -->
        	
    	    <div id="footer"></div>
        	
        </div><!-- container -->
    
    </body>
    </html>

  4. #4
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I would check the page if you used something else than "click here" as link text...
    Simon Pieters

  5. #5
    SitePoint Zealot matches's Avatar
    Join Date
    Aug 2006
    Posts
    196
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  6. #6
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,095
    Mentioned
    28 Post(s)
    Tagged
    1 Thread(s)
    Hi,

    You have a few misunderstandings with CSS, I'll post my solution and then explain what I have changed.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    <head>
    <title>Layout 33</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
    <style type="text/css">
    html, body{
    	background: #EFEFEF;
    	margin:10px;
    	font-family: Arial;
    	font-size: .8em;
    	padding:0;
            text-align: center;
    }
    a {
    	display:block;
    	color: #006;
    	padding:10px;
    }
    #container {
    	text-align:left;
    	width:790px;
    	margin:0 auto;
    	border:1px solid #9E924F;
    	background: white;
    }
    #header {
    	height:249px;
    	background:#CC3 url(images/idea2_r1_c1.jpg) no-repeat top left;
    }
    #navigation {
    	float:right;
    	width:170px;
    	padding-right: 60px;
    	background: #FC0;
    }
    #content {
    	float:left;
    	width:475px;
    	padding-left: 50px;
    	background: #FC0;
    }
    #footer {
    	clear: both;
    	background:#CC3 url(images/idea2_r5_c1.jpg) no-repeat top right;
    	width:100&#37;;
    	height:224px;
    }
    </style>
    </head>
    <body>
    <div id="container">
      <div id="header"></div>
        <div id="content">
          <p><strong>1) Content here.</strong> column long long column very long 
            fill fill fill long text text column text silly very make long very 
            fill silly make make long make text fill very long text column silly 
            silly very column long very column filler fill long make filler long 
            silly very long silly silly silly long filler make column filler make 
            silly long long fill very.</p>
          <p>very make make fill silly long long filler column long make silly silly 
            column filler fill fill very filler text fill filler column make fill 
            make text very make make very fill fill long make very filler column 
            very long very filler silly very make filler silly make make column 
            column </p>
          <p>fill long make long text very make long fill column make text very 
            silly column filler silly text fill text filler filler filler make make 
            make make text filler fill column filler make silly make text text fill 
            make very filler column very </p>
          <p>column text long column make silly long text filler silly very very 
            very long filler fill very fill silly very make make filler text filler 
            text make silly text text long fill fill make text fill long text very 
            silly long long filler filler fill silly long make column make silly 
            long column long make very </p>
          <p>column text long column make silly long text filler silly very very 
            very long filler fill very fill silly very make make filler text filler 
            text make silly text text long fill fill make text fill long text very 
            silly long long filler filler fill silly long make column make silly 
            long column long make very </p>
          <p>column text long column make silly long text filler silly very very 
            very long filler fill very fill silly very make make filler text filler 
            text make silly text text long fill fill make text fill long text very 
            silly long long filler filler fill silly long make column make silly 
            long column long make very </p>
          <p>column text long column make silly long text filler silly very very 
            very long filler fill very fill silly very make make filler text filler 
            text make silly text text long fill fill make text fill long text very 
            silly long long filler filler fill silly long make column make silly 
            long column long make very </p>
        </div>
        <div id="navigation">
          <p><strong>2) Navigation here.</strong> long long fill filler very fill 
            column column silly filler very filler fill fill filler text fill very 
            silly fill text filler silly silly filler fill very make fill column text 
            column very very column fill fill very silly column silly silly fill fill 
            long filler </p>
        </div>
    	  <div id="footer"></div>
    </div>
    <!-- container -->
    </body>
    </html>
    I first removed the CSS you weren't using, extra, outer - I also removed middle because it wasn't really needed.
    I changed the colors to something that wasn't so offensive
    I added text-align: center; to the body so IE 5.x would center it.
    font-size in px is a no-no, I have used em for flexibility.
    You don't need div#example before all your id names.
    overflow: hidden; wasn't needed in the container.
    Simplified using shorthand border: 1px solid #9E924F;

    position:relative; don't use for header.
    margin: 0px auto; is only needed to center the container - because all the other elements are within this div already they don't need it.
    padding-right: 1.18cm; centimeters are a big no-no - use pixels
    The footer doesn't need float:left; it just needs to clear the above floats, so add clear: both.

  7. #7
    SitePoint Zealot matches's Avatar
    Join Date
    Aug 2006
    Posts
    196
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thanks... couple more Q's

    You have a few misunderstandings with CSS
    That is an understatement... but I am not giving up

    I changed the colors to something that wasn't so offensive
    I must be missing something

    position:relative; don't use for header.
    noted, any particular reason?

    padding-right: 1.18cm; centimeters are a big no-no - use pixels
    I feel retarded

    I also removed middle because it wasn't really needed.
    I had put the middle in for the repeated background image that was there. Do you think there is a better way to get the background image along with the content div and navigation div? I will of course work on it myself but maybe there is a hard and fast rule.

    Thanks for all your help.

  8. #8
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,095
    Mentioned
    28 Post(s)
    Tagged
    1 Thread(s)
    That is an understatement... but I am not giving up
    Great, that's the way.
    I changed the colors to something that wasn't so offensive
    I must be missing something
    Sorry, I didn't have a look at the live page, it looks really good! - but you need to also specify a background-color along with your images without them when images are disabled I'm seeing bright blue and red and unreadable text.. If you have the Firefox web developer extension you can disable it under images.
    Also when the images are being downloaded you don't want people seeing the blue and red
    position:relative; don't use for header.
    noted, any particular reason?
    It's just that there's no reason for it to be there. I only use relative positioning when it is containing an absolutely positioned element or I am trying to work around IE.
    I feel retarded
    That's the spirit
    I had put the middle in for the repeated background image that was there. Do you think there is a better way to get the background image along with the content div and navigation div? I will of course work on it myself but maybe there is a hard and fast rule.
    As above I wasn't viewing the live page, the middle div is fine to go there if you are using specific background images on that section - but remember to clear the floats, clear the floats, clear the floats
    I usually just add <div style="clear:both"></div> after the floats but perhaps there are better methods to use. Without clearing the floats the wrapper will not wrap the other elements.
    Thanks for all your help.
    No worries.


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
  •