CSS - Problem With Css And Toggle Causing Overlap

I am modifying an X-Cart implementation that the template originally put the product image in a seperate td. I have modified it to put the image in the same td as the description and used a float style on a div tag. The text is wrapping correctly. The problem is that I have a border-bottom style on the product name and it is ending up under the product image. The image is also covering the bullet on li tags.

An example is http://www.adaappliances.com/produc...48&cat=0&page=1.

Please do not attempt to order anything! This is not a live site yet.

This is a snippet of the code. I am using inline styles for testing.
Code:

<div style="float:left; padding:5px">
<IMG id="product_thumbnail" src="/image.php?productid=16148" width="168" height="230" alt="Eurotech EDW254E Dishwasher" border="0"></div>
<p style="border-bottom: 1px solid black"><font size="3"><strong>Eurotech EDW254E Dishwasher </strong></font></p>

I have not found a way to fix this. Any suggestions?

Hi,

Pop along to www.themapcentre.com , using Internet Explorer. You should see a site that's fairly tidily arranged. Now take a look at it in Opera or Firefox, and you'll see it all goes to heck in a handbasket. A classic case of IE-itis. I have basically used layers of containers for each part of the site. Can anyone suggest a fix that would make this look right in firefox etc as well as IE? The div CSS is posted below:

Code:

body {
	background-color:white;
	font-size:x-small;
	font:Verdana;
	vertical-align:middle;
	}

#container{
	margin-top:0%;
	margin-left:15%;
	width:700px;
	height:550px;
	background-color:#C7E8FD;
	z-index:1;
	position:absolute;
	}

#bottomdetailbar{
	width:610px;
	height:10px;
	z-index:2;
	margin-top:446px;
	padding:2px;
	margin-left:6%;
}

#topbar{
	width:700px;
	height:56px;
	background-color:#3300CC;
	z-index:2;
}

#midbar{
	width:700px;
	height:10px;
	background-color:#96D6FF;
	z-index:3;
}

#textbar{
	width:650px;
	height:20px;
	z-index:20;
	margin:5px;
	margin-left:25px;
}

#globe{
	width:auto;
	height:auto;
	margin-top:-51px;
	z-index:4;
}

#mapcentretitle{
	padding-top:41px;
	margin-left:70px;
	width:auto;
	height:auto;
	z-index:5;
}

#imagecontainer{
	margin:0px;
	margin-right:-50px;
	width:460px;
	height:400px;
	float:right;
	z-index:6;
	position:static;
	margin-top:30px;
	}
	
#imagebox{
	width:100px;
	height:100px;
	margin:3px;
	padding:0px;
	z-index:7;
	text-align:center;
	vertical-align:middle;
	float:left;
	position:relative;
	display:table-cell;
	}
	
#leftcontainer{
	width:280px;
	height:300px;
	margin:3px;
	margin-top:25px;
	z-index:8;
	}
	
#lefttop{
	width:260px;
	height:80px;
	margin:3px;
	padding-top:15px;
	padding-left:15px;
	z-index:9;
	float:right;
	background-image:url(images/leftopbg.gif);
	background-repeat:no-repeat;
}

#leftinfo
{
	width:260px;
	height:125px;
	margin:3px;
	z-index:21;
	background-image:url(images/information.gif)
}

#leftmiddle{
	width:260px;
	height:80px;
	margin:3px;
	z-index:30;
}

#descriptiontext{
	margin-top:-555px;
	margin-left:390px;
	width:300px;
	height:100px;
	z-index:10;
	}
	
#dropdown{
	width:260px;
	height:80px;
	margin:3px;
	z-index:12;
	background-image:url(images/dropdown.gif);
	background-repeat:no-repeat;
	margin-top:0px;
}

#menuwork{
	width:260px;
	height:80px;
	z-index:13;
	margin-left:-165px;
	margin-top:-410px;
}

Hi,

I am finishing up my site and I have decided to add to footer image to each page but when I attempt to add it on a page that has padding whether it be after the text with padding or not the image is detached by approx the padding size from the bottom.

I have been toying around for hours but with no success.
I have also been reading some of the tutorials given to me by the members here which have helped greatly but I am stumped.

