Advanced HTML/CSS serious bug

Question

Link to the example stated:

https://cislinux.hfcc.edu/~jdcline/cis122/homework-2/hw2html.html

I'm hoping you are able to solve this problem as both my professor and I couldn't figure it out. I'm taking CIS122 in college, this is my Homework-2 assignment. I finished all the requirements for the assignment and now I'm just working on the extra credit, I've done most of the work, the problem is a bug that I keep running into. Let me explain:

When you run the code into a browser (I use google chrome) the page pops up, in the nav section you see my previous assignment and a link to the current assignment I'm doing. Obviously, this is just a navigator to my other homework and I'll update it with my future homework. But when you hover over "Client Server" the .hover doesn't work as it does with the "Hosting Domain" hover.

It's supposed to turn dark red with ivory colored letters but it doesn't work. Sometimes when you readjust the browser it allows you to click the .hover if you click in the bottom center sweet spot. So this was causing me a giant issue so I decided to leave it alone and try working on something else. I started working on my "Profile" link and I added a line of code, I added [ float:right; ] just so my profile tab would work better. I added this line to code to the following:

aside ul li {
display:inline-block;
background-color: grey;
float:right;
}

So when I added this line of code float:right; I realized that the "Profile" bar is now hugging the right side which is what I wanted but now when I hovered over "Profiles" the GitHub/Sololearn bar overlapped over the profiles tab and this caused more frustration, but I noticed that now when I hovered over the Client Server tab in the nav, it worked just fine and the Darkred background and ivory letters worked again like normal, so this simple line of code float:right fixed my nav tab which is great but now overlapped onto my "Profile" tab in the aside section, does somebody have an idea on how I am able to fix both issues, I need my "Client Server" tab in the nav to work as it's part of the extra credit, but I also want my Profile tab to work as I need a profile tab also?

(An about section which I picked profile) I don't think this is a easy fix like most of my other questions are, my professor couldn't figure it out either, granted he only looked for around 5 minutes but no matter what I do this bug is causing me frustration and I've tried just about everything, other students didn't do as much so I don't have other work to base it off of, I know a dedicated programmer out there can figure this out but right now I'm clueless.

 


Homework #2: HTML, CSS, Semantic and Responsive Page Layout,     Domain                     Names, and Web Hosting



 

 

CIS 122 Projects





    
        Client Server
    
    
        Hosting Domain
    



    Domain Names and Web Hosting
    
    
        
            GoDaddy
            HostGator    
            NameCheap    
        
        
            GoDaddy is a domain registrar and web hosting service, known for their cheap domain names and their web hosting service that they offer.
            HostGator is a web hosting service and provider of shared, reseller, vps. They include all of the following: Cloud Hosting/WordPress Hosting/VPS Hosting/Dedicated Hosting.
            NameCheap is an ICANN-accredited registrar, they provide domain name registration and web hosting.
        
    
    If your interested in buying a .com web domain from GoDaddy, the prices are the following: For 5 years it would cost you $62.95, the price is $2.99 for the first year and $14.99 for every year after that.
    The domain name musicsales.com was bought using the service: Network Solutions, LLC. The domain name expires on 2021-08-24 
    If you want to buy the domain name musicsales.info it could cost you around $4.88, some websites like GoDaddy/NameCheap charges cheaper but they force you to get a plan 

    
         Newer TLDs of 2018
        
            .basketball
            .book
            .luxe
        
        
            .fan
            .arab
            .broker
        
        
            .hotel
            .phd
            .scholarships
        
    
    Webhosting at Bluehost.com will cost around $2.95/month*, this could vary though. The orginal starting price was $7.99, this changed to $3.95 and then changed again to it's final price of $2.95/month* 

     
        Test 
        Test 
        Test 
    
    
        Test 
        Test 
        Test 
    
    
        Test 
        Test 
        Test 
    
    
        Test 
        Test 
        Test 
     




    
        Profiles
        
            Sololearn
            GitHub
        



    _{CIS 122 Web Internet Technologies}
    

    _{Copyright © 2018 Joe Cline}

body {
margin: 0;
color: #000;
background: Ivory;
font-family:Andale Mono, monospace;
}
#CIS {
margin:0;
font-weight:500;
border:darkred solid;
border-radius: 25px;
font-family:Andale Mono,monospace;
}
header {
background-color: black;
color: white;
text-align: center;
padding: 16px;
}
footer {
clear: both;
padding: 16px;
background-color: #000;
color: white;
text-align: center;
font-size: 12px;
font-family:"Arial Black", Gadget, 
}
@media only screen 
and (min-device-width: 480px)
and (min-width: 700px)    
{
section {
    float: left;
    width: 70%;
}
nav {
    float: left;
    width: 15%;
}
}


