Twitter Bootstrap, dropdown border - css

I can see this in Chrome at http://twitter.github.com/bootstrap/javascript.html#dropdowns. Basically, if you click on dropdown link twice (to open and then close the submenu), there's a yellowish border around the menu item which looks strange. I can't find in CSS where it is set, so the question is how can I remove it?

It's an outline that your browser inserts by default.
Try to insert in your css
a.dropdown-toggle { outline: none}

Are you sure that this is not a setting in your browser?
I can not replicate this issue at my end.
Try changing your browser and check if problem persists.
It seems like a browser issue.

It could be caused by poor display or problem with your VGA output. I'm not experiencing any of symptoms you mentioned, but, based on my experience, could be caused by one of those two. You might want to consider re-installing or updating VGA driver, or playing around with settings such as gamma, brightness, or so.
Hope it helps.

Related

How to fix PrimeNG dropdown style issue?

I'm using PrimeNG 1.0.0-rc.4 (although had the same issue with earlier version). The dropdown always displays its dropdown pointer to the right. A rollover shows the associated button is also to the right. Tried it with different themes with same result. What's going on and how do I fix it?
My recommendation would be that you better use the grid system provided by PrimeNG, because you maybe solve that specific issue now, but it's so probable that you'll find more like that on the way. Here's the documentation about it: http://www.primefaces.org/primeng/#/responsive

CSS fixed background issue when scrolling

So i recently got this CSS style for Facebook which is acting really wierd.
It's using a fixed background image and whenever i scroll it's doing this:
Click
Wierd thing is: This occurs on every style with a fixed background, if i completely remove said background the site works like a charm.
Still, I have no idea if it's just faulty code that causes the problem or if it's the browser itself.
I'm not that good at CSS but if I knew where to search or what could cause the issue, I could probs fix it myself.
Sooo... If anyone wants to take a look at the code, here it is: Click
Thanks in advance to anyone who decides to put up with my shit, heh
edit: changed link to Dropbox temporarily

Bootstrap 2.2.1 modal bug - blue border around calling href?

I'm new here (and also with bootstrap and JavaScript) and hopefully im not asking a question already asked before. I did google plenty and search on here and could not find anyone mentioning this specific problem.
I found a bug I think with Bootstrap 2.2.1 .. when you close a modal, the href link which called it now has a blue border around it. This happens with buttons, nav items, anything. This can be seen on the Bootstrap live demo itself - click the blue button "Launch demo modal" under the section "Modals bootstrap-modal.js". You can see a light blue border around the button after closing the modal.
http://twitter.github.com/bootstrap/javascript.html#modals
This issue drove me mad, I messed with the CSS for ages, then tried different browsers, until I downgraded and the issue above is not present on bootstrap 2.0.4.
Does anyone know if this is a known issue with 2.2.1 or has it been present since a particular version?, or what the problem is here?
It's pretty simple fix once you locate what the CSS property is. I think it came from some issue with the modal's focus and they decided to modify the generated html. You need to define the following CSS. It comes from the following link.
.modal-open .modal,.btn:focus{
outline:none!important
}
Hope it helps! I made a jsfiddle of the result (including bootstrap's css + js) so you watch a live demo of it, here. Note that if you're using something that isn't a button the outline may come back, since we're only applying it there. Since you're referring to a href, it's likely that you're calling the modal from a link, and therefore should also trigger a:focus

Safari Select Box Styling Bug?

I'm getting a wierd bug in Safari 5.0.5 for windows. When I apply my styles the down arrow in the select box button disappears. I tried removing classes and it seems multiple classes trigger the bug. Any help would be much appreciated. You can see an example at http://jsfiddle.net/fbsRY/2/
You cannot reliably style select elements using CSS as browsers try to stick to the operating systems defaults. If you MUST style these elements, you'll probably have to find a JS based alternative.
Not a full solution, but I did find more details about the problem at http://www.codingforums.com/showthread.php?t=179464. It seems that it might be a bug related to the Windows Classic Theme. I'm kind of a geek that way. Love my flat gray interface :)

How can I display one style in Safari and a different style in Chrome?

My client is starting to get antsy....so any help would be greatly appreciated. I am having issues with my secondary page header images shifting. It is displaying correctly in Firefox, I haven't been able to check in IE yet w/out access to a PC. It was displaying correctly in Chrome, but shifting in Safari.
I added the "webkit hack" to write a specific css style for Safari, but once I did that....it started shifting in Chrome. What can I do to fix this issue??
http://airwavetelecom.net/beta/?page_id=2
There's some problem with the way you're using your .clearfix class that I'm not sure of. If you add a clear:both; to your .page_line class it will fix your problem.
You could parse the user agent and pass a different CSS file based on the result. However, it seems like a weird issue that shouldn't happen with proper CSS; can you post the specific bit that doesn't work?
By the way, you should read up on animation queue in jQuery! Hover many times on your menu and it'll keep flashing for a while.
The repositioning of .page_about is pretty odd. Why don't you just use .custom_title for the entire header? That wouldn't require such odd re-positioning.

Resources