i have the following css code:
.tag {
display: inline;
font-size: 10px;
padding: 5px;
color: #FFF;
background-color: #444;
}
.tag:hover {
font-size: 10px;
padding: 5px;
color: #FFF;
background-color: #666;
}
aside from the background color, and one having the display:inline, there is no difference, correct? Well when the .tag div comes into existance, it has white text but no background color. it also has a 12pt font size and no padding. however, it looks perfectly the way its supposed to when I hover over it. Can anyone tell me why its doing this?
there will be no different if you only have these 2 classes in your css file/scriptlet.
but it will be different if you have more than 2 and mixed with other classes as well.
your .tag might be overidden by other class
I'd debug it using firefox + firebug. This tool will show you which css class/properties is voeridden
Use !important
Related
Here is my (relevant) css code:
li a {
display: block;
font-weight:bolder;
color: #000;
padding: 8px 16px;
text-decoration: none;
background-image: url('004.jpg')
}
/* Change the link color on hover */
li a:hover {
background-color: #555;
color: white;
}
I've tried the URL with double quotes, single quotes, and no quotes and it still isn't working. Can someone help me with this?
Thanks so much for your wise advice.
Make sure that the url and the image extension are correct.
Try this. No quotes, and background instead of background-image. Also, make sure that the file path is correct.
background: url(004.jpg);
I styled some CSS buttons, and they look great, but when I open the page on mobile, they look bad and don't use the defined styles. How does one typically maintain the styling of buttons in CSS across all devices?
Here's my code for the buttons that looked good in the browser:
input[type="button"]
{
width: 416px;
border: none;
color: #fff;
font-size: 1em;
padding: .5em;
margin: 5px 0 5px 0;
border-radius: 3px;
font-weight: bold;
line-height: 40px;
background: #00aeff;
}
input[type="button"]:hover
{
background: #00a0db;
}
But this is what it actually looked like on different pages on mobile.
There is no magic bullet. Make sure that your styles have proper platform-specific directives (ie -webkit-) and, most importantly, are supported on the platforms that are acting up.
The issue with the font-size..Try setting px value for the font..it should be Ok..
like
input[type="button"]
{
font-size:14px;
}
I'm trying to reverse engineer the menu on this web page (this is just a personal project, not trying to steal their work).
http://clapat.ro/themes/eleven/color/
However, I can't seem to get the transition effect to work. When I add the border-top on, it's pushing the content of the down instead of staying nicely in-line like in the example.
Also, the border seems to "blind" upwards, but when I do it, it blinds downwards.
Any help would be greatly appreciated!
This is causing the problem:
.nav > li > a {
display: block;
}
which is coming from bootstrap.css If you remove that bit of CSS it works correctly.
You can override that style in index2.php by adding display: inline;:
.navbar a, .navbar a:active, .navbar a:visited {
color: #7f7f7f;
padding-top: 35px;
height: 90px;
text-transform: uppercase;
font-weight: bold;
font-size: 14px;
padding-bottom: 45px;
display: inline; /* added this line */
}
I am currently trying to wrap my brain around a problem, but i can't seem to grasp it.
In an unordered list for a navigation, i want to add an icon before every list item via css before pseudo class.
<ul class="list">
<li class="list-item">one</li>
<li class="list-item">two</li>
<li class="list-item">three</li>
<li class="list-item">four</li>
</ul>
My first thought was to give both elements (the icon and the a-tag) display:inline-block and align the icon with vertical-align:middle. With just little adjustments (margin-bottom), this works well in chrome:
.list-item {
display: block;
font-weight: bold;
text-transform: uppercase;
margin: 10px 0;
padding-bottom: 10px;
border-bottom: 1px solid #F3F3F3;
height:1.5em;
overflow:hidden;
}
.list-item:before {
display: inline-block;
content: '';
vertical-align: middle;
background-color: red;
width: 5px;
height: 7px;
margin: 0 4px 0.125em 5px;
}
.list-item a {
display: inline-block;
overflow: hidden;
line-height: 1.5;
height:1.5em;
}
But when you load the page in firefox, the icon is way off at the bottom. http://jsfiddle.net/pUhPB/4/
I tried what seems to me every possible combination of display, vertical-align and margin-values to get it right in both browsers, and finally, if i give the a-tag vertical-align:middle and the icon vertical-align:baseline, it seems to work:
.list-item {
display: block;
font-weight: bold;
text-transform: uppercase;
margin: 10px 0;
padding-bottom: 10px;
border-bottom: 1px solid #F3F3F3;
height:1.5em;
overflow:hidden;
}
.list-item:before {
display: inline-block;
content: '';
vertical-align: baseline;
background-color: red;
width: 5px;
height: 7px;
margin: 0 4px 0 5px;
}
.list-item a {
display: inline-block;
vertical-align:middle;
overflow: hidden;
line-height: 1.5;
height:1.5em;
}
http://jsfiddle.net/L3N3f/
But i just don't get it. Why does the first version not work? To me, it seems way more logical than the version that actually works. And which one of both browsers doesn't render the elements the right way?
I already found a solution that seems to work for me, so it's not a very urgent question, but it bugs me that i don't understand the core of my problem (and the solution), so i would be really thankful if someone could enlighten me on this.
thanks
According to web standard only inline elements can be "vertically aligned" in spite that some browsers, like chrome, still align them. Note that it is the element that is aligned and not its contents!
So if you apply it to a <span> the <span> becomes aligned with the surrounding text and not whatever is inside it within in.
ispo lorem <span> text </span> due carpe diem
adding span {vertical-align:top; border: 1px solid black} makes <span> text </span> (whole box) become higher than the rest of the text and not push the text to the ceiling of the box <span>.
The core issue here is that Firefox is very literal when it comes to web standard whilst Chrome adds a few implicit features like this one.
For more details click here.
EDIT: apparently if you use vertical-align:top ONLY on the <a> it also works.
Your problem is that per spec setting overflow:hidden changes the baseline position of an inline-block. Firefox implements what the spec says. Chrome does not.
So as long as your .list-item a is baseline-aligned, it will render differently in the two browsers. The only way to make the renderings the same is to make sure you don't baseline-align any inline-blocks with non-visible overflow, which is what your second code paste does (it's using vertical-align: middle on the inline-block).
Try this: http://jsfiddle.net/pUhPB/6/
The first thing I do in these situations is to open the code in both browsers. Then I start removing CSS code until I can see the problem. Removing the margins and the vertical-align, both browsers have rendered the code differently. So I keep removing code until they're both the same. Once they were the same in both browsers, I then changed what I could to get the desired effect.
Here's the new CSS:
.list-item:before
{
content: '';
background-color: red;
width: 5px;
height: 7px;
margin: 5px 4px 0 5px;
float:left;
}
I'm having the weirdest issue in IE (7, specifically) when implementing CSS borders. I first noticed this a few months ago.
The CSS is literally this: #donate {border:1px solid #299ae5;}
As you can see from the attached image, both of these screenshots were taken in IE7, from the same website, different pages - same template file. It's like the border has a "tail" in the bottom left corner.
Does anyone have any insight about this???
Edit: Here is the HTML (although I've seen this also on random sites in IE7 recently on input fields as well)
<li><span>Donate</span></li>
And here's the CSS:
li { display: inline; }
li a { color: #fff; display: block; float: left; margin-right: 8px; padding-right: 8px; line-height: 1.2em; }
li a span { background: url(bg-gradient.png) repeat-x 0 0; border: 1px solid #299a35; padding: 1px 5px 2px 4px; }
Thanks in advance!
I tend to use display:inline-block...the only other thing I'd change is making the anchor the button rather than the span. here's a quick example http://jsfiddle.net/3x4fR/2/
Does giving the li a span element the display: block; declaration do the trick? It may be having trouble applying vertical padding to an inline element.
jsfiddle makes testing stuff easy.
If you don't need the span get rid of it if not try *zoom:1 or some other way to give 'hasLayout' to the element. see example here http://jsfiddle.net/ShaggyDude11/zbZr8/3/