Skip to main content
This topic has been closed for replies.
Correct answer Jon Fritz

You're overusing <h1> tags (you should only have 1 per page) and the browser default padding/margin is causing the extra space in those items where you have two <h1> tags next to each other.

Run the validator at http://validator.w3.org/nu to get a listing of your errors and warnings, that way you can avoid improperly structuring your page before it gets this far..

If you don't want to use browser defaults for margins and padding on your html elements, adding the following at the top of your css will take them out...

* {
padding:0;
margin:0;

}

...you will then need to add them back for items like <p> later in your css file.

3 replies

pziecina
pziecina
Legend
March 21, 2019

To no one in particular.

Isn't all this about h1, (etc) and css resets a mute point anyway?

Most Dw users do not use html5 semantics to mark-up a page, bootstrap and all other Dw started pages also do not. Plus much of css3 and html5 support is missing from Dw.

As for css resets, who cares?

They are default in the bootstrap css, and 90% of Dw users probably have no idea about what they do, (or why) and probably no longer know if they are required.

ALsp
ALsp
Legend
March 21, 2019

To everyone who comes here seeking answers...

If your CSS skill levels do not provide the information necessary for you to make your own decision on whether to use a reset, the answer is simple. Don't.

If your CSS skill levels do not allow you to make a clear decision on the merits, or lack of merits, in using Bootstrap, do not allow it to be forced on you.

The bottom line? Learn HTML and CSS to the extent that you can code a page from scratch. Only then will you be able to make a good decision on the merits of using one or more of the free frameworks (such as Bootstrap). Use a framework before you learn to code and I promise you will wind up with problems. In fact, you might not even know you have a problem until it's too late.

Stop accepting fish from Adobe or the "experts" in this forum. Learn to fish yourself. You won't be sorry.

    pziecina
    pziecina
    Legend
    March 21, 2019

    Don't know why you replied to me AL, but every one of your points are correct .

    The problem though would not be solved for many, as Dw itself is becomming a joke in the development world. Then again Adobe and the Dw managment can do what they wish, after all, it is their program.

    O
    osgood_
    Legend
    March 20, 2019

    Well you have the first image in each row that is affected wrapped in an <h1><a>IMAGE</a></h1> tag - the <h1> has a margin applied to  it causing the extra depth. The image DOES NOT require being in an <h1></h1> tag as that should be reserved for a 'heading' and should only be used once per page, not multiple times. I suggest you remove the <h1> tag wrapping your images and then use <h3> tags for the headings above the images as these can be used multiple times.

    If you use Flexbox for the layout you would not have to concern yourself about such issues as the boxes, regardless of the extent of content in them, will all be the same height.

    Jon Fritz
    Community Expert
    Jon FritzCommunity ExpertCorrect answer
    Community Expert
    March 20, 2019

    You're overusing <h1> tags (you should only have 1 per page) and the browser default padding/margin is causing the extra space in those items where you have two <h1> tags next to each other.

    Run the validator at http://validator.w3.org/nu to get a listing of your errors and warnings, that way you can avoid improperly structuring your page before it gets this far..

    If you don't want to use browser defaults for margins and padding on your html elements, adding the following at the top of your css will take them out...

    * {
    padding:0;
    margin:0;

    }

    ...you will then need to add them back for items like <p> later in your css file.

    B
    BigMusicGeekAuthor
    Participant
    March 20, 2019

    Awesome.

    I appreciate the help!

    Thanks!

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    March 20, 2019

    It's common practice to use a  Reset CSS stylesheet to avoid browser style inconsistencies. 

    https://cssreset.com/what-is-a-css-reset/

    Most frameworks like Bootstrap have their own built-in Reset CSS (sometimes called Reboot or Normalize).

    Reboot, Resets, and Reasoning | CSS-Tricks

    The quick & dirty method Jon posted is a little like swatting flies with a sledgehammer.  The asterisk effects  every HTML element there is even the ones you don't want to effect.  

    Nancy O'Shea— Product User & Community Expert
    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices