Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Problem with Images in Internet Explorer

Status
Not open for further replies.

Pic37

Technical User
Mar 28, 2010
4
US
Having a problem with some images displaying correctly in IE using XP. The area that is a problem is the left sidebar. A white box and 2 white lines are displayed along with links. This does not happen on Mac in Safari, FF or Chrome.

website address is:

 
On IE6, there's a big white gap above the "Home" link, white lines above and below the "Contact" link, and another white gap below the body text. Some of the text in the body is clipped on the right hand side.

Your images-as-text are all a bit overcompressed, you should probably be using gifs or pngs instead of jpgs for these anyway.

Looking at the HTML, it's really over-complicated for the effect you're trying to achieve. It looks like you had a table-based layout, and you've just swapped each <td> for a <div>. That's rather missing the point.

I'd do something along these lines (not tested, and I'm guessing most of the numbers):
Code:
<head>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] >
<head>
  <title>Tabler Insurance</title>
  <style type="text/css">
    div#wrap{
      width: 800px;
      margin: 0 auto;
      background: url(/images/sides.gif);
    }

    div#main {
      min-height: 500px; /* height of background image */
      padding-right: 30px; /* width of right bar */
      padding-bottom: 100px; /* height of bottom bar */
      background: url(/images/mainbg.jpg) bottom left no-repeat;
    }

    * html div#main {
      height: 500px; /* For IE6, which doesn't do min-height */
    }

    div#body {
      margin-left: 140px; /*Width of menu + a bit*/
      font-family: verdana,sans-serif;
    }

    ul#menu {
      padding: 0;
      margin: 0;
      float: left;
      list-style-type: none;
      width: 130px; /* width of left bar */
    }

    ul#menu li {
      padding: 0;
      margin: 0;
    }

    ul#menu a {
      display: block;
      font-family: Georgia,serif;
      font-size: larger;
      color: #000;
      text-decoration: none;
    }

    ul#menu a:hover,
    ul#menu a:focus {
      background-color: #99f;
    }
  </style>
</head>
<body>
<div id="wrap">
  <div id="head">
    <img src="/images/headerbanner.jpg" alt="Tabler Insurance Agency" title="" />
  </div>
  <div id="main">
    <ul id="menu">
      <li><a href="/">Home</a></li>
      <li><a href="/services.htm">Services</a></li>
      <li><a href="/contact.htm">Contact</a></li>
    </ul>
    <div id="body">
      <p>
        Founded in 1988, Tabler Insurance is a leader in providing quality protection for hundreds of individuals, families and businesses throughout Northwestern Ohio. Providing superior customer service and low rates along with our ability to understand our customer’s coverage needs drives the success of our agency.
      </p>
      <p>
        By offering world class protection for your Auto, Home, Health, Business, and Life Insurance, we make sure that you're covered today as well as in the future so that you can focus on what is important to you and your family. At Tabler Insurance our #1 job is to assist you in identifying your needs and problems, while putting together a customized plan that's simple and easy to understand.
      </p>
    </div>
  </div>
</body>
</html>
There are three images involved in this approach:

sides.gif - a 800px wide, 1px high image that has the blue-grey borders on the tw sides, and the white bit in the middle. only becomes visible if the body is higher than the minimum amount.

mainbg.jpg - an image comprising the grassy border at the bottom, and the columns up each side - until they reach the solid blue-grey colour used in the header.

headerbanner.jpg - an image containing your graphic header.

I think you'll find that easier to maintain, and more likely to work across browsers.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top