Search code examples
jqueryhtmlcssfancybox

CSS - There is still margin and padding

OK so I'm using FancyBox(.net) and I'm trying to make a header without no margin and padding and it's NOT doing it. Here is what I get:

there should be no whitespace on top or both sides of blue header

As you can see, there is whitespace near the top and sides of the blue header... and there should not be...

Here is what I have so far, thanks:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="imagetoolbar" content="no" />
    <title>FancyBox 1.3.4 | Demonstration</title>
    <script type="text/javascript" src="jquery-1.5.1.min.js"></script>
    <script type="text/javascript" src="scripts/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
    <script type="text/javascript" src="scripts/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
    <link rel="stylesheet" type="text/css" href="scripts/fancybox/jquery.fancybox-1.3.4.css" media="screen" />

    <link rel="stylesheet" href="style.css" />
    <script type="text/javascript">
        $(document).ready(function() {

            $("#various1").fancybox({
        'transitionIn'   :  'fade',
        'transitionOut'  :  'fade',
        'speedIn'        :  300, 
        'height': '300',
        'width': '300',
        'speedOut'       :  300, 
                'opacity'       : true,
                'centerOnScroll': true,
                'autoDimensions': false
            });

        });
    </script>

    <style>
    .header {
background:#789FCC;
color:#fff;
font:16px verdana;
font-weight:700;
padding:5px;
}
    h3 {
        font-weight: bold;
        font-size: 17px;
        display: block;
         padding:0;
        margin:0;        
    }
    #inline1 {
        padding:0;
        margin:0;    
    }    
    </style>

</head>
<body>

    <a id="various1" href="#inline1">Report Answer</a>


           <div style="margin:0;padding:0;display:none;">
        <div id="inline1" style="padding:0;marging-top:10px;">
        <div class="header"><h3>Report this content</h3></div>
Testing...
        </div>  </div>


</body>
</html>
Solution

  • write this in iternel CSS

    #fancybox-content { border-width:0px!important;text-align:center;}

    also make changes in jquery.fancybox-1.3.4.css

    #fancybox-outer {
   width: 94%;
}