: A weird issue on a page I'm designing I've designing a page for a site of mine, but I'm getting a strange issue with the following code. <section id="struttura" class="inner"> <div class="content">

@Murray976

Your'e CSS is not specific enough from the sound of things. You need to remove the spaces in the selectors.

section .inner { margin-top: 1.5em; }


All <section> tags followed by a class of inner. Add the margin to anything within a <section> which has the "inner" class.

div .inner { padding-top: 1.5em; }


All <div> tags followed by a class of inner. Add the padding to anything within a <div> which has the "inner" class.

So with that in mind... anything with an "inner" class inside both a <section> and <div> tag will have both the margin and padding applied to it.

Using your current CSS, you're basically writing....

<section class="inner">
<div></div>
</section>


which translates to....

<section style="margin-top: 1.5em;">
<div style="margin-top: 1.5em, padding-top:1.5em;"></div>
</section>


What I think you want is...

section.inner { margin-top: 1.5em; }


Only <section> with a class of inner.

and

div.inner { padding-top: 1.5em; }


Only <div> with a class of inner.

The spaces in the selectors are causing them to be far more global than it appears you want.

Vote Up Vote Down