Having a problem with IE7, here is explanation.
HTML
<a class="item" href="http://google.com">
<div class="itemImg">
<img src="http://img-fotki.yandex.ru/get/4512/vmazann.0/0_52db2_1c3135a9_orig.jpg" alt=""/>
</div>
<h3>Hello World</h3>
</a>
CSS
.item {
color: #140804;
cursor: pointer;
padding: 17px;
position: relative;
text-align: center;
text-decoration: none;
width: 142px;
display:block;}
.item * {
cursor: pointer;}
.itemImg {
background: none repeat scroll 0 0 red;
height: 150px;
line-height: 150px;
margin-bottom: 10px;
overflow: hidden;
text-align: center;
vertical-align: middle;}
.itemImg img {
vertical-align: middle;}
Result
http://jsfiddle.net/qjSpS/11/
Problem
In IE7 image is unclickable
My thoughts on problem
It seems that problem is related somehow with hasLayout property setting on .itemImg. If I remove properties that trigger hasLayout (height: 150px; and overflow: hidden;) then image will be clickable
Question
Is there any way to solve this problem? height: 150px; and overflow: hidden; are required properties.
It may be that in IE you can not wrap an inline element <a> around block level elements <div> or <h3>.
Most browser will ignore it and act how you'd expect, but IE is pretty strict on the matter.
THis is how i solved this problem..instead of:
<a><div><img></div></a>
i did this:
<div><div style=background:url(img.jpg);width:10px;height:10px;></div></div>
worked like a charm.
Have you noticed that with the image the red border around the edge is clickable?
I think the div is the cause of the problem.
can you do away with the div?
I tweaked your example to show how it might work without the div:
http://jsfiddle.net/qjSpS/10/
EDIT
had another go: http://jsfiddle.net/qjSpS/14/
Not completely happy but it has made all the elements clickable.
if ($.browser.msie && parseInt($.browser.version, 10) === 7) {
$('.itemImg').click(function () {
$(window.location).attr('href', $(this).parent('a').attr('href'));
});
}
Related
I'm seeing a bug that is intermittently reproducible only on iPhone Safari (not on any other mobile or desktop browser not even macbook safari). The code looks like:
<div style="overflow: auto; height: calc(100% - 55px); background-color: cyan;">
<ul ...><li..></li> <!-- some ul containing li omitted for brevity-->
<label class="certainClassname" style="font-size: small; font-style: italic; width: 100%; text-align: center; background-color: yellow">
{{"msg" | translate}}
</label>
</div>
In other style sheet I have:
.certainClassname {
cursor: pointer;
word-break: break-all;
}
msg = "PKtest!" for my testing though it usually has another value.
The problem is that this label is getting cropped at the edges when the bug is reproduced as below:
This bug is only seen on Safari iPhone and none of the other browsers, and seems to only happen the first time that page is loaded, and not later. It could be related to zooming because even the tiniest pinch-to-zoom on iPhone fixes it and the label text (and yellow) expands fully.
Could someone please help me diagnosing this in CSS above? I've tried to fix using each in css of label but none have worked:
display: inline;
display: inline-block;
display: block;
padding: 2px 10px 2px 10px;
margin-left: auto;
margin-right: auto;
z-index: 999;
clear: both;
(all these above tested but none fixes this issue seen intermittently and only on iPhone Safari).
The reason the label is getting cropped might be because of style="overflow: auto; height: calc(100% - 55px)" for div.
div is the parent of label. Therefore label is inheriting its style from its parent. You may consider removing height: calc(100% - 55px) to see if it works
It's difficult to get the idea without reviewing working code. But I tried to run your code, regenerate the bug and here is the possible solution. Let me know, is it something you are looking for?
.certainClassname {
cursor: pointer;
word-break: break-all;
font-size: small;
font-style: italic;
width: 100%;
text-align: center;
background-color: yellow;
display: inline-block;
}
ul {
padding: 0;
}
<div style="overflow: auto; height: calc(100% - 55px); background-color: cyan;">
<ul ...><li..></li> <!-- some ul containing li omitted for brevity-->
<label class="certainClassname">
{{"msg" | translate}}
</label>
</div>
I think you have to set you label around a div with width: 100% a background-color: yellow
So I have this strange problem, I have two div on one line (display:inline-block) and the first div appears on hover in a sliding effect. For this animation I need to set overflow:hidden, but it seems to break the my page.
I made a demo on JSFiddle
Have you ever face this problem ?
Thank you
NOTE: IE8+ compatible hints or solutions would be a huge plus
Code
HTML
<div class="container">
<div class="hello NoOverflow">Hello</div><div class="textWrapper">mytext</div>
</div>
<br>
<div class="container">
<div class="hello">Hello</div><div class="textWrapper">mytext</div>
</div>
CSS
.container {
background: #000;
color: #FFF;
}
.hello {
display: inline-block;
width: 40px;
background: #F00;
}
.textWrapper {
display: inline-block;
background: #090;
}
.NoOverflow {
overflow: hidden;
}
EDIT
For those who want the hover animation : JSFiddle Updated
You will see my problem by hovering the 2nd container (the JQuery "animate" call add a "overflow: hidden" property)
You need to specify vertical-align: top for your inline-block child elements.
When you specify overflow: hidden, you are triggering a new block formatting context, and its bottom edge will align with the baseline of the following inline element.
See demo: http://jsfiddle.net/audetwebdesign/7SZkN/
The relevant CSS to modify is:
.NoOverflow {
overflow: hidden;
vertical-align: top;
}
There is pretty much CSS2 so it should work fine in IE8+ (any browser that supports inline blocks).
Have you tried to float them left.
.container {
background: #000;
color: #FFF;
}
.hello {
/*display: inline-block;*/
float:left;
width: 40px;
background: #F00;
}
.textWrapper {
/*display: inline-block;*/
float:left;
background: #090;
}
.NoOverflow {
overflow: hidden;
}
I have a peculiar question. I have made a div (code for which will be provided below), and I want the entire div (since it is a button) to be a clickable link. The issue I'm having is my div should only be 200x200, yet the think stretches across the entire page horizontally. It should only be a link in that 200x200 portion, but like I said it goes that 200 height across the entire horizontal part of the page making random background images clickable. I've tried setting the divs to block, with no avail. How would I solve this? My code is as follows.
#button {
display: block;
background-color: black;
opacity: 0.9;
width: 200px;
height: 200px;
margin-top: 100px;
margin-left: 100px;
-moz-border-radius: 15px;
border-radius: 15px;
}
<div id="button"></div>
Use display: inline-block;. You could also do this without the <div> at all.
http://jsfiddle.net/SLAfU/
You should do it following way:
#button {
display: block;
background-color: black;
opacity: 0.9;
width: 200px;
height: 200px;
margin-top: 100px;
margin-left: 100px;
-moz-border-radius: 15px;
border-radius: 15px;
}
Since anchors cannot contain block elements in HTML 4.01. Therefore you can just make anchor a block element and all will work.
In HTML5 anchors can contain block elements, therefore setting display: block; or display: inline-block; combined with <!DOCTYPE html> should suffice.
Make the anchor tag "display: inline-block"
You need to have an HTML5 doctype to have a div (block level element) inide an anchor tag.
the right way in this case is:
<div id="button"></div>
or
<div id="button" onclick="document.location.href='signup.php'" style="text-decoration:underline"></div>
read w3c specifications! you cant put block element inside inline!!!
I have the following CSS Code:
.blackbox {
background: black;
width: 17px;
height: 18px;
line-height: 18px;
text-align: center;
}
In my HTML file, I call the following.
<div class="blackbox">
10
</div>
<img src="icon-local.png">
<img src="icon-national.png">
How can I keep the box that is rendered via CSS call and the images called via img tag on the same horizontal line?
The goal is to create something that looks similar to this, but with the CSS box in front of the other icons. Example Image: Example Image
Thanks in advance!
Ken
You can use display:inline-block or display:table.
<div class="parent">
<div class="blackbox">10</div>
<img src="icon-local.png" />
<img src="icon-national.png" />
</div>
And the css
.parent div, .parent img {
display:inline-block;
*display:inline; /* IE7 hack */
zoom:1 /* IE7 */
vertical-align:middle;
}
Make your blackbox class inline or inline-block:
.blackbox {
display:inline-block;
background: black;
width: 17px;
height: 18px;
line-height: 18px;
text-align: center;
}
The default display for <div> elements are "block" (that is, it adds a line break before and after it) so you could just use:
.blackbox {
background: black;
width: 17px;
height: 18px;
line-height: 18px;
text-align: center;
display: inline;
}
Notice the display: inline;
Also, display: inline-block; is also useful in many scenarios.
You need to define the div as display:inline-block and float your images to the left so that you have the same result as your example image. Floating your images can be avoided if you change your HTML and have the images before the div. See this demo: http://jsfiddle.net/G5Q4k/1/
I want to set a span element to appear below another element using the display property. I tried applying inline-block but without success, and figured I could use block if I somehow managed to avoid giving the element a width of 100% (I don't want the element to "stretch out"). Can this be done, or if not, what's good praxis for solving this kind of issue?
Example: a news list where I want to set a "read more" link at the end of each post (note: <a> instead of <span>)
<li>
<span class="date">11/15/2012</span>
<span class="title">Lorem ipsum dolor</span>
<a class="read-more">Read more</a>
</li>
Update: Solved. In CSS, apply
li {
clear: both;
}
li a {
display: block;
float: left;
clear: both;
}
Use
display: table
in your CSS code.
If I'm understanding your question properly, the following CSS will float your a below the spans and keep it from having a 100% width:
a {
display: block;
float: left;
clear: left;
}
you can use:
width: max-content;
Note: support is limited, check here for a full breakdown of supporting browsers
I would keep each row to its own div, so...
<div class="row">
<div class="cell">Content</div>
</div>
<div class="row">
<div class="cell">Content</div>
</div>
And then for the CSS:
.cell{display:inline-block}
It's hard to give you a solution without seeing your original code.
Again: an answer that might be a little bit too late (but for those who find this page for the answer anyways).
Instead of
display:block; use display:inline-block;
Try this:
li a {
width: 0px;
white-space:nowrap;
}
I had this issue,
I solved it like so:
.parent {
white-space: nowrap;
display: table;
}
.child {
display: block;
}
the "white-space: nowrap" makes sure that the children of the child(if it has any) don't wrap to new line if there is not enough space.
without "white-space: nowrap" :
with "white-space: nowrap" :
edit: it seems that it also just works without the child block part for me,
so just this seems to work fine.
.parent {
white-space: nowrap;
display: table;
}
You can use the following:
display: inline-block;
Works well on links and other elements.
i use this:
vertical-align: top; //do the trick
a {
display: inline-block;
vertical-align: top;
padding: 10px 30px;
border-radius: 5px;
background-color: #372a20;
border: 1px solid var(--blanco);
color: var(--blanco);
margin: 0 auto -25px;
text-decoration: none;
}