CODEWITHSUNDEEP
htmlcsspaddinghtml-email
Giovatto
Giovatto

Reputation: 77

Can't figure out padding issue

I cant seem to figure out where the 1 or 2 pixel of padding is coming from at the top of my page. I've ran it in Chrome and Safari and its there, yet JSFiddle doesn't seem to generate it.

Could it just be the way that the browser is printing it out to the page? If so is there a way to counter the effect in CSS or JS?

Here is the JS Fiddle Example:

My JSFiddle Example

and here is the code for whichever is easier for you

<html>
<head>


<style>
* {padding:0; margin:0;}

h1{font-family: Arial, Helvetica, sans-serif; font-size:36px;}
h2{font-family: Arial, Helvetica, sans-serif; font-size:28px;}
h3{font-family: Arial, Helvetica, sans-serif; font-size:20px; font-weight:normal;}
h4{font-family: Arial, Helvetica, sans-serif; font-size:12px; font-weight:normal; line-height:16px;}
h5{font-family: Arial, Helvetica, sans-serif; font-size:9px;}

span{margin:0 auto;}

#wrapper{
    width:800px;
    height:auto;
    margin:0 auto;
}

#wrapper .header{
    background-image: url('http://i.imgur.com/dY8Tuu5.png');
    background-repeat: no-repeat;
}

#wrapper .header span h1{
    position:relative; 
    top:65px; 
    left:35px;
}

#wrapper .header span h2{
    position:relative;
    color:white;
    text-shadow:1px 1px 1px #333; 
    top:115px; 
    left:25px;
}

</style>

</head>

<body>

<table id="wrapper">
    <tr>
        <td class="header" height="450" >
            <span>
                <h1>Big Flashy <br /> Headlines Here</h1>
            </span>

            <span>
                <h2>Sub-Headers and such <br /> can go Here</h2>
            </span>
        </td>


    </tr>    
</table>


</body>
</html>

I have to use tables instead of DIVs because its going to be sent through EMail.

Thanks

Upvotes: 0

Views: 143

Answers (2)

mikrich
mikrich

Reputation: 61

If it is meant for email inline styles are required

    <table id="wrapper" cellpadding="0" cellspacing="0">

Upvotes: 2

greener
greener

Reputation: 5069

On Chrome, the issue is the user agent stylesheet adds 2px to the table for border-spacing. Try:

table {border-spacing: 0px;}

Upvotes: 2

Related Questions