The CSS top border is failing to display

For a school project, I've been attempting to add a top border to a set of hyperlinks in order to separate them from the title. However, after spending over an hour on this task, I still can't seem to get it to work.

Below is the CSS code for the #menu element that houses my hyperlinks:

#menu {
  color: #ffffff;
  padding: 10px 0px 10px 0px;
  text-align: center;
  border-top: 1px solid #669999;
}
<div id="menu"><br />
  <a href="#">HYPERLINK 1</a>  |  <br />
  <a href="#">HYPERLINK 2</a>  |  <br />
  <a href="#">HYPERLINK 3</a>  |  <br />
  <a href="#">HYPERLINK 4</a>  |  <br />
  <a href="#">HYPERLINK 5</a><br />
</div>

https://i.sstatic.net/j1H5g.png

This image shows how the layout currently appears. It may not be visually appealing, but I am following specific instructions for this assignment.

htmlcssborder

Answer №1

Ensure to include solid in the border property, otherwise, the default value will not be applied.

border-top: 1px solid #669999;

Double check that the initial values are set correctly:

https://developer.mozilla.org/en/docs/Web/CSS/border-top

Successful Implementation Example

#menu {
  color: #ffffff;
  padding: 10px 0px 10px 0px;
  text-align: center;
  border-top: 1px solid #669999;
}
<div id="menu">
  <a href="#">HYPERLINK 1</a> | 
  <a href="#">HYPERLINK 2</a> | 
  <a href="#">HYPERLINK 3</a> | 
  <a href="#">HYPERLINK 4</a> |
  <a href="#">HYPERLINK 5</a>
</div>

Avoid using &nbsp; for layout purposes. Instead, consider utilizing margin:

#menu {
  color: #ffffff;
  padding: 10px 0px 10px 0px;
  text-align: center;
  border-top: 1px solid #669999;
}

#menu a {
  margin: 10px;
}
<div id="menu">
  <a href="#">HYPERLINK 1</a> | 
  <a href="#">HYPERLINK 2</a> | 
  <a href="#">HYPERLINK 3</a> | 
  <a href="#">HYPERLINK 4</a> | 
  <a href="#">HYPERLINK 5</a>
</div>

Answer №2

There seems to be an issue with your border syntax, as it is missing the style attribute,

The correct format should be 

<border-width> || <border-style> || <color>

You can check the correct border syntax here

Notes

  • &nbsp; does not create spaces, use margin in CSS instead
  • I have shortened your padding and hex colors for brevity
body {
background: darkgreen
}
#menu {
color: #fff;
padding: 10px 0;
text-align: center;
border-top: 1px solid #699;
}
#menu a {
margin: 0 5px;
color:#fff
}
<div id="menu">
<a href="#">HYPERLINK 1</a>|
<a href="#">HYPERLINK 2</a>|
<a href="#">HYPERLINK 3</a>|
<a href="#">HYPERLINK 4</a>|
<a href="#">HYPERLINK 5</a>
</div>

Answer №3

The border-top property is missing the border-style attribute in your code snippet. To correct this issue, you can include the border style as shown below. If you need more information, you can refer to this link: https://developer.mozilla.org/en/docs/Web/CSS/border-top

#menu {
  ...
  border-top: 1px solid #669999;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Styling and Script Files on a JQuery Mobile Website

Is it necessary to include CSS and JS files in every HTML page for a mobile site developed with JQueryMobile? <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /> <script src="http://code.jquery.com/jqu ...

javascriptcssjquery-mobile

Any solutions for repairing the hyperlink within the modal class on Bootstrap 5?

I've created a template to display posts, each with its own post.id. There's also a button that triggers a modal, and the "yes" button within the modal should delete the post with the corresponding post.id that I clicked on. However, when I cli ...

htmldjangobootstrap-5

Ways to implement CSS styling for a particular HTML element

HTML: <div class="tagline">Web Portal Name</div><br /> <div id="logged_in_user_dtls" style="color:#FFF; margin-top:15px; font:bold; width:100%; position:relative; margin-left:800px;float:left;"&g ...

htmlcss

Issue with custom select functionality on Internet Explorer 9

Having some issues with a select element in IE9. The links that should open the wiki page are not functioning properly only on IE9, and there is also an issue with the hover effect - the icon gets overridden by the background color when hovering over help ...

htmlcssinternet-explorer-9

Learn how to create a stunning effect by combining two half images and revealing a full image upon hover with a smooth animation