.navbase1 {
overflow: hidden;
background-color: grey;
}
.navbase1 a  {
float: left;
display:block;
color: black;
text-align:center;
padding: 15px 15px;
text-decoration: none;
font-size: 20px;
}
.navbase1 a:hover {
background-color: darkred;
color:Ivory;
}    

.navbase {
overflow: hidden;
background-color: grey;
}
.navbase a {
float: left;
display:block;
color: black;
text-align:center;
padding: 15px 15px;
text-decoration: none;
font-size: 20px;
}
.navbase a:hover {
background-color: darkred;
color:Ivory;
}

#sub {
color:Ivory;
font-size:12px;
font-family:"Arial Black", Gadget, sans-serif;
}
#sub3 {
color:Ivory;
font-weight:900;
font-size:12px;
font-family:"Arial Black", Gadget, sans-serif;
}
#DN {
text-align:center;
}
#PDN {
text-align:center;
}
tr, td, th { 
padding: 20px; 
border: solid 5px black;
text-align: center;
background:Ivory;
font-family:Andale Mono, monospace;
}
table {
border:none;
}
#GD {
color:darkred;
text-decoration: none;
font-size:20px;
}
#HG {
color:darkred;
text-decoration: none;
font-size:20px;
}
#NC {
color:darkred;
text-decoration: none;
font-size:20px;
}
#price {
border-radius: 25px;
border: 4px solid black;
padding: 20px; 
}
#TLD {
padding: 20px; 
text-align: center;
background:Ivory;
font-family:Andale Mono, monospace;
}
h3 {
text-align:center;
}
#musicsale {
border-radius: 25px;
border: 4px solid black;
padding: 20px;
}
#musicsaleinfo {
border-radius: 25px;
border: 4px solid black;
padding: 20px;
}
#bluehost {
border-radius: 25px;
border: 4px solid black;
padding: 20px;
}
#list-1 {
width:320px;
font-style:italic;
font-family:Georgia, Times, serif;
font-size:24px; 
color:darkred;
display:block;
}
#list-2 {
width:320px;
font-style:italic;
font-family:Georgia, Times, serif;
font-size:24px;
color:darkred;
display:block;
}
#list-3 {
width:320px;
font-style:italic;
font-family:Georgia, Times, serif;
font-size:24px; 
color:darkred;
display:block;
}
#list-4 {
width:320px;
font-style:italic;
font-family:Georgia, Times, serif;
font-size:24px; 
color:darkred;  
display:block;
}
ul {
list-style-type: square;
}
ol {
list-style-type: decimal;
}
#list1{
font-size:15px;
border-left: 1px solid darkred;
display:block;
padding:8px;
}
#list2{
font-size:15px;
display:block;
padding:8px;
border-left: 1px solid darkred;
}
#list3{
font-size:15px;
display:block;
padding:8px;
border-left: 1px solid darkred;
}
#list4 {
font-size:15px;
display:block;
padding:8px;
border-left: 1px solid darkred;
}
#list5 { 
font-size:15px;
display:block;
padding:8px;
border-left: 1px solid darkred;
}
#list6 {
font-size:15px;
display:block;
padding:8px;
border-left: 1px solid darkred;
}
#list7 { 
font-size:15px;
display:block;
padding:8px;
border-left: 1px solid darkred;
}
#list8 {
font-size:15px;
display:block;
padding:8px;
border-left: 1px solid darkred;
}
#list9 {
font-size:15px;
display:block;
padding:8px;
border-left: 1px solid darkred;
}
#list10 {
font-size:15px;
display:block;
padding:8px;
border-left: 1px solid darkred;
}
#list11 {
font-size:15px;
display:block;
padding:8px;
border-left: 1px solid darkred;
}
#list12 {
font-size:15px;
display:block;
padding:8px;
border-left: 1px solid darkred;
}

aside ul {
padding:0;
margin:0;
list-style: none;
position: relative;
}
aside ul li {
display:inline-block;
background-color: grey;    
}
aside a {
display:block;
padding:0 80;
color:Black;
font-size:20px;
line-height: 60px;
text-decoration:none;
}

