3 Replies - 1838 Views - Last Post: 10 April 2010 - 11:47 AM

#1 tscott  Icon User is offline

  • D.I.C Regular

Reputation: 2
  • View blog
  • Posts: 370
  • Joined: 30-January 09

HTML / CSS Issue Can't get Image to display properly

Posted 07 April 2010 - 08:49 PM

As you can see by the picture I'm having a problem with the pink div displaying the entire contents of the picture. Here is my code below. You will be working with the #sharelink1 div which is the container for the image it's #shareshot which is the id for the image as you can see I'm using the background-image property. Overflow and text-indent also don't seem to be working not sure why. Also made an attachment image to show my issue visually

CSS
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="javascript/prototype.js"></script>
<script type="text/javascript" src="javascript/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="javascript/lightwindow.js"></script>
<link rel="stylesheet" href="css/lightwindow.css" type="text/css" media="screen" />

<style type="text/css">

body
{
	margin:0px;
	background-color: #393a43;
	background-repeat:no-repeat;
	background-position:top center;
	font-family: Helvetica, Verdana, Tahoma;
	font-size:12px;
	width: 100%;
}
h3
{
	font-family: Helvetica, Tahoma, Verdana,;
}
em 
{
		font-style: italic;
}
p
{
	font-family: Tahoma, Verdana, Helvetica, sans-serif;
	font-size:0.849em;
			color:#757575;
			
}


#outsidebox
{
	
	margin-left:auto;
	margin-right:auto;
	background-image: url(images2/mainbg3.jpg);
	width: 992px;
	height: 1000px;
	background-repeat: no-repeat;
	
	text-align: center;
	
}
#header
{
	background-color: #1a1a25;
	height: 80px;
	width: 992px;
}
#listheader
{
	margin: 0 0 0 40px;
	
}
#listheader ul
{
	list-style-type: none;
	padding: 0px;
	margin-left:240px;
	margin-top:0; 
	margin-bottom:0;

}


#listheader ul li
{
	margin: 0px 0 0 0px;
	padding: 0px;

}



#listheader ul li a
{
	display: block;
	background-repeat: no-repeat;
	text-indent: -9999px;
	overflow: hidden;
	margin: 50px 0 0 0;
}

.logo
{
	float: left;
	width: 252px;
	height: 80px;
	margin: 0 0 0 0px;
	background-image: url(images2/logomain2.png);
	text-indent: -1000em;
    overflow:hidden;
}
.home 
{
    background-image: url(images2/mainwabout5.png);
    width: 67px;
    height: 30px;
    background-position: top left;
    float: left;
	
}

.home:hover
{
    background-position:0px -30px;
    float: left;
}

.services 
{
    background-image: url(images2/mainwabout5.png);
    width: 83px;
    height: 32px;
    background-position: -67px 0px;
    float: left;
}
.services:hover
{
	background-position: -67px -30px;
	
}

.portfolio 
{
    background-image: url(images2/mainwabout5.png);
    width: 86px;
    height: 30px;
    background-position: -150px -67px;
    float: left;
}

.about
{
	background-image: url(images2/mainwabout5.png);
    width: 78px;
    height: 30px;
    background-position: -240px 0px;
    float: left;
}
.about:hover
{
	background-position: -240px -30px;
}

.contact 
{
    background-image: url(images2/mainwabout5.png);
    width: 82px;
    height: 30px;
    background-position: -322px 0px;
    float: left;
}
.contact:hover 
{
    background-position: -322px -30px;
}

/*End of Header */
/*End of Header */

/* subnav */
#subnav
{
	background-color: #02345b; /*original color #02345b */  /* possible option 9acddc */
	width:992px;
	height:22px;
	float: left;
	margin: -2px 0 0 0;
	
	
}
#sublist
{
	text-align: left;
	list-style-type:none;
	margin: 0 0 0 444px;
	padding: 0 15px 0 0;
	text-transform:uppercase;
}
.listtext 
{
	font-size:.85em;
	color: #cdd4e1;
	margin: 5px 4px 0 0px;
	padding: 0 0 0 10px;
	float: left;
	
			/*font-family:Arial, Helvetica, sans-serif; */
			/*font-size:0.849em;*/
	
}

