I have some navigation elements constructed like so
<div id="topnavcontainer">
<a href='/web/link1.html' >link1</a>
<a href='/web/link2.html' >link2</a>
<a href='/web/link3.html' class='current'>link3</a>
</div>
The CSS for #topnavcontainer a.current specifies a gradient and uses DXImageTransform so that IE can render the gradient too.
It does, however, only seem to work if I set #topnavcontainer a.current to display: block which ruins the way the navigation works.
Does anyone know any work arounds?
Yes: for filters to work, your element must have layout. There are a number of ways to do this via CSS (outlined in the linked document). One way (which is not valid CSS but will work) is
zoom: 1;
Another that is valid CSS but may affect formatting. is
display: inline-block;
Related
Why is it that when i make an image a link it creates a little black line to the right of it?
It's a combination of two things. Your anchor has an underline, and your markup has whitespace. For instance, your HTML likely looks similar to this:
<a href="http://google.com">
<img src="http://lorempixel.com/100/100" />
</a>
That nicely formatted space contains whitepace characters that get rendered (and then, underlined from the anchor). Note that some of the other answers might remove the underline by using text-decoration:none;, but there is actually still a small space next to your images caused by the whitespace, which can cause trouble if you're trying to achieve a "pixel-perfect" rendering. To solve it, remove whitespace from in between your anchor tags or set the font-size to 0:
Html fix (better):
<img src="http://lorempixel.com/100/100" />
Or, a css fix:
a {
/* Of course You'll want to better target this, since you won't want all anchors to be font-size:0 */
font-size:0; /* Now that the font size is zero, whitespace won't show. */
text0decoration:none; /* If you want to add this, you can, for good measure */
}
Note: One caveat of the css fix is some older browsers ignore a font size of 0.
It's a weird artifact with links and images, that the <a>'s signature underline shows a little. If you have your code like
<a href=...><img src= ... /></a>
You can fix that line by disabling the default underlining behavior on <a> links with <img> tags inside. Just apply a class to all of the <a> links in question (like <a class="img-link">), then CSS:
a.img-link {
text-decoration: none;
}
I have sorted it now, it was just a case of adding this to my css
a:link {
text-decoration: none;
}
I'm creating a site with a horizontal navbar in which the buttons are designed as elements, making them easy to differentiate, and they individually light up when you a:hover over them. Here's a link: http://allpropestmanagement.net/commercial2.html
Obviously not a finished product.
My current problem involves that big purple field on the far right of the navbar, the one that's not a button. That too is an element, but with hover disabled and a whole load of nonbreaking spaces to pad it. That's the problem. I would like that purple field to extend all the way to the right end (with a tiny margin, like it does on the left side). The trouble with nbsp, as you can imagine, is that there's a finite number of them, and they don't scale. So if the navbar is the perfect length on my computer with, say, 16 nbsps, on someone else's machine it won't reach all the way and on yet another person's it will reach too far.
The html looks like this:
<div id="navmenu">
<form>
Home
Commercial
Meet The Pro
Contact
<a id="farright" style="border-top-right-radius:25px;">
<i> "We'll get the job done right!"
</i></a>
</form>
</div>
I feel odd saying this, but the css is kind of bulky and I'm having trouble formatting this post. Perhaps I'll add it in a few minutes once this post is visible, but the css file is "smithmicropurple.css".
Anyway, I would like a way to stretch that element so it always fits correctly, or if not, some other method that achieves the same effect. I have already tried setting widths individually for each element and that doesn't appear to work.
I like to do these types of things to "help" others (rarely, if I'm lucky), but also to help me learn more about html/css.
So I've given it the old college try with this FIDDLE.
HTML
<div class='holderdiv'>
<a href='#'>One</a>
<a href='#'>Two</a>
<a href='#'>Three</a>
<a href='#'>Four</a>
<a href='#'>We'll Get the Job Done Right!</a>
</div>
I won't post the CSS because it's pretty long. It's in the fiddle.
Please don't consider this a "real" answer. Perhaps just something to think about.
Semantically, I am not sure why the parent is a form element, i'd suggest changing that to a HTML5 <nav> element. (assuming you're using HTML5, of course)
The approach taken here is to set the child elements to display:table-cell, and give the targeted element, #farright a width of 100% to fill the remaining space. Also, text-align:center will effectively center all the child elements. No need for %nbsp;
#navmenu {
font-size: 14pt;
margin: 5px 0 0 5px;
}
#navmenu form {
width: 940px;
}
#navmenu form > a {
display: table-cell;
white-space: nowrap;
text-align:center;
}
#navmenu #farright {
width:100%;
}
It's an easy question and I've done it several times before, but for some reason, it's not working this time. I have an image and when a user hovers it, a description should show.
HTML:
<div class="description custom">
<a class="description_help_text" href="">
<img src="../../misc/help.png">
<span>Bla bla bla.</span>
</a>
</div>
CSS:
div.description a.description_help_text span {
display: none;
}
div.description a.description_help_text a:hover span {
display: block;
}
But for some reason, it's not working. I'm guessing some kind of stupid syntax I'm overlooking right now.
And a second question, is it possible to use a a-tag without linking it? So a user can click on it as much as he wants, but with no actions from the browser?
I think the latter CSS block should be
div.description a.description_help_text:hover span {
display: block;
}
For the links without action I recommend using
link
Your CSS should work fine, so my guess is that you have a parent class somewhere which is affecting it. Try looking through the ascendent styles in Firebug.
Re. your second question, you can supply no href value to an anchor element, but this may still cause the page to jump when the link is clicked, and IIRC it is not valid HTML. An alternative is to link to javascript:void(0);, although this is rather ugly IMO.
The only way to fully prevent any link behaviour is to create a link handler for the element in javascript and place event.preventDefault(); within it.
This seems to work for me: http://jsfiddle.net/qVK6f/
to answer your second question at least, try:
click
I'm reworking a site but only have permission to change the CSS. Most of the elements I need to change are properly tagged as id's or classes, but a few places have ids or classes listed inside an img tag.
I want to replace that image in the img tag using only css. Is there a way to do this? ie, hide the src img and have only my css referenced image visible?
sorry for such a late post, (almost a year, i know..), but i had the same exact problem Dreamling,
Some of the html used on our site is called up externally, so editing the html was not an option for me either. Here's how i solved the problem... Using only CSS.
Use Firebug if you have it.
Now look for the image you'd like to replace in the HTML. (firebug will show the id's and classes of the elements)
Your HTML should look something like this for it to work. (with an img src element inside a span element)
<span class="Dreamlings_ClassA Dreamlings_ClassB">
<img src="http://www.dreamlingsSite.com/dreamlingspic.png" alt="Dreamling's Pic">
<span>[This is just an extra span!] </span>
</span>
Now for the CSS :)
Call up the first element by class in the css. (use the last class name to be more specific in with editing [if you have multiple span elements with same first class name])
<span class="Dreamlings_ClassB">
should look something like this..
span.Dreamlings_ClassB {
background-image: url('../dreamlingsnewpic.png') !important;
}
and to hide that pesky image in the img src element..
span.Dreamlings_ClassA img {
display: none !important;
}
And thats it! :)
p.s. I was using the !important tags in my css to overwrite other external stylesheets..
but you don't have to use the tags if yours css will work without them. (you just have to be more specific in the css with id's and classes)
Hope this helped!
-tony
If your image tag is inside a container, anything that's a block, then use this:
<style>
#container {
background: url('image.png') no-repeat;
text-indent: -9999;
}
</style>
<div id="container">
<img src="image.png" alt="image to be replaced" />
</div>
As others said, it's really not good practice, but it works. Only tested in Chrome.
I want to replace that image in the img tag using only css.
Not that I know of, no. An image's src attribute can't be altered from CSS.
I also can't think of a workaround to do this, not even a terribly kludgy one. You can of course assign a background-image to the image element, but the actual image will always be in front of it,
You would have to have the original HTML altered in a way so the original button is a <button> element with a background-image property - that you can override using CSS.
Restricting access to the HTML but allowing access to edit CSS is odd practice. Both elements go hand in hand to produce the page.
Anyway, you could try removing or changing the name of "btn_next.png" so that it doesnt display when called from "src" and make the CSS the following:
#btn_next {
background: url('image.png') no-repeat;
display:block;
width:150px; /* for example */
height:30px; /* for example */
}
If that doesnt work, the only other way would be to hide the input button and replace the li row with a background image but then the button will cease to work. Unless you have access to an already included javascript file, then you can look at other solutions.
I've inherited a large project that already has a large markup base coupled with a short deadline, so a complete rewrite is out of the question. As such, I have an issue that needs to be resolved ASAP:
(Forgive my cryptic shorthand in advance)
I have a header that contains an UL and a DIV.
div id="header"
ul id="nav"
<a li />
<a li />
<a li />
/ul
div id="promotion"
p
/div
/div
I want the background-image (ie., the entire DIV) to be a link, so I added this to the markup:
div id="header"
a id="overlay"
...
And the CSS for that reads something like this (not the exact CSS, I don't have access to the file while I'm at home):
a#overlay {display: block; width: xxx, height: xxx, z-index: -1
Now here's the kicker: the UL and the other DIV need to be positioned above "overlay," because they have their own links in them. This works in FF3 and IE8, but not IE6/IE7. I'm looking for a generic solution to this problem that is compatible in IE6/IE7 (and dropping IE6 is not an option, this is a BIG client)
Any suggestions? Here it is in simple terms: header --> link overlay --> ul with links --> other elements on top of link overlay
You could use JavaScript to attach a click handler to that background instead of relying on a link.
document.getElementById('overlay').onclick = function() {
window.location = 'http://www.google.com/';
}
IE6/7 does not respect the z-index stacking context as you'd expect. Have you tried setting a higher index on the child elements of the parent anchor?
Here's the generic solution I came up with after reading the link Tate Johnson provided.
I tested it and can confirm that it works in IE5.5/6/7/8, FF3, Chrome and Safari.
I was overlooking the fact that you need to declare the position of each element if you're going to use z-index. Setting everything to position: relative (except for the link, which is set to position: absolute) did the trick.