aside a:hover {
background-color:darkred;
color:Ivory;
}
aside ul ul {
display: none;
position: absolute;
top: 100%;
}
aside ul li:hover > ul {
display:inherit;
}
aside ul ul li {
min-width:170px;
display:list-item;
position: relative;
}
#title1 {
height:1px;
}
#GDtd {
color:darkred;
font-size:16px;
font-weight:bold;
}
#HGtd {
color:darkred;
font-weight:bold;
font-size:16px;
}
#NCtd {
color:darkred;
font-weight:bold;
font-size:16px;
}
#WDN {
height:2px;
font-size:20px;
}

Update

Thank you, everybody, for helping me solve my issue, I finally got an answer that helped me solve my issue. It was so stupid and simple and I deeply appreciate all of you guys for answering my post but also viewing it so it was able to get solved.

Obsidian Age · Accepted Answer

The problem is that your

on top

Client Server

not

Hosting Domain

Client Server

To correct this, simply remove position: relative from your aside ul:

body {
  margin: 0;
  color: #000;
  background: Ivory;
  font-family: Andale Mono, monospace;
}

#CIS {
  margin: 0;
  font-weight: 500;
  border: darkred solid;
  border-radius: 25px;
  font-family: Andale Mono, monospace;
}

header {
  background-color: black;
  color: white;
  text-align: center;
  padding: 16px;
}

footer {
  clear: both;
  padding: 16px;
  background-color: #000;
  color: white;
  text-align: center;
  font-size: 12px;
  font-family: "Arial Black", Gadget,
}

@media only screen and (min-device-width: 480px) and (min-width: 700px) {
  section {
    float: left;
    width: 70%;
  }
  nav {
    float: left;
    width: 15%;
  }
}

.navbase1 {
  overflow: hidden;
  background-color: grey;
}

.navbase1 a {
  float: left;
  display: block;
  color: black;
  text-align: center;
  padding: 15px 15px;
  text-decoration: none;
  font-size: 20px;
}

.navbase1 a:hover {
  background-color: darkred;
  color: Ivory;
}

.navbase {
  overflow: hidden;
  background-color: grey;
}

.navbase a {
  float: left;
  display: block;
  color: black;
  text-align: center;
  padding: 15px 15px;
  text-decoration: none;
  font-size: 20px;
}

.navbase a:hover {
  background-color: darkred;
  color: Ivory;
}

#sub {
  color: Ivory;
  font-size: 12px;
  font-family: "Arial Black", Gadget, sans-serif;
}

#sub3 {
  color: Ivory;
  font-weight: 900;
  font-size: 12px;
  font-family: "Arial Black", Gadget, sans-serif;
}

#DN {
  text-align: center;
}

#PDN {
  text-align: center;
}

tr,
td,
th {
  padding: 20px;
  border: solid 5px black;
  text-align: center;
  background: Ivory;
  font-family: Andale Mono, monospace;
}

table {
  border: none;
}

#GD {
  color: darkred;
  text-decoration: none;
  font-size: 20px;
}

#HG {
  color: darkred;
  text-decoration: none;
  font-size: 20px;
}

#NC {
  color: darkred;
  text-decoration: none;
  font-size: 20px;
}

#price {
  border-radius: 25px;
  border: 4px solid black;
  padding: 20px;
}

#TLD {
  padding: 20px;
  text-align: center;
  background: Ivory;
  font-family: Andale Mono, monospace;
}

h3 {
  text-align: center;
}

#musicsale {
  border-radius: 25px;
  border: 4px solid black;
  padding: 20px;
}

#musicsaleinfo {
  border-radius: 25px;
  border: 4px solid black;
  padding: 20px;
}

#bluehost {
  border-radius: 25px;
  border: 4px solid black;
  padding: 20px;
}

#list-1 {
  width: 320px;
  font-style: italic;
  font-family: Georgia, Times, serif;
  font-size: 24px;
  color: darkred;
  display: block;
}

#list-2 {
  width: 320px;
  font-style: italic;
  font-family: Georgia, Times, serif;
  font-size: 24px;
  color: darkred;
  display: block;
}

#list-3 {
  width: 320px;
  font-style: italic;
  font-family: Georgia, Times, serif;
  font-size: 24px;
  color: darkred;
  display: block;
}

#list-4 {
  width: 320px;
  font-style: italic;
  font-family: Georgia, Times, serif;
  font-size: 24px;
  color: darkred;
  display: block;
}

ul {
  list-style-type: square;
}

ol {
  list-style-type: decimal;
}

#list1 {
  font-size: 15px;
  border-left: 1px solid darkred;
  display: block;
  padding: 8px;
}

#list2 {
  font-size: 15px;
  display: block;
  padding: 8px;
  border-left: 1px solid darkred;
}

#list3 {
  font-size: 15px;
  display: block;
  padding: 8px;
  border-left: 1px solid darkred;
}