#subnav li a:hover
{
	color: #389bf0;
	
	
}
/* End of subnav */

/* Middle Box original color white is #ededf6 */
#logodesigncontainer /* Web Portfolio Text */
{
	
	float: left;
	height: 250px;
	width: 992px;
	margin: 0 0 0 0;
	background-color: #161e2c;
	background-image: url(images2/porttop.jpg);
	
}
#designpic /*moving or controlling the text in the above container*/
{
	height: 250px;
	width: 992px;
	float: left;
}
#wrapper /*Shell for web portfolio portion */
{
    margin: 0 0 0 0;
	background-color:#000000; /*1a1a25*/
	height: 1350px;
	width: 992px;
}
#topheading /* SHOW ALL Informational E-Commerce etc Container */
{
	float: left;
	background-color:#1a1a25;
	height:80px;
	width:992px;
	
}
#showbox
{
	float:left;
	width:  115px;
	height: 38px;
	
	background-color:#1a1a25;
}
.show
{
	height:22px;
	width:57px;
	margin:16px 0 0 60px;
	
}
#listitembox 
{
	
	float:left;
	background-color:#1a1a25;
	width:877px;
	height:38px;
	
}
#listitembox ul li a
{
	display: block;
	background-repeat: no-repeat;
	text-indent: -9999px;
	overflow: hidden;
	
}

#showlist
{
	text-align: left;
	list-style-type:none;
	
}
.all
{
	background-image: url(images2/showhover.gif);
    width: 35px;
    height: 23px;
    background-position:0px -39px;
    float: left;
	margin:5px 0 0 0;
}
.informational
{
	background-image: url(images2/showhover.gif);
	width: 84px;
	height: 21px;
	float: left;
	margin:5px 0 0 15px;
	background-position: -57px 0px;
	
}
.informational:hover
{
	background-position: -57px -20px;
	
}
.ecommerce
{
	background-image: url(images2/showhover.gif);
	width:77px;
	height: 21px;
	float: left;
	background-position: -169px 0px;
	margin:5px 0 0 15px;
}
.ecommerce:hover
{
	background-position: -169px -20px;
}
.blog
{
	background-image: url(images2/showhover.gif);
	width: 34px;
	height: 21px;
	float: left;
	background-position: -270px 0px;
	margin:5px 0 0 15px;
}
.blog:hover
{
	background-position: -270px -20px;
}
#longline
{
	margin: 4px 0 0 0;
}
#headingbox1
{
	float:left;
	width:992px;
	height:21px;
	background-color:#FF9999; /*FF9999 */
}
#sdrive
{
	float:left;
	margin: 0 0 0 55px;
}
#features1
{
	float:left;
	margin: 0 0 0 100px;
}

