text not wrapping around inline graphic
Posted: 23 June 2008 05:44 PM   [ Ignore ]
Newbie
Rank
Total Posts:  3
Joined  2008-06-23

I am very new to CSS, so please forgive me if this is a silly question. 

I have tried many of the suggestions listed on this site for floating images and setting multiple inline images on a single page, but haven’t been able to get the suggestions to work how I’d like when I load my html page.  The first graphic aligns to the right properly.  The second displays the image in the correct location but the text does not wrap around it.  Instead, it appears below the image.

The graphic and text displays properly in IE 6 and IE 7, but displays incorrectly in FF 3.x and Safari 3.x.

I have a feeling I’m missing something simple in my CSS.

I will include a copy of the CSS in a separate post.  It’s too long to post with the html.

The HTML file content is displayed below:

<!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>Module 1 Overview</title>
    <
link rel="stylesheet" type="text/css" href="styles/aborig-styles.css">
</
head>
<
body>
<
div id="container">
  <!-- 
HEADER -->
  <
div id="header">
            <
ul class="one">
                <
li>Knowledge</li>
                <
li>Respect</li>
                <
li>Understanding</li>
                <
li>Honesty</li>            
            </
ul>
    <
div class="breadCrumbs"
        <
a href="title1.html">Introduction</a> > 
        <
a href="title1toc.html">Table of Contents</a> >
        
Module 1 Overview
    
</div>
  </
div>
  <!-- 
MIDDLE -->
  <
div id="middle">
      <
div id="content">
        <
h1>IntroductionModule 1</h1>
        <
img src="images/eagle.png" class="rightImage" />
        <
class="captionRight">
             </
p>
       
        <
p><strong>Module 1Open My Hands to...</strong></p>        
        <
p><img src="images/icon02-184x184.png" class="leftImage" /> You will notice that each of these titles is purposely left open for you to fill in the final word or statement. <font color="blue">As we move through the coursethis statement isn't accurate.  May want to consider revising.</font>The intent of the first module is to explore the true nature of preparation for sharing a learning experience with another person. We can only learn what we are willing to receive. If we come with an attitude that there is nothing I can learn from you, we have already established a barrier, haven't we? As in the classroomto learn in an Aboriginal way is to be open to possibility. As mentioned beforethe idea of open hands provides us with an action to receive from anotherThink about this in terms of our way of knowingHave I already created a barrier because of my genderageexperiences, or level of education?</p>
        <
p>Open My Hands is a challenge to be vulnerableto be strongto be honest, and to be teachable?</p>

       
        
         </
p>     
         <
class="nextPage"><a href="title1content4.html">Next >>></a></p>    
       
    </
div>
  </
div>

</
body>
</
html
Profile
 
 
Posted: 23 June 2008 05:47 PM   [ Ignore ]   [ # 1 ]
Newbie
Rank
Total Posts:  3
Joined  2008-06-23
@charset "UTF-8";
/* CSS Document */

body {
    font
-familyVerdanaArialHelveticasans-serif;
    
font-size:11px;
    
background#633e0a;
    
margin0
    
/* text-align: center; 
    color: #000;
}
a{
    color:#000000;
    text-decoration:underline;
}
a:hover{
    text-decoration:underline;
}
a:visited{
    color:#000000;
}
a img{
    border:none;

}
h2{
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-weight:normal;
}


#container {
    width: 820px;  /* this width will create a container that will fit in an 800px browser window if text is left at browser default font sizes */
    
margin0 auto/* the auto margins (in conjunction with a width) center the page */
    /* text-align: left; /* this overrides the text-align: center on the body element. */
    /* background-image:url(../images/container-back.png); */
}


/* HEADER ************/
#header {
    
background-image:url(../images/header-back.png);
    
height67px;
    
padding-top25px;
}
#header .one{     border-bottom-color:#245361;}
#header .two{     border-bottom-color:#962600;}
#header .three{ border-bottom-color:#494457;}
#header .four{    border-bottom-color:#1F522f;}
#header .five{     border-bottom-color:#AB620B;}
#header ul{
    
padding3px 0px 3px 20px;
    
margin12px 20px 0px 20px;
    
background-image:url(../images/white-trans50.png);
    
border-bottom-width3px;
    
border-bottom-style:solid;
    
color:#AB620B;
}
#header ul li{
    
padding5px 15px 5px 0px;
    
displayinline;
    list-
style-type:none;
}
#header ul li a{
    
font-weight:normal;
}
#header h1 {
    
margin0/* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
    
padding10px 0/* using padding instead of margin will allow you to keep the element away from the edges of the div */
}

.breadCrumbs{
    margin
0px 20px 0px 20px;
    
padding1px 0px 4px 20px;
    
color#f0dcab;
    
background-image:url(../images/black-trans30.png);
}
.breadCrumbs a{
    color
:#f0dcab;
}

