Skip to main content
Participant
December 23, 2022
Question

How to remove these white line (Border)

  • December 23, 2022
  • 3 replies
  • 1033 views

 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.

This topic has been closed for replies.

3 replies

Community Expert
December 23, 2022

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

Participant
December 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.

BenPleysier
Community Expert
Community Expert
December 23, 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!
Participant
December 23, 2022

thank you very much i will try it.

Participant
December 23, 2022

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

Nancy OShea
Community Expert
Community Expert
December 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