Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML How to Make a Website Adding Pages to a Website Add Iconography

Posted by Mustafa Kasim
Mustafa Kasim
1,938 Points

Bullet Points still appearing.

This is my code: dunno why the bulet points still show up.

.contact-info { list-style: none; padding: 0; margin: 0; font-size: 0.9em; }

14 Answers

Roberto Alicata
PLUS
Roberto Alicata
Courses Plus Student 39,959 Points
Roberto Alicata
Roberto Alicata
Courses Plus Student 39,959 Points

check this code

http://codepen.io/anon/pen/bekAd

I copied your HTML and CSS and added the CSS rule for the unordered list to remove the bullets.

Isn't it the result you want?

Mustafa Kasim
Mustafa Kasim
1,938 Points

Thank you for the help, I really do appreciate it! I'll just have to change the images now.

Thank you again! :)

Roberto Alicata
PLUS
Roberto Alicata
Courses Plus Student 39,959 Points
Roberto Alicata
Roberto Alicata
Courses Plus Student 39,959 Points

Try to use: 

list-style-type:none;
Mustafa Kasim
Mustafa Kasim
1,938 Points

Hi, I have used that too, but still no luck..

Roberto Alicata
PLUS
Roberto Alicata
Courses Plus Student 39,959 Points
Roberto Alicata
Roberto Alicata
Courses Plus Student 39,959 Points

This works:

ul.contact-info {
  font-size: 0.9em;
  margin: 0;
  padding: 0;
  list-style-type: none;
}
Mustafa Kasim
Mustafa Kasim
1,938 Points

Thanks but still no luck..

Roberto Alicata
PLUS
Roberto Alicata
Courses Plus Student 39,959 Points
Roberto Alicata
Roberto Alicata
Courses Plus Student 39,959 Points

Did you refresh the preview page?

Mustafa Kasim
Mustafa Kasim
1,938 Points
Mustafa Kasim
Mustafa Kasim
1,938 Points

Yes, and I have tried different browsers too..

Roberto Alicata
PLUS
Roberto Alicata
Courses Plus Student 39,959 Points
Roberto Alicata
Roberto Alicata
Courses Plus Student 39,959 Points

Are you testing the challenge code or your own code?

Mustafa Kasim
Mustafa Kasim
1,938 Points

No it's my own, I'm inputting it into the workspace.

Roberto Alicata
PLUS
Roberto Alicata
Courses Plus Student 39,959 Points
Roberto Alicata
Roberto Alicata
Courses Plus Student 39,959 Points

Ok, can you copy here your HTML code ?

Mustafa Kasim
Mustafa Kasim
1,938 Points
Mustafa Kasim
Mustafa Kasim
1,938 Points

/************************************************ GENERAL ************************************************/

body { font-family: 'Verdana', cursive;
}

wrapper {

max-width: 940px;
margin: 0 auto;
padding: 0 5%;

}

a { text-decoration: none;
}

img { max-width: 100%; }

h3 { margin: 0 0 1em 0; }

/************************************************ HEADING ************************************************/

header { float: left; margin: 0 0 30px 0; padding: 5px 0 0 0; width: 100%; }

logo {

text-align: center;
margin: 0;

}

h1, { font-family: 'Cabin Sketch', cursive; margin: 15px 0; font-size: 1.75em; font-weight: normal; line-height: 0.8em;

}

h2 { font-size: 0.75em; margin: -5px 0 0; font-weight: normal; }

/************************************************ NAVIGATION ************************************************/

nav { text-align: center; padding: 10px 0; margin: 20px 0 0; }

nav ul { list-style: none; margin: 0 10px; padding: 0; }

nav li { display: inline-block; }

nav a { font-weight: 800; padding: 15px 10px; }

/************************************************ FOOTER ************************************************/

footer {
    font-size: 0.75em;
    text-align: center;
    clear: both;
    padding-top: 50px;
    color: #ccc;
}

