Got some IE issue with fieldsets, as you can see in the image is that IE even IE9 doesn't get the margin-top: -26px; Someone how knows the fix?
fieldset{
border: 1px solid #CCC;
border-top-color: #AAA;
border-left-color: #AAA;
background: #EEE;
margin: 35px 0;
padding: 10px;
}
legend {
border: 1px solid #AAAAAA;
border-bottom: none;
padding: 5px 10px;
margin-left: -11px;
margin-top: -26px;
}
image: http://i.stack.imgur.com/oVhb2.png
edit: Google chrome has the same issue
Fieldsets and legends are notoriously hard to style the same way across different browsers. You should really style to their limitations and not style to what you want. With that said... if you're still stubborn and want to do the wrong thing you should put an element within the legend that you style. Something like this (see Fiddle) will work for Chrome and IE (Note: it will not look right for Firefox).
fieldset{
border: 1px solid #CCC;
border-top-color: #AAA;
border-left-color: #AAA;
background: #EEE;
margin: 35px 10px;
padding: 10px;
position:relative;
}
legend {
position:absolute;
top:0;
}
legend span {
border: 1px solid #AAA;
border-bottom: none;
padding: 5px 10px;
position:absolute;
left: -11px;
top: -30px;
}
A couple things to note...
By positioning the legend absolute, you trick the browser into styling the border on the entire top of the fieldset. If this wasn't done there would be a little gap where the fieldset is.
You're makign a ton of assumptions about how the browser will style this that may or may not be right.
adding
.fieldset{display: block;
works for me
Related
i have not used this module much so having very little knowledge.
I am having a very strange issue of multi select drop down is going over the header I found the solution for this is to change the z-index of it but can do it, below I have shared my css code
.multiselect-dropdown .dropdown-list {
position: absolute;
padding-top: 6px;
width: 100%;
z-index: 10;
border: 1px solid #ccc;
border-radius: 3px;
background: #fff;
margin-top: 10px;
box-shadow: 0 1px 5px #959595;
}
this shows when i inspect it
enter image description here
I'm trying to create this vertical line within my HTML page, I wanting to use it as a place to put side information. I'd like to be able to color this as well! I tried a few things, but just can't get it right. Here is my code:
#sidebar {
width: 200 px;
border-right: 3px solid #000000;
border-left: 3px solid #000000;
}
#sidebar {
float: left;
width: 200px;
padding: 15px 10px 15px 20px;
border-right: 3px solid #000000;
border-bottom: 3px solid #000000;
min-height: 100vh
}
I think this is what you're wanting
I can't seem to find how to remove the underline under the links...
.articles {
margin-left: auto;
margin-right: auto;
width: 625px;
text-decoration: none;
}
.articles-box {
width: 120px;
height: 40px;
-webkit-border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
background-color: #E3D41F;
-webkit-box-shadow: #B3B3B3 1px 1px 1px;
-moz-box-shadow: #B3B3B3 1px 1px 1px;
box-shadow: #B3B3B3 1px 1px 1px;
font-family: Optima,Segoe,"Segoe UI",Candara,Calibri,Arial,sans-serif;
font-size: 20px;
color: white;
line-height: 40px;
text-decoration: none;
text-align: center;
}
Set the text-decoration:none; on the <a>
Css:
a {text-decoration:none;}
Well, you appear to be setting the text-decoration property correctly, so I would say that either the styles aren't being applied to the elements that you expect them to be (e.g. the class names are spelled incorrectly), or they are being applied and something is overwriting that property at some point.
I would recommend using the browser tools to explore the HTML for the page, find the element that incorrectly has an underline, and examine where it is getting its styles from (I prefer Chrome for this, but most browsers provide something along these lines). If that doesn't make the solution obvious, I'd be happy to help if you can provide more information (such as the HTML for the elements and the surrounding stuff).
I have two "inline-block" buttons, see the image below:
But, if you click, you will see the other button two pixels down.
Example: http://jsfiddle.net/caio/EUjeY/.
.button {
border-radius: 2px;
border: 1px solid #ddd;
border-bottom: 3px solid #ccc;
background: #eee;
padding: 5px 10px;
display: inline-block;
}
.button:hover {
background: #e7e7e7;
}
.button:active {
border-bottom: 1px solid #ddd;
padding: 7px 10px 5px;
}
Can you help me to prevent this?
Thanks.
you can add this to your .button class:
vertical-align: top;
Working example: http://jsfiddle.net/uW7Sa/1/
Just give .button the css property float: left and both buttons will remain at the same location. This is because float: left removes the button from the flow of the document, so aside from the containing div, it isn't affected by other, inline elements:
.button {
border-radius: 2px;
border: 1px solid #ddd;
border-bottom: 3px solid #ccc;
background: #eee;
padding: 5px 10px;
display: inline-block;
float: left;
}
DEMO
I would provide more code because I'm using a float here, but I don't know what the rest of your document looks like, so I can't compensate.
I am trying to create 2 buttons of the same width that will look as following:
White text in a blue square with black border and with margin of lets say 5px from each side:
this is my css code:
a.button
{
background-color: Blue;
border-width: 2px;
border-color: Black;
color: White;
padding: 2px 5px 2px 5px;
width:100px;
margin: 5px;
}
But what I am getting is:
I am using Google Chrome browser, and when I click on "inspect element" I can see all my css properties there, but my application is ignoring them.
You need to declare the border style (solid in your case)
Try the following
a.button
{
background-color: Blue;
border: 2px solid black;
color: White;
padding: 2px 5px;
width:100px;
text-align:center;
margin: 5px;
display:inline-block;
text-decoration:none;
}
You will need to adjust the css, and add hover and active states.
Example: http://jsfiddle.net/3tKS7/
Make your element an inline-block:
a.button
{
background-color: Blue;
border-width: 2px;
border-color: Black;
color: White;
padding: 2px 5px 2px 5px;
width:100px;
margin: 5px;
display: inline-block;
}
Not sure if the capitalized color names are helping either.