Forums

Random White Bars

Permalink
I am currently adding a different theme style for a website that was completed under a different theme, however I am running into an old issue that I can not remember how I resolved last time. Between sections starting after the second one, white bars are appearing that ruin the flow of the site from one background to another and it is driving me nuts.

Any clue what causes this. I have looked over and over for any misplaced code, unclosed css, etc. and can't find a thing.


Site Url:
http://bmpbuild.com/concrete/
 
AccountDisabled replied on at Permalink Best Answer Reply
Paragraph margins are the cause.

One solution could be to style all paragraphs so they use padding instead of margins. Something like...

p {
    margin-top: 0;
    padding-top: 1em;
}


Or just target the first paragraphs in those sections with more complex CSS like...

#mainframe > div > p:first-child {
    margin-top: 0;
    padding-top: 1em;
}


Same cause and solution would apply to other elements with margins. Probably H1, H2, etc... tags most likely but really anything near the edge of a background area that has margins.

Hope this helps and cheers!

PS - Might want to change all those ID = main and ID = mainframe duplicates into classes that can be reused as much as you like. Mostly because IDs should only be used once and if not can cause unforeseen JS issues in certain situations.