0

it has a margin on the left side and top, but fills to the far right, i dont want any white border/or a margin (not sure if its white border or margin due to background being white.

using DW CS6

heres my code

HTML;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<link rel="shortcut icon" href="Images/favicon.png" type="image.png"/>
<link rel="shorcut icon" href="Images/Favicon.ico"/>
<link rel=”apple-touch-icon” sizes=”114×114″ href="Images/apple-touch-icon-  114×114.png"/>
<link rel=”apple-touch-icon” sizes=”72×72″ href="Images/apple-touch-icon-72×72.png"/>
<link rel=”apple-touch-icon” href="Images/touch-icon-iphone.png"/>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>IPS Fire & Security - Leading Maintainers & Installers of Intruder / Burlgar    Alarms, Fire Alarms, CCTV & Access Control</title>

<link href="Style/style.css" rel="stylesheet" type="text/css" />
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
 for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
 if(!x && d.getElementById) x=d.getElementById(n); return x;
   }

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-             2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
</head>
<body bgcolor="#FFFFFF">
 <div class="Header">


        <div id="NavBar">
 <ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="#">Home</a>    </li>
<li><a href="#">About Us</a></li>
<li><a class="MenuBarItemSubmenu" href="#">Services</a>
  <ul>
    <li><a href="#">Alarms</a></li>
    <li><a href="#">Fire</a></li>
    <li><a href="#">CCTV</a></li>
    <li><a href="#">Access Control</a></li>
    <li><a href="#">Care</a></li>
    <li><a href="#">Maintenance</a></li>
  </ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">News</a>
  <ul>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Press</a></li>
  </ul>
</li>
<li><a href="#">Contact Us</a></li>


<div id="ImageLinks">
<span style="position:absolute;left:31%;"><img src="Images/burglar.jpg" width="175"     height="250" alt="IPS Fire &amp; Security Intruder Alarms" /></span>

<span style="position:absolute;left:41%;"><img src="Images/CCTV.jpg" width="175"   height="250" alt="IPS Fire &amp; Security CCTV / HD CCTV / Cameras" /></span>

<span style="position:absolute;left:51%;"><img src="Images/Tunnel-Fire1.jpg"   width="175" height="250" alt="IPS Fire &amp; Security Fire Alarms" /></span>

<span style="position:absolute;left:61%;"><img src="Images/access.jpg" width="175"   height="250" alt="IPS Fire &amp; Security Access Control, Door Access &amp; Video Systems" /></span>

</div>

  <script type="text/javascript">
  var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1",         {imgDown:"SpryAssets/SpryMenuBarDownHover.gif",        imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
</script>
  </body>

CSS

#NavBar {
height: 37px;
width: 900px;
margin-right: auto;
margin-left: 520px;
padding-top: 0px;
margin-top: 0px;
font-family: "Square721 BT", Arial;
text-align: center;
}

.Header {
height: 200px;
width: 1920px;
left: 0px;
right: 0px;
margin: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
}
#ImageLinks {
height: 250px;
width: 900px;
margin-right: auto;
margin-left: auto;
left: auto;
right: auto;
margin-top: 0.5%;
}
Bill Agee
  • 3,606
  • 20
  • 17

2 Answers2

2

You should use margin, padding and border.
margin and padding for the white space and border, so you dont get a border (in some browsers) around your picture. 

body {margin:0; padding:0;}
And
img { border:none;}
Carl0s1z
  • 4,683
  • 7
  • 32
  • 47
1

Add the declaration:

body{ padding: 0; margin: 0; }

to your CSS, this will remove the inherited browser padding and margin and should remove the 'border' around your header.

Also, take a look at : http://meyerweb.com/eric/tools/css/reset/ which will reset all browser classes and leave you with a blank canvas.

Pat Dobson
  • 3,249
  • 2
  • 19
  • 32
  • thankyou so much! sorted it all out. i'll have a look, what does it actually do, im new to website building. average knowledge of HTMl and very basic knowledge of CSS. –  Dec 10 '13 at 12:16
  • Meyer's reset.css was made to eliminate browsers inconsistency. However nowadays Normalize.css (http://necolas.github.io/normalize.css/) is commonly used to eliminate browsers inconsistency. – Bobby Dec 10 '13 at 12:35
  • 1
    Check the answer [http://stackoverflow.com/questions/6887336/what-is-the-difference-between-normalize-css-and-reset-css](http://stackoverflow.com/questions/6887336/what-is-the-difference-between-normalize-css-and-reset-css) to read more about the difference between normalize and reset – Bobby Dec 10 '13 at 12:37