CODEWITHSUNDEEP
csshtmlheaderoutlook
DarkLite1
DarkLite1

Reputation: 14735

MS Outlook 2010 headers mixing

I'm definitely not a CSS nor HTML expert, but I think my code is correct. When I run it in Internet Explorer it works fine and shows some white space between the headers, as it should be. But when I sent it to MS Outlook 2010 the headers are mixing. And I can't seem to find a way to fix this in a clean way...

MS Outlook 2010 (Not OK):

MS Outlook 2010

Internet Explorer (OK):

enter image description here

HTML/CSS-Code:

<!DOCTYPE html>
<html><head><style type="text/css">
body {
    font-family:verdana;
    background-color:white;
}
h1 {
    background-color:black;
    color:white;
    margin-bottom:0px;
    text-indent:10px;
}
h2 {
    background-color:lightGrey;
    margin-bottom:10px;
    text-indent:10px;
}
p {
    font-size: 14px;
    margin-left:10px;
}
</style></head><body>
<h1>My Big Title</h1>
<h2>My Smaller title:</h2>
<p>Hello world :)</p>
</body></html>

Thank you for your help on solving this little nasty issue.

Changing h1 to margin-bottom:10px; doesn't fix it either:

enter image description here

Upvotes: 0

Views: 59

Answers (2)

DarkLite1
DarkLite1

Reputation: 14735

Fixed it by adding page-break-before: always; as found in this post.

Man I'm glad I solved this one! Has been bugging me a long time now.

Fix:

h1 {
    background-color:black;
    color:white;
    margin-bottom:10px;
    text-indent:10px;
    page-break-before: always;
}
h2 {
    background-color:lightGrey;
    margin-bottom:10px;
    text-indent:10px;
    page-break-before: always;
}

Upvotes: 1

Menno van der Krift
Menno van der Krift

Reputation: 303

Internet explorer probably applies default browser margins to the header elements which explains why the top and bottom text are pushed under each other. If your first line of text is the Big Title, try updating

h1 { background-color:black; color:white; margin-bottom:0px; text-indent:10px; }

with

h1 { background-color:black; color:white; margin-bottom:10px; text-indent:10px; }

This will apply a 10 pixel margin at the bottom of your first h1 text. You can change value to your needs.

Upvotes: 0

Related Questions