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).
Related
Border-radius and box-shadow are not working in IE7. I'm using the PIE.htc file. The path is correct, I checked it. Don't know where it's going wrong. I used it before too and it was working then.
Don't know the reason this time.
.box-shadow-outer {
float: left; font-size: 40px;
border: 2px solid #c4c4c4;
padding: 80px 0;
text-align: center;
width: 500px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius:10px;
-webkit-box-shadow: #666 0px 0px 10px;
-moz-box-shadow: #666 0px 0px 10px;
box-shadow: #666 0px 0px 10px;
background: #e4e4e4;
behavior: url(../../Content/Css/PIE.htc);
}
float: left; is creating problems.
You can solve it by 2 ways:
Remove float: left;
add this style:
position:relative;
z-index:1;
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
I am trying to nest divs so that I can make the page that I'm on inset instead of outset which the other ones are. This is what I have down so far. If anyone knows how to solve this, please tell me! Any help is appreciated!
This is my css code for it:
#LeftNav p {font-family: Arial;
font-size: 18px;
text-align: center;
padding: 10px;
margin-top: 65px;
margin-left: 4px;
margin-right: 4px;
position: relative;
border: 3px solid #000000;
border-style: outset;}
.Home_Inset {position: relative;
border: 3px solid #000000;
border-style: inset;}
Try this:
.Home_Inset { border-style: inset !important; }
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.
I have read posts about css inheritance and i am still left a bit lot.
Is this possible to do in css?
.cv3-envaleur h1 {
background: none;
font-size: 23px;
line-height: 38px;
color: #fff;
margin: 0px 0 5px 0;
padding: 10px 0px 5px 0px;
}
I have also tried this.
div.cv3-envaleur h1 {
background: none;
font-size: 23px;
line-height: 38px;
color: #fff;
margin: 0px 0 5px 0;
padding: 10px 0px 5px 0px;
}
I am trying to give some style to the H1 heading inside the div called .cv3-envaleur but i can't seem to make it work.
Please help
Both of these are valid ways to do what you are after. There has to be something overriding these. You can check in Firebug as to what the current definitions are and what is overriding. You can also add the !important flag to force the style.
<div class="cv3-envaleur"><h1>Header</h1></div>
div.cv3-envaleur h1
{
background: none !important;
font-size: 23px;
line-height: 38px;
color: #fff;
margin: 0px 0 5px 0;
padding: 10px 0px 5px 0px;
}
When you say the div is "called" cv3-envaleur, do you mean that its ID attribute is cv3-envaleur? If so, then you need to use the # selector, like so:
div#cv3-envaleur h1{
...
}
Dot selectors are used for classes, not IDs.