When testing my website with Google Website Translator, I noticed that Google is changing the HTML structure of my page resulting in CSS styles not being applied.
For example, this piece of HTML (using Bootstrap):
<ul class="nav nav-pills nav-stacked">
<li class="active">
<a title="About us" href="/about/">About us</a>
</li>
</ul>
Is changed into this format:
<ul class="nav nav-pills nav-stacked">
<li class="active">
<span class="notranslate" onmouseout="_tipoff()" onmouseover="_tipon(this)">
<span class="google-src-text" style="direction: ltr; text-align: left">
<a title="About us" href="...">Over ons</a>
</span>
<a title="About us" href="...">About us</a>
</span>
</li>
</ul>
Basically, my links are being wrapped by a <SPAN>. How can I avoid that?
Update:
Google Website Translator also removes SPANs that are wrapped around SVGs, even if these elements are not a link. Very bizarre. For example:
<div>
<span>
<svg>...</svg>
</span>
</div>
Is turned into:
<div>
<svg>...</svg>
</div>
This is a native aspect of Google Translate. Best put in some CSS to fix any breakages.
I've found a fix, which is specifically targeting Google Website Translator as follows.
I've changed this:
nav > li > a {
....
}
Into this:
nav > li > a,
nav > li > span.notranslate > a {
...
}
Related
I'm trying to get the anchor to change color on active and focus but either my syntax is wrong or the style is being overrided.
<ul id="nav">
<li class="nav active">
HERE
</li>
<div class="dropdown">
<li class="drop nav active">
ABOUT
<div class="dropdown-content">
<ul>
<li>
<p class="drops">OTHER</p>
</li>
<li>
<p class="drops">THING</p>
</li>
</ul>
</div>
</li>
</ul>
and my css
.drop a:hover,
.drop a:focus {
background:lightgoldenrodyellow !important;
color:red !important;
}
The background changes on hover and focus because of the !important (doesn't work without that) but the color does not change. Just need to make sure I don't have some silly syntax error before looking for conflicts. If it's a conflict and there's some other trick to overide it, I'd appreciate it.
Before HTML 5, <p> was a block-level element and <a> was inline, the latter should not contain the sooner.
In other words: <a> should be inside <p>, not the opposite. Perhaps your document is not HTML 5, or at least your browser don't treat it as such. The following code works fine for me:
.drop a:hover,
.drop a:focus {
background: lightgoldenrodyellow;
color: red;
}
<ul id="nav">
<li class="nav active">
HERE
</li>
<div class="dropdown">
<li class="drop nav active">
ABOUT
<div class="dropdown-content">
<ul>
<li>
<p class="drops">
OTHER
</p>
</li>
<li>
<p class="drops">
THING
</p>
</li>
</ul>
</div>
</li>
</div>
</ul>
I have also fixed another syntax error in your HTML code: you forgot </div> before the last </ul>.
I see no real problem but you can:
change a:focus to a:active or make sure you are including the stylesheet in your html
Hi I have an nav like this:
<nav class="navbar navbar-inverse">
<div class="container">
<ul class="nav navbar-nav">
<li >
Strona Główna
</li>
<li class="active" >
Legendopedia
</li>
<li >Zwoje z Sieci</li>
<li >
Zaloguj się
</li>
<li>
Zarejestruj się
</li>
</ul>
</div>
</nav>
And I want to check with CAPYBARA if the 'li' that containts '/legendopedia' link has css class: active.
If there can be only one active li in the .container div you can do it like
expect(page.find('div.container li.active')).to have_selector(:link, '', href: '/legendopedia')
which is a little backward from what you mentioned since it's checking that the li with class active has the link with the relevant href in it, but is effectively the same.
Another way would be to use xpath
expect(page).to have_xpath("//li[.//a[#href='/legendopedia']][#class='active']")
I simply want to add some additional righthand margin to the bootstrap glyphicons in an a-tag, but it won't work out. The menu looks as follows:
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="glyphicon glyphicon-open"></i>Choose project...<b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Project 1</li>
<li>Project 2</li>
</ul>
</li>
<li>
<a href="#" class="btn-file">
<i class="glyphicon glyphicon-folder-open"></i>
Open layer...<input type="file">
</a>
</li>
</ul>
And the css I am trying to use is:
a > .glyphicon {
margin-right: 6px;
}
The menu looks fine, when setting the margin in the inline style and even when live-editing the site (using MagiCSS), the selector works properly. But when loading it from file, it has no effect (I checked if I am editing the proper .css-file and reloaded the browser cache already)..
Does anybody see something here? Could this be because of some bootstrap styles the glyphs inherit?
Thanks in advance for any help/advice.
Kim
Solved
Thanks Paulie_D for the tip. I could not reproduce this in JSFiddle either, but adding
i { display: inline-block; }
did the trick on my local copy!
try this instead
a > .glyphicon {
margin-right: 6px!important;
}
I want to the class dropdown invisible. dropdown will be used only for specific li tags. I tried this, but it doesn't work:
.dropdown{
display:none;
}
Is there a way to make this work? Am I doing something wrong in my CSS?
HTML:
<div id="MainNavigation" class="nContainer" name="MainNav" value="MainNavigation">
<ul class="nav navbar-nav">
<li class="dropdown">
page
<ul class="dropdown-menu">
<li>page1 </li>
<li>page2 </li>
<li>page3 </li>
<li>page4 </li>
<li>page5 </li>
</ul>
</li>
<a id="Homepage" class="navbar-brand" href="somepage.com">
<img src="/images/aGif.gif?v=24820" alt="someotherpage.com" border="0">
</a>
</ul>
</div>
My best guess is that it is a specificity issue. That is, .dropdown selector is not detailed enough to override other selectors that come with Bootstrap. Make the selector more specific (i.e., #MainNavigation.nContainer[name = "MainNav"] > .nav.navbar-nav > .dropdown) and see if it works.
I would like to insert a space between brand tag and menu items in bootstrap navbar.
I have the following in my codeigniter view:
<a class="brand" href="#">COMPANY NAME</a>
<div class="nav-collapse">
<ul class="nav" >
<li class="active">Home</li>
<li ><?php echo anchor('login', 'Sign Up') ?></li>
</ul>
Can someone advise me?
Something like:
.nav-collapse {
margin-left: 1em;
}
should do it, but it's hard to be sure without seeing the rest of the CSS.