The image in question is Code:

<img src="images/footer.jpg" alt="For more information, please visit the FAQs or the forum." name="footer" id="footer" />

If you need me to upload the pics I can do that (website down atm hence the code instead of a url)
(With how great you guys are, I can nearly guarantee that It will only require an extra line added to the css)

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" >  <head>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  <link rel="stylesheet" type="text/css" href="./index.css" media="all" />  <link rel="shortcut icon" href="http://torquesro.info/favicon.ico" />  <meta name="verify-v1" content="RhiSLQkMtmAKlbQN7TUe1DnWYD/Mxl0ROy7UiZlDGCU=" />  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />  <title>TorqueSRO - FAQ</title>  <meta name="description" content="We offer tools for Silkroad Online in order to provide advanced functions, automate game options and deliver new functionality."/>  <meta name="keywords" content="Silkroad, Silkroad Online, Torque, TorqueSRO, tClientless, silkroad clientless, silkroad walkthrough, silkroad tools, Mmorpg, silk, sr33, cheat, hack, sro"/>  <meta name="copyright" content="Copyright TorqueSRO - 2009"/>  <meta name="author" content="UrbanGrafix"/>  <meta name="Distribution" content="Global"/>  <meta name="Rating" content="General"/>  <!--[if IE]>  <style type="text/css" media="all">.borderitem {border-style:solid;}</style>  <![endif]-->  </head>  <body>  <div id="container">  <div id="main">  <a href="/index.html"><img src="images/HomeButton.jpg" id="HomeButton"  alt="TorqueSRO" /></a>  <a href="/tclientless.html"><img src="images/clientless.jpg" id="clientless"  alt="tClientless" /></a>  <a href="/faq.html"><img src="images/FaqButton.jpg" id="FaqButton"  alt="FAQs" /></a>  <a href="/videos.html"><img src="images/VideosButton.jpg" id="Links"  alt="Videos" /></a>  <a href="/forum"><img src="images/ForumButton.jpg" id="AboutButton"  alt="Forum" /></a>  </div>    <div id="ad">  </div>    <div id="main1">  <img src="images/mainlogo.jpg"  alt="TorqueSRO" name="Domi2" id="Domi2" /><img src="images/Main2ndBannerSRO.jpg"  alt="" name="Main2ndBanner" id="Main2ndBanner" /></div>      <div id="Content">  <div id="ContentMain">  <p style="text-align: left"><a href="#a">Q. I’m getting an error when  I run tClientless, it says the side-by-side configuration is incorrect.</a></p>  <p style="text-align: left"><a href="#b">Q. How do I login multiple  accounts?</a></p>  <p style="text-align: left"><a href="#c">Q. tClientless crashed! Why  did this happen?</a></p>  <p style="text-align: left"><a href="#d">Q. How can I make a  character a master for every character logged in through tClientless?</a></p>  <p style="text-align: left"><a href="#e">Q. I want to delete an  alias, how can I do that?</a></p>  <p style="text-align: left"><a href="#f">Q. tClientless says the  authentication failed and/or cannot connect to the server.</a></p>  <p style="text-align: left"><a href="#g">Q. I missed out on the BETA,  will I be able to use tClientless?</a></p>  <p style="text-align: left">&nbsp;</p>  <p style="text-align: left">&nbsp;</p>  <p style="text-align: left">&nbsp;</p>  <p style="text-align: left">&nbsp;</p>  <p style="text-align: left">&nbsp;</p>    <p style="text-align: left"><strong><a name="a" id="a"></a>Q. I’m getting an error when  I run tClientless, it says the side-by-side configuration is incorrect.</strong><br />    A.  Download and install this: <a href="http://www.microsoft.com/DOWNLOADS/details.aspx?FamilyID=9b2da534-3e03-4391-8a4d-074b9f2bc1bf&displaylang=en">http://www.microsoft.com/DOWNLOADS/details.aspx?FamilyID=9b2da534-3e03-4391-8a4d-074b9f2bc1bf&displaylang=en</a> </p>      <p style="text-align: left"><br />    <strong><a name="b" id="b"></a>Q. How do I login multiple  accounts?</strong><br />    A.  Simply type the account information and hit login again, tClientless will  handle everything.</p>      <p style="text-align: left"><br />    <strong><a name="c" id="c"></a>Q. tClientless crashed! Why  did this happen?</strong><br />    A.  Well, first you should note that tClientless is only in the BETA (development)  stages. The reason it crashed it likely due to incorrect parsing, send the  “lastpacket.txt” file to bot90210 so that I can fix this issue.</p>      <p style="text-align: left"><br />    <strong><a name="d" id="d"></a>Q. How can I make a  character a master for every character logged in through tClientless?</strong><br />    A.  Go to File->Master Manager and enter the character’s name. They will be  saved as a global master and will be able to use master commands for every  character.</p>      <p style="text-align: left"><br />    <strong><a name="e" id="e"></a>Q. I want to delete an  alias, how can I do that?</strong><br />    A.  Go to File->Alias Manager and delete the alias entry.</p>      <p style="text-align: left"><br />    <strong><a name="f" id="f"></a>Q. tClientless says the  authentication failed and/or cannot connect to the server.</strong><br />    A.  This could happen for various reasons, the most common are that our server is  experiencing issues or you are not registered with the BETA test.</p>      <p style="text-align: left"><br />    <strong><a name="g" id="g"></a>Q. I missed out on the BETA,  will I be able to use tClientless?</strong> <br />    A. Possibly.  We’ve limited the users that can join the BETA because we don’t want to  overload the server, if the server can handle 300 users comfortably then you  will increase the limit. We’ve made tClientless connect to our servers because  we’re sick of people posting it elsewhere.</p>  </div>  <img src="images/footer.jpg" alt="For more information, please visit the FAQs or the forum." name="footer" id="footer" />  </div>        <form action="http://www.google.com/cse" id="cse-search-box" target="_blank">  <div align="right">    <input type="hidden" name="cx" value="partner-pub-4151060843783741:adaty3-25z5" />    <input type="hidden" name="ie" value="ISO-8859-1" />    <input type="text" name="q" size="20" />    <input type="submit" name="sa" value="Search" />  </div></form><script type="text/javascript" src="http://www.google.com/cse/brand?form=cse-search-box&lang=en"></script>    <a href="http://validator.w3.org/check?uri=referer"><img          src="http://www.w3.org/Icons/valid-xhtml10-blue"          alt="Valid XHTML 1.0 Transitional" height="31" width="88" /></a>  <a href="http://jigsaw.w3.org/css-validator/check/referer">      <img style="border:0;width:88px;height:31px"          src="http://jigsaw.w3.org/css-validator/images/vcss-blue"          alt="Valid CSS!" /></a>      </div>  <script type="text/javascript">  var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");  document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));  </script>  <script type="text/javascript">  try {  var pageTracker = _gat._getTracker("UA-10605650-1");  pageTracker._trackPageview();  } catch(err) {}</script>  <!-- Piwik -->  <script type="text/javascript">  var pkBaseURL = (("https:" == document.location.protocol) ? "https://torquesro.info/piwik/" : "http://torquesro.info/piwik/");  document.write(unescape("%3Cscript src='" + pkBaseURL + "piwik.js' type='text/javascript'%3E%3C/script%3E"));  </script>  <script type="text/javascript">  try {  var piwikTracker = Piwik.getTracker(pkBaseURL + "piwik.php", 1);  piwikTracker.trackPageView();  piwikTracker.enableLinkTracking();  } catch( err ) {}  </script><noscript><p><img src="http://torquesro.info/piwik/piwik.php?idsite=1" style="border:0" alt=""/></p></noscript>  <!-- End Piwik Tag -->  </body>  </html>  

