CSS Forum

**pealo86** · 03-09-2008, 11:50 AM

For some reason this won't display properly in Firefox! Ive turned borders on to help me to solve the problem.

Basically, the background just appears as a really thin line right at the top of the div, rather than take up all of it!

CSS:

Code:

.threadHead {
background:url(../image/tableHead.jpg) repeat-x;
padding:5px 5px 5px 5px;
color:#FFF;
font-weight:bold;
border:#000 solid 1px;}

HTML:

Code:

<div class="threadHead">thread name<br class="clear" />
    </div>

**LadynRed** · 03-09-2008, 12:00 PM

What's floated ?
Move the clearing element to just after the </div>.

**joder** · 03-09-2008, 12:53 PM

It would be easier to see a link. If there is no text or images inserted into the div, it will just be one line.

**Gilligan** · 03-09-2008, 02:20 PM

why not specify the height of the div, this way the background won't just appear at the top.

And i believe the border element is wrong

it should be

Code:

border: 'width' 'type' 'colour';

without '

**pealo86** · 03-09-2008, 05:43 PM

Thanks for the replies. I can't see any floated elements that could conflict with it? Here is the HTML for a page containing the div Im trying to use

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"><!-- InstanceBegin template="/Templates/default.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>Untitled Document</title>
<!-- InstanceEndEditable -->
<!-- InstanceBeginEditable name="head" --><!-- InstanceEndEditable -->
<link href="css/styleDef.css" rel="stylesheet" type="text/css" />
<link href="css/styleDivId.css" rel="stylesheet" type="text/css" />
<link href="css/styleUl.css" rel="stylesheet" type="text/css" />
<link href="css/styleDivClass.css" rel="stylesheet" type="text/css" />
<link href="css/styleForm.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="container">
  <div id="banner"></div>
  <ul id="nav">
    <li><a href="index.htm">home</a></li>
    <li><a href="member/">members</a></li>
    <li><a href="review/">reviews</a></li>
    <li><a href="forum/">forum</a></li>
  </ul>
  <div id="textLeft"><!-- InstanceBeginEditable name="content" -->
    <div class="threadHead">content asdf asdfasd  f</div>
  <!-- InstanceEndEditable --></div>
  <div id="footer">
    <ul id="navBottom">
      <li><a href="#">about</a></li>
      <li><a href="#">affiliates</a></li>
      <li><a href="#">become a moderator</a></li>
      <li><a href="#">cdontact</a> </li>
    </ul>
  <br class="clear" />
  </div>
</div>
</body>
<!-- InstanceEnd --></html>

Here is the whole CSS [thanks to anyone who can be bothered sifting through it all!]
/* CSS Document */

Code:

body {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#1DA7C5;
text-align:center;
margin:0;
padding:0;
background-color:#F5F5F5;}

table {
width:100%;
border-collapse:collapse;
border:none;}

img {
border:none;}

th {
background:url(../image/tableHead.jpg) repeat-x 0 0;
height:20px;
padding:5px 5px 5px 5px;
font-size:150%;
color:#FFF;
font-weight:bold;
width:auto;
text-align:left;}

td {
padding:5px;
vertical-align:bottom;
width:auto;
border:#169CCE dotted 1px;
border-width:0 1px 1px 1px;}

.forumSelect {
width:300px;}

.threadSelect {
width:500px;}

.sticky {
background-color:#EFF8FA;}

h1 {
font-size:200%;
color:#006699;
font-weight:bold;
margin:0 0 5px 0;}

h2 {
font-size:160%;
color:#006699;
margin:12px 0 3px 0;}

h3 {
font-size:120%;
color:#0C98B6;}

p {
padding:0;
margin:5px 0;}

a {
color:#006699;}

a:hover {
color:#20A6F7;}

.intro {
background:url(../image/bgIntro.jpg) no-repeat 100% 0;
padding-right:190px;}

.clear {
clear:both;}

.highlight, .highlightBig {
font-weight:bold;
color:#006699;}

.highlightBig {
font-size:115%;}

.highlightLight, .highlightLightBig {
font-weight:bold;
color:#51B5DA;}

.highlightLightBig {
font-size:115%;}

.note {
font-style:italic;
color:#999;}

.note a {
color:#666;}

.imgRegister {
margin-left:10em;}

/* CSS Document */

.news {
background-color:#006699;
background:#000 url(../image/newsBgMid.jpg) repeat-y 0 0;
color:#FFF;}

.newsMsg {
border-bottom:#FFF dotted 1px;
padding:0 .5em;}

.newsTop {
background:url(../image/newsBgTop.jpg) no-repeat 0 0;
height:20px;
padding:0 .5em;}

.newsBtm {
background:url(../image/newsBgBtm.jpg) no-repeat 0 100%;
height:20px;
padding:0 .5em;}

.news a {
color:#FFF;}

.news h1 {
color:#FFF;}


/*infoBoxWide contains the same attributes but is a wider float version of infoBox that uses alternate imagery*/

.infoBox {
background:url(../image/infoBoxBtm.jpg) no-repeat 0 100%;
padding-bottom:5px;}

.infoBox h2 {
background:url(../image/infoBoxTop.jpg) no-repeat 0 0;
padding:12px 0 8px 2px;
margin-bottom:0;
color:#FFF;
font-weight:normal;}

.infoBox p {
background:url(../image/infoBoxMid.jpg) repeat-y 0 0;
padding:2px;
margin:0;}

.infoBoxFloatLeft, .infoBoxFloatRight {
float:left;
width:160px;}

.infoBoxFloatLeft {
margin-right:10px;}

.infoBoxFloatRight {
margin-left:10px;}

.infoBoxFloatWide {
float:left;
width:180px;
margin-right:10px;}

.infoBoxFloatWide .infoBox {
background:url(../image/infoBoxBtmWide.jpg) no-repeat 0 100%;}

.infoBoxFloatWide .infoBox h2 {
background:url(../image/infoBoxTopWide.jpg) no-repeat 0 0;}

.infoBoxFloatWide .infoBox p {
background:url(../image/infoBoxMidWide.jpg) repeat-y 0 0;}

.section {
border-bottom:#0066CC dotted 1px;
padding:0;
height:1%;}

.sixHun {
float:left;
width:600px;}

.reviewPic {
width:180px;
margin:60px 0 0 5px;
float:left;
text-align:right;}

.comment {
margin-bottom:10px;
border-bottom:#169CCE dotted 1px;}

.threadHead {
background:url(../image/tableHead.jpg) repeat-x;
padding:5px 5px 5px 5px;
color:#FFF;
font-weight:bold;
border:#000 solid 1px;}

.threadContainer {
border-bottom:#169CCE solid 10px;
border-left:#1DA7C5 dotted 1px;
border-top:#1DA7C5 dotted 1px;
border-right:#1DA7C5 dotted 1px;
padding:10px 0;}

.threadAvatar {
width:200px;
float:left;
border-right:#1DA7C5 dotted 1px;
text-align:center;}

.threadMessage {
float:left;
width:600px;
margin-left:5px;
padding-bottom:20px;}

.threadPost {
float:right;
font-size:130%;}

.threadContact {
text-align:right;
position:relative;
bottom:20px;}

.threadContact img {
margin-right:3px;}

/* CSS Document */

#container {
width:830px;
margin:auto;
background-color:#FFF;}

#textLeft {
text-align:left;
padding:0 5px;}

#banner {
width:100%;
height:70px;
background:url(../image/logo.jpg) no-repeat 0 0;
text-align:left;}

#colLeft, #colMain, #colRight {
text-align:left;
padding:2px;}

#colLeft {
width:140px;
float:left;}

#colLeftBig {
width:160px;
float:left;}

#colRight {
width:160px;
float:left;}

#colMain {
width:495px;
float:left;}

#colMainBig {
width:640px;
margin-left:10px;
float:left;}

#footer {
clear:both;
background:url(../image/footerHead.jpg) repeat-x 0 0;
text-align:right;
margin-top:10px;
margin-bottom:15px;}

/* CSS Document */

input {
background-color:#FFF;
border:#B5EEF2 solid 1px;
color:#0B6595;
padding:2px;}

.button {
font-weight:bold;
padding:1px;}

.searchWide {
width:720px;
height:75px;
background:url(../image/formWideBg.jpg) no-repeat 0 0;
margin:10px 0 0 15px;
padding:10px 0 0 5px;
color:#FFF;}

.searchWide h2 {
color:#FFF;
margin-top:0;}

.searchWide p {
display:inline;
margin-right:10px;}

.searchWide label {
font-size:130%;
font-weight:bold;}

.login {
margin:0;}

.login label {
display:block;
float:left;
margin-top:5px;
width:60px;}

/* CSS Document */

#nav {
background:#000 url(../image/bgNav.jpg) repeat-x;
float:left;
margin:0;
padding:0;
list-style-type:none;
width:100%;}

#nav li {
display:inline;}

#nav a {
float:left;
width:80px;
padding:5px 2px 10px 0;
border-right:#FFF solid 1px;
font-weight:bold;
text-decoration:none;}

**pealo86** · 05:52 PM

Quote:

Originally Posted by Gilligan

why not specify the height of the div

I did try that originally but I didn't seem to solve the problem, thanks anyway!

Ive just realised that if I remove the 'repeat-x' from the CSS, the background image appears!

I dont understand that though??

Anyway, here are a couple of images to show how it should and shouldnt look. The only difference is whether or not the 'repeat-x' is there or not.

Right:
http://69.16.196.116/~inspin/files/right.jpg

Wrong:
http://69.16.196.116/~inspin/files/wrong.jpg

**LadynRed** · 03-10-2008, 10:30 AM

You need to add a clearing break right after your top nav area and move the other clearing break to AFTER the closing </div> tag of the footer. I tested it WITH the repeat-x in there and it worked.

**pealo86** · 03-15-2008, 11:45 AM

Thanks for the advice. Ive only just got round to trying it out now, but it appears to be working fine; even though I havent even changed anything??

It appears correct in both IE and Firefox, Ive even been able to remove the <br /> tag I had in there and it still works.

I dont know why though?? Maybe FF just wasnt refreshing properly or something?

I did think it seemed like a strange problem, considering it was just a div element that had its size and background attributes set!