LisaWilcox
asked on
Wide-content div alignment issue-images misaligning with content div rounded box
I have my content, as referenced in the xhtml below. It is a div that has a top and bottom image to give it a rounded box appearance. The box is missaligned and all attempts to correct the css have not worked. Any ideas would be appreciated. Here's a link to vie the referenced issue. http://www.webgirlwebdesigns.com/testing/StPauls/staff.html
<!-- BEGIN: CONTENT -->
<div id="wide_content">
<div id="wide-content-top">
<div id="wide-content-bot">
<div class="innerpad clearfix">
<!--[if !IE]>INTI GLOBAL POSTPAGE FUNCTIONS<![endif]-->
<div id="post-index">
<!--[if !IE]>INIT NORMAL BLOG CONTENT<![endif]-->
<!-- TemplateBeginEditable name="content-wide" -->
<h1 class="post-title"><a href="http://www.webgirlwebdesigns.com/testing/StPauls/?p=1" rel="bookmark" title="St. Pauls Episcopal Church welcomes you!">St. Pauls </a></h1>
<div class="post-content">
<p> </p>
<p> </p>
</div>
<!-- TemplateEndEditable -->
<div class="clear-fix"></div>
<span class="article_seperator"> </span>
<div class="clear-fix"></div>
<div id="post-navigator">
<div class="alignright"></div>
<div class="alignleft"></div>
</div>
<div class="clear-fix"></div>
</div>
</div>
</div></div></div>
<!-- END: CONTENT -->
The bottom image will be aligned properly but i couldn't find the top image.
ASKER
As you can see the top image and bottom are there, but there is still an alignment issue and some stray background to boot. http://www.webgirlwebdesigns.com/testing/StPauls/staff.html
/* PRIMARY COLUMN
--------------------------------------------------------- */
#content-top {
background: url(../images/content-top.gif) no-repeat top;
}
#wide-content-top {
background:transparent url(../images/wide-content-top.gif) no-repeat scroll left top;
}
#content-bot {
background: url(../images/content-bot.gif) no-repeat bottom;
}
#wide-content-bot {
background:transparent url(../images/wide-content-bot.gif) no-repeat scroll left bottom;
}
#content div.innerpad {
clear: both;
margin: 0;
padding: 20px;
display: block;
height: 300px;
}
html>body #content div.innerpad {
height: auto;
}
but i couldn't fine
#content-bot and #content-top implemented in the code
#content-bot and #content-top implemented in the code
ASKER
<!-- BEGIN: CONTENT -->
<div id="wide_content">
<div id="wide-content-top">
<div id="wide-content-bot">
<div class="innerpad clearfix">
<!--[if !IE]>INTI GLOBAL POSTPAGE FUNCTIONS<![endif]-->
<div id="post-index">
<!--[if !IE]>INIT NORMAL BLOG CONTENT<![endif]-->
<!-- InstanceBeginEditable name="content-wide" --><img src="images/gwynne.jpg" width="163" height="171" hspace="12" style="float:left"/>
<p><strong>Rev. Gwynne Wright, Interim Priest,</strong> is a graduate of Seabury Western Theological Seminary where she currently serves as Secretary for the Board of Trustees. Before going to seminary Mother. Gwynne spent several years in executive management in IBM and Arthur Andersen specializing in organizational development and mergers and acquisitions. She feels that God was always preparing her for ordained ministry as that experience is well suited for interim ministry. Mother Gwynne is currently a candidate for a Doctor of Ministry with the Graduate Theological Foundations. Her studies have included Anglican Spirituality in Oxford, England. In her spare time, Mother. Gwynne visits her stepchildren and grandchildren in England and raises and shows Cairn Terriers.<strong> </strong>Mother Gwynne has commented: "It is evident that the Spirit is alive in the generous hearts of the people of St. Paul's." <strong> </strong></p>
<p><strong> </strong> </p>
<p> </p>
<p><img width="163" height="171" src="/images/clip_image002 _0002.png" align="left" hspace="12" alt="Text Box: " /><strong> </strong></p>
<p><strong>Anna Dee Lastick, Parish Administrator,</strong> is a life long Episcopalian, she has been at St. Paul's since September 2004. Anna Dee holds degrees in Psychology and Social Work M.S.S.W., UT. Prior to St. Pauls, in Chicago, she worked in administrative capacities at U.I.C., DePaul University, and in business settings. She lives in Cortland with her husband Bob, who sings in the St. Paul's choir. She loves gardening, Shakespeare, classical music, her four dogs, two rabbits and other assorted critters. </p>
<p> </p>
<p><strong> </strong> </p>
<p> </p>
<p><img width="163" height="171" src="/images/clip_image004 .png" align="left" hspace="12" alt="Text Box: " /><strong> </strong></p>
<p><strong> </strong> </p>
<p><strong>Lorraine Langer, Director of Music, and Choirs</strong> has over 30 years experience teaching, as well as directing <strong>Adult, Youth & Childrens Choirs</strong> in churchs that include the Episcopal, Catholic, Presbyterian, Methodist, Baptist and Lutheran faiths. She joined the staff at St. Pauls in 2005. She has a gift and passion for performing, and teaching voice to all ages and has a private voice studio in DeKalb. She grew up on a farm in Northfield, Minnesota in a family of thirteen children. Lorraine received a Bachelor of Arts from the College of St. Scholastica in Duluth, Minnesota, and a Master of Arts from Northeastern Illinois University in Chicago. </p>
<div class="post-content">
<p> </p>
<p> </p>
</div>
<!-- InstanceEndEditable -->
<div class="clear-fix"></div>
<span class="article_seperator"> </sp an>
<div class="clear-fix"></div>
<div id="post-navigator">
<div class="alignright"></div>
<div class="alignleft"></div>
</div>
<div class="clear-fix"></div>
</div>
</div>
</div></div></div>
<!-- END: CONTENT -->
<div id="wide_content">
<div id="wide-content-top">
<div id="wide-content-bot">
<div class="innerpad clearfix">
<!--[if !IE]>INTI GLOBAL POSTPAGE FUNCTIONS<![endif]-->
<div id="post-index">
<!--[if !IE]>INIT NORMAL BLOG CONTENT<![endif]-->
<!-- InstanceBeginEditable name="content-wide" --><img src="images/gwynne.jpg" width="163" height="171" hspace="12" style="float:left"/>
<p><strong>Rev. Gwynne Wright, Interim Priest,</strong> is a graduate of Seabury Western Theological Seminary where she currently serves as Secretary for the Board of Trustees. Before going to seminary Mother. Gwynne spent several years in executive management in IBM and Arthur Andersen specializing in organizational development and mergers and acquisitions. She feels that God was always preparing her for ordained ministry as that experience is well suited for interim ministry. Mother Gwynne is currently a candidate for a Doctor of Ministry with the Graduate Theological Foundations. Her studies have included Anglican Spirituality in Oxford, England. In her spare time, Mother. Gwynne visits her stepchildren and grandchildren in England and raises and shows Cairn Terriers.<strong> </strong>Mother Gwynne has commented: "It is evident that the Spirit is alive in the generous hearts of the people of St. Paul's." <strong> </strong></p>
<p><strong> </strong>
<p> </p>
<p><img width="163" height="171" src="/images/clip_image002
<p><strong>Anna Dee Lastick, Parish Administrator,</strong> is a life long Episcopalian, she has been at St. Paul's since September 2004. Anna Dee holds degrees in Psychology and Social Work M.S.S.W., UT. Prior to St. Pauls, in Chicago, she worked in administrative capacities at U.I.C., DePaul University, and in business settings. She lives in Cortland with her husband Bob, who sings in the St. Paul's choir. She loves gardening, Shakespeare, classical music, her four dogs, two rabbits and other assorted critters. </p>
<p> </p>
<p><strong> </strong>
<p> </p>
<p><img width="163" height="171" src="/images/clip_image004
<p><strong> </strong>
<p><strong>Lorraine Langer, Director of Music, and Choirs</strong> has over 30 years experience teaching, as well as directing <strong>Adult, Youth & Childrens Choirs</strong> in churchs that include the Episcopal, Catholic, Presbyterian, Methodist, Baptist and Lutheran faiths. She joined the staff at St. Pauls in 2005. She has a gift and passion for performing, and teaching voice to all ages and has a private voice studio in DeKalb. She grew up on a farm in Northfield, Minnesota in a family of thirteen children. Lorraine received a Bachelor of Arts from the College of St. Scholastica in Duluth, Minnesota, and a Master of Arts from Northeastern Illinois University in Chicago. </p>
<div class="post-content">
<p> </p>
<p> </p>
</div>
<!-- InstanceEndEditable -->
<div class="clear-fix"></div>
<span class="article_seperator">
<div class="clear-fix"></div>
<div id="post-navigator">
<div class="alignright"></div>
<div class="alignleft"></div>
</div>
<div class="clear-fix"></div>
</div>
</div>
</div></div></div>
<!-- END: CONTENT -->
I can't find any div where have you used the classes content-top and content-bot in page.
ASKER
I had them as div id's not classes. Perhaps that would be my issue.
ah sorry i should have written ids but ids are also not present with these names
ASKER
I'm using wide-content top wide-content bot and wide-content. I've attached a pdf of the code with a sticky note referencing the code.
staff.pdf
staff.pdf
ASKER
I did some tweaks and it's a little better but not quite
http://www.webgirlwebdesigns.com/testing/StPauls/staff.html
I changed the following:
#wide_content {
float: left;
width: 100%;
background: url(../images/wide-content -center.gi f) repeat-y ;
}
#wide-content-top {
background:transparent url(../images/wide-content -top.gif) no-repeat top;
}
#wide-content-bot {
background:transparent url(../images/wide-content -bot.gif) no-repeat bottom;
}
http://www.webgirlwebdesigns.com/testing/StPauls/staff.html
I changed the following:
#wide_content {
float: left;
width: 100%;
background: url(../images/wide-content
}
#wide-content-top {
background:transparent url(../images/wide-content
}
#wide-content-bot {
background:transparent url(../images/wide-content
}
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
also change this id in style.css necessary for IE8
#containerwrap, #containerwrap-cm, #containerwrap-c, #containerwrap-f {
padding: 0;
text-align:center;
}
#containerwrap, #containerwrap-cm, #containerwrap-c, #containerwrap-f {
padding: 0;
text-align:center;
}
you may need to change the text alignments in the child divs as needed
ASKER
I've tried to make adjustments to the child divs and adjust image and it's still view weird for me.
http://www.webgirlwebdesigns.com/testing/StPauls/staff.html
http://www.webgirlwebdesigns.com/testing/StPauls/staff.html
well i am sorry to say but you have not used my code at all.
So please first try with ID:24067867 and ID:24067914
So please first try with ID:24067867 and ID:24067914
ASKER
oh I'm sorry I thought I did. let me retry it.
Hi Lisa,
Sorry but i couldn't find any reasons for B grade.
I think i did more than normal
Can you please explain the reason..
Regards,
Amarjit
Sorry but i couldn't find any reasons for B grade.
I think i did more than normal
Can you please explain the reason..
Regards,
Amarjit
ASKER
I still couldn't get the information you sent me to work. I copied all of the code and css changes, but it's not working. So I scrapped that page style and I'm revamping it. I appreciate all you have done though.
Actually the issues is at your end .
your css styling is not correct.
Please check this link if it helps you
http://www.webmasterworld.com/forum83/200.htm
your css styling is not correct.
Please check this link if it helps you
http://www.webmasterworld.com/forum83/200.htm
ASKER
I haven't uploaded the changes since they weren't working.
Open in new window