Code:

html, body {  	margin:0;  	padding:0;  }    body {  	background-image: url(images/bglong209.png) ;  	background-repeat: repeat-x;      text-align:center;  	padding:0px;  }  .p {  	margin:0px;  	padding:0px;  	font-size: inherit;  	font-family: inherit;  	font-weight: inherit;  	text-align: inherit;  	color: inherit;  	line-height: inherit;  	vertical-align: top;  }  #container {  	width:654px;  	margin:0px auto;  	top: 0;  }  #ad {  	  }  p {  	padding-top:0px;  	margin-top:0px;  	color: #000;  	background-color: #FFF;  }  img {  	border:0px;  }  .AbsWrap {  	position: relative;  	left: 0;  }  .rowWrap {  	width: 100%;  }  .clearfloat {  	clear:both;  	height:0px;  }  #main {  	width:654px;      margin:0px auto;  	border: 0px none #f0f0f0;  	top:0;  }  #main1 {  	width:654px;      border: 0px none #f0f0f0;  	margin:0px auto;  		  }  #main2 {  	width:654px;      border: 0px none #f0f0f0;  	margin:0px auto;  }  #Content {  	background:#fff;  	clear:both;  	width: 654px;  	font-family: Arial, Helvetica, sans-serif;  	font-size:10px;  }  #ContentMain {  	padding-left: 10px;  	padding-right: 10px;  	padding-top: 20px;  	margin:0px auto;  	border: 0px none #f0f0f0;  	}    #HomeButton {  	margin:0px auto;  	margin-top:0px;  	width:163px;  	height:47px;  	margin-bottom:0px;  	float:left;  	display:inline;    }  #clientless {  	margin-left:0px;  	margin-top:0px;  	width:164px;  	height:47px;  	margin-bottom:0px;  	float:left;  	display:inline;    }  #FaqButton {  	margin-left:0px;  	margin-top:0px;  	width:101px;  	height:47px;  	margin-bottom:0px;  	float:left;  	display:inline;    }  #Links {  	margin-left:0px;  	margin-top:0px;  	width:99px;  	height:47px;  	margin-bottom:0px;  	float:left;  	display:inline;    }  #AboutButton {  	margin-left:0px;  	margin-top:0px;  	width:127px;  	height:47px;  	margin-bottom:0px;  	float:left;  	display:inline;    }  #Domi {  	margin-left:0px;  	margin-top:59px;  	width:320px;  	height:272px;  	margin-bottom:0px;  	float:left;  	display:inline;  	font-size: 9px;  }  #Domi1 {  	margin-left:0px;  	margin-top:59px;  	width:334px;  	height:272px;  	margin-bottom:0px;  	float:left;  	display:inline;  	font-size: 9px;  }  #Domi2 {  	margin-left:0px;  	margin-top:59px;  	width:654px;  	height:271px;  	margin-bottom:0px;  	float:left;  	display:inline;  	font-size: 9px;  }  #tClientlessBanner {  	margin-left:0px;  	margin-top:59px;  	width:333px;  	height:192px;  	margin-bottom:0px;  	float:left;  	display:inline;    }  #MainBlueBanner1 {  	margin-left:0px;  	margin-top:0px;  	width:59px;  	height:83px;  	margin-bottom:0px;  	float:left;  	display:inline;    }  #colwrap3 {  	float:left;  	width:273px;  	margin-top:0px;  	margin-left:0px;  }  #DownloadButton {  	margin-left:0px;  	margin-top:0px;  	width:47px;  	height:48px;  	margin-bottom:0px;  	float:left;  	display:inline;    }  #colwrap5 {  	float:left;  	width:226px;  	margin-top:0px;  	margin-left:0px;  	border: 0px solid #f0f0f0;    }  #Downloadlatestversionbanner {  	margin-left:0px;  	margin-top:0px;  	width:226px;  	height:25px;  	margin-bottom:0px;  	float:left;  	display:inline;    }  #colwrap7 {  	float:left;  	width:89px;  	margin-top:0px;  	margin-left:0px;  	border: 0px solid #f0f0f0;    }  #BlueTinyBanner {  	margin-left:0px;  	margin-top:0px;  	width:7px;  	height:11px;  	margin-bottom:0px;  	float:left;  	display:inline;    }  #Bluelongbanner3 {  	margin-left:0px;  	margin-top:0px;  	width:89px;  	height:11px;  	margin-bottom:0px;  	float:left;  	display:inline;    }  #Bluelongbanner2 {  	margin-left:0px;  	margin-top:0px;  	width:137px;  	height:23px;  	margin-bottom:0px;  	float:left;  	display:inline;    }  #MainBlueBanner2Long {  	margin-left:0px;  	margin-top:0px;  	width:274px;  	height:35px;  	margin-bottom:0px;  	float:left;  	display:inline;    }  #Main2ndBanner {  	margin-left:0px;  	margin-top:0px;  	width:654px;  	height:87px;  	margin-bottom:0px;  	float:left;  	display:inline;  }  #interface {  	margin-left:0px;  	margin-top:0px;  	width:654px;  	height:615px;  	margin-bottom:0px;  	float:left;  	display:inline;  }  #footer {  	margin-left:0px;  	margin-top:0px;  	width:655px;  	height:93px;  	margin-bottom:0px;  	float:left;  	display:inline;  }  #Version {  	font-size:9px;  	color: #FFF;  	font-weight: bold;  	font-variant: small-caps;  	background-color: #416F7C;  	font-family: Verdana;  	text-align: left;  }  #container #Content #ContentMain p a font {  	color: #0000FF;  }  