#opalheading
{
	float:left;
	margin: 0 0 0 60px;
}
#features2
{
	float:left;
	margin: 0 0 0 70px;
}
#logobox1
{
	float: left;
	width: 444px;
	height: 142px;
	background-color: #1a1a25;
	margin: 10px 0 0 45px;
	
}
#sharebutton
{
	background-image: url(images2/sdrive.jpg);
	width: 444px;
	height:142px;
	float: left;
	text-indent: -9999px;
	overflow: hidden;
}
 p
{
	margin: 0; padding: 0;
	margin-left:96px;
	text-align: left;
	font-size: 94%;
	
}
 h2
{
	padding: 0;
	margin:5px 0 0 94px;
	text-align: left;
	color: #ffffff;
	font-size:140%;
	font-weight:bold;
	font-style:normal;
}
#logobox2
{
	float: left;
	width: 444px;
	height:142px;
	background-color: #1a1a25;
	margin: 10px 0 0 14px;
	
}
#opalbutton
{
	background-image: url(images2/opalsmall.gif);
	width: 444px;
	height:142px;
	float: left;
	text-indent: -9999px;
	overflow: hidden;
}
#textboxrow1 /*outer container used to hold all of contents in row 1 */
{
	float:left;
	width:992px;
	height:200px;
	background-color:#FFFF66;
	
}
#innerrow1
{
	float:left;
	width:992px;
	height:64px;
	background-color:#9999FF; /*div that holds textbox1 and 2 so that next buttons arent on same line */
}
#textbox1
{
	float:left;
	width:410px;
	height:54px;
	background-color:#CC00CC; 	/* shareboxCC00CC*/
	margin:10px 0 0 0;
}
#textbox2
{
	float:left;
	width:410px;
	height:54px;
	background-color:#FF99FF;	/* opal box FF99FF*/
	margin:10px 0 0 40px;
}
#sharelink1
{
	float:left;
	background-color:#FF0066;
	width: 214px;
	height: 32px;
	margin: 20px 0 0 0;
}
#shareshot
{
	width:214px;
	height:32px;
	background-image:url(images2/screenshots.jpg);
	text-indent: -999px;
	overflow: hidden;
	
}
#opalbutton1
{
	float:left;
	background-color:#000000;
	width: 114px;
	height: 32px;
	margin:0 0 0 20px;
	
	
}
#opalshot
{
	width:114px;
	height:32px;
	background-image:url(images2/screenshot.gif);
	text-indent: -9999px;
	overflow: hidden;
	
}
#logobox3
{
	float: left;
	height: 300px;
	width: 290px;
	background-color: #1a1a25;
	margin: 10px 0 0 14px;
	
}
#relaxislebutton
{
	background-image: url(images2/th_relaxbest.png);
	width: 290px;
	height:247px;
	float: left;
	text-indent: -9999px;
	overflow: hidden;
}
#logobox4
{
	float: left;
	height: 300px;
	width: 290px;
	background-color: #1a1a25;
	margin: 10px 0 0 45px;
	
}
#logobox5
{
	float: left;
	height: 300px;
	width: 290px;
	background-color: #1a1a25;
	margin: 10px 0 0 14px;
	
}
#logobox6
{
	float: left;
	height: 300px;
	width: 290px;
	background-color: #1a1a25;
	margin: 10px 0 0 14px;
	
}
#logobox7
{
	float: left;
	height: 300px;
	width: 290px;
	background-color: #1a1a25;
	margin: 10px 0 0 45px;
	
}
#logobox8
{
	float: left;
	height: 300px;
	width: 290px;
	background-color: #1a1a25;
	margin: 10px 0 0 14px;
	
}
#logobox9
{
	float: left;
	height: 300px;
	width: 290px;
	background-color: #1a1a25;
	margin: 10px 0 0 14px;
	
}
#zegnabutton
{
	background-image: url(images2/zegnasmall.png);
	width: 290px;
	height:247px;
	float: left;
	text-indent: -9999px;
	overflow: hidden;
}
#saviorbutton
{
	background-image: url(images2/saviorsmall.png);
	width: 290px;
	height:247px;
	float: left;
	text-indent: -9999px;
	overflow: hidden;
}
#jaxbutton
{
	background-image: url(images2/jzsmall.png);
	width: 290px;
	height:247px;
	float: left;
	text-indent: -9999px;
	overflow: hidden;
}
#lgebutton
{
	background-image: url(images2/lgesmall.jpg);
	width: 290px;
	height:247px;
	float: left;
	text-indent: -9999px;
	overflow: hidden;
}
#marketbutton
{
	background-image: url(images2/marketsmall.png);
	width: 290px;
	height:247px;
	float: left;
	text-indent: -9999px;
	overflow: hidden;
}
#homeworkbutton
{
	background-image: url(images2/homeworksmall.jpg);
	width: 290px;
	height:247px;
	float: left;
	text-indent: -9999px;
	overflow: hidden;
}
#footerborder
{
	background-image: url(images2/mainbg.jpg);
	width: 992px;
	height: 3px;
	float: left;
}

#footerright
{
	margin: 0 0 0 0;
	height: 180px;
	width: 195px;
	background-color: #23282c; /*02345b*/
	float: right;
	border-bottom: 1px solid #161e2c;
	
	border-right: 1px solid #161e2c;
}
#footerright h3
{
	text-align: right;
	margin: 15px 70px 0 0;
	text-transform:uppercase;
	color: #b2cbdf;
	
	
}
#logobottom
{
	float:right;
	margin: 40px 40px 0 0;
}

