[SOLVED] Dealing with FF padding

[LearningCoder]

Hello, I have noticed in FF that when you have a div and you put say text inside, there seems to be a 10/15 pixel gap between the text and the top(border) of the div.

What is the way to get around this so that it displays like, say, IE 7 (where the text is right underneath the div's top border).

I've tried setting the padding-top attribute to 0%, but nothing changes.

Has anyone ever come across this and got around it?

Thanks for any feedback,

Regards,

LC.

[chrishirst]

Study this. Learn it, understand it, have it in your head so you can pick up a pen or pencil and be able to draw and annotate it with any prompting, it will be your friend for evermore.

On the outside edges of the border is the margin.
Padding is on the outside edge of the content and the inside edges of the border.

[LearningCoder]

Ah yes I understand the model when dealing with div's but my problem here was I was setting the padding of the child element to 0% rather than setting it's margin to that value.

Regards,

LC

[LearningCoder]

How about when dealing with an image and a div?

I have a very basic site starting. I have an image as the logo and a menu inside a div underneath the logo. I have tried setting the bottom margin of the image and the top margin of the div both to a value of 0% but there is a slight gap still between the bottom of the image and the top of the div.

Any suggestions for this?? Happens in both IE 7 and FF.

I could post code but it's pretty self-explanatory. If you want me to though, I can.

Regards,

LC.

[chrishirst]

When dealing with images a url is best because re-creating the problem is impossible. Also it is always your code/document we need to see not something that we create

[LearningCoder]

I don't want you to create me anything I just wanted an explanation into how to achieve the above task. I should have just posted my code, my bad.

Here is my site uploaded: http://abjava.host22.com/Construction/index.htm

I'm not sure if it my computer, but I have added the 1 pixel border. When I check this on my local computer, it displays. Once uploaded to this site, it doesn't display the border for me around the div. So just in-case you are wondering where the border is, it should be there. (It's in the source code if you wanna look). Strange one

If you can see the border of the div, please note that the list items are not aligned correctly yet.

Regards,

LC.

[chrishirst]

Well I've tried FF6, IE9, Chrome, Opera, Safari & SeaMonkey and I don't see a 10-15 pixel gap anywhere.

As you can see
Only the gap between the borders of the image and the menu vary by a pixel or two.

IETester with IE7 & IE8 shows no significant differences either.

Maybe try a hard refresh (Ctrl*F5) Windows (Command+F5) Mac.

[LearningCoder]

That's great, thanks for your time and feedback. The 10-15 pixel gap was between the inside edge of the top border of the div and my heading element. I think in my post above, or the one above that, I said there was just a slight gap between two divs (as you can see). I did manage to sort this problem and I floated the image and div to the left and they now appear underneath but with no gap.

I wanted to know whether or not this can be achieved without float. I do use float a lot so i'll probably stick with this method now but just for future reference really because it was the second time i've come across the issue.

Kind Regards,

LC.

[Phreaddee]

floating is a perfectly sound way of doing a layout, and as long as you've got your math correct you can make some pretty interesting layouts very quickly that are extremely flexible. just remember to clear them when needed.

[LearningCoder]

Thanks all for the help and advice.

Regards,

LC