Tycoon Talk
Become a Big fish!
The number 1 forum for online business!
Post topics, ask questions, share your knowledge.
Tycoon Talk is part of Freelancer.com - find skilled workers online at a fraction of the cost.

CSS Forum


You are currently viewing our CSS Forum as a guest. Please register to participate.
Login



Reply
Problem with really simple div code
Old 03-09-2008, 11:50 AM Problem with really simple div code
pealo86's Avatar
Super Spam Talker

Posts: 850
Name: Matt Pealing
Location: England, north west
Trades: 0
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>
__________________

Please login or register to view this content. Registration is FREE


Please login or register to view this content. Registration is FREE


Please login or register to view this content. Registration is FREE

Please login or register to view this content. Registration is FREE
pealo86 is offline
Reply With Quote
View Public Profile Visit pealo86's homepage!
 
 
Register now for full access!
Old 03-09-2008, 12:00 PM Re: Problem with really simple div code
LadynRed's Avatar
Defies a Status

Posts: 10,016
Location: Tennessee
Trades: 0
What's floated ?
Move the clearing element to just after the </div>.
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!

Please login or register to view this content. Registration is FREE


Please login or register to view this content. Registration is FREE

LadynRed is offline
Reply With Quote
View Public Profile
 
Old 03-09-2008, 12:53 PM Re: Problem with really simple div code
joder's Avatar
Flipotron

Posts: 6,442
Name: James
Location: In the ocean.
Trades: 0
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.
joder is offline
Reply With Quote
View Public Profile
 
Old 03-09-2008, 02:20 PM Re: Problem with really simple div code
Gilligan's Avatar
Website Designer

Posts: 1,670
Name: Stefan
Location: London, UK
Trades: 0
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 '
Gilligan is offline
Reply With Quote
View Public Profile
 
Old 03-09-2008, 05:43 PM Re: Problem with really simple div code
pealo86's Avatar
Super Spam Talker

Posts: 850
Name: Matt Pealing
Location: England, north west
Trades: 0
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;}
__________________

Please login or register to view this content. Registration is FREE


Please login or register to view this content. Registration is FREE


Please login or register to view this content. Registration is FREE

Please login or register to view this content. Registration is FREE
pealo86 is offline
Reply With Quote
View Public Profile Visit pealo86's homepage!
 
Old 03-09-2008, 05:45 PM Re: Problem with really simple div code
pealo86's Avatar
Super Spam Talker

Posts: 850
Name: Matt Pealing
Location: England, north west
Trades: 0
Quote:
Originally Posted by Gilligan View Post
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
__________________

Please login or register to view this content. Registration is FREE


Please login or register to view this content. Registration is FREE


Please login or register to view this content. Registration is FREE

Please login or register to view this content. Registration is FREE

Last edited by pealo86; 03-09-2008 at 05:52 PM.. Reason: added screenshots to show problem
pealo86 is offline
Reply With Quote
View Public Profile Visit pealo86's homepage!
 
Old 03-10-2008, 10:30 AM Re: Problem with really simple div code
LadynRed's Avatar
Defies a Status

Posts: 10,016
Location: Tennessee
Trades: 0
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.
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!

Please login or register to view this content. Registration is FREE


Please login or register to view this content. Registration is FREE

LadynRed is offline
Reply With Quote
View Public Profile
 
Old 03-15-2008, 11:45 AM Re: Problem with really simple div code
pealo86's Avatar
Super Spam Talker

Posts: 850
Name: Matt Pealing
Location: England, north west
Trades: 0
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!
__________________

Please login or register to view this content. Registration is FREE


Please login or register to view this content. Registration is FREE


Please login or register to view this content. Registration is FREE

Please login or register to view this content. Registration is FREE
pealo86 is offline
Reply With Quote
View Public Profile Visit pealo86's homepage!
 
Reply     « Reply to Problem with really simple div code
 

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are Off





   
RSS Feed  Feeds: RSS   JS   XML
RSS Feed  Feeds for this forum: RSS   JS   XML



Page generated in 0.52467 seconds with 12 queries