#list4 {
  font-size: 15px;
  display: block;
  padding: 8px;
  border-left: 1px solid darkred;
}

#list5 {
  font-size: 15px;
  display: block;
  padding: 8px;
  border-left: 1px solid darkred;
}

#list6 {
  font-size: 15px;
  display: block;
  padding: 8px;
  border-left: 1px solid darkred;
}

#list7 {
  font-size: 15px;
  display: block;
  padding: 8px;
  border-left: 1px solid darkred;
}

#list8 {
  font-size: 15px;
  display: block;
  padding: 8px;
  border-left: 1px solid darkred;
}

#list9 {
  font-size: 15px;
  display: block;
  padding: 8px;
  border-left: 1px solid darkred;
}

#list10 {
  font-size: 15px;
  display: block;
  padding: 8px;
  border-left: 1px solid darkred;
}

#list11 {
  font-size: 15px;
  display: block;
  padding: 8px;
  border-left: 1px solid darkred;
}

#list12 {
  font-size: 15px;
  display: block;
  padding: 8px;
  border-left: 1px solid darkred;
}

aside ul {
  padding: 0;
  margin: 0;
  list-style: none;
  /*position: relative;*/
}

aside ul li {
  display: inline-block;
  background-color: grey;
}

aside a {
  display: block;
  padding: 0 80;
  color: Black;
  font-size: 20px;
  line-height: 60px;
  text-decoration: none;
}

aside a:hover {
  background-color: darkred;
  color: Ivory;
}

aside ul ul {
  display: none;
  position: absolute;
  top: 100%;
}

aside ul li:hover>ul {
  display: inherit;
}

aside ul ul li {
  min-width: 170px;
  display: list-item;
  position: relative;
}

#title1 {
  height: 1px;
}

#GDtd {
  color: darkred;
  font-size: 16px;
  font-weight: bold;
}

#HGtd {
  color: darkred;
  font-weight: bold;
  font-size: 16px;
}

#NCtd {
  color: darkred;
  font-weight: bold;
  font-size: 16px;
}

#WDN {
  height: 2px;
  font-size: 20px;
}





  Homework #2: HTML, CSS, Semantic and Responsive Page Layout, Domain Names, and Web Hosting
  
  
  
  



  
    CIS 122 Projects
  

  

  
    
      Client Server
    
    
      Hosting Domain
    
  

  
    Domain Names and Web Hosting
    
    
      
        GoDaddy
        HostGator 
        NameCheap 
      
      
        GoDaddy is a domain registrar and web hosting service, known for their cheap domain names and their web hosting service that they offer.
        HostGator is a web hosting service and provider of shared, reseller, vps. They include all of the following: Cloud Hosting/WordPress Hosting/VPS Hosting/Dedicated Hosting.
        NameCheap is an ICANN-accredited registrar, they provide domain name registration and web hosting.
      
    
    If your interested in buying a .com web domain from GoDaddy, the prices are the following: For 5 years it would cost you $62.95, the price is $2.99 for the first year and $14.99 for every year after that.
    The domain name musicsales.com was bought using the service: Network Solutions, LLC. The domain name expires on 2021-08-24 
    If you want to buy the domain name musicsales.info it could cost you around $4.88, some websites like GoDaddy/NameCheap charges cheaper but they force you to get a plan 

    
       Newer TLDs of 2018
        
          .basketball
          .book
          .luxe
        
        
          .fan
          .arab
          .broker
        
        
          .hotel
          .phd
          .scholarships
        
    
    Webhosting at Bluehost.com will cost around $2.95/month*, this could vary though. The orginal starting price was $7.99, this changed to $3.95 and then changed again to it's final price of $2.95/month* 

    
      
        Test 
      
      
        Test 
      
      
        Test 
      
    
    
      
        Test 
      
      
        Test 
      
      
        Test 
      
    
    
      
        Test 
      
      
        Test 
      
      
        Test 
      
    
    
      
        Test 
      
      
        Test 
      
      
        Test 
      
    

  

  
    
      Profiles
        
          Sololearn
          GitHub
        
  

  
    _{CIS 122 Web Internet Technologies}
    

    _{Copyright © 2018 Joe Cline}

You also have invalid markup (you're missing the closing in your table, and the closing

), though this is not responsible for your problem. It may pay to run your code through a validator like W3C though :)

As an aside, I wouldn't consider this 'advanced' by any means -- it both shocks and saddens me to hear that your university professor was unable to diagnose this issue.

Advanced HTML/CSS serious bug

Update

Answers (2)

Related Questions