I am struggling with implementing a specific feature using jQuery. I have designed a page hero with two sections (red and black): My goal is to have the black section expand over the red section when hovering, creating a full black box. I want the same ef ...

javascriptjqueryhtmlcss

Unable to link name with the corresponding latitude and longitude information

: I have a page that displays 15 LI items and I'm struggling to convert the complex nested HTML data into a simple JSON object containing the name, latitude, and longitude. Here's an example of how a single record should look: {name: "Pied a T ...

jqueryhtmljson

Utilizing Google Fonts offline without the need for an API

Instead of relying on Google Fonts API to access a variety of fonts for my website, I took matters into my own hands. I downloaded a snapshot of fonts from this GitHub repository: https://github.com/google/fonts and transferred them to my web directory. T ...

phpjquerycssjsonfonts

Container slide-show fill error

I'm attempting to create a slide show with an overlapping caption that appears when hovering over the container or image. The image needs to fit exactly inside the container so no scroll bar is shown and the border radius is correct. I managed to achi ...

javascripthtmlcsscontainers

The horizontal rule element is not displaying

My <hr> element seems to be hidden. This is the HTML code: <div id="line"><hr /></div> And this is the CSS code: hr { border: 0; width: 96%; color: #FFFF00; height: 1px; } #line { float: left; width: 73 ...

htmlcss

show information from json onto an html page with the help of jquery

I'm looking to showcase buttons from a JSON file within a simple block. Here's the JSON data for movies: { "movies": [ { "title": "Mena", "movieid": "1", ...

javascriptjqueryhtmljson

I require the flexbox children to be arranged in a regular manner

How can we set flexbox children to default layout behaviors? Let's make them behave like the disobedient kids they are. .wrapper { This should be a row } .column { Make all heights equal display: flex; } .child { Back to regular display...wit ...

cssflexboxchildren

Issue with enlarging images using UL and LI tags persists

After implementing the code for a simple image enlarge feature (showing a QR code image when the user hovers over the icon), I noticed an issue. Interestingly, the same code is used on two designs, but it's not working on one of them. To view the pr ...

htmlcss

Detecting the preferential usage of -webkit-calc instead of calc through JavaScript feature detection

While it's commonly advised to use feature detection over browser detection in JavaScript, sometimes specific scenarios call for the latter. An example of this can be seen with jQuery 1.9's removal of $.browser. Despite the general recommendatio ...

javascriptcssfeature-detection

Having trouble with custom padding for b-sidebar in VueJS?

I am struggling with adding padding to the sidebar using bootstrap-vue. When I attempt to add padding in the browser devtools, it works perfectly fine. However, when trying to implement the same code, it doesn't reflect on the actual webpage. I tried ...

cssvue.jspaddingsidebar

Use this jQuery-animated menu to make hyperlinks hover with style!

Currently immersed in my exam project, I have integrated an animated jQuery navigation. I am aiming to set the text color to white when hovering over both the link itself and the menu icon that appears upon hovering over the <li> elements. Despite ...

javascriptjqueryhtmlcssnavigation

What is the best way to alter the text of a button when the mouse hovers over it?

I'm looking to create a button that can dynamically change the text inside it when the cursor hovers over it, and then revert back to the original text when the cursor moves away from it. I attempted this in VScode using "document.getElementById().inn ...

javascripthtmlcssbutton

Utilizing Dynamic Dropdown Selected Value in PHP

Help with PHP/HTML: I have added the list of all countries to the add/edit page. However, on the edit page, I need the selected value in the dropdown. Can someone please assist me? <select class="form-control" id="country_list" name="country"> ...

phphtml

Issue with transition duration not affecting bootstrap button functionality

I am attempting to incorporate a transition effect on specific bootstrap buttons. The issue lies with the height and width properties. They change instantly without taking into account the transition duration property. Keep in mind that all other propert ...

cssbootstrap-4css-transitions

Arrangements of lines in website design for various screen resolutions

I am having an issue with the layout I'm working on - specifically, there is a visible outline of the div boxes at certain resolutions or when zooming in. This is what it should look like: However, this is how it appears at some resolutions or when ...

htmlcsslayoutweb

Nested divs with inline formatting

On my HTML page, I have the following structure: <div id="frst"> FIRST </div> <div id="top"> <div id="mid"> <div id="bottom"> <ul class="menu"> <li>A</li> ...

csshtmlinline