Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations Westi on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Border round Div or is it a gap????

Status
Not open for further replies.

HOTLIPS

Technical User
Dec 5, 2000
55
GB
Hi

can anyone help.. I have set my page with 4 boxes using the div command and sizing them using % (percentage) for width... WHY do end up with a border round each box (or is it a gap between)

Hotlips
 
Hi
I enclose my code... u will see the gap between top 2 boxes... if I size in pixels everything is ok :-
<html><head><title>RoseBud Ceramics</title>
<link rel="stylesheet" type="text/css" href="wanzdw.css">
<script language=JavaScript src=catlist.js type=text/javascript></script>
<script language=JavaScript src=stdinc.js type=text/javascript></script>
<script language=JavaScript type=text/javascript>
</script>

</head><body>
<div style='position:absolute; left:0; top:0; width:22%; height:100; background:#339966'></div>
<div style='position:absolute; left:22%; top:0;width: 78%; height:100;background:#339966'></DIV>
<!-- div class=Main2 style='position:absolute; width:119; left:1; text-align:left; top:130; height:25'> -->

<!-- ***************** end top menu **************************************************** -->

<!--**************** create LEFT menu ********************************************** -->

<div class=main2 style='position:absolute; left:0; top:100; width:22%; height:100%; background:#FFFFFF'>
<br><a href='index2.htm'>Home</a><br>
<a href='stepbystep.htm'>Special Party</a><br>
<a href='index2.htm'>Let you Imagination blossom</a><br>
<a href='index2.htm'>Contact us</a><br>
<!-- CAPTION {color: blue; font-size=10pt} --></style> <!--- ******** STYLE ***** -->

</div>

<!-- ********* create MAIN section of page **************************************** -->
<div class=main2 style='position:absolute; left:21%; top:100; width:78%; height:100%'>
<table class=menu4 width 700>
<tr><td><br><br>Here at Rosebud Ceramics we have a vast selection of unfinished pottery in all shapes and sizes just waiting to be transformed<br></td></tr>
<tr><td><br>Whether painting your own personal design or with the help of our friendly staff and our extensive
selection of templates, stencils,stamps and other tools which are available, anyone of any age and ability can create a perfect, one of a kind
gift for any occasion or their very own masterpiece to show off at home</td></tr>

</table>
<!--- **************************************************************************************************** -->
</div>
</body>

</html>
Thanks
 
Take the margins off of your body:
Code:
<body style='margin: 0'>
Not sure why, but that seemed to make it better in IE. It looked just fine in Firefox though.

Also, specify units in your styles wherever you have values that are non-zero. For example, you have 'height: 100' in the top two divs and 'top: 100' in the other two. Make sure you specify pixels on these if that's what you intended.

You should also add a valid doctype to the top of your document and make sure it validates.

 
Hej Hotlips !!!

I allways use this body tag for my sites.

<body topmargin="0" leftmargin="0" marginheight="0" marginwidth="0"
bgcolor="#FFFFFF" text="#000000" link="#000000" alink="#000000" vlink="#000000">
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top