[FIXED] how do I make all my paragraphs of list, align the same

Issue

I have two paragraphs with ordered lists, but on my website, the paragraphs are not on the same line going vertically. Its a very slight difference but I need to fix it. I've tried changing the margins in the CSS but both of the paragraphs move at the same time. The second paragraph is more to the right than the first paragraph, I need it to align with the first paragraph.

here is the code

    <div id="content">
          <div class="content_item">
            
            <br />
<h1> Conference/Workshop Publications </h1>
<ol>

<br /><li>Deb, D., Jones, E., "University-wide Adoption of Data Science", 51th ACM SIGCSE Conference, February 2020.<a href="https://doi.org/10.1145/3328778.3372657">
Link</a></li>


<br /><li>Deb, D., Smith, R. M., and Fuad, M, "Infusing Data Science Across Disciplines", In Proceedings of the 2019 ACM Conference on Innovation and Technology in Computer Science Education (ITiCSE), July 2019.<a href="https://doi.org/10.1145/3304221.3325579">
Link</a></li>

<br /><li>Deb, D., Fuad, M., Irwin, K., "A Module-based Approach to Teaching Big data and Cloud Computing Topics at CS Undergraduate Level", In the Proceedings of the SIGCSE '19: the 50th ACM Technical Symposium on Computer Science Education, February, 2019.<a href="https://doi.org/10.1145/3287324.3287494">
Link</a></li>

<br /><li>Deb, D., Cousins, S., Fuad, M., "Teaching Big Data and Cloud Computing: A Modular Approach", In the Proceedings of the 32nd IEEE International Parallel and Distributed Processing Symposium Workshops (IPDPSW), May, 2018.<a href="https://ieeexplore.ieee.org/document/8425437">
Link</a></li>

<br /><li>Deb, D., "On the Integration of Big Data and Cloud Computing Topics”, 48th ACM SIGCSE, March 2017.<a href="https://doi.org/10.1145/3017680.3022436">
Link</a></li>
</ol>

<!--close button_small--> </div>
            <!--close content_container-->



<div id="content">
          <div class="content_item">
            
<h1> Student Poster/Presentation </h1>
<ol>

<br /><li>Fields, M., Deb, D., “Use of Machine Learning Methods for Vehicle Predictive Maintenance”, Oral presentation at 2020 NSF/AAAS Emerging Researchers National Conference (ERN) in STEM, February 2020. <a href= "content/FieldsERN2020.pdf">Abstract</a>
</br>

<br /><li>Rodrigues-Romero, D., Deb, D., “Stock Price Prediction using Ensemble Learning”, Poster presentation at 2020 NSF/AAAS Emerging Researchers National Conference (ERN) in STEM, February 2020. <a href= "content/DavidERN2020.pdf">Abstract</a>
</br>

<br /><li>Rodrigues-Romero, D., Deb, D., “Using Sentiment of News Articles to Predict Stock Price Performance”, Poster presentation at 2019 NSF/AAAS Emerging Researchers National Conference (ERN) in STEM, February 2019. <a href= "content/DavidERN2019.pdf">Poster (pdf)</a> 
</br>

<br /><li>Robert, J., Deb, D., “Data Science for Understanding and Assessing Spatial Justice”, Poster presentation at 2019 NSF/AAAS Emerging Researchers National Conference (ERN) in STEM, February 2019.<a href= "content/RobertERN2019.pdf">Poster (pdf)</a> 
</br>

<br /><li>Cousins, S., Deb, D., “Large-scale Workload Characterization in Apache Spark Framework”, Oral presentation at 2018 NSF/AAAS Emerging Researchers National Conference (ERN) in STEM, February 2018. <strong>(Awarded First Prize in the Undergraduate Computer Science Research Category)</strong>.<a href= "content/CousinsERN2018.pdf">Abstract</a>
</br>

<br /><li>Mathis, G., Cousins S., Deb D., “Music Mood Classification based on Lyrics”, Poster presentation at 2018 NSF/AAAS Emerging Researchers National Conference (ERN) in STEM, February 2018.<a <a href="content/George-ERN2018poster.pdf">Poster (pdf)</a></li>


<br /><li>Cousins, S., Deb, D., “Explore Spark-SQL and its performance using TPC-H Workload”, Poster presented at NC-LSAMP Annual Undergraduate Research Conference, NC state university, November 2017. <strong>(Awarded second prize in Computer Science research category)</strong>.<a href="content/Sebastian-NSLamps2018poster.pdf">Poster (pdf)</a></li>


