CODEWITHSUNDEEP
htmltwitter-bootstrap
DarkW
DarkW

Reputation: 595

html/bootstrap: chrome padding where it shouldn't

I've tried unsuccessfully to fix this for the last few days:

the first time I open the page it has some weird padding on the dropdown menu, only happens on chrome (works fine on FFx and IE)

first time opening

after the first time the page is loaded it loads fine after the first time

as you can see on the screenshot I've already put

.myCustomNav ul
{
  padding: 0px !important;
}

the dropdown menu is called like this:

<div>
      <ul class="myCustomNav nav">
        <li>
          <a .../>
        </li>
      </ul>
</div>

any idea what's wrong?

you can test for yourselves on http://istore.titus.biz/lovelovelove/#

Upvotes: 0

Views: 102

Answers (3)

DarkW
DarkW

Reputation: 595

changed

.myCustomNav li{ display:inline;}

to

.myCustomNav li{ display:inline-block;}

and it worked, just needed a few extra tweaks to position it then

Upvotes: 1

misterManSam
misterManSam

Reputation: 24692

Invalid solution - Comments below

You need to make the li for .dropdown-menu - display: block. This needs to be placed at the bottom of your nav CSS.

CSS

.dropdown-menu li {
    display: block;
}

If you want to test this do this:

.dropdown-menu li {
    display: block !important;
}

That should fix it, but do not use !important as your solution. Just make sure that the first snippet is below the other dropdown CSS.

Upvotes: 1

Suresh Ponnukalai
Suresh Ponnukalai

Reputation: 13978

Do you want to reduce the padding on the dropdown? Then reduce the padding on the following class in your css.

 .horizontal-category a:link,.horizontal-category a:visited{  
  color:#96979D;
  padding:4px 6px;
  display:inline-block;
  font-weight:bold;
  border-right:1px solid #ec008c;
 /*background:#09C;*/     
}

Upvotes: 1

Related Questions