I have a problem with an link's background.
For my exam this must work on all browsers down to IE 6. Problem is I am using a background image that should be positioned on the left of the links, but if the link is longer than one line IE 6 gets confused and positions the background image centered left, not top left...
I am using a 2colors .gif image and the anchor tag is located as follows
<style>
#right-menu {
float:left; width: 260px; border: 1px solid #e7e7e7; margin-left: 20px;
padding: 15px 20px;
background-color: #f6f6f6; min-height: 715px;
}
#right-menu .title {
font-size: 1.5em; color: #4a493f; font-weight: bold;
}
#right-menu a {
color: #4b4a41; font-size: 1em; padding-left: 15px;
background: url(../assets/bullet2.gif) left no-repeat;
display: inline;
}
</style>
<div id = "right-menu">
<h3 class = "title">
recent comments
</h3>
<ul>
<li>
<a href = '#' title = 'title'>
Etiam placerataaaaaaaaaaaaaaaaaaaaaaaaaaaaaa...
</a>
</li>
...
</ul>
</div>
If it cannot be done I will still appreciate someone stopping me from trying again and again.
Thank you for your time!
According to this article, several versions of IE just don't do the right things when rendering background images on multiline inline elements. There are several possible work-around mentioned in the article. The simplest looks to be using inline-block as the display style, but you can see the other work-arounds in the article.
There is also plenty written on the web about this issue so with the right Google search ("inline element background image"), you can find many other articles.
You also may want to make sure a background image is top/left by specifying both top and left:
You have this:
background: url(../assets/bullet2.gif) left no-repeat;
Might as well use this:
background: url(../assets/bullet2.gif) left top no-repeat;
It looks like top/left is supposed to be the default, but it doesn't hurt to specify what you want.
Related
I'm having some trouble with margins when viewing http://happyhourproductions.co.uk/tv-commercial-production.html in IE11.
Under the 'More like this' section on the right of this page, if you hover over either of the first two linked images the associated margin appears to change. Moving the cursor off does not change it back, but moving the cursor over any of the other links in that column does.
I thought it might be this bug: http://haslayout.net/css/Percentage-Padding-Margin-Bug but neither of those solutions worked.
I also found this question that might also be the same but without any solution: IE9 img hover add's margin to bottom
Here is the CSS, it was built using Twitter bootstrap and LESS if that's important?
.work .sidebar .morelikethis {
border-bottom: 1px solid #FFFFFF;
border-top: 1px solid #FFFFFF;
margin-bottom: 10.2564%;
margin-top: 7.69231%;
overflow: auto;
}
and here is the HTML
<h2>More like this...</h2>
<p>
<a class="morelikethis" title="DRTV Commercials" href="drtv-production-company.html">
</p>
<p>
<a class="morelikethis" title="Animation" href="animation-production.html">
</p>
<div class="newsflash">
<a href="/news/2013/05/happy-hour-productions-launches-new-quickquid-drtv-advertising-campaign/">
</div>
Your problem is caused by the default CSS of IE11. You could fix this by setting all the margins to 'morelikethis':
.morelikethis:hover {
margin-left: some value;
margin-right: some value;
margin-bottom: 10.2564%;
margin-top: 7.69231%;
}
Make it shorter:
.morelikethis:hover {
margin: top right bottom left;
}
Also, I would suggest using a CSS reset so that the browsers' default CSS doesn't mess with the styling. Here is a good one: https://code.google.com/p/reset5/ Before including this script in your CSS, consider the fact that you will most likely end up having to redo a lot of your styling.
I've been staging up a site and building the basic layout when I ran into a little problem. I want to create a "notched" navigation, but I don't know the first thing about doing this.
I've tried to create a to be positioned below my (with the idea that I could either create [with CSS or using an image] a white triangle) that could be aligned with the bottom of my creating the "notched" effect. I've yet to be successful with this and was hoping someone with css // html wizard status skills could be of assistance.
ps. If you need more info just let me know - I'm a bit new to stackoverflow
Make your NAV LI tags & the A tags within them stretch all the way down to the top of your content block.
When an LI is the 'current' tag then place a triangle graphic as the background of the A tag within it.
li.current a {
background:url(triangle.png) no-repeat center bottom;
}
You'll probably want the triangle to be blue the same as the blue bar at the top of the content block.
Cappuccino is using the following css to mark the link tag.
<style>
#navmarker {
width: 1px;
height: 0;
position: relative;
margin-top: -0.7em;
margin-left: auto;
margin-right: auto;
border-bottom: #FFD48E solid 0.8em;
border-top: none;
border-left: transparent solid 0.8em;
border-right: transparent solid 0.8em;
}
div {
display: block;
}
</style>
Try to create a div and use the above css it worked for me.
<div id="navmarker"></div>
This question already has answers here:
Click through div to underlying elements
(17 answers)
Closed 7 years ago.
Is there a way, in CSS, I can make an element click-through-able. I have an absolutely positioned <div> covering a link. I'd like to be able to click the link through the overlay <div>. The overlay has a mostly transparent background, and the link has no covering pixels.
I've tried background: url('...') transparent, but to no avail.
Here is a JSFiddle demonstrating my problem. The link can be clicked in IE8, but not in FireFox. What I want to do is make an image ticker in the #underlay div. The overlay is so that I can have a background with a gradient from solid to transparent on the bottom and top, so I can make the images sort of 'scroll into nothing', without fading the entire image out at once, if this makes sense (if anyone has an android phone, try scrolling your memos and watch the top/bottom of the screen - the memos fade into nothing).
I've fixed your problem by adding pointer-events: none; to the absolute block.
body {
margin: 0;
padding-left: 10px;
font: 20px Arial, sans-serif;
line-height: 30px;
}
a:hover {
color: red;
}
#overlay-blocking,
#overlay-passing{
position: absolute;
height: 30px;
width: 10em;
left: 0;
}
#overlay-blocking {
top: 30px;
background: rgba(0,100,0, .2);
pointer-events: none;
}
#overlay-passing {
top: 0;
background: rgba(100,0,0, .2);
}
Link blocked<br>
Link available<br>
Link available<br>
<div id="overlay-blocking"></div>
<div id="overlay-passing"></div>
I don't think it is possible, because an image is still a complete box. But have you tried these Image Maps? Seems like that's what you want.
OTHER OPTION
You could also seperate your image into 2, and make sure that your boxes are not overlaying your link of course.
Perhaps this answer would be of some use to you, if you can nest the overlay inside the link: With only CSS, is it possible to trigger :hover and click events underneath an element?
What's the best way to align icons (left) and text (right) or the opposite text on left and icon on right?
Does the icon image and text have to be the same size? Ideally I would like them to be different but be on the same vertical alignment.
I am using background-position css property to get the icons from a larger image.
Here is how I do it now, but I am struggling with either getting them to be on the same line or be vertically aligned to the bottom.
Text
This is what I get after I try your suggestions.
Though the text is now aligned with the icon, it is superimposed over the icon to the right of the icon that I want. Please note that i am using the background position to show the icon from a larger set of images.
Basically I am getting
<icon><10px><text_and_unwanted_icon_to_the_right_under_it>
<span class="group3_drops_icon group3_l_icon" style="">50</span>
group3_drops_icon {
background-position:-50px -111px;
}
.group3_l_icon {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent url(/images/group3.png) no-repeat scroll left center;
height:35px;
overflow:hidden;
padding-left:55px;
}
I usually use background:
<style type="text/css">
.icon {
background-image: url(path/to/my/icon.jpg);
background-position: left center;
background-repeat: no-repeat;
padding-left: 16px; /* Or size of icon + spacing */
}
</style>
<span class="icon">Some text here</span>
You can do it on the same line using vertical-align and line-height
<p style='line-height: 30px'>
<img src='icon.gif' style='vertical-align: middle' />Icon Text
</p>
Alternatively, you can go the background approach with no-repeat and positioning:
span.icontext {
background: transparent url(icon.gif) no-repeat inherit left center;
padding-left: 10px /* at least the width of the icon */
}
<span class="icontext">
Icon Text
</span>
Sadly, neither of these answers are bullet proof and each have one big flaw.
#rossipedia
I used to implement all my icons this way and it works quite well. But, and this is a big but, it does not work with sprites, since you're using the background-position property to position the icon inside the container that includes your text.
And not using sprites where you can is bad for performance and SEO, making them imperative for any good modern website.
#Jamie Wong
The first solution has two markup flaws. Using elements semantically correctly is sadly underrated by some, but you'll see the benefits in prioritizing form in your search engine ranking. So first of all, you shouldn't use a p-tag when the content is not a paragraph. Use span instead. Secondly, the img-tag is meant for content only. In very specific cases, you might have to ignore this rule, but this isn't one of them.
My Solution:
I won't lie to you, I've checked in a lot of places in my time and IMHO there is no optimal solution. These two solutions are the ones that come closest to that, though:
Inline-Block Solution
HTML:
<div class="container">
<div class="icon"></div>
<span class="content">Hello</span>
</div>
CSS:
.container {
margin-top: 50px;
}
.container .icon {
height: 30px;
width: 30px;
background: #000;
display: inline-block;
vertical-align: middle;
}
.container .content {
display: inline-block;
vertical-align: middle;
}
"display:inline-block;" is a beautiful thing. You can do so much with it and it plays very nicely with responsive design.
But it depends on your client. Inline-Block does not work well with IE6, IE7 and still causes problems with IE8. I personally no longer support IE6 and 7, but IE8 is still out there. If your client really needs his website to be usable in IE8, inline-block is sadly no option. Assess this first. Replace the black background of the icon-element with your sprite, position it, throw no-repeat in there and voilà, there you have it.
Oh yeah, and as a plus, you can align the text any way you want with vertical-align.
P.S.: I am aware that there's an empty HTML-tag in there, if anyone has a suggestion as to how to fill it, I'd be thankful.
Fixed Height Solution
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
.container {
margin-top: 50px;
border: 1px solid #000;
}
.container .icon {
height: 30px;
width: 30px;
background: #000;
float:left;
}
.container .content {
line-height: 30px;
float: left;
display: block;
}
I hate this one. It uses a fixed line height for the text, and if you choose the same height as the Icon's box, the text is centered to that height. To align the text to the top, cut the line height, and as to the bottom, you'll have to fix that with position: absolute and a fixed width and height for the container. I'm not going to get into that unless someone requests it, because it's a whole issue for itself, and brings with it a lot of disadvantages.
The main disadvantage of this path is the fixed height. Fixed heights are always unflexible and especially with text, it can cause a bunch of problems (You can no longer scale the text as a user without it being cut off, plus different browsers render text differently). So be sure that in no browser the text is cut off and that it has some wiggle room inside its line height.
P.S.: Don't forget the clearfix for the container. And, of course, replace the black background with your sprite and according position + no-repeat.
Conclusion
Use inline-block if at all possible. ;) If it's not, breath deeply and try the second solution.
I want to do so the size of the bubble, is auto-adjusting after the text(comment) which is inside the div..
Firstly heres the code:
.bubble {
font-size: 12px;
margin-bottom: 0px;
}
.bubble blockquote {
margin: 0px;
padding: 0px;
border: 1px solid #c9c2c1;
background-color: #000;
}
.bubble blockquote p {
display: inline;
margin: 0px;
padding: 0px;
font-size: 18px;
}
.bubble cite {
position: absolute;
margin: 0px;
padding: 7px 0px 0px 15px;
top: 5px;
background: transparent url(b/tip.gif) no-repeat 20px 0;
font-style: normal;
}
And the page:
<div class="bubble">
<blockquote>
<p>
Hello, my name is Azzyh
</p>
</blockquote>
<cite>I wrote this today</cite>
</div>
Now as i said, i want it to auto adjust to the text, so the "bubble" is around "hello, my name is azzyh"..
Not like how it is now:
http://img341.imageshack.us/img341/8303/exampleu.png
As you see it goes all out to the browser's right+left end..
Check the image, you'll see the line (the "box") where the text is, are too big for the text. I want css to adjust the box after the text.. so the "lines" gets around the text "hello my name is" sorry for my english
See this image:
http://img17.imageshack.us/img17/6057/exampleph.png
The "red" is how i want it to be..
How can i do this?
Thanks
div elements are block-level elements that, by default, stretch as far to the left and right as their containing blocks will allow.
In order to get the width of the div to auto-adjust, you'll have to convert it to an inline element, using the same style as you put on the p: display: inline;
Note that this may have the unintended side effect of not automatically forcing each div onto a new line. Without more information, though, I'm not entirely sure if that would be good or bad in your layout.
A similar problem I had was solved by applying the following CSS:
display:inline-block;
I wanted a link to look like a button but not expand the background to fill the width of the containing DIV.
Supported in nearly all browsers, including partial support in IE6 and IE7 but only where element has 'inline' as a default. There are some alternative properties to gain cross-browser support. There is also something on Google Code for setInlineBlock, but I haven't tried this myself.
Move your border property
border: 1px solid #c9c2c1;
from
.bubble blockquote {}
into your
.bubble blockquote p {}
and that should put the box where you want it.