26 replies [Last post]
Odyssey3d
Offline
Regular
Phoenix, AZ
Last seen: 2 years 44 weeks ago
Phoenix, AZ
Timezone: GMT-7
Joined: 2009-03-04
Posts: 35
Points: 17

I must have tried 100 different things but I can't get rid of the gaps between rows on this test site.

http://www.cleanpaw.net/csstest/test.htm

It works fine in IE, but I can't eliminate the gaps between the 2nd, 3rd and 4th rows in Firefox. I put all of the code into the HTML doc to make this easy to QC. R1 applies to Row 1, R2 applies to Row 2, etc. etc. I'm new to CSS so I'm trying to keep this very organized and straightforward. I'm sure the sollution is easy but I can't figure this out to save my life. Thanks A BILLION in advance for any help!!!

<!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=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
body {
	margin: 0px;
	padding: 0px;	
}
 
.clear-left {
  clear:left;  
  margin: 0px; 
  height: 0px;
  float: none;    
}
 
div#header-r1 {   
   background-color: #000000;
   margin: 0px;  
   height: 10px;    
   width: 100%;   
}
 
div#header-r2 {   
   background-color: #72a150;
   margin: 0px;  
   height: 72px;
   width: 100%;              
}
 
div#header-r3 {   
   background-color: #000000;
   margin: 0px;
   padding: 0px;  
   height: 34px;
   width: 100%;             
}
 
div#header-r4 {   
   background-image: url(images/hp-bg-r4.gif);
   margin: 0px;
   padding: 0px;  
   height: 24px;
   width: 100%;         
}
 
p#header-r1-left {
   background-color: #3C75AE;
   margin: 0px;
   float: left;
   height: 10px; 
   width: 50px;     
}
 
p#header-r2-left {   
   margin-left: 10px;
   margin-top: 19px;
   float: left;
   height: 72px; 
   width: 410px;        
}
 
p#header-r2-right {   
   margin-right: 0px;
   margin-top: 19px;
   float: right;
   height: 72px; 
   width: 480px;            
}
 
p#header-r3-left { 
   background-color: #3C75AE;
   margin: 0px;    
   float: left;
   height: 34px; 
   width: 50px;      
}
 
p#header-r3-center {
   font: 16px Arial, Helvetica, sans-serif;
   color: #FFFFFF;   
   margin-left: 10px;
   margin-top: 6px;
   float: left;
   height: 34px; 
   width: auto;         
}
 
p#header-r3-right {     
   margin: 0px;
   float: right;
   height: 34px; 
   width: 35px;       
}
 
p#header-r4-left {
   font: 13px Arial, Helvetica, sans-serif;
   color: #000000;   
   margin-left: 10px;
   margin-top: 4px;
   float: left;
   height: 24px; 
   width: auto;       
}
 
p#header-r4-right {     
   margin-right: 0px;
   margin-top: 0px;
   float: right;
   height: 24px; 
   width: 24px;       
}
</style> 
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
</head>
<body>
<div id="header-r1">
  <p id="header-r1-left"></p>
</div>
<div class="clear-left"></div>
<div id="header-r2">
  <p id="header-r2-left"><img src="images/test-graphic.gif" width="395" height="39" /></p>
  <p id="header-r2-right"><img src="images/test-graphic.gif" width="395" height="39" /></p>  
</div>
<div class="clear-left"></div>
<div id="header-r3">
  <p id="header-r3-left"></p>
  <p id="header-r3-center" nowrap>Here is some test text</p>
  <p id="header-r3-right"><img src="images/header-r3-tri.gif" /></p>
</div>
<div class="clear-left"></div>
<div id="header-r4">
  <p id="header-r4-left">Home</p>
  <p id="header-r4-right"><img src="images/hp-r4-tri.gif" /></p>  
</div>
<div class="clear-left"></div>
</body>
</html>

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 2 years 14 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

You need to eliminate the

You need to eliminate the padding on the paragraphs.

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

Odyssey3d
Offline
Regular
Phoenix, AZ
Last seen: 2 years 44 weeks ago
Phoenix, AZ
Timezone: GMT-7
Joined: 2009-03-04
Posts: 35
Points: 17

Still same result

:shrug: I don't have any padding on the paragraphs but I do on the Div headers so I eliminated that. Sadly I still got the same result in Firefox.

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 2 years 14 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

but there is a default

but there is a default padding you have not set to 0.

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

Odyssey3d
Offline
Regular
Phoenix, AZ
Last seen: 2 years 44 weeks ago
Phoenix, AZ
Timezone: GMT-7
Joined: 2009-03-04
Posts: 35
Points: 17

Which elements need that?

Awesome! Which elements need default padding set to 0? I just gave all of the paragraphs a padding of 0 and it's the same. I uploaded that fix version to my test site.

www.cleanpaw.net/csstest/test.htm

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 2 years 14 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

I went to the page and

I went to the page and didn't see where you set the paragraph padding to zero.
Also, why do you have the styles in your html and a link calling the styles? You only need one of the other. Preferably the latter.

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 2 years 14 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

