How to remove these white line (Border)

Report · Dec 22, 2022

Do you see the white lines under the brown ones? That's my problem. I think it's about border. Can you guys help me? I changed the value of border to 0 already But it still has white lines. If you want to ask more questions, you can tell me.

Report · Dec 22, 2022

when it in Dreamweaver it always fine i don't itttt

Report · Dec 23, 2022

@Nopparat27681655svs7,

Unfortunately, this looks like it was exported from Photoshop. The rigid table structure pulls apart creating unsightly empty spaces (not borders) between image slices.

I recommend ditching image-based navigation. It's not user-friendly and it's invisible to screen readers and language translators. More importantly, you don't need TABLES for any of this. Tables are for spreadsheets only. See screenshot.

Copy & paste this code into a new, blank document.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Vertical Navigation</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin: 0 auto;
width: 95%;
min-height: 100vh;
display: flex;
flex-direction: column;
background: #F2D2A2
}
nav {
width: 150px;
background: #F3DB56;
border: 10px solid goldenrod;
border-radius: 20px;
}
nav ul {
list-style: none;
padding: 0;
}
nav li a {
display: block;
line-height: 1.5;
font-size: 1.5rem;
text-align: center;
text-decoration: none;
color: #FFF;
text-shadow: 1px -2px 2px #000;
}
nav a:hover, nav a:active, nav a:focus {
color: rgba(0,0,0,1);
text-shadow: none;
text-decoration: underline;
}
.container { display: flex; }
main {
padding: 2%;
width: 70%
}
footer { padding: 2%; }
</style>
</head>

<body>
<div class="container">
<nav>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
</ul>
</nav>
<main>
<h3>Heading 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non sit quaerat excepturi rerum ipsum perferendis enim quas aperiam, ratione quasi at quae, fugit maiores dolorem modi esse, ea, nihil nesciunt.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non sit quaerat excepturi rerum ipsum perferendis enim quas aperiam, ratione quasi at quae, fugit maiores dolorem modi esse, ea, nihil nesciunt.</p>
</main>
</div>
<footer> Footer goes here... </footer>
</body>
</html>

Hope that helps. Post back if you have any questions.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Dec 22, 2022

The answer lies in the code. The best way for us to go through the code is to upload the file to a (temporary) online location.

In the meantime you could add the following style rule at the start of the style sheet.

* {
    padding: 0;
    margin: 0;
    border: 0;
}

This may mess up a few other styles, but at least you will have something to work with.

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

Report · Dec 23, 2022

thank you very much i will try it.

Report · Dec 23, 2022

It really looks like if you are using TABLE... are you ?

Report · Dec 23, 2022

yes I am using table But I didn't take a picture. I think it probably came directly from the boarder. But I just might not be able to find it.

Report · Dec 23, 2022

In that case, and in complement of what @BenPleysier has proposed, you can also set the border spacing to no space as using :

table {
    border-spacing: 0;
}

more infos on https://developer.mozilla.org/fr/docs/Web/CSS/border-spacing