Lesson #5 Sorting your Friends


#1

CSS seems to be broke... Not sure why this will not work.

div {
display: inline-block;
margin-left: 5px;
height: 100px;
Width: 100px;
border-radius:100%;
border:2px solid black;
}

.friend {
border: 2px dashed #008000;
}
.family {
border: 2px dashed #0000FF;
}
.enemy {
border: 2px dashed #FF0000;
}


#2

Hi @javapro55014

I can only take a guess here, but if you could please post your HTML and elaborate on what "broke" means then someone maybe able to better resolve or explain your issue. With that aside, I guess that the issue is because you have used the dashed property but your circles are displaying as solid?
A quick code snippet I was experimenting with

<style>
  div {
display: inline-block;
margin-left: 5px;
height: 100px;
Width: 100px;
border-radius:100%;
border:2px solid black;
}

.friend {
border: 2px dashed #008000;
}
.family {
border: 2px dashed #0000FF;
}
.enemy {
border: 2px dashed #FF0000;
}
</style>
<div></div>
<div class="friend"></div>
<div class="family"></div>
<div class="enemy"></div>

If this is the case, then I would hazard a second guess, like me you are a Firefox browser user? Only the reason I mention this is because this is a known bug for Firefox, that sadly Mozilla have not corrected at this time, so go ahead jump on another browser, may my tongue turn black for saying =P try Chrome or IE, and you should get the result you want, if this is not the issue please do post the rest of your code and a description of what is broke and someone will try to reply as soon as they can.

Happy Coding!

Cheers,
Michael


#3

does it look like the things you write in your css file do not appear in your output, good change your link to stylesheet is broken, can you post it? Or even better, also post your html code

What is the error message? that would also help a lot


#4

I'm having the same issues. There is definitely a bug.


#5

Ok I figured it out. If your browser is zoomed in then it won't work. Press control and 0 to bring your browser to regular magnification. It will work after that.