.social-icon { width: 20px; height: 20px; margin 0 5px; }

/************************************************ PAGE: PORTFOLIO ************************************************/

gallery {

margin: 0;
padding: 0;
list-style: none;

}

gallery li {

float: left;
width: 45%;
margin: 2.5%;
background-color: #f5f5f5;
color: #bdc3c7;

}

gallery li a p {

margin: 0;
padding: 5%;
font-size: 0.75em;
color: #bdc3c7;

}

/************************************************ PAGE: ABOUT ************************************************/

.profile-photo { display: block; max-width: 150px; margin: 0 auto 30px; border-radius: 100%; }

/************************************************ PAGE: CONTACT ************************************************/

ul.contact-info { font-size: 0.9em; margin: 0; padding: 0; list-style-type: none;

}

/************************************************ COLORS ************************************************/

/* site body */ body { background-color: #E44D2E; color: #FFEBCD; }

/* green header */ header { background: #FFF8DC; border-color: #599a68; }

/* nav background on mobile devices */ nav { background: #DEB000; color: #fff; }

/* logo text */ h1, h2 { color: #4169E1; }

/* links */ a { color: #4169E1; }

/* nav link */ nav a, nav a:visited { color: #fff; }

/* selected nav link */ nav a.selected, nav a:hover { color: #000; }

Roberto Alicata
PLUS
Roberto Alicata
Courses Plus Student 39,959 Points
Roberto Alicata
Roberto Alicata
Courses Plus Student 39,959 Points

the HTML code please

Mustafa Kasim
Mustafa Kasim
1,938 Points
Mustafa Kasim
Mustafa Kasim
1,938 Points

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Mustafa Kasim | Photographer</title> <link rel="stylesheet" href="css/normalize.css"> <link href='http://fonts.googleapis.com/css?family=Cabin+Sketch:400,700' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> </head> <body> <header> <a href="index.html" id="logo"> <h1>Mustafa Kasim</h1> <h2>Photographer</h2> </a> <nav> <ul> <li><a href="index.html" class="selected">Portfolio</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> </header> <div id="wrapper"> <section> <ul id="gallery"> <li> <a href="img/IMG_2316.jpg"> <img src="img/IMG_2316.jpg" alt=""> <p>Experimentation with Filters</p> </a> </li> <li> <a href="img/IMG_2317.jpg"> <img src="img/IMG_2317.jpg" alt=""> <p>Exploring Japan</p> </a> </li> <li> <a href="img/IMG_2318.jpg"> <img src="img/IMG_2318.jpg" alt=""> <p>Serenity</p> </a> </li> <li> <a href="img/IMG_2324.jpg"> <img src="img/IMG_2324.jpg" alt=""> <p>Unrivalled Architecture</p> </a> </li> <li> <a href="img/IMG_2327.jpg"> <img src="img/IMG_2327.jpg" alt=""> <p>Passing through</p> </a> </li> </ul> </section> <footer> <a href="http://twitter.com/CebollaGrande"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a> <a href="http://facebook.com/mustafa.kasim.71"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a> <p>© 2014 Mustafa Kasim.</p> </footer> </div> </body> </html>

Roberto Alicata
Roberto Alicata
Courses Plus Student 39,959 Points

use the MARKDOWN code wrapper

Mustafa Kasim
Mustafa Kasim
1,938 Points
Mustafa Kasim
Mustafa Kasim
1,938 Points

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Mustafa Kasim | Photographer</title> <link rel="stylesheet" href="css/normalize.css"> <link href='http://fonts.googleapis.com/css?family=Cabin+Sketch:400,700' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> </head> <body> <header> <a href="index.html" id="logo"> <h1>Mustafa Kasim</h1> <h2>Photographer</h2> </a> <nav> <ul> <li><a href="index.html" class="selected">Portfolio</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> </header> <div id="wrapper"> <section> <ul id="gallery"> <li> <a href="img/IMG_2316.jpg"> <img src="img/IMG_2316.jpg" alt=""> <p>Experimentation with Filters</p> </a> </li> <li> <a href="img/IMG_2317.jpg"> <img src="img/IMG_2317.jpg" alt=""> <p>Exploring Japan</p> </a> </li> <li> <a href="img/IMG_2318.jpg"> <img src="img/IMG_2318.jpg" alt=""> <p>Serenity</p> </a> </li> <li> <a href="img/IMG_2324.jpg"> <img src="img/IMG_2324.jpg" alt=""> <p>Unrivalled Architecture</p> </a> </li> <li> <a href="img/IMG_2327.jpg"> <img src="img/IMG_2327.jpg" alt=""> <p>Passing through</p> </a> </li> </ul> </section> <footer> <a href="http://twitter.com/CebollaGrande"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a> <a href="http://facebook.com/mustafa.kasim.71"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a> <p>&copy; 2014 Mustafa Kasim.</p> </footer> </div> </body> </html>

Mustafa Kasim
Mustafa Kasim
1,938 Points
Mustafa Kasim
Mustafa Kasim
1,938 Points

Im sorry but Im unsure of Markdown, its the first time I have heard of it..

Mustafa Kasim
Mustafa Kasim
1,938 Points
Mustafa Kasim
Mustafa Kasim
1,938 Points 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Mustafa Kasim | Photographer</title>
        <link rel="stylesheet" href="css/normalize.css">
        <link href='http://fonts.googleapis.com/css?family=Cabin+Sketch:400,700' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" href="css/main.css">
    </head>
    <body>
        <header>
            <a href="index.html" id="logo">
                <h1>Mustafa Kasim</h1>
                <h2>Photographer</h2>
            </a>
            <nav>
                <ul>
                    <li><a href="index.html">Portfolio</a></li>
                    <li><a href="about.html">About</a></li>
                    <li><a href="contact.html" class="selected">Contact</a></li>
                </ul>
            </nav>
        </header>
        <div id="wrapper">
        <section>
            <ul id="gallery">
                <li>
                        <a href="img/IMG_2316.jpg">
                    <img src="img/IMG_2316.jpg" alt="">
                    <p>Experimentation with Filters</p>
                        </a>
                </li>
                <li>
                        <a href="img/IMG_2317.jpg">
                    <img src="img/IMG_2317.jpg" alt="">
                    <p>Exploring Japan</p>
                        </a>
                </li>
                <li>
                        <a href="img/IMG_2318.jpg">
                    <img src="img/IMG_2318.jpg" alt="">
                    <p>Serenity</p>
                        </a>
                </li>
                <li>
                        <a href="img/IMG_2324.jpg">
                    <img src="img/IMG_2324.jpg" alt="">
                    <p>Unrivalled Architecture</p>
                        </a>
                </li>
                <li>
                        <a href="img/IMG_2327.jpg">
                    <img src="img/IMG_2327.jpg" alt="">
                    <p>Passing through</p>
                        </a>
                </li>
            </ul>
        </section>
        <footer>
            <a href="http://twitter.com/CebollaGrande"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
            <a href="http://facebook.com/mustafa.kasim.71"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
            <p>&copy; 2014 Mustafa Kasim.</p>
        </footer>
            </div>
    </body>
</html>
Roberto Alicata
PLUS
Roberto Alicata
Courses Plus Student 39,959 Points
Roberto Alicata
Roberto Alicata
Courses Plus Student 39,959 Points

Ok the error is in that in the HTML you use an unordered list with id=gallery, so in the CSS change the selector to:

ul#gallery {
  font-size: 0.9em;
  margin: 0;
  padding: 0;
  list-style-type: none;
}
Mustafa Kasim
Mustafa Kasim
1,938 Points

Thank you for the reply.. but still nothing seems to change.

hmnnn this is very strange...