Member Avatar for Soapboxdesigner

I'm having some issues with trying to get my image to cling to the top of the header div. I've got 4 templates running this website and it does fine on one of the templates, but the other 3 or screwy. Any help would be appreciated it. You can see it here at www.yourprecision.com.

Edited by Soapboxdesigner
  • 4 Contributors
  • 7 Replies
  • 2K Views
  • 17 Hours Discussion Span
  • Latest Post Latest Post by JorgeM

Dani AI

Generated

Good call by on the default body margin. If you set that to 0 and the gap still shows up on some templates, there are two other usual suspects: a collapsed top margin on the first child inside your header, and the image being inline (which adds baseline whitespace by default).

Try these targeted fixes:

/* Stop top-margin collapse from the first child inside the header */
header { border-top: 1px solid transparent; }  /* or: overflow: auto; */

/* Make the logo image block-level so it hugs the container edges */
header img { display: block; }

/* If your first child had a margin, zero it out */
header > * { margin-top: 0; }

Why this helps: with no padding/border on a container, the first child’s top margin can collapse upward and look like space above the header. A 1px transparent border (or creating a new formatting context with overflow:auto) prevents that. Making the image display:block removes the inline baseline gap.

Since you have multiple templates and only some misbehave, sanity-check the following so they are consistent across all of them:

  • Same doctype on line 1 (<!doctype html>). Quirks mode can change default spacing.
  • No extra padding on the header wrapper in the templates that show the gap.
  • The same CSS file order. A later stylesheet may reintroduce margins.
  • As @stbuchok noted, clear the JS errors; they are not causing this particular gap, but they make debugging layout in DevTools harder.

After applying the above, use your browser’s computed styles panel on the body, header, and the logo <img> to confirm top margins are 0 and that the header’s top edge is at y=0.

Recommended Answers

All 7 Replies

Member Avatar for Member #905211

I don't see the issue besides a bunch of javascript errors. Can you create an image that shows how it looks now versus how you want it to look?

Member Avatar for JorgeM

I dont see a problem either.. you'll need to be more specific or upload a picture with markings indicating what problem you see.

Member Avatar for Soapboxdesigner

Here is an example 3229d538e32aff11cb29ea52794fa5a3

Member Avatar for JorgeM

Ok, the picture helps.. That just seems to be a margin issue on the body element. When I apply a margin of 0px on the body element using my browser's web dev tools, the body element is flush with the browser window.

2520340acb19f5b11832529ae2c212a9

Member Avatar for TomH.PG

This is often caused by border collapsing. You can either change the collapse behaviour using CSS or apply a margin of 1px to the outer element that is a direct child of <body>.

However, in this case it appears the body element is having a default margin being applied to it - with Chrome it is 8px - so setting margin:0px on the body element in CSS should help also.

Member Avatar for Soapboxdesigner

Thank you very much. I will try this (well try to figure out how to do this). I am a newbie at webdesign and sometimes it kicks my butt.

Thanks again! (Any good advice for somewhere to go to get training on spry, javascript, forms?)

Member Avatar for JorgeM

I will try this (well try to figure out how to do this).

To address this one issue, simply modify your internal style Lines 7-10, and simply add margin:0px to the body selector.

body {
    background-color: #000;
    background-image: url();
    margin:0px;
}
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.