I need your help.
I can't seem to be able to get the hover working properly over a wrapper/container DIV
CSS:
#myhover:hover {
border: 1px solid red;
}
HTML:
<div id="myhover" style="background: #ffffff;
width: 177px; height: 20px; border: 1px solid #808080;">
<div style="float: left;">
<input id="refdocs" style="padding-left: 4px; padding-right: 3px;
height: 15px; width: 158px; border: none;" type="text">
</div>
<div style="line-height:18px; font-size: 11pt; color: #779297;">+</div>
</div>
Because inline styles are the most specific in the cascade, they can over-ride things you didn't intend them to. Move your #myhover styles into a style sheet then it should work fine.
for example:
#myhover {
background: #ffffff;
width: 177px;
height: 20px;
border: 1px solid #808080;
}
jsfiddle: http://jsfiddle.net/va8Bz/
Your style attribute is overriding your stylesheet selectors. It's more specific.
You have three options here:
Move your styles out of the style attribute.
Move your styles out of the style attribute.
Add !important to the style declarations that should override the ones in your style attribute.
I suggest you move your styles out of the style attribute into a stylesheet.
Example: http://jsfiddle.net/Y7NW9/
You need to stick all your CSS in a stylesheet instead of using inline styles.
What you're trying to accomplish can be done with less markup too:
<div class="container">
<input class="refdocs" type="text">
<div class="icon">+</div>
</div>
Then in your CSS stylesheet:
.container {
display: inline-block;
position: relative;
}
.input-wrapper {
float: left;
}
.refdocs {
border: 1px solid #808080;
padding: 2px;
padding-right: 14px;
margin: 0;
}
.refdocs:hover {
border: 1px solid red;
}
.icon {
font-size: 11pt;
position: absolute;
top: 3px;
right: 5px;
}
Here's a working demo
I solved this for you in your previous question:
#add {
float: right;
width: 20px;
height: 20px;
cursor: pointer;
text-align: center;
}
#add:hover {
color: #f00;
}
http://jsfiddle.net/kUSBM/
Please respond to the questions or accept answers.
Related
I’m working on a website in which at the bottom you can see the three social media accounts it has, but with the following code, this is the output, but I don’t know what’s causing it.
As you can clearly see, there is a grey box going over the three boxes, and I don’t know how to fix this.
.container {
width: 600px;
height: 190px;
background-color: #ff7675;
padding-top: 20px;
padding-left: 15px;
padding-right: 15px;
}
#st-box {
float: left;
width: 180px;
height: 160px;
background-color: white;
border: solid black;
}
#nd-box {
float: left;
width: 180px;
height: 160px;
background-color: white;
border: solid black;
margin-left: 20px;
}
#rd-box {
float: right;
width: 180px;
height: 160px;
background-color: white;
border: solid black;
}
<div class="container">
<div id="st-box">
<iframe></iframe>
</div>
<div id="nd-box">
<iframe></iframe>
</div>
<div id="rd-box">
<iframe></iframe>
</div>
</div>
What can I do?
You should style your iframes. Here is some code that will help you on your way.
iframe {
display: block;
width: 100%;
border: 0;
}
The iframes inside your inner divs are causing these strange-looking borders. You can style them with css aswell.
For example, you might want to give them:
border:0;
width:100%;
The browser adds a default border to iframe. Give border: 0 to the iframe. Check screenshot.
iframe { border: 0; }
How can i hide border behind MON and give some space like in this pic
https://www.screencast.com/t/SJmg63NZuF
div {
height: 100px;
width: 100px;
border: 2px solid black;
}
h2 {
width: 50px;
margin-top: -15px;
margin-left: 0px;
padding: 0 10px;
}
<div>
<h2>MON</h2>
<p>7am - yeah</p>
</div>
I think you're trying to achieve this. The convention of using <legend> tags which is a child of <fieldset> is usually applied and used for forms but you can achieve the same as shown below. I tweaked the code a bit and added a background to show you how you may achieve what you're looking for as the screenshot you posted.
Hope, it helps.
body {
background-image: url("https://ak9.picdn.net/shutterstock/videos/21522739/thumb/1.jpg");
}
fieldset {
width: 100px;
border: 2px solid white;
text-align: center;
}
h2 {
color: white;
}
p {
color: white;
}
<fieldset>
<legend align="center">
<h2>MON</h2>
</legend>
<p>7am - yeah</p>
<p>8am - yeah</p>
<p>9am - yeah</p>
</fieldset>
Looks like you just need to set the background color from transparent.
div {
height: 100px;
width: 100px;
border: 2px solid black;
background: white;
}
h2 {
width: 50px;
margin-top: -15px;
margin-left: 8px;
padding: 0 14px 0 10px;
background: white;
}
<div>
<h2>MON</h2>
<p>7am - yeah</p>
</div>
I created class border for a link and put the link into that border. Then when I see by responsive device link is over length form that border while I try to keep sentence into border it has no problem.
How can I resolve it?
My CSS:
.border {
border: 1px solid #cc0000;
border-radius: 8px;
width: 100%;
padding: 5px;
}
You probably used an element with display: block as a host of your .border class:
.border {
border: 1px solid #cc0000;
border-radius: 8px;
width: 100%;
padding: 5px;
}
<div class="border">
Google
</div>
<div>'s default display value is block, hence full width.
What you need is using an element with display: inline:
.border {
border: 1px solid #cc0000;
border-radius: 8px;
width: 100%;
padding: 5px;
}
<span class="border">
Google
</span>
Or, simply add display: inline to your .border styles:
.border {
border: 1px solid #cc0000;
border-radius: 8px;
width: 100%;
padding: 5px;
display: inline; /* <---- */
}
<div class="border">
Google
</div>
Is there any easy way to style <option> tag after <select> without javascript? i tried to add class or another tag in it.
<option><span> </span><option> OR
<option><lable class="padding"> </lable><option>
it doesn't show any tags. i'm trying to put some padding for option text. Please suggest.
Without javascript if not be impossible else is very hard , i create a custom select element, I hope help you.
$(document).ready(function(){
$('.sel>span').click(function(){
$('.sub').toggle();
})
$('.sub div').click(function(){
$('.sel .content').text($(this).text());
$('.sub').hide();
})
})
.sel {
display: inline-block;
width: 200px;
height: 20px;
border: 1px solid #ccc;
position: relative;
padding-left: 40px;
box-sizing: border-box;
}
.sel > .arrow{
position: absolute;
right: 0;
cursor: pointer;
outline: none;
}
.sub {
position: absolute;
border: 1px solid #ccc;
display: inline-block;
width: 200px;
left: -1px;
top: 19px;
box-sizing: border-box;
display: none;
cursor: pointer;
}
.content {
color: orange;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="sel">
<span class="arrow">▾</span>
<span class="content"></span>
<div class="sub">
<div> </div>
<div>Orange</div>
<div>Blue</div>
<div>Red</div>
</div>
</div>
Building your own dropdown is easier than trying to style the existing one.
Take a look at Bootstrap or these links:
https://semantic-ui.com/modules/dropdown.html#/examples
https://tympanus.net/Tutorials/CustomDropDownListStyling/index3.html
Or use Google for that matter
I have this really weird problem, button and input have a same CSS (except background), but Firefox renders those differently. There are no problems in IE or Chrome.
#searchInput {
width: 80%;
margin: 0 auto;
display: block;
height: 40px;
border: 1px solid #D8D8D8;
font-size: 1rem;
padding: 10px;
text-align: center;
}
#searchButton {
width: 80%;
margin: 4px auto;
display: block;
height: 40px;
border: 1px solid #D8D8D8;
font-size: 1rem;
padding: 10px;
text-align: center;
background: #F2F2F2;
cursor: pointer;
}
I have also included container CSS, where they both are.
.section {
width: 100%;
display: inline-block;
margin: 10px auto;
background-color: #FAFAFA;
border-radius: 5px;
border: 1px solid #D8D8D8;
padding: 30px;
position: relative;
}
.toggleIcon {
width: 28px;
height: 20px;
top: 0;
right: 10px;
position: absolute;
border-radius: 5px;
background: #FAFAFA;
margin-top: 10px;
padding: 10px;
border: 1px solid #D8D8D8;
cursor: pointer;
box-sizing: content-box;
}
HTML:
<div id='search' class='section'> <a href="#sidebarNav" class='toggle'><img class = 'toggleIcon' src = 'img/icons/glyphicons_158_show_lines.png' alt = 'Open navigation'></a>
<img id='logo' src='img/logo.png'>
<form id='searchForm'>
<input type='text' id='searchInput' name='searchInput'>
<button type='submit' id='searchButton' name='searchButton' value='Search'>
<img src='img/icons/glyphicons_027_search.png' alt='Search'>
</button>
</form>
<div id='searchResults'></div>
</div>
NB! I use PageSlide for navigation and search is using AJAX
Based on your last comment...
Margin doesn't cause my problems, problem is that input is much wider
and higher
You have to add box-sizing:border-box property to your input#searchInput
Like:
#searchInput {
....
box-sizing: border-box;
-moz-box-sizing: border-box; /* Firefox */
}
Working Example: http://jsfiddle.net/XLyBR/1/
Your margin differs in the searchInput and searchButton css classes
Also what about the default css line-height on these elements - do they differ - try specifying line-height.
Wing
BTW - it would help if you tell us how the rendering differs