Display:table and border-collapse issue

[mikey_w]

I’m never going to get done…

For the masthead of my website, I made it display:table. When the screen gets to 700px, I switch from a standard horizontal menu to a button that serves as a drop-down menu. To fill in the gap of the replaced horizontal menu, I added a 2px black line. And in order to get a display:table to allow that, I needed to add…

    border-collapse: collapse;                    /* Allows border. (Collapses margins/padding.) */

As you can see from my note, the downside is you lose the ability to use margins and padding.

So now I am rewriting my home page to use @SamA74 suggestion of losing my extra media query and just using…

    max-width: 1280px;
    margin: 0 auto;

I would like the flexibility to add/remove a gutter to the left and right of my masthead (and later my main page wrapper), but now I can’t do that because to keep my border line, I lose padding.

Help!

[ralphm]

You don’t have to use display: table in all situations. You could change that on certain viewport sizes via @media queries. Personally, I might only serve up display: table to viewports over a certain width. Then you don’t have to undo anything on devices where it’s not wanted.

[Gandalf]

border-collapse is only for HTML tables anyway, not for CSS tables.

[ronpat]

@Gandalf

border-collapse is only for HTML tables anyway, not for CSS tables.

Actually, {border-collapse:collapse} can be applied to both HTML <table>s and CSS {display:table}s.

[Gandalf]

@ronpat

Actually, {border-collapse:collapse} can be applied to either HTML <table>s or CSS {display:table}s.

Ah - you learn something new every day!

[PaulOB]

@mikey_w

As you can see from my note, the downside is you lose the ability to use margins and padding.

I don’t understand what you are saying as border-collapse has nothing to do with padding or margins but affects how borders on cells in the table merge with the surrounding cells. It doesn’t affect margins or padding at all (cells can’t have margins anyway).

If you collapse the border then you can’t use ‘border-spacing’ which will make space between cells in the table but will not affect a border on the table element itself.

I think we need to see a reduced test case to analyse further

[mikey_w]

I can’t find a reference, but I see it on my web page.

border-collapse commented out:

#masthead{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    max-width: 1200px;        /**/
    margin: 0 auto;                                            /* Center element. */
    padding: 0 20px;        /**/
/*    border-collapse: collapse;                    /* Allows border. (Collapses margins/padding.) */
    font-size: 0.9rem;
    line-height: 1.1;
}

border-collapse not commented out:

#masthead{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    max-width: 1200px;        /**/
    margin: 0 auto;                                            /* Center element. */
    padding: 0 20px;        /**/
    border-collapse: collapse;                    /* Allows border. (Collapses margins/padding.) */
    font-size: 0.9rem;
    line-height: 1.1;
}

Notice how border-collapse:collapse negates padding: 0 20px; in my masthead?

I hate to question @PaulOB, but the proof is in my code/webpage…

[PaulOB]

You don’t show the whole picture as border-collapse only affects display:table elements and you have no display:table elements in the code you posted.

I’m guessing you have a display:table element which you are modifying into a position:fixed element but you have not reset the display back to block from table and so you get a mixture of behaviours. I’m also guessing that you have set width:100% on the table element so that now you have width:100% + 20px padding each side plus left:0 and right:0 plus position:fixed.

If you are using left and right together then you need to have a width of auto otherwise the 100% plus padding makes the element too wide.

Of course I am guessing as I don’t see the whole picture but you should be careful when modifying elements that you don’t leave unwanted values in place.

Therefore I’m guessing that you should have added these rules in the media query also:

#masthead{
display:block;
width:auto;
}

[mikey_w]

I should know to question the great Paul O.

FWIW, after posting last night, I decided it would be easier to just adjust #masthead down from max-width: 1280px to 1200px and then I don’t need to mess with padding.

But wanting to learn from my apparent mistakes, here is some HTML…

    <header id="masthead" class="table100">
        <!-- Row-1 -->

        <!-- Row2 -->
        <nav id="topMenu"><!-- row -->
            <div class="cell">
                
                <div class="table100"><!-- Nested-Table -->
                    <!-- Cell-1 -->
                    <ul class="cell">

Here are my styles…

#masthead{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    max-width: 1200px;        /**/
    margin: 0 auto;                                            /* Center element. */
/*    padding: 0 20px;        /**/
    border-collapse: collapse;                    /* Allows border. (Collapses margins/padding.) */
    font-size: 0.9rem;
    line-height: 1.1;
}


/* masthead: Row 2 (Top Menu)                */

/* Top Menu: Drop-down (Mobile) */
@media screen and (max-width: 700px){
    nav#topMenu{
        position: relative;
        display: block;
        width: 100%;
        height: 40px;
    }

/* Top Menu: Horizontal (Desktop) */
@media screen and (min-width: 701px){
    nav#topMenu{
        position: relative;
        display: table-row;
    }

Do I need to change the width to auto for #masthead or for nav#topMenu or both?

[SamA74]

@mikey_w

@media screen and (max-width: 700px){}
@media screen and (min-width: 701px){}

There is no need for both these queries, they are both opposite sides of the same breakpoint. Use one or the other, then put whatever was in the one you discard, in the global section or the next query up/down from it, as appropriate.

[PaulOB]

@mikey_w

Do I need to change the width to auto for #masthead or for nav#topMenu or both?

If you have set a width for #masthead elsewhere (as I can’t see the css for your table100 rule) then yes you will need width:auto because the width of the element is already catered for when you say left:0 and right:0 (you can also add padding without problems when using left;0 and right:0 for positioned elements).

nav#topMenu doesn’t seem to need a width as block elements will fill the available width anyway (unless yo have other rules applied such as float that I can’t see).

[mikey_w]

@PaulOB,

I tried to apply your advice but I still see the same issue… When border-collapse: collapse is set, the padding doesn’t appear. When I comment it out, the left/right borders do appear.

At this point, I am just going to create a gutter by adjust max-width on #masthead and leave it at that. I am sure there is a learning opportunity here, but it takes too much time to strip down my production code to post what you need to help me out here, plus I think it is better to just adjust the max-width and not complicate things with padding.

Thanks for trying to help, though!

[mikey_w]

@SamA74

@mikey_w

@media screen and (max-width: 700px){}
@media screen and (min-width: 701px){}

There is no need for both these queries, they are both opposite sides of the same breakpoint. Use one or the other, then put whatever was in the one you discard, in the global section or the next query up/down from it, as appropriate.

We seem to have different styles.

I have been doing media queries that way because I like to see the pair - either “A” or “B”.

If you have the default way in your main CSS, it is sometimes harder for me to link to to the media query, whereas my approach put both binary states right next to each other.

[felgall]

@mikey_w

my approach put both binary states right next to each other

but web page layout isn’t binary.

You should have a default layout and then override specific elements of that layout as the page becomes too wide or narrow.

no wonderr you are having so much difficulty understanding media queries as you are going about it all wrong and almost doubling the amount of css you need.

[mikey_w]

@felgall

@mikey_w

my approach put both binary states right next to each other

but web page layout isn’t binary.

You should have a default layout and then override specific elements of that layout as the page becomes too wide or narrow.

no wonderr you are having so much difficulty understanding media queries as you are going about it all wrong and almost doubling the amount of css you need.

I created a new thread on this tangential subject: How do you organize your CSS on Responsive Websites?

[SamA74]

I should also mention, when I copied your css for the other thread, I noticed a missing bracket at the end of the first query. So you effectively have a query within a query that contradicts its parent query