#footline
{
	height: 140px;
	width: 3px;
	background-image: url(images2/footerline2.png);
	float: right;
	margin: 0px 70px 0 0;
}
#footmiddle
{
	float:right;
	background-color: #23282c;
	width: 315px;
	height: 180px;
	border-bottom: 1px solid #161e2c;
	margin: 0 0 0 0;
}
#listleft
{
	float: left;
	width: 145px;
	background-color: #23282c; /*1a1a25*/
	margin:0 0 0 4px;
	
}
#listleft2
{
	float: right;
	width: 165px;
	background-color: #23282c; /*1a1a25*/
	margin:0 0 0 4px;
	
}

#listright
{
	float:left;
	width: 170px;
	background-color:#23282c;	
}
#listright li a:hover
{
	color:#389bf0;
}
#listleft2 li a:hover
{
	color:#389bf0;
}
#list1
{
	text-align: left;
	list-style-type:none;
	margin: 0;
	padding: 0 15px 0 0;
	text-transform: uppercase;
}
#list2
{
	text-align: left;
	list-style-type:none;
	margin: 0 10px 0 0;
	padding: 0 0px 0 0;
	text-transform: uppercase;
	height: 75px;
}

#footline2
{
	height: 140px;
	width: 3px;
	background-image: url(images2/footerline2.png);
	float: right;
	margin: 25px 0 0 0;
	
}
#footmiddle h3
{
	margin: 15px 0 0 20px;
	text-transform:uppercase;
	color: #bfbfbf; /*b2cbdf */
	font:font:90% Arial, Helvetica, sans-serif;
	font-weight:normal;
	text-align: left;
	
}
.footertext
{
	color: #b2cbdf;
	margin: 0 0px 0 0px;
	padding: 0 0 0 10px;
	float: left;
	
}
.footertright
{
	margin: 0 0 0 20px;
	color: #b2cbdf;
}

#footerleft
{
	background-color: #23282c;
	float:left;
	height: 180px;
	width: 370px;
	border-bottom: 1px solid #161e2c;
	border-left: 1px solid #161e2c;
}
#footerleft h3
{
	margin: 15px 40px 0 0px;
	text-transform:uppercase;
	color: #bfbfbf; /*b2cbdf */
	font:font:90% Arial, Helvetica, sans-serif;
	font-weight:normal;
	text-align: right;
}
#footlogo
{
	float:left;
	width:90px;
	height: 180px;
	border-bottom: 1px solid #161e2c;
}
#footline
{
	float: left;
	height:180px; 
	width: 20px;
	margin: 0px 0 0 0;
	border-bottom: 1px solid #161e2c;
}
#innerleft
{
	float: left;
	width: 120px;
	height: 179px;
	background-color: #23282c;
	border-bottom: 1px solid #161e2c;
}
.contact2
{
	float: left;
	margin: 80px 0 0 0px;
    background-image: url(images2/contactus.png);
    width: 153px;
    height: 38px;
    text-indent: -1000em;
    overflow:hidden;
}
.relaxfont
{
	margin:5px 0 0 104px;
	text-align: left;
	color: #ffffff;
}
.relaxtext 
{
	margin-left:86px;
	text-align: left;
}
.sharetext
{
	margin-left:76px;
	text-align: left;
}
.opaltext
{
	margin-left:76px;
	text-align: left;
	
}
.opalfont
{
	margin:5px 0 0 124px;
	text-align: left;
	color: #ffffff;
}
.jzfont
{
	margin:5px 0 0 84px;
	text-align: left;
	color: #ffffff;
}

.jztext
{
	margin-left:106px;
	text-align: left;
}
.zegnafont
{
	margin:5px 0 0 84px;
	text-align: left;
	color: #ffffff;
}

