I have a link - notifications - with a red disc next to it. I would like hover on the disc OR text to result in the text only being underlined (I also would like clicking anywhere in link to go to the same link).
I can find nothing in Google about this specific issue.
Everything I try makes the 1 get an underline as well as the notifications text:
HTML
<div class="col-sm-offset-4 col-sm-5" id="nav">
<div class="userbox">
<span class="numbercir">1</span> Notifications |
Signin | Signup
</div>
</div>
CSS
.numbercir {
border-radius: 3px;
height: 16px;
width: 16px;
padding: 2px 3px;
background: #f00;
color: #fff;
text-align: center;
font: 12px Arial, sans-serif;
}
/* This doesn't work - ie doesn't stop the 1 getting an underline */
a .numbercircle:hover {
text-decoration: none !important;
}
How can I do this? Thx. (HTML 5 / CSS3 are fine as long as the technique has wide browser support).
You can put the part you want to be underlined in a span.
This has also the effect, that you will online get the underline, when you go over that specific span.
a .ca:hover {
text-decoration:underline;
}
ABC<span class="ca">CD</span>
And in case you want to underline only a certain part not only when you hover over that part, just change css to this:
a:hover .ca {
text-decoration:underline;
}
ABC<span class="ca">CD</span>
I hope I got you right this time :-)
You could make the notification count a pseudo element positioned absolutely, then add the count as an attribute. That way your html would stay simple & clean. So the html would look like this:
Notifications
Functional example here:
https://jsfiddle.net/p0593yz9/1/
Try this:
a .highlight:hover {
text-decoration:underline;
}
Notif<span class="highlight">ications | Loc</span>ations
Related
I am trying to create a pre-styled button using a div with a class of .red-button. Some buttons need to have a littel magnifying glass on them so I am thinking I can use the CONTENT property to display this on those buttons that need it by simply adding "features" to the class.
<div class="red-button features">Find a Home</div>
CSS looks like this:
.red-button {
background: none repeat scroll 0 0 #A20335;
color: #FFFFFF;
font-size: 70%;
font-weight: normal;
padding-left: 10px;
text-transform: uppercase;
width: 193px;
}
.red-button.features, .red-button.floor-plans {
margin-right:20px;
content:url("http://www.abc.com/popeye/wp-content/uploads/construct/icon-magnifier.png");
}
So why is my magnifying glass not showing up?
I know the link is right because when I add ":before" to the css it shows up.
.red-button.features:before
Here is the page I am working on: http://splitlightdesigns.com/megatel/?page_id=379
Many thanks,
Houston
content can only be used with the ::before and ::after pseudo-elements. https://developer.mozilla.org/en-US/docs/Web/CSS/content
I'm designing a web page and I used HTML5 to make an entire div tag a link. Prior to adding the link, the whole div would expand when I hovered over it. Suddenly, it's only working if I hover over the words, not the box I created. The HTML looks like this (minus the actual link):
<a href="link goes here" style="text-decoration: none;">
<div class="home-tab">
home
</div>
</a>
And the CSS to make it hover looks sort of like this:
.home-tab:hover {
width: 150px;
height: 45px;
margin-top: 30px;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
font-family: arial;
color: #FFFFFF;
text-align: center;
font-size: 13pt;
padding-top: 25px;
}
(Note: This is not all of the code in the stylesheet. I have some lovely color in there too.)
Is there something I'm missing in my CSS to make the whole thing work on the hover and not just the words? I'm not even sure what questions to ask to figure out what I've done here.
ETA: I have checked this across three different browsers. It has the same problem on IE, Firefox and Chrome.
ETA: CSS without the :hover attribute.
.home-tab{
width: 150px;
height: 35px;
margin-top: 40px;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
font-family: arial;
color: #FFFFFF;
text-align: center;
font-size: 13pt;
padding-top: 25px;
}
ETA: Okay, here's something very weird. It seems that any elements on the far right don't have this problem. Seriously, the forums tab and next button on the far right both have :hover elements and they work exactly as I want them to.
Get rid of the <div> entirely and set <a> to display: block.
You're not supposed to put block-level elements inside of an <a> anyway.
Seems to be working fine here: jsFiddle
The only thing I can think of is that the div is not the size you think it is. the size and width elements that you are setting in your css are only active when your mouse is on the div. You need to set them in the normal non hover settings as well if you want the div to be that size. Right now it is defaulting to just large enough to hold the text. You can see this demonstrated by the black border I added in my example.
Here is my suggestion:
.home-tab {
/*All of the sizing code goes here to create box for div*/
}
.home-tab:hover {
/*anything you want changed on hover goes here*/
}
I hope I was understanding your question correctly. If you need more clarification please let me know. Good luck!
I think you want to expand that div when you hover cursor on that div.
i wrote a code below that will solve your hover problem.
Here is a code for you customize this
.home-tab{
width:150px;
height:45px;
margin-top:30px;
color:#008080;
font-family: arial;
background-color: blue;
transition-duration: .8s;
color:white;
text-align: center;
font-size: 13pt;
padding-top: 25px;
}
.home-tab:hover{
width:200px;
height:60px;
font-size: 16pt;
transition-duration: .8s;
}
a{ text-decoration:none} /* optional*/
</style>
<a href="#"><div class="home-tab">
home
</div>
</a>
I have searched far and wide on the Internet but have not found anything helpful regarding how to style the dropdown portion of a dropdown list in a form. I would appreciate a pointer in the right direction. Thanks.
I've been working on the same problem for a while. Came up with a pretty simple solution using a holder div that is shorter then the dropdown itself. I also use a background image to get the dropdowns arrow to look the way I like. Check it out http://www.danielneumann.com/blog/how-to-style-dropdown-with-css-only/
All you need is a div around the select tag and 2 CSS classes.
HTML:
<div class="mainselection">
<select name="State" id="input7">
<option></option>
<option value="Alabama">Alabama</option>
...
<option value="Wisconsin">Wisconsin</option>
<option value="Wyoming">Wyoming</option>
</select>
</div>
CSS:
.mainselection {
overflow:hidden;
width:350px;
margin-left:35px;
background: url("images/dropdown_arrow.png") no-repeat #fff 319px 2px;
/* dropdown_arrow.png is a 31x28 image */
}
select {
border:0;
background:transparent;
height:32px;
border:1px solid #d8d8d8;
width:350px;
-webkit-appearance: none;
}
Then after a little Javascript verification, I can also switch the class on the div to .dropdownbad to give it a red border.
.dropdownbad {
border:2px solid #c13339;
}
The default and error states are shown here:
You can apply styles using the SELECT selector or applying a classname to a SELECT element. However, you'll run into issues with IE < 8 applying things like borders to the element.
You can then target options by using the OPTION selector.
SELECT { border: solid 1px red; font-weight: bold; }
OPTION { background:green; font-style: italic; }
Should give you a drop down with a red border (if using FF or IE8 in Standards mode) with bold text, and the options should be italic with a green background.
Check out this website for CSS only solution:
http://www.htmllion.com/default-select-dropdown-style-just-css.html
HTML:
<form>
<select>
<option>CSS</option>
<option>HTML </option>
<option>HTML 5</option>
</select>
</form>
CSS:
<style>
select {
border: 0 !important; /*Removes border*/
-webkit-appearance: none; /*Removes default chrome and safari style*/
-moz-appearance: none; /* Removes Default Firefox style*/
background: #0088cc url(img/select-arrow.png) no-repeat 90% center;
width: 100px; /*Width of select dropdown to give space for arrow image*/
text-indent: 0.01px; /* Removes default arrow from firefox*/
text-overflow: ""; /*Removes default arrow from firefox*/ /*My custom style for fonts*/
color: #FFF;
border-radius: 15px;
padding: 5px;
box-shadow: inset 0 0 5px rgba(000,000,000, 0.5);
}
</style>
Its possible, but convoluted to say the least. You can't actually style the drop down portion of a drop down list consistantly across different browsers as they all support them in different ways (I mean really varied support).
When I had a problam like this a few months ago, the only solution I found was to, using javascript, convert the drop down list into a ul/li drop down menu, which I could style. Of course there are numerous event that need handling, like selecting a value.
Luckly there's a plugin for JQuery that allows this be a trivial task. (The given Brainfault link for this plugin isn't working anymore.)
As mentioned above it's pretty much impossible to do using straight html, I have had good results with jQuery Combobox though.
Since this question was asked, browser technology has far improved. You can now create a custom dropdown menu entirely using CSS with no javascript.
Check out this blog post:
http://line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu
I have dropdowns in my cart that were light gray if not selected. I was able to turn the text black with this:
#customer_details ul {
color: black !important;
}
That was all I needed to change, so I can't say what else you could do.
this will be quite difficult to explain. I hope I'm able to.
I recently created a custom ASP.net server control, representing a toolbar. The toolbar contains buttons, so HTML elements. To allow me to add an image I use CSS which add it to the background. The CSS which I apply on the input element looks like this:
.button{
padding: 2px 2px 2px 2px;
margin-right: 2px;
border: 1px solid #999;
cursor: pointer;
text-decoration: none;
color: #606060;
}
Moreover on the button itself (through the style tag; this is because these kind of buttons are rendered automatically and shouldn't be changed by the end-programmer) I have styles which define the background images and some additional settings
background-attachment:scroll;
background-image:url(images/select.png);
background-position:left center;
background-repeat:no-repeat;
padding-left:15px;
The padding-left is needed s.t. the text doesn't go behind the background image. So at the end you would have something like
<input type="submit" style="background-image: url(images/select.png); background-attachment: scroll; background-repeat: no-repeat; background-position: left center; padding-left: 15px;" class="button" id="someId" value="Save" name="someName"/>
On Firefox (as usual) everything works perfectly. My problem is that on IE (tested on IE 7 but I need to be compatible from IE 6+) it happens that if you enter a quite long text as the button text, the button will enlarge, basically the space before and after the button text increases with the size of the text. To have the button still immediately after the image I added the line text-align:right to the button class.
To illustrate it better...
On Firefox:
alt text http://img268.imageshack.us/img268/311/buttonfirefox.jpg
On IE:
alt text http://img23.imageshack.us/img23/2373/buttonie.jpg
Does anyone have any suggestion on how I could fix this??
//Edit:
What I could do of course is to specify a fixed width on the button, till it looks nicely. I would like to avoid this however, if possible.
This is an old bug. You need to add overflow:visible to the button. There is more here:
http://jehiah.cz/archive/button-width-in-ie
and here:
http://www.brandnewbox.co.uk/articles/details/removing_padding_from_ie_buttons/
Just try a css reset of submit button first (at the beginning of css file). For example margin, padding etc set to zero.
I am not quite sure how apply reset for submit buttons ..
but you can try following and test
/**
* Reset browser defaults
* Author: Tim Wright - csskarma.com
* Last updated: 04.19.2009
----------------------------------*/
body,div,dl,dt,dd,ul,ol,
li,h1,h2,h3,h4,h5,h6,
pre,form,fieldset,p,
blockquote,th,td { margin:0;padding:0; }
body { line-height:1;color:#121212;background:#fff; }
h1,h2,h3,h4,h5,h6,p { font-size:100%;font-weight:400; }
ol,ul { list-style:none; }
caption,cite,code,th { font-style:normal;font-weight:400; }
fieldset,img { border:0; }
caption,th { text-align:left; }
:focus { outline:1px dotted #eee; }
table { border-collapse:collapse;border-spacing:0; }
hr { border:0;border-top:1px solid #555;margin:0;height:1px; }
label,button { cursor:pointer; }
As per #Andrew's answer you can try * html input { overflow: visible; } also.
i'm making a splash image div that changes the background with different css class, here's rules i defined:
#splash {
height: 130px;
}
#splash.homepage {
background: #F7EECF url("images/splash_home.png") no-repeat 0 0 scroll;
}
#splash.projectspage {
background: #F7EECF url("images/splash_projects.png") no-repeat 0 0 scroll;
}
this works fine in firefox and chrome, but the background somehow doesn't show up in ie 6. The weird thing is, it works for the homepage class but not the projectspage class. so ie 6 seems to interpret these almost identical rule differently. i tried clear the cache, didn't help. i'm quite new to css and ie 6 hacks, so am i missing anythings here?
also another problem that's slightly related to this, it seems it doesn't work in firefox when there is space before the class, like "#splash .homepage", but somehow i see other people's websites using the css with a space. what could be the problem?
update:
i tried to reverse the order of the #splash.homepage and #splash.projectspage, then now projectspage works but not the homepage. It seems whatever is immediately followed by #splash is used.
here are some relevant css & htmls:
#splash {
height: 130px;
}
#splash.projectspage { background: #F7EECF url('images/splash_projects.png') no-repeat 0 0 scroll; }
#splash.homepage { background: #F7EECF url('images/splash_home.png') no-repeat 0 0 scroll; }
#splashtext {
padding: 53px;
height: 40px;
width: 450px;
}
#splashtext h2 {
color: #FFFFFF;
font-family: Georgia, "Times New Roman", serif;
font-size: 20px;
font-weight: normal;
font-style: italic;
}
#splashtext p {
color: #FFFFAA;
font-family: Calibri, Arial, san-serif;
font-size: 14px;
font-weight: normal;
margin-top: 10px;
font-style: italic;
}
<!-- splash, this one does not show -->
<div id="splash" class="homepage">
<div id="splashtext">
<h2>some header</h2>
<p>some description</p>
</div>
</div>
<!-- splash, this one shows -->
<div id="splash" class="projectspage">
<div id="splashtext">
<h2>some other header</h2>
<p>some other description</p>
</div>
</div>
IE6 does not support multiple combined selectors to select elements (#id.class or .class.class, etc). IE6 will ONLY recognize the last class/ID in your chain.
Details and example
However, in this case, as long as you only have .homepage and .projectspage on one element on the page, the background image should be showing up on the correct element.
I noticed that you are probably using .homepage and .projectspage to differentiate between two PAGES and the same ELEMENT on those different pages. A good practice is to put the class on the <body> element so you can use it to differentiate each page and their descendants.
<body class="homepage">
<div id="splash">
Then your CSS would be:
body.homepage div#splash { blah }
body.projectspage div#splash { blah }
Added benefit: you can now target any elements on a per page basis, not just the ones that you add ".homepage" or ".projectspage" to.
It's possible you're having an issue with the .png image files. IE6 cannot handle the transparency layer that is part of .png images, it simply renders any pixel with a transparent marker as a grey background.
As for the second part of your question, #splash.background is a significantly different rule than #splash .background. The first one (no space) refers to the element with id splash that also has a background class. The second rule (with a space) refers to any element of class background that is a child of the element with id splash. Subtle, but important difference.
Try taking out the quotes around your URLs in the background specifiers, or changing them to single quotes.
Why are you worried about ie6? Anyway it works in ie7 and ie8.
Are you sure that is not a problem with png? Try with a jpg or gif image.
I would bet that the problem is specifically to do with the IE6 misshandling of .pngs
To test, try replacing these graphics with a gif or jpg and check to see if the selectors are working correctly.
Once you've identified that it is a problem with pngs try using the Supersleight jQuery plugin.
I think using min-height property will sometimes work.
Try the below code.
#splash {
min-height:130px; /* first */
height:auto !important; /* second */
height: 130px; /* third */
}
#splash.homepage {
background: #F7EECF url("images/splash_home.png") no-repeat 0 0 scroll;
}
#splash.projectspage {
background: #F7EECF url("images/splash_projects.png") no-repeat 0 0 scroll;
}
Note: Please use the same order of css in #splash selector.
(I guess your projectspage is under a sub-directory of home-page?)
Try using absolute paths to each image in the CSS (eg. url("/images/splash_projects.png")) - it chould be that IE6 resolves images relative to the containing page instead of the CSS file (depends whether your CSS is inline or in an external file I suppose.)
I've got the same problem, and it's not PNGs.
e.g.
column2menu li { border-bottom : 1px solid;}
column2menu li.goats { border-bottom-color : brown;}
...works in IE6, but...
td#menu { background-repeat:no-repeat;
background-position:bottom right;}
td#menu.goats { background-image :
url(../images/goats.jpg);}
...doesn't.
But I found a solution for ie6 that works so far in FF, i.e.:
.tdgoats { background-repeat:no-repeat;
background-position:bottom right;
background-image : url(../images/goats.jpg);}
...so you use:
...and ie6 is happy
Thsi post looks OK where I'm typing it, but the preview in the blue box is a bit odd.
Somehow lines 2 and 3 got <h1>'d