...

View Full Version : border display problem...



CSSisthebest
07-18-2007, 02:38 PM
Problem Now Fixed.

im having a problem with my border surrounding my site, i have set a #border style within my #wrapper style and the border only displays the top, left and bottom border, not the right one, why is it doing this? and how can i resolve it ?

here is the site:
http://technolanecss.sitesled.com/

here is my code:


<!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" lang="en" xml:lang="en">

<head>
<title>technolane - local computer help - technolane it services - technolane web services - website design - computer repair in essex - website design in essex</title>
<style type="text/css">


/* Created For and By Technolane IT and Web Services (www.technolane.co.uk)
//* You may not use or recreate any of the content on this site.
//* Technolane 2007 All Rights Reserved James Lane and Robert Lane.
//***********************************************/

/*ToC
1. Defaults
2. Structure
3. Links and Navigation
4. Fonts
5. Images
6. Forms

Notes

*/



/* ------------ 1. Defaults ------------ */

* {
margin: 0;
padding: 0;
padding-top:0px;

}

#wrapper {
width:800px;
height:auto;
overflow:hidden;
margin: 0 auto;
padding-top:29px;

}

#border {
border:2px;
border-color:#464646;
border-style:solid;
width:800px;
height:auto;
}

/* JavaScript Drop Down Menu */
#dropmenudiv{
position:absolute;
border:0px solid black;
border-bottom-width: 0;
font-family:Times New Roman;
font-size:13px;
font-style:normal;
line-height:18px;
z-index:100;
}

/* JavaScript Drop Down Menu */
#dropmenudiv a{
width: 100%;
display: block;
text-indent: 3px;
color: #595b5a;
border-bottom: 0px solid black;
padding: 1px 0;
font-family:Times New Roman;
font-size:13px;
font-style:normal;
text-decoration: none;
}

/* JavaScript Drop Down Menu */
#dropmenudiv a:hover{ /*hover background color*/
background-color: #595b5a;
color:#FFFFFF;
font-family:Times New Roman;
font-size:13px;
font-style:normal;
}


body {
background-color:#c0c0c0
}


/* ------------ 2. Structure ------------ */


/* Technolane Logo */
img {
display: block;
margin-left: auto;
margin-right: auto;
margin-top:4%;
padding:0;
}

/* Navigation Bar */
img {
display: block;
margin-left: auto;
margin-right: auto;
margin-top:0%;
padding:0;

}

/* Flash Banner */
#flash {
display:block;
margin-left:auto;
margin-right:auto;
width:800px;
background:url(technolanebanner.swf);
padding:0;
padding-bottom:0;
}

/* Space For Text */
#space {
display:block;
margin-left:auto;
margin-right:auto;
margin-top:0%;
width:800px;
background-color:#FFFFFF;
padding:0;
padding-top:0;
}

/*Bottom Navigation Space */
#bottomnavigation {
display:block;
margin-left:auto;
margin-right:auto;
margin-top:0%;
width:800px;
background-color:#c0c0c0;
text-align:center;
padding-top:0;
}

/*Bottom Navigation Space */
#copr {
display:block;
margin-left:auto;
margin-right:auto;
margin-top:0%;
width:800px;
background-color:#c0c0c0;
text-align:center;
}

#toplinks {
display:block;
margin-left:auto;
margin-right:auto;
margin-top:0%;
width:800px;
background-color:#ffffff;
text-align:center;


/* ------------ 3. Links And Navigation ------------ */

/*bottom navigation links*/
}
a.bottomnav:link {
text-decoration: none;
color: #464646;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
font-style:normal;
text-align:center;
}
a.bottomnav:visited {
text-decoration: none;
color: #464646;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
font-style:normal;
text-align:center;
}
a.bottomnav:hover {
text-decoration: none;
color: #464646;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
font-style:normal;
text-align:center;
}
a.bottomnav:active {
text-decoration: none;
color: #464646;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
font-style:normal;
text-align:center;
}


/*bottom navigation links*/
a.selectedbutton:link {
text-decoration: none;
color: #000000;
font-family:"Times New Roman", Times, serif;
font-size:13px;
font-style:normal;
text-align:center;
}
a.selectedbutton:visited {
text-decoration: none;
color: #000000;
font-family:"Times New Roman", Times, serif;
font-size:13px;
font-style:normal;
text-align:center;
}
a.selectedbutton:hover {
text-decoration: none;
color: #000000;
font-family:"Times New Roman", Times, serif;
font-size:13px;
font-style:normal;
text-align:center;
}
a.selectedbutton:active {
text-decoration: none;
color: #000000;
font-family:"Times New Roman", Times, serif;
font-size:13px;
font-style:normal;
text-align:center;
}
body {

}



