5 replies [Last post]
psionw35
Offline
newbie
Last seen: 10 years 16 weeks ago
Timezone: GMT+1
Joined: 2011-10-05
Posts: 4
Points: 5

....my code has 5 separate lists, each in the same style div applying a border at the bottom of each div to separate them form each other.

The problem is 4 of the lists contain only text and these work fine. The one containing the image (I have tried it with and without out list tags) doesn't work properly. The div is not expanding to the same height as the image and the border which should be at the bottom of the image cuts through behind it half way down the image?what I

I would be grateful if anyone could take a look at my code and advise I could try to sort this out.

Thanks

Jack

jackR
jackR's picture
Offline
Regular
Denver
Last seen: 6 years 26 weeks ago
Denver
Timezone: GMT-6
Joined: 2009-04-13
Posts: 44
Points: 46

height and width?

Have you tried adding height and width properties to the div? Show you code, both html and css, otherwise it is very difficult to troubleshoot your problem. Wink

psionw35
Offline
newbie
Last seen: 10 years 16 weeks ago
Timezone: GMT+1
Joined: 2011-10-05
Posts: 4
Points: 5

Hi JackR Here's the code,

Hi JackR

Here's the code, thanks for looking.

<div class="indent1">
					<div class="container divider3">
						<div class="col-1 col-pad">
                        	<h4>Share With Friends</h4>
                            <div class="border border-pad">
							<p><span  class='st_facebook' st_url="https://www.facebook.com/pages/The-Big-Ambition-Company/170149636344690"></span><span  class='st_twitter' st_url="http://twitter.com/#/bigambitionco"></span><span  class='st_linkedin' ></span><span  class='st_blogger' ></span><span  class='st_yahoo' ></span><span  class='st_email' ></span><span  class='st_sharethis' ></span></p>
                            </div>
							<h2>Services</h2>
							<div class="border border-pad">
								<ul>
									<li><a href="webdesign.html">Web Design</a></li>
									<li><a href="seo.html">Search Engine Optimisation</a></li>
									<li><a href="hosting.html">Hosting</a></li>
									<li><a href="marketingmaterial.html">Marketing Material</a></li>
									<li><a href="businessmentoring.html">Business Mentoring</a></li>
 
								</ul>
							</div>
							<h2>Social Networks</h2>
							<div class="border border-pad"><ul>
								  <li><img src="images/social_networks.jpg" alt="the_big_ambition_social_networks" width="200" height="200" usemap="#Map" />
                                    <map name="Map" id="Map">
                                      <area shape="rect" coords="3,72,199,139" href="https://www.facebook.com/pages/The-Big-Ambition-Company/170149636344690" target="_new" alt="" />
                                      <area shape="rect" coords="3,140,200,199" href="http://twitter.com/#!/bigambitionco" target="_new" alt="" />
                                      <area shape="rect" coords="4,-1,201,66" href="http://maps.google.co.uk/maps?hl=en&amp;nord=1&amp;q=the+big+ambition+company&amp;gs_sm=&amp;gs_upl=&amp;bav=on.2,or.r_gc.r_pw.&amp;ion=1&amp;biw=1366&amp;bih=677&amp;um=1&amp;ie=UTF-8&amp;sa=N&amp;tab=wl" target="_new" alt="" />
                                    </map>
							  </li>
								</ul>
 
							</div>
 
                            <h2>Testimonials</h2>
							<div class="border border-pad">
								<ul>
									<li><a href="#">Business Starter Package</a></li>
									<li><a href="#">Google Adwords Vouchers</a></li>
							  <li><a href="#">So and and so forth</a></li></ul>
							</div>
 
 
<h2>Latest Blogs</h2>
							<div class="border border-pad">
								<ul>
									<li><a href="#">Business Mentoring 101</a></li>
							  <li><a href="#">Public Liability Insurance</a></li></ul>
							</div>
 
 
						</div> 

/* CSS Document */
 
* {
	margin:0; padding:0;
	font-size:100%;
}
 
body{
	background:#eaeaea;
	text-align:center;
}
 
