Firefox is putting a gray border on most of my images. The border is sometimes on the bottom or off to the right. If I add padding to the images sometimes the border will go away.
The images are not links and I have basically covered every option in CSS to eliminate the problem but have had no success:
body img{
padding: 0;
border: none;
text-decoration: none;
outline: none;
overflow: hidden;
-webkit-border-radius: 0;
-khtml-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
-webkit-box-shadow: 0 0 0 #000;
-moz-box-shadow: 0 0 0 #000;
}
Hopefully someone has encountered this before or has some information to help?
try adding an attribute to your html img tag like border="0"
Related
I have created a HTML table with a fixed header and scrollable body. I want to style the scrollbar to look like the attached image.table design
Using webkit, I have changed to colour of the scrollbar but i don't know how add the circle.
::-webkit-scrollbar {
width: 15px;
background-color: #00467f; }
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); }
::-webkit-scrollbar-thumb {
background-color: #00bce4;
outline: 1px solid slategrey;
z-index: 10; }
Can this be achieved using only HTML, CSS and Pure Javascript?
With a width: 30px; and height: 30px;, border-radius: 30px; gives you a circle, maybe that helps in getting creative.
so what I'm trying to accomplish is to have a large image, in this case a map, inside a smaller div with scroll bars that let you look at the rest of the map. I'm using class="img-responsive" at the moment but it makes the image the same size as the div which i do not want since when the user is looking for a road if the map is too small they wont be able to see it. I also tried to set a max-height for the div but the image is overflowing onto the background. Please help.
.ibox-content {
background-color: #ffffff;
color: inherit;
padding: 15px 20px 20px 20px;
border-color: #e7eaec;
border-image: none;
border-style: solid solid none;
border-width: 1px 0px;
max-height: 350px;
}
<div class="ibox-content" id="ibox-1">
<div class="active content" id="elementMap">
<img class="img-responsive" src="//lorempixel.com/600/600">
</div>
</div>
Remove img-responsive, because it gives the style max-width: 100% to the element, meaning the image can never be wider than its parent.
Add overflow: auto; to the container:
.ibox-content {
background-color: #ffffff;
color: inherit;
padding: 15px 20px 20px 20px;
border-color: #e7eaec;
border-image: none;
border-style: solid solid none;
border-width: 1px 0px;
max-height:350px;
overflow: auto;
}
Div with overflow: scroll or overflow: auto will solve your problem.
I created a modal dialog using CSS3, it works perfectly. But my site is responsive and the modal has to appear on several items inside an iframe (see here: http://labs.tageswoche.ch/interaktives/filmPortraits/ and here: http://master.tw.felix.sourcefabric.net/de/2014_11/international/652865/Drei-Jahre-B%C3%BCrgerkrieg-und-kein-Ende-in-Sicht.htm). In the iframe it doesnt work, but it works as expected on the real site.
The modal dialog is implemented on the first two pictures.
And here the code:
.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog:target {
opacity:1;
pointer-events: auto;
}
.modalDialog > div {
width: 400px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #fff;
background: -moz-linear-gradient(#fff, #999);
background: -webkit-linear-gradient(#fff, #999);
background: -o-linear-gradient(#fff, #999);
}
.close {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover {
background: #00d9ff;
}
Here is a jsfiddle I used to implement the modal dialog:
http://jsfiddle.net/kumarmuthaliar/GG9Sa/1/
What i want to achieve is that the modal appears where the mouse click was (or more or less) so that also on mobile devices on the last images of the wall. Right now the modal appears on top. How can I implement this? I have no clue.
One thing I'd like to say about your design is, do not make separate modal window htmls for each person's modal, use one modal and change its innerhtml as you click on different people so you write less code, easier to maintain (if you add changes to your modal, you do one change in one location etc)
Also, the nature of modal windows is, it has a semi transparency background, with the modal window floating (not in css context) in the middle of it.
If you see this css bit below you'll understand better:
.modalDialog > div {
width: 600px;
position: relative;
margin: 5% auto;
padding: 5px 20px 13px 20px;
background: #fff;
}
The bit that says "margin: 5% auto;" causes this behaviour, what you need to do is change this to the same notation the padding is set and for each position of the image, give it certain values, ie margin: 10px 10px for a modal window that just shows at the top left corner of the window etc if you're not too fussy about exact mouse location.
If you are, than use "onclick" event of your outermost background div with width/height equal to the overall size of every person's image included, than use the event object to get mouse location values (read this link http://www.w3schools.com/jsref/event_clientx.asp)
I didn't write it for you so that you can do it yourself and learn, hope this helps!
Go to google, and without typing anything in, hover your mouse over the "I'm Feeling Lucky" button. See what it does?
I can't think how to do that...on:hover....but the actual content and animation itself, how?
It's not the button that's animating.
They have a hidden div, positioned over the button. It's absolutely positioned.
It contains a lot of spans with all the messages.
On hover, they use a function to move that div around, and make it visible.
It looks like the contents of the button are moving, but they aren't really.
<button></button>
<div style="display: none; font-family: Arial,sans-serif; overflow: hidden; text-align: center; z-index: 50; height: 27px; position: absolute; left: 667px; margin: 0px; top: 45px; width: 114px;>
<div style="left: 0px; position: absolute; right: 0px; white-space: nowrap; top: -29px;">
<!-- spans go here -->
</div>
</div>
See the value, -29px? That's all that's changing.
Add a class, ie: focus, for the borders and bold face and the toggle it with jQuery:
$('#button').hover( function () {
$(this).addClass('focus');
}, function () {
$(this).removeClass('focus');
} );
The actual rules you can see Google is using with Chrome are:
.gbqfba-hvr:focus,.gbqfbb-hvr:focus{
-webkit-box-shadow:inset 0 0 0 1px #fff,0 1px 1px rgba(0,0,0,.1);
-moz-box-shadow:inset 0 0 0 1px #fff,0 1px 1px rgba(0,0,0,.1);
box-shadow:inset 0 0 0 1px #fff,0 1px 1px rgba(0,0,0,.1)
}
.gbqfb-hvr,.gbqfba-hvr,.gbqfbb-hvr{
-webkit-box-shadow:0 1px 1px rgba(0,0,0,.1);
-moz-box-shadow:0 1px 1px rgba(0,0,0,.1);
box-shadow:0 1px 1px rgba(0,0,0,.1)
}
I have a div that can be revealed from several buttons on the screen. I'd like it so the div always appears 15px from the top of the screen, even if the window is scrolled to the bottom. But, i dont want it to be fixed. (meaning you should be able to scroll away from it.
#tip {
background: #fff;
width: 300px;
z-index: 100;
display: none;
position: absolute;
top: 15px;
right: -330px;
-webkit-border-radius: 0 5px 5px 5px;
-moz-border-radius: 0 5px 5px 5px;
border-radius: 0 5px 5px 5px;
}
What Javascript solution do I need here?
Without jQuery, the best I could suggest is this:
document.getElementById('tip').style.top = document.scrollTop + 15;
You can try with http://code.google.com/p/jquery-scroll-follow/ - the element will be attached to viewport and will follow it as you scroll http://kitchen.net-perspective.com/sf-example-1.html