/* ------------ 3. Fonts ------------ */

.copyright
{
font-family:Arial, Helvetica, sans-serif;
font-size:10px;
font-style:normal;
color:#464646;
text-align:center;
text-decoration:none;
}

#content {
overflow: auto;
width: 800px;
margin: 0 auto; }

#headnav {
overflow: auto;
width: 800px;
margin: 0 auto;

}

#content div {
width: 50%;
float: left;
margin: 0 auto;
background-color:#FFFFFF;
}

h1 {
font-weight:normal;
margin:0; }

h2 {
font-family:Georgia;
font-size:20px;
font-style:italic;
color:#fb7116;
font-weight:normal;
margin-top:2em;
margin-left:40px;

}

p {
font-family:Georgia, "Times New Roman", Times, serif;
font-size:12px;
font-style:normal;
color:#464646;
font-weight:normal;
text-align:justify;
margin-top:2em;
margin-left:40px;
margin-right:100px;
padding-bottom: 2em;
}

.m2 {
margin-bottom: 2em;}

#home
{
position:absolute;
width:38px;
height:24px;
z-index:1;
left: 233px;
top: 87px;
}
</style>
<!-- JavaScript Drop Down Menu -->
<script type="text/javascript">
language="javascript"

//***********************************************
//* AnyLink Drop Down Menu- Dynamic Drive (www.dynamicdrive.com)
//* This notice MUST stay intact for legal use
//* Visit http://www.dynamicdrive.com/ for full source code
//***********************************************//

//Contents for menu 1
var menu1=new Array()
menu1[0]='<a href="maintenance.html">Maintenance</a>'
menu1[1]='<a href="datarecovery.html">Data Recovery</a>'

//Contents for menu 2,
var menu2=new Array()
menu2[0]='<a href="home.html">Home</a>'
menu2[1]='<a href="business.html">Business</a>'
menu2[2]='<a href="wireless.html">Wireless</a>'

var menu3=new Array()
menu3[0]='<a href="webdesign.html">Web Design</a>'
menu3[1]='<a href="webmaintenance.html">Web Maintenance</a>'
menu3[2]='<a href="portfoliogallery.html">Portfolio Gallery</a>'

var menuwidth='165px' //default menu width
var menubgcolor='white' //menu bgcolor
var disappeardelay=250 //menu disappear speed onMouseout (in miliseconds)
var hidemenu_onclick="yes" //hide menu when user clicks within menu?

/////No further editting needed

var ie4=document.all
var ns6=document.getElementById&&!document.all

if (ie4||ns6)
document.write('<div id="dropmenudiv" style="visibility:hidden;width:'+menuwidth+';background-color:'+menubgcolor+'; opacity: .95; filter: alpha(opacity=95)" onMouseover="clearhidemenu()" onMouseout="dynamichide(event)"></div>')

function getposOffset(what, offsettype){
var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
var parentEl=what.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
}


function showhide(obj, e, visible, hidden, menuwidth){
if (ie4||ns6)
dropmenuobj.style.left=dropmenuobj.style.top="-500px"
if (menuwidth!=""){
dropmenuobj.widthobj=dropmenuobj.style
dropmenuobj.widthobj.width=menuwidth
}
if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover")
obj.visibility=visible
else if (e.type=="click")
obj.visibility=hidden
}

function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function clearbrowseredge(obj, whichedge){

var edgeoffset=-3
if (whichedge=="rightedge"){
var windowedge=ie4 && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15
dropmenuobj.contentmeasure=dropmenuobj.offsetWidth
if (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure)
edgeoffset=dropmenuobj.contentmeasure-obj.offsetWidth
}
else{
var topedge=ie4 && !window.opera? iecompattest().scrollTop : window.pageYOffset
var windowedge=ie4 && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18
dropmenuobj.contentmeasure=dropmenuobj.offsetHeight
if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure){ //move up?
edgeoffset=dropmenuobj.contentmeasure+obj.offsetHeight
if ((dropmenuobj.y-topedge)<dropmenuobj.contentmeasure) //up no good either?
edgeoffset=dropmenuobj.y+obj.offsetHeight-topedge
}
}
return edgeoffset
}

