Kingsley Young Kingsley Young - 3 months ago 15
CSS Question

Blogger comments are messed up from my CSS

I'm a college student majoring in computer science and web development, so I'm still learning everything.

One of my clients has a blogger she asked me if I could do a couple of things like make a nav bar and link things up and so on. So after I made the nav bar I notice that her comments are all messed up. I'm not sure if it's the CSS in the nav bar or something else.

My code for the nav bar:

<style>
#logo-bloglovin:hover,#logo-bloglovin:active { background-position:0 -64px; }

#logo-facebook
{
background-position:-210px 0px;
}

#logo-facebook:hover,#logo-facebook:active { background-position:-210px -64px; }

#logo-instraram
{
background-position:-420px 0px;
}
#logo-instraram:hover,#logo-instraram:active { background-position:-420px -64px; }

#logo-googleplus
{
background-position:-660px 0px;
}

#logo-googleplus:hover,#logo-googleplus:active { background-position:-660px -64px; }

#logo-contact
{

background-position:-880px 0px;
}
#logo-contact:hover,#logo-contact:active { background-position:-880px -64px; }


ul.chicnav {
border: none !important;
display: block;
list-style: none;
}

li{
display: inline-block ;
}

ul.chicnav li a {
width:210px;
height:62px;
text-decoration:none;
display:block;
border: none !important;
background: url('http://i47.tinypic.com/280nmtx.png') 0 0 no-repeat;
}

ul.chicnav li a:hover {
background-color: transparent !important;
}

</style>

<ul class="chicnav">
<li><a href="http://www.bloglovin.com/blog/3798040/chic-fashion-world" id="logo-bloglovin" > </a></li>
<li><a href="http://www.facebook.com/pages/Chic-Fashion-World/248420155275530" id="logo-facebook" > </a></li>
<li><a href="http://instagram.com/borka12/" id="logo-instraram" > </a></li>
<li><a href="https://plus.google.com/109438806289588533953/posts" id="logo-googleplus" > </a></li>
<li><a href="http://chicfashionworld.blogspot.com/p/contact.html" id="logo-contact" > </a></li>

</ul>


The blog lives at chicfashionworld.com. I made a test page with some improvement at chicfashionworldtest.blogspot.com. If you have any suggestions for me for me, please let me know.

Answer

Ok, here's your original code, cleaned up a bit:

<style>
#logo-bloglovin:hover, #logo-bloglovin:active{ background-position:0 -64px; }

#logo-facebook{ background-position:-210px 0px; }
#logo-facebook:hover, #logo-facebook:active{ background-position:-210px -64px; }

#logo-instraram{ background-position:-420px 0px; }
#logo-instraram:hover, #logo-instraram:active{ background-position:-420px -64px; }

#logo-googleplus{ background-position:-660px 0px; }
#logo-googleplus:hover, #logo-googleplus:active { background-position:-660px -64px; }

#logo-contact{ background-position:-880px 0px; }
#logo-contact:hover, #logo-contact:active{ background-position:-880px -64px; }


ul.chicnav {
  border: none !important;
  display: block;
  list-style: none;
}

li{ display: inline-block; }

ul.chicnav li a {
  width:210px;
  height:62px;
  text-decoration:none;
  display:block;
  border: none !important;
  background: url('http://i47.tinypic.com/280nmtx.png') 0 0 no-repeat;
}

ul.chicnav li a:hover { background-color: transparent !important;}
</style>

<ul class="chicnav">
  <li><a href="http://www.bloglovin.com/blog/3798040/chic-fashion-world" id="logo-bloglovin" > </a></li>
  <li><a href="http://www.facebook.com/pages/Chic-Fashion-World/248420155275530" id="logo-facebook" > </a></li>
  <li><a href="http://instagram.com/borka12/" id="logo-instraram" > </a></li>
  <li><a href="https://plus.google.com/109438806289588533953/posts" id="logo-googleplus" > </a></li>
  <li><a href="http://chicfashionworld.blogspot.com/p/contact.html" id="logo-contact" > </a></li>
</ul>

Notice that 23rd line? li{ display: inline-block; }? I would bet that is the cause of your problems. Perhaps modify it to ul.chicnav li{ display: inline-block; }. The reason being that you're making ALL the li elements on the page inline-block - not just the one in the nav.

Comments