.zegnatext
{
	margin-left:95px;
	text-align: left;
}
.saviorfont
{
	margin:5px 0 0 124px;
	text-align: left;
	color: #ffffff;
}
.saviortext 
{
	margin-left:106px;
	text-align: left;
}
.lgefont
{
	margin:5px 0 0 84px;
	text-align: left;
	color: #ffffff;
}

.lgetext
{
	margin-left:90px;
	text-align: left;
}
.marketfont
{
	margin:5px 0 0 84px;
	text-align: left;
	color: #ffffff;
}

.markettext
{
	margin-left:85px;
	text-align: left;
}
.homeworkfont
{
	margin:5px 0 0 84px;
	text-align: left;
	color: #ffffff;
}
.homeworktext 
{
	margin-left:85px;
	text-align: left;
}



HTML

<div id="outsidebox">


	<div id="header">
    <a href="index.html"class="logo"  style="text-decoration:none"></a>
    <div id="listheader">
	<ul>
    
    	<li><a href="index.html" class="home"  style="text-decoration:none">Home</a></li>
        <li><a href="services.html" class="services" style="text-decoration:none">Services</a></li>
        <li><a href="portfolio.html" class="portfolio" style="text-decoration:none">Portfolio</a></li>
        <li><a href="about.html" class="about" style="text-decoration:none">About</a></li>
        <li><a href="contactform.html" class="contact" style="text-decoration:none">Contact</a></li>


     </ul>
	</div>
    </div>
    	<div id="subnav">
        <ul id="sublist">

        					<li> <a href="webportfolio.html"  class="listtext" title="chicago web design" style="text-decoration:none">web design</a> </li>
                			<li><a href="printportfolio.html" class="listtext"   title="chicago print design"style="text-decoration:none">branding</a> </li>
                			<li><a href="logoportfolio.html" class="listtext"  title="chicago logo design"style="text-decoration:none">logo design</a> </li>
                			<li><a href="webportfolio.html" class="listtext" title="search engine optimization"style="text-decoration:none">accessibility</a> </li>
                   			<li> <a href="coming.html" 		class="listtext" title="chicago blog design"style="text-decoration:none">blog design</a> </li>
                            <li> <a href="webportfolio.html" class="listtext"  style="text-decoration:none">e-Commerce</a> </li>
                            <li> <a href="webportfolio.html" class="listtext"  style="text-decoration:none">application development</a> </li>
        </ul>                  
        </div>
        	<div id="logodesigncontainer">
            </div>
            
           <div id="wrapper">
           		<div id="topheading">
                	<div id="showbox">
                    <img src="images2/show.gif" class="show" alt="Filter Results By"   />
                    </div>
                    	<div id="listitembox">
                    	<ul id="showlist">
                    		<li> <a href="webportfolio.html" class="all" title"" style="text-decoration:none">All </a> </li>
                        	<li> <a href="webportfolio.html" class="informational" title"" style="text-decoration:none">Informational </a> </li>
                        	<li> <a href="webportfolio.html" class="ecommerce" title"" style="text-decoration:none">Ecommerce </a> </li>
                        	<li> <a href="webportfolio.html" class="blog" title"" style="text-decoration:none">Blog </a> </li>
               		</ul>
                    </div>
                    		<div id="showline">
                             <img src="images2/showline.gif"    alt="line" id="longline" />
                             </div>
               </div>
               				<div id ="headingbox1">
                            <img src="images2/sdrive.gif"    alt="sharedrive logo" id="sdrive" />
                            <img src="images2/features1.gif"    alt="sharedrive features" id="features1" />
                            <img src="images2/opal.gif"    alt="Opal" id="opalheading" />
                            <img src="images2/features1.gif"    alt="opal features" id="features2" />
                            </div>
            		<div id ="logobox1">
            		<a href="http://www.nvisiondetail.com/images/sharedriveimage.html" id="sharebutton" class="lightwindow" params="lightwindow_width=1200,lightwindow_height=1000,lightwindow_show_images=1" >Link Name</a>
              
				</div> 
					<div id ="logobox2">
                    <a href="http://www.nvisiondetail.com/images/opalimage.html" id= "opalbutton" class="lightwindow" params="lightwindow_width=1200,lightwindow_height=1000,lightwindow_show_images=2" >opal</a>
                   
					</div>
                    <div id="textboxrow1">
                    	<div id="innerrow1">
                    		<div id="textbox1">
                            <p class="sharetext">Our friends at Opal wanted to create a book publishing site that allowed users to upload their own books and sell them online.  We made that idea come to fruition. Opal is now one of the premier leading book sites on the market.</p>
                            </div>
                            <div id="textbox2">
                            <p class="opaltext">Our friends at Opal wanted to create a book publishing site that allowed users to upload their own books and sell them online.  We made that idea come to fruition. Opal is now one of the premier leading book sites on the market.</p>
                            </div>
                         </div>      
                            	<div id="sharelink1">
                                <a href="http://www.nvisiondetail.com/images/sharedriveimage.html" id="shareshot" class="lightwindow" params="lightwindow_width=1200,lightwindow_height=1000,lightwindow_show_images=1" >View Sharedrive</a>
                                </div>
                                <div id="opalbutton1">
                               <a href="http://www.nvisiondetail.com/images/opalimage.html" id= "opalshot" class="lightwindow" params="lightwindow_width=1200,lightwindow_height=1000,lightwindow_show_images=2" >opal</a>
                                </div>
                    </div>
						<div id ="logobox3">
                        <a href="http://www.nvisiondetail.com/images/relaximage.html" id= "relaxislebutton" class="lightwindow" params="lightwindow_width=1200,lightwindow_height=1000,lightwindow_show_images=2" >relaxisle</a>
                   <h2 class="relaxfont">Relax Isle</h2>
               <p class="relaxtext">Tropical Resort and Hotel </p>
						</div>
                        	<div id ="logobox4">
                            <a href="http://www.jacquelinezinn.com" id= "jaxbutton" class="lightwindow" params="lightwindow_width=869,lightwindow_height=583,lightwindow_show_images=2" >Jacqueline Zinn</a>
                    <h2 class = "jzfont">Jacqueline Zinn</h2>
                 <p class="jztext">Interior Designer</p>
							</div> 
                            
                            	<div id ="logobox5">
                            <a href="http://www.nvisiondetail.com/images/zegnaimage.html" id= "zegnabutton" class="lightwindow" params="lightwindow_width=1200,lightwindow_height=1000,lightwindow_show_images=2" >Zegna & Crevere</a>
                    <h2 class = "zegnafont">Zegna & Crevere</h2>
                 <p class="zegnatext">Womens Accessory Store</p>
							</div> 
                            
                            <div id ="logobox6">
                            <a href="http://www.nvisiondetail.com/images/saviorimage.html" id= "saviorbutton" class="lightwindow" params="lightwindow_width=1200,lightwindow_height=1000,lightwindow_show_images=2" >Savior</a>
                    <h2 class = "saviorfont">Savior </h2>
                 <p class="saviortext">Community Church</p>
							</div> 
                            
                            <div id ="logobox7">
                            <a href="http://www.nvisiondetail.com/images/lgeimage.html" id= "lgebutton" class="lightwindow" params="lightwindow_width=1004,lightwindow_height=1347,lightwindow_show_images=2" >Los Angeles Garden Expo</a>
                    <h2 class = "lgefont">Los Angeles </h2>
                 <p class="lgetext">Garden Expo Show</p>
							</div> 
							
							<div id ="logobox8">
                            <a href="http://www.nvisiondetail.com/images/marketimage.html" id= "marketbutton" class="lightwindow" params="lightwindow_width=1004,lightwindow_height=800,lightwindow_show_images=2" >Los Angeles Garden Expo</a>
                    <h2 class = "marketfont">Market Growth </h2>
                 <p class="markettext">Online Marketing Database</p>
							</div> 
                            
                            <div id ="logobox9">
                            <a href="http://www.nvisiondetail.com/images/homeworkimage.html" id= "homeworkbutton" class="lightwindow" params="lightwindow_width=1004,lightwindow_height=800,lightwindow_show_images=2" >Do My Homework</a>
                    <h2 class = "homeworkfont">Do My Homework </h2>
                 <p class="homeworktext">Online Homework Assistance</p>
							</div> 
								
            </div>
           		    
 <div id ="footerborder">
               </div>
               	<div id ="footerright">
               
             	<a href="contactform.html" class="contact2" style="text-decoration:none">Contact</a>
                
                 
                </div>
               	
                 <div id = "footmiddle">
               
                <h3>Discover</h3><br />
                	
                    <div id = "listright">
                    <ul id="list2">
                    	<li> <a href="coming.html" class="footertright"  style="text-decoration:none">Our Sitemap</a> </li>
                     	<li>   <a href="contactform.html" class="footertright"  style="text-decoration:none">Contact Us</a></li>
                      	<li>  <a href="contactform.html" class="footertright"  style="text-decoration:none">Quote Form</a></li>
                        <li> <a href="testimonials.html" class="footertright"  style="text-decoration:none">Client Testimonials</a></li>
               		</ul>
            		</div>
                	
               </div>
               	
               <div id = "footerleft">
                <h3>What We Do</h3><br />
                 		<div id = "listleft2">
                		<ul id="list1">
                   			<li> <a href="webportfolio.html" class="footertext"  style="text-decoration:none">Web Portfolio</a> </li>
                			<li><a href="printportfolio.html" class="footertext"  style="text-decoration:none">Branding Portfolio</a> </li>
                			<li><a href="logoportfolio.html" class="footertext"  style="text-decoration:none">Logo Portfolio</a> </li>
                			<li><a href="coming.html" class="footertext"  style="text-decoration:none">Blog Portfolio</a> </li>
                   			<li> <a href="portfolio.html" class="footertext"  style="text-decoration:none">Valid xhtml</a> </li>
                   		</ul>
            			</div>
               
               </div>
               <div id"innerleft">
                <img src="images2/footlogo4.png"    id="footlogo" />
                <img src="images2/footline2.png"    id="footline" />
                    </div>
            
           		    