set p { padding: 0; margin:

set
p { padding: 0; margin: 0; }
then go to
p#header-r2-left and p#header-r3-center and remove the margins you set.

all your gaps will be gone.

Then you can add padding from there to position your text how you want.

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 7 years 51 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Quote:Also, why do you have

Quote:

Also, why do you have the styles in your html and a link calling the styles? You only need one of the other. Preferably the latter.

OP said they were put in there for easier debugging for us.

I'm no expert, but I fake one on teh Internets

Odyssey3d
Offline
Regular
Phoenix, AZ
Last seen: 2 years 44 weeks ago
Phoenix, AZ
Timezone: GMT-7
Joined: 2009-03-04
Posts: 35
Points: 17

Fixed the gaps but...

Thanks Deuce! I was about to pull my hair out on that one.

It fixed the gap problem.
http://www.cleanpaw.net/csstest/test.htm

Unfortunately my triangle graphic on row 3 slid to the middle even though it has a float: right; What the heck? What do I do to fix that?

BTW, Stomme was right I just threw this htm together to make it easy for you guys to see. The css link was leftover.

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 2 years 14 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

Odyssey3d

Odyssey3d wrote:

Unfortunately my triangle graphic on row 3 slid to the middle even though it has a float: right; What the heck? What do I do to fix that?

remove the top margin from p#header-r2-right and it'll go back into place.

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

Odyssey3d
Offline
Regular
Phoenix, AZ
Last seen: 2 years 44 weeks ago
Phoenix, AZ
Timezone: GMT-7
Joined: 2009-03-04
Posts: 35
Points: 17

Yep!

Yep, I did what you said and it worked perfectly.

Alright, one last question. On row 3 I have text that needs to be centered top/bottom in it's row. Where do I set the padding to make it centered? In the Row 3 div container?

You spotted my errors immediately. Are there tutorials on this issue? Is there a name for the problem I'm having so I can look it up and read about it?

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 2 years 14 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

There are a few names for

There are a few names for the problem. n00b, newb, newbie, n3wb... and ever derivative there of.
It's okay, takes time to learn these things.
In p#header-r3-center set the padding to
padding: 8px 0 0;
this is short hand for
top left/right bottom

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

Odyssey3d
Offline
Regular
Phoenix, AZ
Last seen: 2 years 44 weeks ago
Phoenix, AZ
Timezone: GMT-7
Joined: 2009-03-04
Posts: 35
Points: 17

Doesn't work

Naw it didn't work, I got the same problem as before. It seems that whenever I put margins or padding into the paragraphs the gap comes back.

If I put padding into the container Div on row 3 wouldn't that hose out the right side?

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 2 years 14 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

Sorry, meant to mention -

Sorry, meant to mention - take off the set height of the paragraph as well.
You'll soon learn that setting the height of objects can lead you to trouble. Smile

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

Odyssey3d
Offline
Regular
Phoenix, AZ
Last seen: 2 years 44 weeks ago
Phoenix, AZ
Timezone: GMT-7
Joined: 2009-03-04
Posts: 35
Points: 17

You are my new God!

Yep, that fixed it. I'm building a site but I'm actually trying to learn CSS at the same time. Now that it works I'm going to test every variable and see what breaks my design to get the code as small as possible.

Thanks!!!

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 2 years 14 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

While you are looking to

While you are looking to write efficient code, take a read here - http://csscreator.com/node/4507

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

Odyssey3d
Offline
Regular
Phoenix, AZ
Last seen: 2 years 44 weeks ago
Phoenix, AZ
Timezone: GMT-7
Joined: 2009-03-04
Posts: 35
Points: 17

Right on!

Thanks, that link is gold to me!

Odyssey3d
Offline
Regular
Phoenix, AZ
Last seen: 2 years 44 weeks ago
Phoenix, AZ
Timezone: GMT-7
Joined: 2009-03-04
Posts: 35
Points: 17

Ah crap!

As near as I can tell I cleaned my code up to near perfection. I validated it and received 0 errors or warnings. And yet in Firefox the bottom right triangle in the 4th row still slides in. It floats perfect in IE. What the heck? :curse:

http://www.cleanpaw.net/csstest/test.htm

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
 
body {
	margin: 0px ;	
}
 
p {
  padding: 0px ;
  margin: 0px ;
}
 
div {
  padding: 0px ;
  margin: 0px ;
}
 
.clear-left {
  clear:left ;
}
 
div#header-r1 {    
   background-color: #000000 ;   
   height: 10px ;    
   width: 100% ;   
}
 
div#header-r2 {   
   background-color: #ffb411 ;         
   height: 72px ;
   width: 100% ;                 
}
 
div#header-r3 {     
   background-color: #000000 ;      
   height: 34px ;
   width: 100% ;             
}
 
div#header-r4 {   
   background-image: url(images/hp-bg-r4.gif) ;     
   height: 24px ;
   width: 100% ;         
}
 