So i just wrapped up some initial styling for a personal website i'm working on, http://www.sociospatial.com/

Looks fine in firefox. Has some minor issues in chrome/webkit, which I'll iron out later. Haven't dared to load it up in IE yet. In Opera, though, I'm having a problem that I don't know where to start.

So without having to paste alot of code, I have a wrapper div and a footer div, just so that I can have the footer hug either the bottom of the viewport or the bottom of the page, whichever is lower. I also wanted some background elements to the page, but I wanted them to hug the bottom as well (load up the page in firefox and resize to viewport to see), so I ended up with something like this:

Code:

<div id="footer">
  <span id="left-bg"></span>
  <span id="right-bg"></span>
</div>

and the styling for these is something like (I can post the actual/more if need be)
Code:

div#footer {
  position: relative;
  height: 25px;
  width: 100%;
}

span#left-bg {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 400px;
  height: 600px;
  background: transparent url(some-url.png) no-repeat 0 0;
  z-index: -1;
}

span#left-bg {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 400px;
  height: 600px;
  background: transparent url(some-url.png) no-repeat -400px 0;
  z-index: -1;
}

in firefox/webkit at least, these function as i want, so I have 2 spans that spill up through the top of the containing footer div, but still hides behind normal content. If my wrapper content is minimal, it appropriately hugs the bottom of the viewport and i don't have any vertical scrollbar. If I have a lot of content in the wrapper, I have a vertical scrollbar, but the footer and the spillout background elements are all waiting for me at the bottom of the page.

