[SOLVED] Magic padding o_O.

[FaT3oYCG]

Well that is the only way that I can think of to describe this problem.

 

same site: http://gaming-network.ath.cx/blue/

 

The navigation on the left has now decided to magically gain 10px of margin at the top.

 

Each item in the navigation is supposed to have 10px at the top, but the main container has none!

 

Putting a border arround the main container solves this issue but I do not want a border arround any of the content or any of the other items unless I have already put one there.

 

Has anyone experienced this problem before? does anyone know the cause?

 

Thanks for any help.

 

Craig.

[ngreenwood6]

the problem is with your menucontainer class. you have a margin-top:10px set on it. Which is separating your menu items but at the same time it is messing up the first one because you are moving it down 10px. An easy fix for this would be to create a new class for just the menucontainer's that arent the first and give it a margin-top:10px. So for example you would have this:

 

//no margin on first one
<div class="menucontainer">
</div>

//margin for all the rest
<div class="menucontainer menumargin">
</div>

[FaT3oYCG]

Yes I know that I could solve it this way but the fact I was stating is that if you put a 1px solid red border arround the main container or both of the left and right containers, the problem is fixed but has a border which is not what I want, hence "magic padding".

 

I have decided to go over all of the code and re do it to see if that makes a difference.

[FaT3oYCG]

OK after everything I just tried I have finally figuired out the solution, it is a bit hacky but it works.

 

On my main content div if i place a border on the top edge only 1px as the same colour as the background so it does not appear to be visible then it all works perfectly.

 

Thanks for the help anyway .

 

Craig.