CODEWITHSUNDEEP
htmlcssmargin
Will Ryan
Will Ryan

Reputation: 1825

Weird margin differences between Chrome/Safari and Firefox

I recently designed a website (http://willryan.us/typefun01), mainly using Chrome while coding to test. I recently noticed that there are some weird things happening at the end of certain sections, (the gap after History, the overlap of Styles onto Anatomy).

I have a css reset in my stylesheet (not sure if that has anything to do with this), and I can't figure out what's causing this, and how to get the site to look like how it does when viewed in Chrome

Upvotes: 0

Views: 3311

Answers (3)

Nirav Dabhi
Nirav Dabhi

Reputation: 21

Best Thing is always start your CSS with:

* {
  margin: 0px;
  padding:0px;
}

It will remove all unnecessary margin and padding from your website.

Upvotes: 1

kumiau
kumiau

Reputation: 724

If you want to avoid the gap after History you would want to use a padding in historyWide instead of a margin; the margin pulls aways elements while padding makes them bigger

On anatomy what's happening is that you're using the property "top" to modify #styles, this will move the element but the parent will reserve only the original space for the element. You will be better off working with margins and padding than with "top" if you have to keep a relation between the elements.

Lastly, i woulnt position elements with margins like you did with #stylesMono. I think you could better work with paragraphs to keep keep the vertical position and, from there, working with floats, margin and padding in the scope of the "p".

Upvotes: 1

isherwood
isherwood

Reputation: 61055

The gap after History is due to:

#historyWide {
    margin: 250px 80px 75px;
}

It could be remedied with:

div#content > div {
    overflow: hidden; /* or auto */
}

You could also move the large top and bottom margins of elements inside the child divs of #content to padding on the child divs themselves. Anything will work as long as it's all contained by those child divs.

You're simply seeing the different ways that browsers handle imperfect layout.

Upvotes: 1

Related Questions