I have a small problem with my webpage. I have a combobox and I've written a CSS class for it. It works fine except in IE7. Can anybody give me a solution for that?
This is my CSS:
.textbox_short{
float:left;
width:150px;
padding:3px;
margin-left:10px;
/*margin-bottom:5px;*/
margin-top:5px;
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
color:#666;
border:1px solid #F90;
}
And my HTML:
<select name="drop_country" class="textbox_short" id="drop_country">
</select>
IE<8 does not give padding and border to SELECT elements. Try to wrap SELECT inside a DIV or SPAN Follow this link
IE6/IE7 css border on select element
Related
I have found this awesome menu on codepen. Now I want to use it, but my problem is that I want to place it right-aligned on my website. Unfortunately this menu drops also right. But I want it to drop left. So how could I solve this problem. (Change the opening angle didn't work?)
Thanks for your help.
http://codepen.io/lbebber/pen/pvwZJp
$opening-angle:$pi*2;
change transform property at .menu-open:checked~.menu-item selector
from transform:translate3d(110px*$i,0,0); to transform:translate3d(-110px*$i,0,0);
And change left property to right in .menu class
Updated .menu
.menu{
#extend %goo;
$width:650px;
$height:150px;
position:absolute;
right:50%; /*Changed*/
margin-left:-80px;
padding-top:20px;
padding-left:80px;
width:$width;
height:$height;
box-sizing:border-box;
font-size:20px;
text-align:right; /*Changed*/
}
Codepen
I have this (simplified) css for the select element to get rid of the browser-specific appearance
.select{
display:inline-block;
position:relative;
}
.select:after{
position:absolute;
bottom:0;right:0;
content:'\2193';
}
select{
appearance:none; (-moz and -webkit too)
width:100%;
height:100%;
}
(Best seen in http://jsfiddle.net/kwpke3xh/)
body{
background:#eef;
font-family:sans-serif;
}
.select{
display:inline-block;
background-color:#fff;
border-radius:.5em;
border:.1rem solid #000;
color:#013;
width:8em;
height:1.5em;
vertical-align:middle;
position:relative;
}
.select:after{
position:absolute;
bottom:.15em;top:.15em;right:.5rem;
content:'\2193';
}
select{
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
font:inherit;
border:none;
background-color:transparent;
color:inherit;
width:100%;
height:100%;
padding:0 .5em;
}
<span class="select">
<select>
<option>A</option>
<option>B</option>
</select>
</span>
It looks good, aside from Firefox still showing the arrow (as described Firefox 30.0 - -moz-appearance: none not working)
The only technical problem is that when I click on the select element, it shows the option elements, but if I click directly on the arrow, it does not.
Is there a way to avoid this?
The simplest CSS solution would be to add pointer-events: none to the pseudo element. In doing so, you can click through the element because mouse events are removed.
Updated Example
.select:after {
position:absolute;
bottom:.15em;
top:.15em;
right:.5rem;
content:'\2193';
pointer-events: none;
}
(Just take browser support for the property into consideration.)
I have a vertical CSS menu but there is a gap to the left and above and i cannot work out where to remove it - my menu CSS is below and i have created a fiddle with my full code:
#vertical_menu {
float:left;
}
#vertical_menu > ul > li {
display:inline-block;
width:140px;
}
#vertical_menu > li {
display:inline-block;
list-style:none;
margin-left:-20px;
}
#vertical_menu li a {
display:block;
padding-bottom:10px;
margin-top:15px;
border-bottom:4px solid #000000;
color: #000000;
text-decoration:none;
}
#vertical_menu li a:hover {
border-color:#666666;
color:#666666
}
any ideas?
http://jsfiddle.net/Dfw9f/1/
i think what you are looking for is a reset CSS, kindly check CSS Tools: Reset CSS
The goal of a reset stylesheet is to reduce browser inconsistencies in
things like default line heights, margins and font sizes of headings
for quick solution just add this to your CSS
ul,tr,hr{margin:0;padding:0;}
I think adding this to your code will solve your problem:
ul
{
padding:0px;
margin:0px;
}
Hope this helped.
UPDATE
I think the gap is not because of an issue with margin or padding, but because of an empty row in your table. You can see this by giving the table a border, like <table border="1"> (jsfiddle).
I see that you included the last row of the table to have a line between the table and the menu. You can accomplish this simply by deleting the last row of the table (which is messing your layout) and add a border-bottom to the table, like <table border="0" style="border-bottom:1px solid gray;">
JSFIDDLE - here is an updated version, with the line and correctly laid out menu.
Hope this helped.
I have a text box that has been hyper-linked and the problem is I'm trying to remove the underline from the hyper-link text.
The text-decoration:none; setting should remove it, but it doesn't seem to work.
How can I remove this underline from the hyperlinked text?
HTML:
<div class = "i6">Test Page</div>
CSS:
.i6 {
height:30px;
width:80px;
position:absolute;
left:1150px;
top:10px;
font-family: Lucida Sans;font-size:15px;
color: #FFFFFF;
background-color:#C1DAD4;
margin:10px;
list-style:none;
text-align:center;
padding-top:0px;
padding-bottom:10px;
padding-right:2px;
padding-left:0px;
text-decoration:none;
}
You need to apply text-decoration:none; to the link itself, not the inner div.
For example, you could give the link itself a class, e.g:
<div class = "i6">Test Page</div>
Then in your CSS, you could target the link itself:
.theLink {
text-decoration:none;
}
Here's a working jsFiddle.
I want the links inside of the second, nested div to have red text.
Dulled down CSS:
#outerdiv{ padding:10px; background-color: #ddd;}
#outerdiv a:link{ color:blue; }
.innerdiv{ padding:10px; background-color: #aaa;}
.innerdiv a:link{ color: red; background-color:White;}
Dulled down HTML:
<div id="outerdiv">
OUTERDIV link
<div class="innerdiv">
INNER DIV link
</div>
</div>
JSFiddle: http://jsfiddle.net/5S6ez/1/
How can I make my innerdiv links have red font?
My link keeps as much of its grandparents' styles as possible even though it has new styles applied to it that occur later in the CSS file. Why?
The problem is that the id based selector is more specific than the class-name based selector, to change that, use:
#outerdiv .innerdiv a:link{ color: red; background-color:White;}
Try making the outerdiv classes instead of ids. Like this:
.outerdiv{ padding:10px; background-color: #ddd;}
.outerdiv a:link{ color:blue; }
.innerdiv{ padding:10px; background-color: #aaa;}
.innerdiv a:link{ color: red; background-color:White;}
If that is not an option (outer div must be an id), then you can try to make the innderdiv rules more specific to the outerdiv, like this:
#outerdiv .innerdiv{ padding:10px; background-color: #aaa;}
#outerdiv .innerdiv a:link{ color: red; background-color:White;}
Also, I was recently introduced to this article, and it really has helped me a lot with CSS in general:
http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/
Use a, not a:link.
:link is a pseudo-class for unvisited links.
Also, just for a heads up that may help you with other things, keep in mind that a tags are also inline elements and not to style them with padding, etc unless you set "display: inline-block" or "display: block". Yeah, a bit more than you asked but still can be helpful.