function populatemenu(what){
if (ie4||ns6)
dropmenuobj.innerHTML=what.join("")
}


function dropdownmenu(obj, e, menucontents, menuwidth){
if (window.event) event.cancelBubble=true
else if (e.stopPropagation) e.stopPropagation()
clearhidemenu()
dropmenuobj=document.getElementById? document.getElementById("dropmenudiv") : dropmenudiv
populatemenu(menucontents)

if (ie4||ns6){
showhide(dropmenuobj.style, e, "visible", "hidden", menuwidth)

dropmenuobj.x=getposOffset(obj, "left")
dropmenuobj.y=getposOffset(obj, "top")
dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+"px"
dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+"px"
}

return clickreturnvalue()
}

function clickreturnvalue(){
if (ie4||ns6) return false
else return true
}

function contains_ns6(a, b) {
while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;
}

function dynamichide(e){
if (ie4&&!dropmenuobj.contains(e.toElement))
delayhidemenu()
else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
delayhidemenu()
}

function hidemenu(e){
if (typeof dropmenuobj!="undefined"){
if (ie4||ns6)
dropmenuobj.style.visibility="hidden"
}
}

function delayhidemenu(){
if (ie4||ns6)
delayhide=setTimeout("hidemenu()",disappeardelay)
}

function clearhidemenu(){
if (typeof delayhide!="undefined")
clearTimeout(delayhide)
}

if (hidemenu_onclick=="yes")
document.onclick=hidemenu
// ]]>
</script>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
</head>
<body><div id="wrapper">
<div id="border">
<!--Technolane Logo Image -->
<div><h1><img class="normal" src="header.gif" width="800" height="66" alt="technolane it services banner" /></h1></div>
<!--Navigation Bar Image -->
<div><img class="normal" alt="homebutton" src="homebuto_02.jpg" width="800" height="34" /></div>



<!--Flash Banner SWF -->
<div id="flash"><object
classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0"
width="800" height="180">
<param name="movie" value="technolanebanner.swf" />
</object></div>
<!--White Text Space -->
<div id="content" class="m2"><div><h2>Computer Maintenance.</h2><p>Curabitur facilisis, libero et ultricies auctor, augue metus congue odio, eu rhoncus diam libero et magna. Donec nisi felis, dapibus vel, dignissim et, laoreet tincidunt, lectus. Nam sit amet tortor at orci congue lacinia. Donec in libero vel libero tempor ornare. Sed dapibus ante at enim. Donec fermentum, augue id accumsan mollis, est lectus vestibulum nisl, eget ullamcorper nulla justo ac dolor.</p></div><div><h2>Troubleshooting.</h2><p>Curabitur facilisis, libero et ultricies auctor, augue metus congue odio, eu rhoncus diam libero et magna. Donec nisi felis, dapibus vel, dignissim et, laoreet tincidunt, lectus. Nam sit amet tortor at orci congue lacinia. Donec in libero vel libero tempor ornare. Sed dapibus ante at enim. Donec fermentum, augue id accumsan mollis, est lectus vestibulum nisl, eget ullamcorper nulla justo ac dolor. </p></div></div>






<!--Top Navigation Links -->
<div id="home"> home</div>
</div>
<!--Bottom Navigation Links -->
<div id="bottomnavigation"><br />
<a href="index.html" class="bottomnav">Home&nbsp;|&nbsp;</a><a href="servicearea.html" class="bottomnav">Service Area&nbsp;|</a><a href="rates.html" class="bottomnav">&nbsp;Rates&nbsp;|</a><a href="contactus.html" class="bottomnav">&nbsp;Contact Us&nbsp;|</a><a href="links.html" class="bottomnav">&nbsp;Links</a></div>
<!--Copyright Message -->
<div id="copr"><span class="copyright"><br />Created By Technolane Web Designs 2007 Copr &copy; All Rights Reserved.</span></div>




<script type="text/jscript">
<![CDATA[ language="JScript" type="text/jscript" src="http://scripts.ediy.co.nz/scripts/NoIEActivate.js" // ]]></script>
</div>
</body>

</html>

Problem Now Fixed.

ahallicks
07-18-2007, 04:05 PM
It's something to do with the width of your wrapper... try setting it to 804px and you should see the border

CSSisthebest
07-18-2007, 04:29 PM
thanks that solved it :thumbsup:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum