CSS Headscratcher

Resolved cspalmisano
(@cspalmisano)

17 years, 2 months ago

Let me start by saying, I would consider myself an expert when it comes to CSS. But every now and again, we all run into a formatting issue we just can’t seem to crack. This is one such issue.

For whatever reason, I cannot seem to get rid of the 15-20px padding at the top of all my home page: http://dev.offpeaktraining.com/

There’s no margin or padding on the body, #container or #content.

I don’t get it.

Viewing 9 replies - 1 through 9 (of 9 total)

Saurus
(@saurus)

17 years, 2 months ago

You might want to better explain what area you’re talking about – I see no problems with your page in FF2.
figaro
(@figaro)

17 years, 2 months ago
Your layout seems to be pretty messed up in IE, but in FF if you look at your reset.css you will see the following:
```
body {
background:white none repeat scroll 0 0;
color:black;
line-height:1;
}
```
If you change the line-height value to 0 then that removes most of it.
Thread Starter cspalmisano
(@cspalmisano)

17 years, 2 months ago

Yes, I realize that the line-height removes most of the margin. But that’s not the root cause.

There’s something else that’s causing the padding.

iridiax
(@iridiax)

17 years, 2 months ago

What happens if you adjust the height of #header?

Thread Starter cspalmisano
(@cspalmisano)

17 years, 2 months ago

Adjusting the height of #header up and down moves the content beneath it up and down. But has no affect on the margin/padding above I’m trying to get rid of.

OthelloBloke
(@othellobloke)

17 years, 2 months ago

Firstly…

The layout isn’t working properly in IE in case you didn’t know.

Try this:

p#logo { margin-top:0px; }
form#searchform { margin-top:0px; }

Thread Starter cspalmisano
(@cspalmisano)

17 years, 1 month ago

Yes, I realize that. Just working on FF for now.

Your CSS suggestion had no effect.
buddha-trance
(@buddha-trance)

17 years, 1 month ago
For some reason, at least in FF, it’s lined up when you set a negative margin
```
p#logo{
	margin:-16px;
	padding:0;
}
```
Thread Starter cspalmisano
(@cspalmisano)

17 years, 1 month ago

Issue resolved. It was a Byte Order Mark issue.