CSS outside of '+layout.svelte' applies to its components

February 16, 2023

Currently working on my first SvelteKit project.
I have created a "+layout.svelte" file which uses a navbar and footer component from my lib folder.
When I add content to a page, it’s currently overlapping the navbar.

+layout.svelte

<script>
    import Nav from "$lib/nav.svelte";
    import Footer from "$lib/footer.svelte"
</script>

<body>
    <Nav />
    <Footer />
</body>

<slot></slot>

<style>
    body {
        margin: 0;
    }
</style>

nav.svelte

<script>
    const nav = [
        { title: "Home", path: "/" },
        { title: "Products", path: "/products"},
        { title: "News", path: "/news"},
    ]
</script>

<nav>
    <ul>
        {#each nav as item}
            <li><a href={item.path}>{item.title}</a></li>
        {/each}
    </ul>
</nav>

<style>
    nav {
        position: fixed;
        width: 100%;
        padding-bottom: 0.01%;
        box-shadow: 0 1px 1px -1px black;
    }

    ul {
        list-style: none;
        text-align: center;
        padding-left: 0;
    }

    li {
        display: inline-block;
        margin-right: 2em;
        font-weight: bold;
    }
</style>

"+page.svelte" that affects +layout.svelte

<script>
    import products from "..\\products.json";
</script>

<table id="productSearchResult">
    <thead>
        <tr>
            <th></th>
            <th>Product ID</th>
            <th>Supplier ID</th>
            <th>Status</th>
        </tr>
    </thead>
    <tbody>
        {#each products as product}
            <tr>
                <td><img src="product.jpg" alt="product"></td>
                <td>{product.productId}</td>
                <td>{product.supplierId}</td>
                <td>{product.statusId}</td>
            </tr>
        {/each}
    </tbody>
</table>

<style>
    #productSearchResult {
        text-align: center;

        /* This also affects the navbar */
        margin-top: 5%;

        padding: 10px;
        border: 1px solid #bebebe;
        box-shadow: 
            15px 15px 30px #bebebe,
            -15px -15px 30px #ffffff;
    }

    #productSearchResult img {
        width: 50px;
    }

</style>

When I tried to add margin-top to the html table for it to be displayed below the navbar, the navbar is affected aswell. The table is inside a "+page.svelte" from another route.
As far as I understand, css inside a "+page.svelte" should only apply to the current file.
What am I doing wrong?

>Solution :

That is not CSS affecting other elements, you have the nav element set to position: fixed, so it will stay in that place of the viewport regardless of everything else. Use a different placement mechanism if that is not intended.

(Also, don’t add body elements, there should only be one and that should be in the app.html file. Hierarchically the page <slot/> should appear between header and footer, otherwise tab navigation and screen reader order will make no sense.)