So I have an image that is between 2 anchor tags. the css for the image is..
#howDoesItWork {
position: absolute;
height: 31px;
width: 154px;
border-style: none;
top: 3px;
left: 20px;
}
the right 20 px of the image isn't being noticed as a link in firefox. It works fine in IE. I tried changing it to padding left: 20px and margin-left: 20px. It still shows that last 20px as not being part of the link. It works fine I take the positioning away completely though.
<a id="howDoesItWork" href="">
<img src="images/howDoesItWork.jpg" alt=""/>
</a>
FIXED: I set the z-index to 2. Apparent the menu right next to it was overlapping onto the howDoesItWork imaage.
When you absolute position the image the link doesn't use the image to base its width on.
Because you've set a left: 20px it will stick over the range of the link.
So you need to extend the coverage of the link. Without knowing anything else about your document (ie. columns, what you are trying to do) my best guess is:
a #howDoesItWork { padding-right: 20px; }
If that doesn't do it... just show us more information.
UPDATE
With the new html info it should be:
#howDoesItWork { padding-right: 20px; }
Related
I developed a text area that allows me to associate people. My problem is placing the responsive button (always in the bottom right) and making the text not "pass" over it.
Can anyone help me?
DEMO
css
.Sendbtn {
width: 30px;
height: 30px;
height: auto;
float: right;
margin-right: 21px;
margin-top: -76px;
position: relative;
cursor: pointer;
}
HTML
<dx-html-editor>
<dxi-mention
valueExpr="text"
displayExpr="text"
[dataSource]="employees"
></dxi-mention>
</dx-html-editor>
<img
class="img-responsive Sendbtn"
src="https://www.freepnglogos.com/uploads/search-png/search-icon-clip-art-clkerm-vector-clip-art-online-0.png" alt=""/>
Problem
The text passes over the button :(
If you dig down into the dx-html-editor element you can find the <p> element that contains the text. If you give this a margin-right the text will stop running over the button.
.dx-htmleditor .ql-container .ql-editor p {
margin-right: 30px;
}
You might need to play around with the exact selectors to get it perfectly right but that should be step in the right direction.
I am trying to make a gallery of images, one page to the next like on this site:
francescoclemente.net/now/1.html
I downloaded some arrow.png images to make the arrow, and implemented them into my HTML like so:
<div class="paintings">
<img src="stanpics/paintings/nyc/bathesda fountain'.jpg" alt="bathesda fountain" title="bathesda fountain">
<p class="pdescribe">bathesda fountain</p>
</div>
<div class="rightarrow">
<img src="rightarrow.png" class="rightarrow" title="next" alt="next">
</div>
<div class="leftarrow">
<img src="leftarrow.png" class="rightarrow" title="back" alt="back">
</div>
The div "paintings" is the art image. The 'leftarrow' and 'right arrow' are the two arrows I want to put on the side. For some reason, the pointer icon (indicating an anchor tag or link) for the mouse will not show up unless you mouse over below the right arrow image. What am I doing wrong? Thanks for any help.
Here is the CSS for the arrow classes.
.leftarrow {
margin: 0 auto;
padding: 0;
position: relative;
bottom: 82px;
left: 120px;
}
.rightarrow {
margin: 0 auto;
padding: 0;
position: relative;
top: 50px;
left: 190px;
}
I've tried everything I could think of, I know it's probably something very simple messing me up here. Your corrections are appreciated.
It's hard to reproduce your issue without the images, but here are a few ideas you could try:
add a height and width to the css for your buttons
add a display:block to the css for your buttons
The w3c.org validator gives a few errors regarding arrows. Maybe fixing them will fix your problem.
http://validator.w3.org/check?uri=francescoclemente.net%2Fnow%2F1.html&charset=%28detect+automatically%29&doctype=Inline&group=0
http://jigsaw.w3.org/css-validator/validator?uri=francescoclemente.net%2Fnow%2F1.html&profile=css21&usermedium=all&warning=1&vextwarning=&lang=nl
I have some problems with CSS and z-index. Let me show you an example
Suppose that on a first moment it only appears the tag pointers. Then, when I click one of this pointers appears a tag globe. I want that the tag pointers appears always under the tag globes, and I want too that every time I open a tag globe it appears over all other tag globes opened.
My div structure is:
<div id="t01" class="tag">
<div class="small">
<div class="globe">
<div class="in-globe">
<!--tag globe content-->
</div>
</div>
<div class="globe-arrow"></div>
</div>
</div>
And the related CSS code is this:
.tag {
z-index: 3;
position: absolute;
left: 0; /*JavaScript modified*/
top: 0; /*JavaScript modified*/
width: 19px;
height: 26px;
padding: 0 11px 10px 15px;
background: url('../../images/zoom/tag.png') no-repeat center;
}
.small {
cursor: pointer;
width: 19px;
height: 26px;
}
.globe-arrow {
position: absolute;
left: 23px;
bottom: 30px;
width: 8px;
height: 6px;
background: url(../../images/zoom/tag_arrow_UR.gif) no-repeat;
z-index: 5;
}
.globe {
position: absolute;
left: 23px;
bottom: 30px;
z-index: 4;
}
.in-globe {
font-size: 11px;
margin: 0 0 3px 3px;
padding: 3px;
background: #FFF;
border: 1px solid #000;
}
The 'tag' is all the conglomerate, and its background is the tag pointer image. However, this image has some shadows and I only want that a certain zone can be clicked. Then, the 'small' div has this function. The 'globe' and 'in-globe' divs are where the content of the globe is written (it could be an only div, there are two for historical reasons), and the 'globe-arrow' div is basically a little image to show this small arrow over the globe.
With this structure it doesn't work. In a same conglomerate, a globe is always over a tag, but an entire conglomerate defined before in the html code appears entirely under a newer one. In the same way, although a globe is inserted by JavaScript always after an older one (logically) the tag conglomerate is inserted when the page is loaded and then the overlapping works like I said.
Can you propose an smart way to reach my objective? Think that I'm interested on positioning the globe respective to the tag, because when I drag a pointer with a globe opened I want that the globe moves with it by CSS, not by JavaScript.
give .globe-arrow a z-index of 3
I solved the problem. There's no magic way to do it. I had to change the way I structure tags. It seems that z-index inherits from the container div, then like the parent has less z-index, a son of another parent with the same z-index appears under the first although this son has a bigger z-index. It's very confusing, yes.
In few words, I define a tag-container (to positionate the tag), into it I define a pointer and a tag globe. The first with less z-index than the second. Now, as all the divs with z-index has the same level all tag globes appear over all tag pointers.
I want that every time I open a new tag globe it appears over the opened globes. Against my desires, I had to use JavaScript for this because with a same z-index the browser show over the last defined div. This is ugly. I build a stack of z-index's that increases with more globes and decreases when I close them. Then I simply edit the css dinamicaly to put this new z-index to the new globe.
Thank you for your attention and help :) I hope this could be useful for somebody.
I have an annoying display issue in IE (7/8). I have some tabs that serve as navigation, the tabs have the top and bottom sections cut off for some reason in spite of my efforts to make the box bigger.
In Chrome and Firefox this all displays correctly as you can see in the images below. Note I have artificially moved the tabs into an empty area of the page so its easier to see whats going on.
How it looks in IE:
How it looks in Chrome
Now obviously IE doesn't render the rounded corners, that's fine (unless someone knows something I dont) but as you can see the height of the links in IE are smaller than Chrome and actually clip the top border off.
HTML
The HTML is simply <a> elements within a <div> like so
<div id="topnavcontainer">
<a href='/web/link1.html' class='current'>Link 1</a>
<a href='/web/link2.html'>Link 2</a>
<a href='/web/link3.html'>Link 3</a>
</div>
CSS
#topnavcontainer {
display: block;
color: #fff;
font-size: 14px;
position: absolute;
right: 0;
bottom: 0;
height: 40px;
}
#topnavcontainer a {
color: #555;
text-decoration: none;
padding: 5px 12px;
font-weight: 800;
overflow: visible;
background-color: transparent;
border: 0;
line-height: normal;
bottom: 0;
height: 40px;
}
As you can see I have tried to overcome the problem by specifying normal line-height as well as making the overflow visible. I have also tried making the links and containing div much higher than they should be just in case there was a weird height issue. Nothing seems to solve it.
Set the link to "display: inline-block;". As for IE6/7, do "display: inline; zoom: 1;" instead.
I've seen this problem happen before on block elements. The "inline-block" solution seemed to fix it.
Try adding float:left;
It's possible that your padding isnt even working.
if this solution doesnt work,
make a different CSS for IE and set a different height for IE.
also, try to put a button on your website asking your visitors to download Firefox or Chrome...
it will make the internet better! :D
Chrome and Safari are displaying a border around the image, but I don't want one. There is no border in Mozilla. I've looked through the CSS and HTML, and I can't find anything that is fixing it.
Here is the code:
<tr>
<td class="near">
<a href="../index.html"class="near_place">
<img class="related_photo" />
<h4 class="nearby"> adfadfad </h4>
<span class="related_info">asdfadfadfaf</span>
</a>
...
CSS:
a.near_place {
border: none;
background: #fff;
display: block;
}
a.near_place:hover{
background-color: #F5F5F5;
}
h4.nearby {
height: auto;
width: inherit;
margin-top: -2px;
margin-bottom: 3px;
font-size: 12px;
font-weight: normal;
color: #000;
display: inline;
}
img.related_photo {
width: 80px;
height: 60px;
border: none;
margin-right: 3px;
float: left;
overflow: hidden;
}
span.related_info {
width: inherit;
height: 48px;
font-size: 11px;
color: #666;
display: block;
}
td.near {
width: 25%;
height: 70px;
background: #FFF;
}
Sorry, I copied some old code before. Here is the code that is giving me trouble
Thanks in advance
Now I don't know if this is a bug with Chrome or not but the grey border appears when it can't find the image, the image url is broken or as in your case the src isn't there. If you give the image a proper URL and the browser finds it then the border goes away. If the image is to not have a src then you will need to remove the height and width.
sarcastyx is right, but if you want a workarround you can set the width and height to 0 and a padding to make space for your image.
If you want a icon of 36x36, you can set width and height to 0 and pading:18px
I know it is an old question. But another solution is to set the src to a 1x1 transparent pixel
<img class="related_photo"
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" />
This works for me.
.related_photo {
content: '';
}
This may happen when the image is planted dynamically by css (e.g. by http://webcodertools.com/imagetobase64converter) in order to avoid extra HTTP requests. In this case we don't want to have a default image because of performance issues. I've solved it by switching from an img tag to a div tag.
img[src=""]{
content: "";
}
Lazy image solution (img loading="lazy")
If you are using lazy image loading you may notice this thin thin border before the image has loaded more than if you didn't.
You're more likely to see this for a horizontal scrolling gallery than a normal vertical scrolling webpage.
Why?
Lazy loading unfortunately only works on the vertical axis. I'm assuming this is because there's a high likelihood that you're going to scroll down, but not left to right. The whole point of lazy loading is to reduce images 'below the fold' from consuming unnecessary bandwidth.
Soution 1:
Detect when the user has scrolled (eg. using intersection observer) and then set loading="eager" on each image you want to immediately load.
I haven't actually tested this, and it's possible some browser's won't immediately load images - but it should be fine.
Solution 2:
Detect when the image has finished loading loaded and then fade it in.
img.setAttribute('imageLoaded', 'false');
img.onload = () =>
{
img.setAttribute('imageLoaded', 'true');
};
Then with css hide the image until it's loaded, after which it fades in nicely:
img
{
opacity: 1;
transition: opacity .5s;
}
img[imageLoaded='false']
{
opacity: 0; // hide image including gray outline
}
Also this behavior is subject to change, the browser may be clever enough to detect a horizontal scrolling element in future - but right now Chrome and Safari both seem to have a zero pixel window for looking for horizontal lazy images.
img.related_photo {
width: 80px;
height: 60px;
**border: solid thin #DFDFDF;** //just remove this line
margin-right: 3px;
float: left;
overflow: hidden;
}
Inside img.related_photo, you need to change border: solid thin #DFDFDF; to border: 0.
I have fixed this issue with:
<img src="img/1.jpg" style="height:150px; position: absolute; right: 15px;">
The right: 15px is where you want the image to be shown, but you can place it where you want.
I just added src="trans.png", trans.png is just a 100x100 transparent background png from photoshop.
Worked like a charm no borders
To summarise the answers given already: your options to remove the grey border from an img:not([src]), but still display an image using background-image in Chrome/Safari are:
Use a different tag that doesn't have this behaviour. (Thanks #Druvision) Eg: div or span. Sad face: it's not quite as semantic.
Use padding to define the dimensions. (Thanks #Gonzalo)Eg padding: 16px 10px 1px; replaces width:20px; height:17px; Sad face: dimensions and intentions aren't as obvious in the CSS, especially if it's not an even square like #Gonalo's example.