<br /><li>Harp. N, Deb, D., “Sentiment Analysis of Tweets and Movie Reviews”. Poster presented at WSSU Scholarship day, April. 2017.<a href="content/NoelleAbstract.pdf">Abstract</a>, <a href="content/NoellePoster.pdf">Poster (pdf)</a></li>


<br /><li>Cousins, S., Deb, D., “Using Apache Spark in the Analysis of Wikipedia Page View Data in Correlation to the Real World Events”, Poster presented at WSSU Scholarship day, April. 2017<a href="content/SebastianAbstract.pdf">Abstract</a>, <a 
href="content/SebastianPoster.pdf">Poster (pdf)</a></li>

</ol>



            <div class="content_container"> </div>
            <!--close content_container-->

and here is the CSS

    #content
{ font: normal 100% Arial, Helvetica, sans-serif;
  width: 680px;
  margin: 0 0 20px 10px;
  float: left;
  }

.content_item
{ width: 680px;
  margin-top: .01px;
  margin-bottom: .01px;
margin-left: auto;
text-align: justify;
  text-justify: inter-word;
line-height: 1.5;
}

Solution

You hava few issues:

1. first content div is not closed
2. you have several </br> instead of </li> (br tags dont need to be closed)
3. you are missing a </div> at the end

Here is a jsfiddle where everything works fine: https://jsfiddle.net/2tbgf8qx/

Answered By - Nachshon Schwartz

Answer Checked By - David Marino (PHPFixing Volunteer)

Read More

[FIXED] How to get rid of the <hr> vertical spacing?

Issue

TLDR: click the bottom image and my noob problem becomes immediately evident.

---

Hi, all

I have two <div> elements that I want to separate with a <hr class="separator"> element.

The CSS code for the <hr class="separator"> element is as follows:

hr.separator {
    border-top: 1px solid black;
    margin-top: 70px;
    margin-bottom: 0;
    padding: 0;
}

The CSS code for the bottom <div class="brown"> element is as follows:

div.brown{
    margin-top: 0;
    padding-top: 70px;
    background-color: #ce9771;
}

In the HTML code, these elements are set like this:

<div> upper div \<div>
<hr>
<div> bottom div \<div>

Still, I have a vertical whitspace (about 3px) between them. I've already tried to set all margins and padding to "0", and even played around with making the <hr>a child of each <div>and playing around with the position attribute (which invariably made the <hr>disappear).... Can anyone help a newbie here?

Solution

With:

hr.separator {
    border-top: 1px solid black;
    margin-top: 70px;
    margin-bottom: 0;
    padding: 0;
}

you only set/change the top border but the hr could also have other borders.

So first remove all borders with border: none; and then set the top border:

hr.separator {
    border: none;
    border-top: 1px solid black;
    margin-top: 70px;
    margin-bottom: 0;
    padding: 0;
}

div.brown{
    margin-top: 0;
    padding-top: 70px;
    background-color: #ce9771;
}

<hr class="separator">
<div class="brown">

</div>

Whenever you have you don't know why something looks wrong you should check the computed properties of the style that is applied for that element in the developer tools of your browser.

Answered By - t.niese

Answer Checked By - Mary Flores (PHPFixing Volunteer)

Read More

[FIXED] Why doesn't HTML body background-color obey margin?

Issue

According to w3, the margin of an element is transparent:

I've built a very basic HTML page:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style>
        body {
            background-color: red;
        }
    </style>
</head>
<body></body>
</html> 

In Chrome, the inspector reports that "body" has an 8px margin:

But on the page, the margin is full of the background color! (Notice that there's no space between my bookmarks bar and the red background - I promise I haven't scrolled.

What's up with that?

Solution

The CSS specification special cases it.

The background of the root element becomes the background of the canvas and covers the entire canvas, anchored (for 'background-position') at the same point as it would be if it was painted only for the root element itself. The root element does not paint this background again.

For HTML documents, however, we recommend that authors specify the background for the BODY element rather than the HTML element. For documents whose root element is an HTML "HTML" element or an XHTML "html" element that has computed values of 'transparent' for 'background-color' and 'none' for 'background-image', user agents must instead use the computed value of the background properties from that element's first HTML "BODY" element or XHTML "body" element child when painting backgrounds for the canvas, and must not paint a background for that child element. Such backgrounds must also be anchored at the same point as they would be if they were painted only for the root element.

… presumably because people were too used to <body background="#ff0000"> from the bad old days.

Answered By - Quentin

Answer Checked By - Timothy Miller (PHPFixing Admin)

Read More