wrapping text around floating images to the right *IE problem*

**ausammy** · 06-07-2007, 07:14 PM

I am trying to line up an image for each of the of the steps. i have floated my images to the right and it looks great in Firefox but of course not in IE. Now the problem here is that the majority of users will be using IE 6!!! I have tried the "clear: right" attribute but to no success.

Screenshots

Firefox
http://img395.imageshack.us/img395/4996/screenshot004ad8.th.jpg

IE
http://img512.imageshack.us/img512/1952/screenshot005kt8.th.jpg

anywho here is my code:

HTML

Code:

<!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"><!-- InstanceBegin template="/Templates/manuals_main.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>Getting Started :: Changing Your Prostix Password</title>
<!-- InstanceEndEditable -->
<link href="../../css/main.css" rel="stylesheet" type="text/css" />
<!-- InstanceBeginEditable name="head" --><!-- InstanceEndEditable -->
</head>

<body>
<!-- the headerwrap keeps everything together across browsers -->

<div id="headerwrap">

    <div id="logoheader"><p>Created By Sam Kernot</p>
      <p><a href="mailto:helpdesk@hg.com.au">helpdesk@hg.com.au</a></p>
    </div>
    
    <!-- all the links are coded in bullet points like this -->
    <div id="topnav">
      <ul>
      
        <li><a href="../../index.htm">Home</a></li>
        <li><a href="getting_started.htm">Getting Started </a></li>
        <li><a href="../point_of_sale/point_of_sale.htm">Point of Sale</a></li>
        <li><a href="../sales_order_processing/sales_order_processing.htm">Sales Order Processing </a></li>
        <li><a href="#">Inventory Management </a></li>
         
                    
      </ul>
  </div>

<!-- header wrap end div -->
</div>

<!-- the mainwrap keeps everything together across browsers -->
<div id="mainwrap">

  <div id="maincontent">
  <!-- InstanceBeginEditable name="headings" --><h1>Getting Started </h1>
      <h2>Changing Your Prostix Password </h2>
      <h3>Follow The Steps Below </h3>
      <p>Use this  procedure to change your Prostix Password. You should <strong>never reveal your  password to anyone</strong> and you should, as a matter of routine, <strong>change your password</strong>  from time to time.</p>
      <h4>Note: Password is case sensitive. Use only Upper case or Lower  case, not a mixture.</h4>
  <!-- InstanceEndEditable -->
  </div>
<div id="information">

<!-- InstanceBeginEditable name="information" -->
  <img src="../../images/screenshots/signing_on/change_password1.jpg" alt="change password" width="380" height="124" /><h4>Navigate using F10 Menu to C </h4>
 
  <h4>&nbsp;</h4>
  <h4>&nbsp;</h4>
  <h4>&nbsp;</h4>
  <h4>&nbsp;</h4>
  <h4><img src="../../images/screenshots/signing_on/change_password2.jpg" alt="change password" width="380" height="143"  /></h4>
  <h4>1. Change Password Dialog Box<em></em></h4>
  <p>    Your Name  and User-ID displays</p>
  <ul>
    <li>Type  Current Password &lt;ENTER&gt;
      <ul>
        <li><em>Typing  in your current password confirms your Name and User-ID that is displayed.</em></li>
      </ul>
    </li>
    <li>Type  New Password &lt;ENTER&gt;
      <ul>
        <li><em>Commit your password to memory.</em></li>
      </ul>
    </li>
    </ul>
  <p>Password <strong>is</strong> Case SeNsItIvE</p>
  <img src="../../images/screenshots/signing_on/change_password3.jpg" alt="change password" width="380" height="63" /><h4>2. Your Password has now been  changed.</h4>
  <ul>
    <li>To  confirm your new password log off. </li>
    <li>Log in using your new password.</li>
    </ul>
  <p><strong>Note:</strong> <em>If you forget your password, you  can contact the Help Desk on #5005 and they will reset if for you.</em></p>
  <p>&nbsp;</p>
<!-- InstanceEndEditable --></div>



<!-- the br clear tag forces the wrap div down so background displays correctly -->
<br clear="all" />
</div><!-- end mainwrap -->
</body>
<!-- InstanceEnd --></html>

CSS

Code:

@charset "utf-8";
/* CSS Document */

body {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    background-color: #999999;
    }
/* div tag config */
#headerwrap {
    width: 800px;
    margin-left: auto;
    margin-right: auto;
    background: url(../images/logobackground.gif) repeat-x;
    }
    
