Hi all,

 

I'm creating my first website. Between the the lilac part and the white box (div) is a line 1px, had the colour of the blue background. I tried a lot but it doesn't disappear. I attached a screenshot. How can I make the white part being next to the lilac part without any border between?

 

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

<html>

<head>

<meta http-equiv="content-type" content="text/html; charset=windows-1250">

<meta name="generator" content="PSPad editor, www.pspad.com">

<title>YIDI CSS</title>

 

<style type="text/css">

<!--

body {background-color:#6666FF;

font-family:verdana;

font-size:75%;}

 

table.pictures {border-collapse:collapse;

width:55em;

background: #f5f5f5;}

 

table.infoandmap {border-collapse:collapse;

width:55em;

background: #f5f5f5;

border: 1px solid #c69;

margin-top:1em;}

 

table.lilac {border-collapse:collapse;}

 

table.information {}

 

div.whitebox {text-align:left;

background-color:#f5f5f5;

padding:1em;

width:80em;}

 

div.lilac {text-align:buttom;

background-color:#5D0866;

padding:1em;

width:87em;

height:5em;}

 

td.pictures {width:10em;

height:5em;

text-align:center;

border: 1px solid #c69;}

 

td.map {text-align:right;

padding-right:1em;}

 

td.information {vertical-align:text-top;}

 

td.country {width: 10em;

height: 5em;

text-align: left;

vertical-align: text-top;

border: 1px solid #c69;}

 

td.hidden {border: 1px solid #f5f5f5;

border-right-color:#c69;

border-left-color:#c69;}

 

td.lilac {text-align:right;

padding:1em;

background-color:#5D0866;

width:7em;

height:auto;}

 

td img {width:9em;

height:4em;}

-->

</style>

</head>

<body>

 

<div class="lilac"></div>

<table class="lilac">

<tr>

<td class="lilac"></td>

<td>

<div class="whitebox">

<table class="pictures">

<tr>

<td class="country">

<b>COUNTRY</b>

</td>

<td class="hidden">

 

</td>

<td class="pictures">

<img src="path" alt="PICTURE 1" />

</td>

<td class="pictures">

<img src="path" alt="PICTURE 2" />

</td>

<td class="pictures">

<img src="path" alt="PICTURE 3" />

</td>

<td class="pictures">

<img src="path" alt="FLAG" />

</td>

</tr>

</table>

<table class="infoandmap">

<tr>

<td class="information">

<!--TABLE with country information-->

<table class="information">

<tr>

<td><b>Capital:</b></td> <!--Capital:-->

<td>Santiago</td>

</tr>

<tr>

<td><b>Continent:</b></td> <!--Continent:-->

<td>South America</td>

</tr>

<tr>

<td><b>Currency:</b></td> <!--Currency:-->

<td>Chilean Peso</td>

</tr>

</table>

<!--end of TABLE with country information-->

</td>

<td class="map">

<!--MAP-->

<img style="width:auto; height:auto;"

src="C:\Documents and Settings\y9098kc4\My Documents\My Pictures\Mood-Swings.jpg"

alt="MAP" />

</td>

</tr>

</table>

</div>

<td>

</tr>

</table>

</body>

</html>

<style type="text/css">
<!--
  body {background-color:#6666FF; 
        font-family:verdana; 
        font-size:75%;}

  table.pictures {border-collapse:collapse;  
                  width:55em;
                  background: #f5f5f5;}

  table.infoandmap {border-collapse:collapse;  
                    width:55em;
                    background: #f5f5f5;
                    border: 1px solid #c69;
                    margin-top:1em;}

  table.lilac {border-collapse:collapse;}                  

  table.information {}                                   

  div.whitebox {text-align:left;
                background-color:#f5f5f5;              
                padding:1em;
                width:80em;}

  div.lilac {text-align:buttom;
             background-color:#5D0866;              
             padding:1em;
             width:87em;
             height:5em;}                                               

  td.pictures {width:10em;
              height:5em;
               text-align:center;
               border: 1px solid #c69;}

  td.map {text-align:right;
          padding-right:1em;} 

  td.information {vertical-align:text-top;}                    

  td.country {width: 10em;
             height: 5em;
              text-align: left;
              vertical-align: text-top;
              border: 1px solid #c69;}    

  td.hidden {border: 1px solid #f5f5f5;
             border-right-color:#c69;
             border-left-color:#c69;}

  td.lilac {text-align:right;
            padding:1em;
            background-color:#5D0866;
            width:7em;
            height:auto;}                

  td img {width:9em; 
          height:4em;}                      
-->      
</style>

<div class="lilac"></div>
<table class="lilac">
<tr>
<td class="lilac"></td>
<td>
<div class="whitebox">
<table class="pictures">
<tr>
<td class="country">
<b>COUNTRY</b>
</td>
<td class="hidden">

</td>

 

Hi!

 

It is a big mess like that. Why do you use tables there? I think you should read more about CSS. I prefer link the style sheets. When you use internal styles you get a lot of work when you change something. Is the site will be yours or you do it for someone else? I think you should recode it without tables...

 

Regards

Hi,

 

I have also the same opinion of our friend Szitar.

Recode your HTML, use only tables for data that requires tables. Semantic is important .

 

Regards

If you need it asap i can code it for a small price.

I agree with the guys above, DIVS are the new black. I spent all my younger years designing in tables and become a master at it only to go to school this year and find out they are not the correct method. /sigh

 

Either way below is the code that fixes your problem.

 

Remember with Tables you must give them all border 0 spacing 0 so you won't get that 1px

 

Hope this helps

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title>YIDI CSS</title>

<style type="text/css">
<!--
body {background-color:#6666FF;
font-family:verdana;
font-size:75%;}

table.pictures {border-collapse:collapse;
width:55em;
background: #f5f5f5;}

table.infoandmap {border-collapse:collapse;
width:55em;
background: #f5f5f5;
border: 1px solid #c69;
margin-top:1em;}

table.lilac {border-collapse:collapse;}

table.information {}

div.whitebox {text-align:left;
background-color:#f5f5f5;
padding:1em;
width:80em;}

div.lilac {text-align:buttom;
background-color:#5D0866;
padding:1em;
width:87em;
height:5em;}

td.pictures {width:10em;
height:5em;
text-align:center;
border: 1px solid #c69;}

td.map {text-align:right;
padding-right:1em;}

td.information {vertical-align:text-top;}

td.country {width: 10em;
height: 5em;
text-align: left;
vertical-align: text-top;
border: 1px solid #c69;}

td.hidden {border: 1px solid #f5f5f5;
border-right-color:#c69;
border-left-color:#c69;}

td.lilac {text-align:right;
padding:1em;
background-color:#5D0866;
width:7em;
height:auto;}

td img {width:9em;
height:4em;}
-->
</style>
</head>
<body>

<div class="lilac"></div>
<table border="0" cellpadding="0" cellspacing="0" class="lilac">
<tr>
<td class="lilac"></td>
<td>
<div class="whitebox">
<table class="pictures">
<tr>
<td class="country">
<b>COUNTRY</b>
</td>
<td class="hidden">

</td>
<td class="pictures">
<img src="path" alt="PICTURE 1" />
</td>
<td class="pictures">
<img src="path" alt="PICTURE 2" />
</td>
<td class="pictures">
<img src="path" alt="PICTURE 3" />
</td>
<td class="pictures">
<img src="path" alt="FLAG" />
</td>
</tr>
</table>
<table class="infoandmap">
<tr>
<td class="information">
<!--TABLE with country information-->
<table class="information">
<tr>
<td><b>Capital:</b></td> <!--Capital:-->
<td>Santiago</td>
</tr>
<tr>
<td><b>Continent:</b></td> <!--Continent:-->
<td>South America</td>
</tr>
<tr>
<td><b>Currency:</b></td> <!--Currency:-->
<td>Chilean Peso</td>
</tr>
</table>
<!--end of TABLE with country information-->
</td>
<td class="map">
<!--MAP-->
<img style="width:auto; height:auto;"
src="C:\Documents and Settings\y9098kc4\My Documents\My Pictures\Mood-Swings.jpg"
alt="MAP" />
</td>
</tr>
</table>
</div>
<td>
</tr>
</table>
</body>
</html>