Back To Website Design Forum

IE Nightmares with CSS

  • brittagyrl
  • Novice
  • Novice
  • User avatar
  • Joined: Nov 21, 2008
  • Posts: 32
  • Loc: Ogden, Utah
  • Status: Offline

Post April 22nd, 2009, 9:26 am

Okay, so I made this mock website today to practice my CSS and I thought everything was going good, UNTIL I tried to view my page in IE7!

http://library.weber.edu/system/sandbox/carpemanana.cfm

In Safari, and Firefox the pictures for the book and the author are showing up fine, but they disappear in IE. Does anyone know how to make IE cooperate. Sometimes I'd really like the shoot the programmers of Internet Explorer.
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post April 22nd, 2009, 9:26 am

  • UPSGuy
  • Lurker ಠ_ಠ
  • Web Master
  • User avatar
  • Joined: Jul 25, 2005
  • Posts: 2735
  • Loc: Nashville, TN
  • Status: Offline

Post April 22nd, 2009, 10:15 am

Try ensuring that your div's with background images have both a height AND a width set. Some have one, but none have both defined. I think IE will collapse them if not specified and empty.
I'd love to change the world, but they won't give me the source code.
  • brittagyrl
  • Novice
  • Novice
  • User avatar
  • Joined: Nov 21, 2008
  • Posts: 32
  • Loc: Ogden, Utah
  • Status: Offline

Post April 22nd, 2009, 10:32 am

UPSGuy wrote:
Try ensuring that your div's with background images have both a height AND a width set. Some have one, but none have both defined. I think IE will collapse them if not specified and empty.



Do you mean in the HTML tables or in the CSS code where the URL is nested?
  • UPSGuy
  • Lurker ಠ_ಠ
  • Web Master
  • User avatar
  • Joined: Jul 25, 2005
  • Posts: 2735
  • Loc: Nashville, TN
  • Status: Offline

Post April 22nd, 2009, 10:34 am

Either one, but since you're heavily using CSS anyways, I would recommend that you define both the height and width there.

Code: [ Select ]
 
.mainfeature {
    background-image:url('bookcover.jpg');
    background-repeat:no-repeat;
    position:absolute;
    height:339px;
    width:220px;
    left: 135px;
    top: 175px;
}
 
 
  1.  
  2. .mainfeature {
  3.     background-image:url('bookcover.jpg');
  4.     background-repeat:no-repeat;
  5.     position:absolute;
  6.     height:339px;
  7.     width:220px;
  8.     left: 135px;
  9.     top: 175px;
  10. }
  11.  
  12.  
I'd love to change the world, but they won't give me the source code.
  • brittagyrl
  • Novice
  • Novice
  • User avatar
  • Joined: Nov 21, 2008
  • Posts: 32
  • Loc: Ogden, Utah
  • Status: Offline

Post April 22nd, 2009, 10:37 am

Oh! I think it worked! I tried putting height and width in for both the CSS and HTML and now they are appearing! Thanks so much! WOOT!
  • UPSGuy
  • Lurker ಠ_ಠ
  • Web Master
  • User avatar
  • Joined: Jul 25, 2005
  • Posts: 2735
  • Loc: Nashville, TN
  • Status: Offline

Post April 22nd, 2009, 10:41 am

Good, good. No need to have it in both places, though. If you'd like, I'd be glad to take another look and recommend a cleaned up version of your page.
I'd love to change the world, but they won't give me the source code.
  • brittagyrl
  • Novice
  • Novice
  • User avatar
  • Joined: Nov 21, 2008
  • Posts: 32
  • Loc: Ogden, Utah
  • Status: Offline

Post April 22nd, 2009, 10:43 am

Sure! I'm just learning CSS and my Web Manager plans to convert our entire website over next Spring, so I need all the assistance I can get.
  • UPSGuy
  • Lurker ಠ_ಠ
  • Web Master
  • User avatar
  • Joined: Jul 25, 2005
  • Posts: 2735
  • Loc: Nashville, TN
  • Status: Offline

Post April 22nd, 2009, 11:47 am

There's a lot of changes here, but the largest one is moving to a centered, three-column layout without the need for all the positioning you had used. I'm not really sure what level of understanding you've reached with CSS, so if you'd like, ask as many questions as you'd like & I'll do my best to answer them. Probably easier than trying to explain everything that I've changed.

Code: [ Select ]
 