p#header-r1-left {
   background-color: #3C75AE ;
   float: left ;
   height: 10px ;
   width: 50px ;     
}
 
p#header-r2-left {  
   float: left ;
   padding: 19px 0px 0px 6px ;     
   width: 410px ;        
}
 
p#header-r2-right {  
   float: right ; 
   padding: 6px 0px 0px 0px ; 
   width: 480px ;            
}
 
p#header-r3-left { 
   background-color: #3C75AE ;       
   float: left ;     
   width: 50px ; 
   height: 34px ;     
}
 
p#header-r3-center {
   font: 16px Arial, Helvetica, sans-serif ;
   color: #FFF ; 
   float: left ; 
   padding: 6px 0px 0px 6px ;            
}
 
p#header-r3-right {   
   float: right ;  
   width: 35px ;       
}
 
p#header-r4-left {
   font: 13px Arial, Helvetica, sans-serif ;
   color: #000 ;  
   float: left ; 
   padding: 4px 0px 0px 4px;    
   width: 50px ;       
}
 
p#header-r4-right {   
   float: right ;
   width: 24px ;       
}
 
</style> 
</head>
<body>
  <div id="header-r1">
    <p id="header-r1-left"></p>
  </div> 
  <div id="header-r2">
    <p id="header-r2-left"><img src="images/test-logo.gif" alt="" width="395" height="39"></p>
	<p id="header-r2-right"><img src="images/test-right.gif" alt="" width="468" height="60"></p>
  </div>
  <div id="header-r3">  
    <p id="header-r3-left"></p>
    <p id="header-r3-center">Test text goes here</p>
    <p id="header-r3-right"><img src="images/header-r3-tri.gif" alt="" width="35" height="34"></p>
  </div>    
  <div id="header-r4">
    <p id="header-r4-left">Home</p>
    <p id="header-r4-right"><img src="images/hp-r4-tri.gif" alt="" width="24" height="24"></p>  
  </div>
</body>
</html>

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 2 years 14 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

on p#header-r3-right set the

on p#header-r3-right set the height to 34px or the line-height to 0

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 day 3 hours ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9743
Points: 3822

Deuce wrote:but there is a

Deuce wrote:

but there is a default padding you have not set to 0.

To my knowledge, no browser has a default padding on

, and especially not Firefox. Here is Firefox's default stylesheet ruleset:

p, dl, multicol {
  display: block;
  margin: 1em 0;
}

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 day 3 hours ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9743
Points: 3822

The right float in row 3

The right float in row 3 extends below the row, blocking the row 4 right float from reaching the end. Make row 3 {overflow: hidden;}.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 2 years 14 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

gary.turner wrote:Deuce

gary.turner wrote:
Deuce wrote:

but there is a default padding you have not set to 0.

To my knowledge, no browser has a default padding on

, and especially not Firefox.

Ya, I got my Firebug colors confused when I made that statement... I was referring to the margin, and zeroing it out a couple replies later did some of the trick.

Thanks for setting the record straight though as I never revisited my mistake that the padding wasn't defaulted.

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 2 years 14 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

gary.turner wrote:The right

gary.turner wrote:

The right float in row 3 extends below the row, blocking the row 4 right float from reaching the end. Make row 3 {overflow: hidden;}.

Yup, that's a better idea that mine. Good catch! I should probably quit helping people until AFTER i catchup on sleep, eh? :bigoops:

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 day 3 hours ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9743
Points: 3822

Oh, I don't know. I seem to

Oh, I don't know. I seem to function best when sleep deprived. That said, I don't recall not being sleep deprived. Smile

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Odyssey3d
Offline
Regular
Phoenix, AZ
Last seen: 2 years 44 weeks ago
Phoenix, AZ
Timezone: GMT-7
Joined: 2009-03-04
Posts: 35
Points: 17

Yep, line-height worked

Thanks Gary and Deuce!

Odyssey3d
Offline
Regular
Phoenix, AZ
Last seen: 2 years 44 weeks ago
Phoenix, AZ
Timezone: GMT-7
Joined: 2009-03-04
Posts: 35
Points: 17

How would I know this?

Gary, how would I know that my float in row 3 was extending into row 4? Are there dead-giveaways that floats are messed up and blocking other items? Line-height fixed it and you mentioned overflow: hidden would fix it. Is there a tutorial that talks about this issue or a general type of problem to look for and a few easy things to do to fix this sort of problem?

THANK YOU! :thumbsup:

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 day 3 hours ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9743
Points: 3822

It's both very easy and very

It's both very easy and very hard to catch this one. There are tools that help; the web developer add-on, or Aardvark, for example, but it only takes a one pixel protrusion to cause the blockage. Very difficult to spot.

The easy is simple. There are a limited number of things that can cause the problem. Once you've eliminated invalid html and css (always the first step in debugging), and there are no margins or padding in the way, bumping into something is pretty much all that's left.

It doesn't hurt to have a bit of experience. Smile And, it especially doesn't hurt to have a very deep understanding of just how things work (make the specs your bedtime reading).

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.