in opera (9), the two spans hug the bottom of the (initial) viewport as I would hope, but I *do* have a vertical scrollbar (even when the content in the wrapper does not necessitate it), and scrolling down reveals that I have a *huge* amount of space that's just empty body background below the footer. This empty space seems vaguely correlated with the "height" values of the spans (the lower the height value, the smaller the empty black background space under the footer), and the vertical scrollbar goes away completely under one of these conditions:
a) i add "overflow:hidden" to the div#footer styling (but of course this stops the span elements from spilling through the top)
b) using the W3-dev opera tools, if I disable both spans
c) after I disable both spans, I enable only one or the other (if I just disable one after both have been enabled, the vertical scrollbar stays, so I have to disable both first).

i'm not quite sure what exactly is going on here, nor really what issue I'm trying to track down (I don't know what to enter for a google search, for example) - I'm kind of new at this. Anyone have any clues to contribute? I'll add more information if needed.

I'm *very* new to CSS and to these forums, I'm glad I found them. I'm hoping someone can help me with this problem I'm having. I added a table to this page and there are gaps under each word in each cell of the table. I added the same table to it's own page and the table shows up the way I want it but it won't on the page where CSS is used. It seems as if something in the CSS code is causing the gap under the words. Would anyone know why this is happening and how to fix it?

I'm using IE 6 and haven't used any other browser yet to view the pages. Here is my css file http://debsdesignandhosting.com/layout.css in case it's needed. Thanks for any help

I thought I should also say, it's not my intention to spam the forum with the info seen in the table. This is a new site not even live yet. This gap problem has me stumped

Deb