</div>    
</body>
</html>

Attached image(s)

  • Attached Image

This post has been edited by tscott: 07 April 2010 - 09:05 PM


Is This A Good Question/Topic? 0
  • +

Replies To: HTML / CSS Issue Can't get Image to display properly

#2 tscott  Icon User is offline

  • D.I.C Regular

Reputation: 2
  • View blog
  • Posts: 370
  • Joined: 30-January 09

Re: HTML / CSS Issue Can't get Image to display properly

Posted 07 April 2010 - 09:27 PM

feel free to contact me on msn to chat live timothy.scott@live.com
Was This Post Helpful? 0
  • +
  • -

#3 jrm402  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 51
  • View blog
  • Posts: 333
  • Joined: 18-March 10

Re: HTML / CSS Issue Can't get Image to display properly

Posted 08 April 2010 - 08:02 AM

Well the sizes are different and the overflow is hidden thats why the image isn't showing up - it's being hidden by the edges of the element. If you apply display: block; to the #shareshot element the text-indent begins working. Also you need a block level element to declare width and height and have it work correctly, that's why I added the display: block;.

I couldn't actually see your webpage to make sure this works so let me know how it goes. :rockon:

This post has been edited by jrm402: 08 April 2010 - 08:03 AM

Was This Post Helpful? 1
  • +
  • -

#4 tscott  Icon User is offline

  • D.I.C Regular

Reputation: 2
  • View blog
  • Posts: 370
  • Joined: 30-January 09

Re: HTML / CSS Issue Can't get Image to display properly

Posted 10 April 2010 - 11:47 AM

View Postjrm402, on 08 April 2010 - 07:02 AM, said:

Well the sizes are different and the overflow is hidden thats why the image isn't showing up - it's being hidden by the edges of the element. If you apply display: block; to the #shareshot element the text-indent begins working. Also you need a block level element to declare width and height and have it work correctly, that's why I added the display: block;.

I couldn't actually see your webpage to make sure this works so let me know how it goes. :rockon:



Wow you rock my man it worked!!! Thank you so much if you ever need any help with graphic design or anything give me a shout I owe u some free work.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1