Forum Moderators: not2easy
This is my first post here. I am having some trouble with a site that I am building. I am having issues with a background image in a div tag. I have three div tags, one above the other which for a news box on right side of browser. The image is broken into three parts(top, content, bottom). It loads fine in ie and opera, but in firefox the is space between the middle part of the image and the top and bottom parts. It only happens when there is enough text to make the middle image repeat. Here is the relevant code. I hope I explained it well enough.
CSS
/*TABLE*/
.table_top{
width: 204px;
height: 27px;
background-image:url(table_top%20copy.jpg);
background-repeat:no-repeat;
}
.table_bottom{
width: 204px; height: 25px;
}
.table_content{
width: 204px;
height:100%;
background-image:url(table_content.jpg);
background-repeat:repeat-y;
text-align: left;
text-indent: -12px;
}
.table_text{
margin-left:25px;
margin-right:0px;
text-align:left;
list-style-position: outside;
list-style-image: url(image.jpg);
}
.table_list {
list-style-position: outside;
list-style-image: none;
list-style-type: disc;
text-align: left;
}
HTML
<!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" xml:lang="en" lang="en">
<div class="table_list">
<ul>
<li><span class="news_text">Two-way, always on Internet connection</span><br /></li>
<li><span class="news_text">Surf and open web pages instantly</span><br /></li>
<li><span class="news_text">Download large files in minutes, not hours</span><br /></li>
<li><span class="news_text">Enjoy Internet music and video</span><br /></li>
<li><span class="news_text">Network to multiple computers</span><br /></li>
<li><span class="news_text">Plans for Home or Business use from $59.99/mo</span><br /></li>
<li><span class="news_text">Get started today for as little as $0 Upfront</span><br /></li>
</ul>
</div>
Thanks for any advice.
Matt
Also the in the <ul> isn't valid html AFAIK.
<div id="leftpanel">
<div class="table_top">
<div align="center"><span class="title_panel style3"><strong>Why HughnesNet</strong></span> </div>
</div>
<div class="table_content">
<div class="table_list">
<ul>
<li><span class="news_text"><span class="news_more">Two-way</span>, always on Internet connection</span><br />
</li>
<li><span class="news_text"><span class="news_more">Surf and open</span> web pages instantly</span><br />
</li>
<li><span class="news_text"><span class="news_more">Download large</span> files in minutes, not hours</span><br />
</li>
<li><span class="news_text"><span class="news_more">Enjoy streaming</span> music and video</span><br />
</li>
<li><span class="news_more">Network</span><span class="news_text"> to multiple computers</span><br />
</li>
<li><span class="news_more">Plans for Home or Business</span><span class="news_text"> use from $59.99/mo</span><br />
</li>
<li><span class="news_more">Get started today</span><span class="news_text"> for as little as $0 Upfront</span><br />
</li>
</ul>
</div>
</div>
<div class="table_bottom">
<img src="images/table_bottom.jpg" width="207" height="23" border="0" alt="" />
</div>
<br />
<div class="table_top">
<span class="title_panel style3">How to Get Started</span></div>
<div class="table_content">
<div class="table_text">
<p></p>
<p><span class="news_more">Order Now</span><span class="news_text">-Talk to a sales rep</span></p>
<p><span class="news_more">Install</span><span class="news_text">-In your home in no time</span></p>
<p><span class="news_more">Surf</span><span class="news_text">-Blaze with high-speed</span><br />
</p>
</div>
</div>
<div class="table_bottom">
<img src="images/table_bottom.jpg" width="207" height="23" border="0" alt="" />
</div>