<!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>Carpe Ma&ntilde;ana</title>
   
    <style type="text/css">
      body {
            background-color: black;
            text-align: center;
      }
      h1 {
            font-family: Arial, Helvetica, sans-serif;
            font-size: 3em;
            color: white;
            margin-bottom: 5px;
      }
      div#container {
            margin-left: auto;
            margin-right: auto;
            margin-top: 50px;
            width: 1095px;
            text-align: left;
      }
      div#titleBar {
            background-color: #660000;
            text-align: right;
            padding-right: 10px;
            margin-bottom: 15px;
      }
      span.subtitle {
            font-family: "Courier New", Courier, monospace;
            background-color: #660000;
            color: #FFFFFF;
            line-height: 3em;
            font-size: 1em;
      }
     
      .col {
              width: auto;
      }
      .left {
              float: left;
      }
      .right {
              float: right;
      }
      .middle {
              margin: 5px;
              padding: 20px 240px;
      }
      span.bodyText {
              font-family: Arial, Helvetica, sans-serif;
              font-size: 18px;
              color: white;
              text-indent: 1.5em;
      }
      .sidebar {
              text-align: left;
              background-color: #660000;
              color: white;
              padding: 5px;
              margin-top: 10px;
      }
      .sidebar ul {
              margin-left: 0;
              line-height: 1.4em;
              list-style: none;
              padding-left: 20px;
      }
      .sidebar ul a:link {
              color: #FFFFFF;
              text-decoration: none;
              font-style: italic;
      }
      .sidebar ul a:visited {
              color: #999999;
              text-decoration: none;
              font-style: italic;
      }
    </style>
   
  </head>
  <body>
    <div id="container">
      <h1>Carpe Ma&ntilde;ana</h1>
      <div id="titleBar">
        <span class="subtitle" style="margin-right: 575px;">A Novel</span>
        <span class="subtitle">by Adrian Stumpp</span>
      </div>
      <div class="col left">
        <img src="bookcover.jpg" />
        <div class="sidebar">
          ABOUT
          <ul>
              <li><a href="http://www.myspace.com/phoenixlicious">The Author</a></li><br />
              <li><a href="http://www.nytimes.com/pages/books/">Reviews</a></li><br />
              <li><a href="http://onlinebooks.library.upenn.edu/prize.html#pulitzer">Awards</a></li><br />
              <li><a href="http://taoschamber.com/index.html">Taos, New Mexico</a></li><br />
              <li><a href="http://www.unm.edu/~taosconf/">Taos Writers Conference</a></li>
          </ul>
        </div>
      </div>
      <div class="col right">
        <img src="AES.jpg" />
      </div>
      <div class="col middle">
        <span class="bodyText">
          A young woman dies in the dead of winter and two men are left to hide her body. Thus begins the voyage of Carpe Ma&ntilde;ana.
          <br/><br/>
          Set against the back drop of Taos, New Mexico, Carpe Ma&ntilde;ana is a coming of age story for the new Lost Generation. The novel follows the journeys of Donnie,
          a fatherless Taose&ntilde;o trying to make sense of the life he's been given and Penelope, a young woman attempting to keep her family together following her father's death.
          <br/><br/>
          The book is full of charismatic characters whose stories weave together in an arresting tapestry like Alfons Puerta the drug-peddling philosopher saint, Mama, Donnie's
          martyred mother, Erik, Penelope's brother who is a music producer in Los Angeles, and Paco a failed Blues musician who serves time for an ambiguous crime. The novel is
          rooted in a rich culture surrounded by the upheaval of the early twenty-first century. Almost Biblical in its cadences and rhythms while stitching myth into the everyday
          lives of the Taos people, Carpe Ma&ntilde;ana is a treatise on the trials of life and the alchemy that keeps us all moving forward.
          <br/><br/>
          Similar to the novels of Gabriel Garcia Marquez, John Steinbeck and Cormac McCarthy.
        </span>
      </div>
    </div>
  </body>
