38 users online (0 members and 38 guests)  


  Results 1 to 2 of 2

Related

  1. Different rollover images and text showing    Forum: Javascript Forum
    Replies: 0
  2. Wrapping text around a cell in a table    Forum: HTML Forum
    Replies: 0
  3. Replies: 2
  4. Two column text next to images    Forum: CSS Forum
    Replies: 2
  5. Moving Text and Images    Forum: CSS Forum
    Replies: 2
  1. #1
    ausammy's Avatar
    New User

    Status
    Offline
    Join Date
    Feb 2007
    Posts
    10

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

    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!
    Last edited by ausammy; 06-07-2007 at 07:22 PM. Reason: added screenshots

  2. #2
    ausammy's Avatar
    New User

    Status
    Offline
    Join Date
    Feb 2007
    Posts
    10

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

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





Tags for this Thread