#logoheader {
    background: url(../images/logo.gif) no-repeat;
    width: 800px;
    height: 149px;
    }

#topnav {
    width: 800px;
    height: 30px;
    background-color: #000000;
    color: #FFFFFF;
    }
    
#mainwrap {
    height: 100%;
    width: 800px;
    margin-left: auto;
    margin-right: auto;
    background-color: #FFFFFF;
    }
    
#maincontent {
    height: 100%;
    width: 760px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    padding-top: 5px;
    }
    
/* main template only */
    
#information {
    margin-left: 10px;
    margin-right: 10px;
    text-align: justify;
    }
    
/*index template only */    

#columnleft {
    padding-left: 10px;
    width: 400px;
    float: left;
    text-align: justify;
    padding-right: 10px;
    }
    
#columnright {
    width: 380px;
    float: left;
    }
    
/* end index only    
    
end div tag config
    
this is where the top navbar is configured */
    
#topnav a:link {
    color: #FFFFFF;
    text-decoration: none;
    font-weight: bold;
    font-size: 14px;
    display: block;
    padding-top: 6px;
    padding-bottom: 6px;
    padding-left: 10px;
    padding-right: 10px;
    }
    
#topnav a:visited {
    color: #FFFFFF;
    text-decoration: none;
    font-weight: bold;
    font-size: 14px;
    display: block;
    padding-top: 6px;
    padding-bottom: 6px;
    padding-left: 10px;
    padding-right: 10px;
    }    

    
#topnav a:hover {
    color: #FFFFFF;
    text-decoration: underline;
    font-weight: bold;
    font-size: 14px;
    display: block;
    }

#topnav ul {
    margin: 0px;
    padding: 0px;
    list-style-type: none;
    }
    
#topnav li {
    float: left;
    }

    
/*end top navbar */

/* links */

#maincontent a:link, a:visited, #columnleft a:link, a:visited, #columnright a:link, a:visited {
    text-decoration: none;
    font-size: 14px;
    font-weight: bold;
    color: #333333;
    }

#maincontent a:hover, #columnleft a:hover, #columnright a:hover {
    text-decoration: underline;
    }
    
#columnleft h3 a:link, #columnright h3 a:link { /* need to make a unique link style for the h3 tag */
    font-size: 18px;
    color: #FC0000
    }
    
#columnleft h3 a:visited, #columnright h3 a:visited {
    font-size: 18px;
    color: #FC0000
    }

#logoheader a:link, a:visited {
    text-decoration: none;
    color: #000000;
    }    

#logoheader a:hover {
    text-decoration: underline;
    color: #000000;
    }

    
/* end links */


/* tag config */

#logoheader p {
    padding-top: 15px;
    padding-right: 15px;
    font-weight: bold;
    text-align: right;
    }

#maincontent p, columnleft p, columnright p {
    color: #000000;    
    }

#maincontent h1 {
    font-size: 32px;
    color: #000000;
    text-align: center;
    }
    
#information h1, h2, h3, h4 {
    color: #000000;
    }
    

#maincontent h2 {
    font-size: 20px;
    text-align: center;
    color: #000000;
    }
    
#maincontent h3, #columnleft h3, #columnright h3 {
    font-size: 18px;
    color: #FC0000;
    }
        
h4 {
    color: #000000;
    }

h5 {
    color: #FF0000;
    font-size: 16px;
    border-bottom: dashed 1px #FF0000;
    }
    
blockquote {
    line-height: 0;
    }

/* information div of maintemplate only */

#information img {
    float: right;
    padding: 10px;
    }
    
/* end maintemplate only*/

/* dot point config */

#columnleft li {
    line-height: 30px;     
    }

#columnright li {
    line-height: 30px; 
    }

#columnleft ul, #columnright ul  {
    list-style-type: square;
    }
    
#columnleft ol, #columnright ol {
    font-weight: bold;
    font-size: 14px;
    color: #FF0000;
    }
    
#information ul {
    list-style-type: square;
    }

#information li, #information p {
    line-height: 30px; 
    width: 400px;
    }
    
/*end dot point config */

THANKS for any help!

**ausammy** · 06-07-2007, 09:38 PM

lol never mind i fixed it... the problem was the width on the on #information li

Thread: wrapping text around floating images to the right IE problem

Thread Tools

Related

Different rollover images and text showing Forum: Javascript Forum

Wrapping text around a cell in a table Forum: HTML Forum

How do you overlap MS player with images or text? Forum: HTML Forum

Two column text next to images Forum: CSS Forum

Moving Text and Images Forum: CSS Forum