object {vertical-align:top; outline:none;}
 
img {
	float: left;
}
a img { border:0;}
 
ul { list-style:none;}
 
.left { float:left;}
.right {float:right;}
.clear  { clear:both;}
 
 
html, input, textarea
	{
	font-family:Arial, Helvetica, sans-serif;
	font-size:0.875em;
	line-height:1.1428em;
	color:#434343;
	}
 
input, select { vertical-align:middle; font-weight:normal;}
 
a {color:#dd145b; outline:none;}
a:hover{
	text-decoration:none;
	color: #92278f;
}
a:hover {
	text-decoration: underline;
}
 
p {padding-top:16px;}
 
/* ============================= main layout ====================== */
 
li {
	line-height:1.428em;
	padding-top: 10px;
}
li a {color:#dd145b;}
 
.imgindent {margin:0 20px 0 0; float:left;}
 
.extra {background:#fff;}
 
h2 {font-size:2.14em; line-height:1.243em; color:#434343; padding:10px 0 30px 0; font-weight:normal;}
/* ============================= header ====================== */
.flash {
	margin-top:-10px;
}
/* ============================= content ====================== */
.box-pad {padding-right:5px;}
 
.box {background:#f0f0f0; }
.box h3 {font-size:1.571em; color:#434343; line-height:1.243em; padding:16px 0 10px 0;}
.box a {display:inline-block; text-decoration:none; margin-top:10px;}
.box a:hover {text-decoration:underline;}
.box .indent {padding:10px 10px 23px 10px;}
.box .bottom-tail {background:url(images/box-bottom-tail.gif) left bottom repeat-x;}
.box .top-tail {background:url(images/box-top-tail.gif) left top repeat-x;}
.box .left-tail {background:url(images/box-left-tail.gif) top left repeat-y;}
.box .right-tail {background:url(images/box-right-tail.gif) top right repeat-y;}
.box .bottom-right {background:url(images/box-corner-bottom-right.gif) bottom right no-repeat;}
.box .bottom-left {background:url(images/box-corner-bottom-left.gif) bottom left no-repeat;}
.box .top-right {background:url(images/box-corner-top-right.gif) top right no-repeat;}
.box .top-left {background:url(images/box-corner-top-left.gif) top left no-repeat; width:100%;}
 
.indent {padding:28px 0 55px 16px;}
.indent1 {padding:12px 0 55px 15px;}
 
.padding {padding-bottom:52px;}
 
.col-pad {padding-right:44px;}
 
.link {background:url(images/link-left-bg.gif) left top no-repeat; display:inline-block; line-height:1.243em; text-decoration:none; margin:36px 0 0 0px; color:#fff; font-weight:bold; cursor:pointer; font-size:1.57em;}
.link span {background:url(images/link-right-bg.gif) right top no-repeat; display:inline-block; padding:0 19px 0 19px;}
.link span span  {background:url(images/link-tail-bg.gif) top repeat-x; padding:6px 0px 12px 0px;}
 
.link:hover {background:url(images/link-left-bg-hover.gif) left top no-repeat; }
.link:hover span {background:url(images/link-right-bg-hover.gif) right top no-repeat;}
.link:hover span span  {background:url(images/link-tail-bg-hover.gif) top repeat-x;}
 
.link1 {background:url(images/link1-left-bg.gif) left top no-repeat; display:inline-block; line-height:1.243em; text-decoration:none; margin:36px 0 0 0px; color:#000; font-weight:bold; cursor:pointer; font-size:1.57em;}
.link1 span {background:url(images/link1-right-bg.png) right top no-repeat; display:inline-block; padding:0 19px 0 19px;}
.link1 span span  {background:url(images/link1-tail-bg.gif) top repeat-x; padding:6px 0px 12px 0px;}
 
.link1:hover {color:#606060;}
 
.pad {padding-top:25px;}
.pad1 {padding-top:31px;}
 
.title {color:#dd145b;}
 
.border {
	padding-bottom:35px;
	margin-bottom:14px;
	background-repeat: repeat-x;
	background-position: left bottom;
	background-image: url(images/divider-bg.gif);
}
.border-pad {padding-bottom:30px;}
 
.border1 {background:url(images/divider-bg.gif) left bottom repeat-x; padding-bottom:30px; margin-bottom:25px;}
 
.gallery {padding-top:30px;}
.gallery img {margin-right:27px;}
.gallery .last {margin-right:0px;}
 
.phone {display:inline-block; width:80px;}
 
/* ============================= footer ====================== */
#footer {
	background-image: url(images/footer-bg.gif);
	background-repeat: no-repeat;
	background-position: right top;
}
#footer .col-1 {width:160px !important;}
#footer .col-pad {padding-right:9px;}
#footer .indent {padding:40px 0 0 16px;}
#footer h3 {font-size:1.142em; color:#151515; padding:10px 0 6px 0; background:url(images/footer-border.gif) left bottom repeat-x; margin-bottom:20px;}
#footer li {background:url(images/footer-marker.gif) left 9px no-repeat; padding-left:12px; font-size:0.92em; line-height:1.6923em;}
#footer li a {color:#868686; text-decoration:none;}
#footer li a:hover {text-decoration:underline;}
.policy {font-size:0.714em; text-transform:uppercase; color:#949393; padding-top:93px}
.policy a {color:#949393; text-decoration:none;}
.policy a:hover {text-decoration:underline;}
/* ============================= forms ============================= */
 
#ContactForm {margin-top:-10px}
#ContactForm label {height:42px; display:block; background:url(images/input-bg.gif) right top no-repeat; position:relative;}
#ContactForm  strong {display:inline-block; padding-top:10px; font-weight:normal;}
#ContactForm .link {margin:23px 0 0 0px}
#ContactForm .link1 {margin:23px -10px 0 0; position:relative;}
.alignright {text-align:right;}
#ContactForm .input {width:342px; border:none; background:none; padding:12px 0 8px 0px; font-size:1em; line-height:1.243em; float:right; margin:0 18px 0 18px;}
.textarea {background:url(images/textarea-bg.gif) right top no-repeat;}
textarea {width:352px; height:142px; border:none; background:none; padding:5px 0 0 5px; overflow:auto; font-size:1em; float: right; margin:0 8px 0 18px;}
 
a:link {
	text-decoration: none;
}
 
a:visited {
	text-decoration: none;
}
a:active {
	text-decoration: none;
}
.image-1 {
	float: left;
	padding: 0px 25px 0px 25px;
}
.image-2 {
	float: right;
	padding: 0px 25px 0px 25px;
 
}

If I delete the image from the div and replace it with text, all is fine. So unless it's something to do with the img tag I have know idea what's affecting it?

Cheers

Cheers

jackR
jackR's picture
Offline
Regular
Denver
Last seen: 6 years 26 weeks ago
Denver
Timezone: GMT-6
Joined: 2009-04-13
Posts: 44
Points: 46

Overflow

you could do something like this.

.indent1 .container.divider3 .col-1.col-pad .border.border-pad {
	overflow: hidden;
}

I used the full path to the html element you are effecting. Also, your DOM for you html was broken, you are lacking two closing divs before your closing body tag...FYI Smile

you could also apply a height and width to the div, but with all your classes with different padding, it could be a pain to figure out the correct height. overflow: hidden is what I would use, but you will need to see how it responds in the browsers you plan to support.

psionw35
Offline
newbie
Last seen: 10 years 16 weeks ago
Timezone: GMT+1
Joined: 2011-10-05
Posts: 4
Points: 5

Thanks very much. I will give

Thanks very much. I will give it a try and let you know.

Cheers

Jack

psionw35
Offline
newbie
Last seen: 10 years 16 weeks ago
Timezone: GMT+1
Joined: 2011-10-05
Posts: 4
Points: 5

Perfect, it sorted the

Perfect, it sorted the problem out and I also added the missing divs.

First time I've used this site and I must say the speed of your reply's it grateful.

Thanks again jackR