Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question How to make image stick to bottom of div in IE

    Hello,

    I am working on my first website, so please go easy on me if this is actually a really obvious and easy fix, I'm just not seeing it.

    I have a div with the navigation at the top of the page, and have set a bottom border on that div in order to get a line dividing it from the content below. I would like the navigational links (they are images) to sit right on the bottom of the div, so they're right on that line. I've gotten it to show up that way in Firefox and Chrome, but Internet Explorer is ever the challenge and leaves them floating up in space.

    My question is basically how do I get them to sit right on that line in all browsers? To illustrate the problem, this is how it looks in IE, and I would like those words to be on the yellow line.

    Here is my HTML:
    Code:
    <html>
    <head>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    	<title>Mara Saxer's Portfolio</title>
    	<link type="text/css" rel="stylesheet" href="mainstyle.css" />
    
    </head>
    
    <body>
    <div id="container">
    <div id="header">
     <img src="images/marasaxer.gif" class="imgright" />
    </div>
    
    <div id="navigation">
     <ul>
      <li><a href="index.html"><img src="images/home.gif" /></a></li>
      <li><a href="portfolio.html"><img src="images/portfolio.gif" /></a></li>
      <li><a href="about.html"><img src="images/about.gif" /></a></li>
      <li><a href="http://maramas.wordpress.com/"><img src="images/blog.gif" /></a><li>
     </ul>
    </div>
    
    <div id="content">
    <img src="images/flowerpicture.jpg" class="flower" alt="Flower and ring picture" />
    </div>
    
    <div id="footer">
     <p>&copy; 2011 Mara Saxer</p>
    </div>
    </div>
    </body>
    </html>
    And my CSS:
    Code:
    body {
    font-family: "Century Gothic", Helvetica, sans-serif;
    background-color: #dfdad4;
    background-image: url(images/treebackground2.gif);
    background-repeat: no-repeat;
    background-position: center top;
    background-position: 45% 0%;
    text-align: center;
    }
    
    #container {
    width: 900px;
    margin: 0 auto;
    text-align: center;
    }
    
    #header {
    text-align: left;
    height: 50px;
    }
    
    #navigation {
    height: 23px;
    border-bottom: solid 3px #fcba0c;
    text-align: left;
    }
    
    #content {
     background-color: #46b2b2;
     width: 675px;
     height: 525px;
     margin: 0 auto;
    }
    
    #footer {
    text-align: center;
    }
    
    #navigation li {
    display: inline;
    padding-right: 10px;
    }
    
    #content li {
    display: inline;
    padding: 120px;
    }
    
    .imgright {
    position: relative;
    top: 10px;
    right: -550px;
    }
    
    #content p {
    color: #fff;
    }
    
    #footer p {
    font-size: 75%;
    color: #fff;
    }
    
    .flower {
    position: relative;
    top: 30px;
    }
    
    a img {
    border: 0 none;
    }
    Forgive the length, I didn't want to chop off any seemingly irrelevant parts in case they were throwing other things out of line and causing my problem. Newbie's paranoia and whatnot.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,849
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Can we have a link to your page?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    It's not actually up yet, this is still me trying to fix the last details before I show it to the world...but if it makes a big difference I can go ahead and do that I suppose.

  • #4
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Quote Originally Posted by Maramas View Post
    It's not actually up yet, this is still me trying to fix the last details before I show it to the world...but if it makes a big difference I can go ahead and do that I suppose.
    You should still at some point put the site on a live remote server so you can test there as well as locally. Things sometimes change and happen to sites that need to be addressed ON a remote server.

    Besides, you dont have to let the public view your site if its on a remote server until all testing is done and you're satisfied.

    One thing I see that stands out already is that you dont have your doctype as the very first line of your document. You also have two opening <head> tags. Here is how it should look:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    	<title>Mara Saxer's Portfolio</title>
    	<link type="text/css" rel="stylesheet" href="mainstyle.css" />
    
    </head>
    Last edited by teedoff; 04-15-2011 at 04:29 PM.
    Teed

  • #5
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the heads up about those tags, I don't know what I was smoking when I did that.

    I put the site up here to test it out and sure enough the IE problem has magically fixed itself. So thanks, I guess that was what I needed to do to fix it!

    Still shows up that way when I look at it from the file on my computer though, hmm...oh well. I can live with that if it's going to do what I want everywhere else.

  • #6
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Quote Originally Posted by Maramas View Post
    Thanks for the heads up about those tags, I don't know what I was smoking when I did that.

    I put the site up here to test it out and sure enough the IE problem has magically fixed itself. So thanks, I guess that was what I needed to do to fix it!

    Still shows up that way when I look at it from the file on my computer though, hmm...oh well. I can live with that if it's going to do what I want everywhere else.
    Make sure you have refreshed your browser locally and you're not looking at a cached version of your old page.
    Teed


  •  

    Tags for this Thread

    Posting Permissions

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