Wed, 2009-03-04 23:50
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>
Thu, 2009-03-05 00:27
#1
You need to eliminate the
You need to eliminate the padding on the paragraphs.
Thu, 2009-03-05 02:04
#2
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.
Thu, 2009-03-05 03:36
#3
but there is a default
but there is a default padding you have not set to 0.
Thu, 2009-03-05 03:57
#4
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.
Thu, 2009-03-05 04:38
#5
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.
Thu, 2009-03-05 04:42
#6
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.
Thu, 2009-03-05 08:33
#7
Quote:Also, why do you have
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.
Thu, 2009-03-05 14:45
#8
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.
Thu, 2009-03-05 14:49
#9
Odyssey3d
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.
Thu, 2009-03-05 15:13
#10
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?
Thu, 2009-03-05 16:26
#11
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
Thu, 2009-03-05 19:05
#12
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?
Thu, 2009-03-05 20:09
#13
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. 
Thu, 2009-03-05 20:20
#14
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!!!
Thu, 2009-03-05 20:24
#15
While you are looking to
While you are looking to write efficient code, take a read here - http://csscreator.com/node/4507
Thu, 2009-03-05 20:45
#16
Right on!
Thanks, that link is gold to me!
Fri, 2009-03-06 04:24
#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>
Fri, 2009-03-06 05:18
#18
on p#header-r3-right set the
on p#header-r3-right set the height to 34px or the line-height to 0
Fri, 2009-03-06 05:26
#19
Deuce wrote:but there is a
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
Fri, 2009-03-06 05:38
#20
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
Fri, 2009-03-06 06:29
#21
gary.turner wrote:Deuce
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.
Fri, 2009-03-06 06:31
#22
gary.turner wrote:The right
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:
Fri, 2009-03-06 06:33
#23
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.
cheers,
gary
Fri, 2009-03-06 15:04
#24
Yep, line-height worked
Thanks Gary and Deuce!
Fri, 2009-03-06 15:10
#25
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:
Fri, 2009-03-06 16:27
#26
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. 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