</html>
 
  1.  
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4.   <head>
  5.    
  6.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  7.     <title>Carpe Ma&ntilde;ana</title>
  8.    
  9.     <style type="text/css">
  10.       body {
  11.             background-color: black;
  12.             text-align: center;
  13.       }
  14.       h1 {
  15.             font-family: Arial, Helvetica, sans-serif;
  16.             font-size: 3em;
  17.             color: white;
  18.             margin-bottom: 5px;
  19.       }
  20.       div#container {
  21.             margin-left: auto;
  22.             margin-right: auto;
  23.             margin-top: 50px;
  24.             width: 1095px;
  25.             text-align: left;
  26.       }
  27.       div#titleBar {
  28.             background-color: #660000;
  29.             text-align: right;
  30.             padding-right: 10px;
  31.             margin-bottom: 15px;
  32.       }
  33.       span.subtitle {
  34.             font-family: "Courier New", Courier, monospace;
  35.             background-color: #660000;
  36.             color: #FFFFFF;
  37.             line-height: 3em;
  38.             font-size: 1em;
  39.       }
  40.      
  41.       .col {
  42.               width: auto;
  43.       }
  44.       .left {
  45.               float: left;
  46.       }
  47.       .right {
  48.               float: right;
  49.       }
  50.       .middle {
  51.               margin: 5px;
  52.               padding: 20px 240px;
  53.       }
  54.       span.bodyText {
  55.               font-family: Arial, Helvetica, sans-serif;
  56.               font-size: 18px;
  57.               color: white;
  58.               text-indent: 1.5em;
  59.       }
  60.       .sidebar {
  61.               text-align: left;
  62.               background-color: #660000;
  63.               color: white;
  64.               padding: 5px;
  65.               margin-top: 10px;
  66.       }
  67.       .sidebar ul {
  68.               margin-left: 0;
  69.               line-height: 1.4em;
  70.               list-style: none;
  71.               padding-left: 20px;
  72.       }
  73.       .sidebar ul a:link {
  74.               color: #FFFFFF;
  75.               text-decoration: none;
  76.               font-style: italic;
  77.       }
  78.       .sidebar ul a:visited {
  79.               color: #999999;
  80.               text-decoration: none;
  81.               font-style: italic;
  82.       }
  83.     </style>
  84.    
  85.   </head>
  86.   <body>
  87.     <div id="container">
  88.       <h1>Carpe Ma&ntilde;ana</h1>
  89.       <div id="titleBar">
  90.         <span class="subtitle" style="margin-right: 575px;">A Novel</span>
  91.         <span class="subtitle">by Adrian Stumpp</span>
  92.       </div>
  93.       <div class="col left">
  94.         <img src="bookcover.jpg" />
  95.         <div class="sidebar">
  96.           ABOUT
  97.           <ul>
  98.               <li><a href="http://www.myspace.com/phoenixlicious">The Author</a></li><br />
  99.               <li><a href="http://www.nytimes.com/pages/books/">Reviews</a></li><br />
  100.               <li><a href="http://onlinebooks.library.upenn.edu/prize.html#pulitzer">Awards</a></li><br />
  101.               <li><a href="http://taoschamber.com/index.html">Taos, New Mexico</a></li><br />
  102.               <li><a href="http://www.unm.edu/~taosconf/">Taos Writers Conference</a></li>
  103.           </ul>
  104.         </div>
  105.       </div>
  106.       <div class="col right">
  107.         <img src="AES.jpg" />
  108.       </div>
  109.       <div class="col middle">
  110.         <span class="bodyText">
  111.           A young woman dies in the dead of winter and two men are left to hide her body. Thus begins the voyage of Carpe Ma&ntilde;ana.
  112.           <br/><br/>
  113.           Set against the back drop of Taos, New Mexico, Carpe Ma&ntilde;ana is a coming of age story for the new Lost Generation. The novel follows the journeys of Donnie,
  114.           a fatherless Taose&ntilde;o trying to make sense of the life he's been given and Penelope, a young woman attempting to keep her family together following her father's death.
  115.           <br/><br/>
  116.           The book is full of charismatic characters whose stories weave together in an arresting tapestry like Alfons Puerta the drug-peddling philosopher saint, Mama, Donnie's
  117.           martyred mother, Erik, Penelope's brother who is a music producer in Los Angeles, and Paco a failed Blues musician who serves time for an ambiguous crime. The novel is
  118.           rooted in a rich culture surrounded by the upheaval of the early twenty-first century. Almost Biblical in its cadences and rhythms while stitching myth into the everyday
  119.           lives of the Taos people, Carpe Ma&ntilde;ana is a treatise on the trials of life and the alchemy that keeps us all moving forward.
  120.           <br/><br/>
  121.           Similar to the novels of Gabriel Garcia Marquez, John Steinbeck and Cormac McCarthy.
  122.         </span>
  123.       </div>
  124.     </div>
  125.   </body>
  126. </html>
  127.  
I'd love to change the world, but they won't give me the source code.
  • brittagyrl
  • Novice
  • Novice
  • User avatar
  • Joined: Nov 21, 2008
  • Posts: 32
  • Loc: Ogden, Utah
  • Status: Offline

Post April 22nd, 2009, 2:14 pm

Thanks, I just got back to this and it is time for me to go home today but I will make these adjustments first thing in the morning. Thanks again ;0)

Page 1 of 1

Post Information

  • Total Posts in this topic: 9 posts
  • Users browsing this forum: No registered users and 155 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
cron
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.