.icon01{ padding35px 0px 0px 370px}
.icon02{ padding35px 0px 0px 370px}
.icon03{ padding35px 0px 0px 370px}
.icon04{ padding35px 0px 0px 370px}
.icon05{ padding35px 0px 0px 370px}
.icon06{ padding35px 0px 0px 370px}


.splashContent{
    color
:#FFFFFF;
    
width300px;
    
padding40px 0px 0px 40px;
    
float:left;
}
.splashContent h2 a{
    color
:#ffffff;
}


#middle {
    
background-image:url(../images/container-back.png);
}


/* MAIN CONTENT ***************/
#content {
    
margin0px 20px 0px 20px;
    
min-height400px;
    
padding10px 20px 0px 60px;
    
background#ddc27f;
    
background-image:url(../images/content-back-top.jpg);
    
background-position:top;
    
background-repeat:no-repeat;
}
#content p{
    
margin0px;
    
padding-bottom:10px;
    
width500px;
    
line-height:16px
}
#content h1{
    
font-weight:normal;
    
font-size:26px;
    
color:#494457;
}
#content h2{
    
font-weight:bold;
    
font-size:16px;
    
color:#494457;
}
#content ul li{    
    
width450px;    
    
margin:0;   
    
margin-bottom:5px
    list-
style-type:none;

#content li{    
    
background:url(../images/bullet.pngleft top no-repeat;    
    
padding:0px 0px 0px 10px;

#content .subSubTitle{
    
font-weight:bold;
    
color:#494457;
}
#content .captionRight{
    
padding-right:45px;
    
width:150px;
    
float:right;
    
color:#962600;
    
clear:both;
}
#content .captionBottom{
    
color:#962600;
    
margin-bottom:15px;
}
#content img{
    
margin-bottom:5px;
    
border:none;
}
#content img.leftImage{ 
    
float:left
    
margin:4px
}
#content img.rightImage{ 
    
float:right
    
margin:2px

#content .imageCaptionRight{
    
padding-bottom:20px;
    
clear:right;
}
#content .videoContainer{
    
margin-top:5px;
    
margin-bottom:5px;
}
#content .nextPage{
    
text-align:right;
}
#content .nextPage a{
    
color:#1F522F;
    
font-weight:bold;
}

#content blockquote{    
    
width400px
}


/* TABLE OF CONTENTS **************/
#toc {
    
margin0px 20px 0px 20px;
    
min-height400px;
    
padding0px;
    
background#ddc27f;
    
background-image:url(../images/content-back-top.jpg);
    
background-position:top;
    
background-repeat:no-repeat;
}

#toc #titleImage{
    
float:left;
    
width:184px;
}
#toc #links{
    
float:left;
    
width:596px;
}

#toc #link1{
    
padding-left:10px;
    
padding-top:10px;
    
clear:none;
}
#toc #link2{
    
padding-left:115px;
    
clear:left ;
}
#toc #link3{
    
padding-left:190px;
}
#toc #link4{
    
padding-left:230px;
    
padding-top:20px;
}
#toc #puddle{
    
clear:both;
    
float:right;
    
width:480px;
}
#toc .linkContainer{
        
clear:both;
}
#toc .tocImageContainer{
        
float:left;
}
#toc .textLinkContainer{
        
float:left;
}
#toc #textLink1{
    
width:470px;
    
padding-top25px;

}
#toc #textLink2{
    
width:380px;
    
padding-top20px;
}
#toc #textLink3{
    
width:305px;
    
padding-top20px;
    
float:right;
}
#toc #textLink4{
    
width:270px;
    
padding-top20px;
    
float:right;
}

#toc h2{
    
padding50px 0px 0px 0px;
    
margin:0px;
}
#toc #bottom {
    
clear:both;
}

/***********************************/

#splashContent {
    
margin0px 20px 0px 20px;
    
min-height400px;
    
padding0px;
    
background#ddc27f;
    
background-image:url(../images/content-back-top.jpg);
    
background-position:top;
    
background-repeat:no-repeat;
}
#splashContent p{
    
margin0px;
}
#splash01{
    
background-image:url(../images/splash01.png);
    
height424px;
    
width:780;
}
#splash02{
    
background-image:url(../images/splash02.png);
    
height424px;
    
width:780;
}

/* FOOTER *********/
#footer { 
clear:both;
    
padding0px 20px;
    
margin0px 0px 0px 0px;
    
height:82px;
    
background-image:url(../images/footer-back.png);
    
text-align:right;
Profile
 
 
Posted: 25 June 2008 01:20 PM   [ Ignore ]   [ # 2 ]
Newbie
Rank
Total Posts:  3
Joined  2008-06-23

Just in case someone else encounters a similar issue I felt I should post how I resolved my issue.

Resolved by placing the leftImage and rightImage classes into individual <div> tags within the content <div>.

Profile