Results 1 to 2 of 2
Related
-
Different rollover images and text showing Forum: Javascript Forum
Replies: 0 -
Wrapping text around a cell in a table Forum: HTML Forum
Replies: 0 -
How do you overlap MS player with images or text? Forum: HTML Forum
Replies: 2 -
Two column text next to images Forum: CSS Forum
Replies: 2 -
Moving Text and Images Forum: CSS Forum
Replies: 2
-
06-07-2007, 07:14 PM #1
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> </h4> <h4> </h4> <h4> </h4> <h4> </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 <ENTER> <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 <ENTER> <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> </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>
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 */
Last edited by ausammy; 06-07-2007 at 07:22 PM. Reason: added screenshots
-
06-07-2007, 09:38 PM #2
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
Cloudjiffy- PaaS for Developers
10-05-2020, 12:30 AM in Web Hosting Forum