I have an issue with the ::first-line selector in Chrome. In Firefox and even IE11 the result looks correct.
Here is what I expect it to be: Rendered in Firefox/IE11
Here is what I get in Chrome: Rendered in Chrome
But there is a weird behaviour in Chrome which results in a correct rendering:
open the developer panel (F12)
select the "t1b" item
untick the "box-shadow" property
tick it again
Here is a link to an example: jsfiddle.net/smc0hx78/
<body>
<span class="test">t1</span>
<span class="test firstLine">t1b</span>
<span class="test"><span>t2</span></span>
</body>
body {
font-size: 50px;
}
.test {
width: 2.5em;
height: 3em;
line-height: 3em;
display: inline-block;
position: relative;
overflow: hidden;
box-shadow: inset 50px -50px 0 0 cyan;
}
.test span {
font-size: 13px;
}
.firstLine::first-line {
font-size: 13px;
}
"t1" has no "first-line" (working fine in Chrome)
"t1b" has "first-line" (not working in Chrome)
"t2" has "first-line" but for a sub element (working fine in Chrome)
I need t1b to be working in Chrome.
Do I have any error in my CSS?
Is there a workaround without a sub element?
Thank you for any help.
This seems to be a Chromium Bug, though I have not found anything like that in the Github Issues (still, it could be resolved in a future release)
You have two options:
1 - Add an empty div before your spans. It seems to work if you put an empty block-element before your inline-blocks (don't know why)
<body>
<div></div>
<span class="test">t1</span>
<span class="test firstLine">t1b</span>
<span class="test"><span>t2</span></span>
</body>
or 2 - Change inline-block to inline-flex. The bug seems to affect only inline-blocks
.test {
display: inline-block; /* OLD */
display: inline-flex; /* NEW */
}
Related
I am trying to implement a pagination control on the following page:
http://equiniti.hireserve-projects.com/vacancies.html
As you can see when viewed in a decent browser such as Firefox, the pagination controls will appear nicely inline as shown below:
However, when viewed in IE7 and IE8, the pagination controls appear as follows:
By default, these elements should all appear inline so I do not understand why they are overlapping in this way. The following CSS is applied to these elements:
.paginationControls a{
background: none repeat scroll 0 0 #FFFFFF;
font-size: 20px;
margin-left: 3px;
padding: 12px 10px;
color: #424242;
}
.paginationControls a:hover,
span.arrowNext:hover,
span.arrowPrev:hover,
.paginationControls a.jp-current
{
color: #ffffff;
background-color: #E41800;
}
span.arrowNext,
span.arrowPrev{
background: none repeat scroll 0 0 #FFFFFF;
color: #424242;
font-size: 20px;
margin-left: 3px;
padding: 12px 10px;
}
The following is the structure of my HTML:
<div class="pagination">
<span class="arrowPrev">« Previous</span>
<span class="paginationControls"></span>
<span class="arrowNext">Next »</span>
</div>
Could anyone explain why this is happening when spans should appear inline by default? I've tried the usual trick of ensuring that the parent element isn't floated but this doesn't make any difference in this case.
Any help would be greatly appreciated. This is in native IE7 and IE8 on a virtual machine.
I am not able to test IE8 but please try applying:
.pagination span{
display:inline-block
}
As I recall span tags do not render as block level elements by default.
You should also specify a min-height and min-width to force a block.
Alternatively use a div instead of a span tag.
I have an issue with the rendering of a tag on my page in IE. The problem lies in the following; the tag, in IE does not fill the tag. The picture is the link but in IE the text takes precedence and overrides the image to make the text a link. Chrome and FireFox have no issues and render fine. My question is:
How can I make the image the link in IE and get it to work like it does in Chrome and FireFox?
The following images showcase my problem:
The problem in IE:
How it should render as per Chrome and FireFox:
The code for the section is as follows:
h1#site-name, div#site-name /* The name of the website */
{
margin: 0;
font-size: 2em;
line-height: 1.3em;
height: 115px;
background: url('/sites/default/files/images/ipark2-theme-assets/iPark_title.jpg') no-repeat top right;
margin-left: 212px;
color: transparent;
}
#site-name a:link,
#site-name a:visited
{
color: transparent;
text-decoration: none;
display: block;
height: 100%;
filter: alpha(opacity=50);
font-size:1em;
}
EDIT: addition of html markup:
<div id="logo-title">
<div id="logo"><img src="/sites/all/themes/zen/ipark2/logo.png" alt="Home" id="logo-image" /></div>
<div id="site-name"><strong>
Teaching and Learning Innovation Park
</strong></div>
</div> <!-- /#logo-title -->
</div></div> <!-- /#header-inner, /#header -->
You're applying an ID to two elements (your H1 and your div), make use of classes as at the moment you're just slapping an ID on everything.
I'm not sure if that will solve your issue, but it won't hurt and I know older versions of IE are more strict about recognizing an ID if it's not unique. Since you're targeting your anchor tag through that ID, it just makes me question if it isn't the issue.
I have images that have statistics texts printed over them. This worked well with FF, Chrome and IE9 but not on IE8. I cant just seem to figure out what is the problem here.
HTML:
<div>
<div class="image">
<img src="#Url.Content("~/stuff/stuffImage.png")" alt="" />
<GIR1><span>#ViewBag.stuffArray[4]%</span></GIR1>
</div>
</div>
CSS:
.image {
position: relative;
width: 100%; /* for IE 6 */
}
GIR1 {
position: absolute;
top: 110px;
left: 50px;
width: 100%;
}
GIR1 span{
color: white;
font: bold 15px/15px Helvetica, Sans-Serif;
letter-spacing: -1px;
padding: 10px;
}
Instead of positioning the text inside the picture. It positions them outside it like normal text. What could cause the problem here?
I'm reasonably sure it's down to your usage of the custom element <GIR1>.
IE below version 9 does not natively recognize unknown elements.
You can either switch to <div class="GIR1"> (which would be the easy choice here), or:
You have to use a JavaScript fix: http://code.google.com/p/html5shiv/
Note that you'll have to add the custom element to the script yourself.
For the uncompressed version, see: http://www.iecss.com/print-protector/
var elems = 'abbr|article|aside|audio|canvas|details|figcaption|figure|footer|header|hgroup|mark|meter|nav|output|progress|section|summary|time|video'
You need to add your custom elements to that list.
I have this code:
<div title="" class="icePnlGrp graButtonActionDiv graButtonBackgroundOn">
<label id="j_id89:j_id99" class="iceOutLbl graButtonActionLabel">Select</label>
</div>
With css:
.graButtonBackgroundOn {
line-height: 45px;
background:
url('/resources/images/external/button_generic_on_txmart.png');
}
and
.graButtonBackgroundOn:hover{
background:
url('/resources/images/external/button_generic_on_txmart-hover.png');
}
I cannot figure out why on Firefox and IE, hovering on that div does not change the background image.... But on Chrome it works perfectly.
Can you please give me a helping hand?
Thanks.
Try giving the :hover style rule more specificity over its normal state, so:
.graButtonBackgroundOn {
line-height: 45px;
background:
url('/resources/images/external/button_generic_on_txmart.png');
}
div.graButtonBackgroundOn:hover{
background:
url('/resources/images/external/button_generic_on_txmart-hover.png');
}
which will over write the original style rule
Kind of a frustrating question for me.
Here's the link. Try it in IE, Chrome and Firefox. The latter two are fine and the image is aligned to the right and appears as 375x500. But in IE, the image aligns to the right, but appears as 15x500.
http://www.themoneygoround.com/2011/04/intc-intel-shows-up-strong-afterhours.html
When I look at the View Source in IE, the image width and height should be 375x500, but that's not what displays. The image is aligned to the right as expected, but shrunk to 15x500. Thanks for any thoughts...
Here is the CSS
p img {
padding: 0;
max-width: 100%;
}
img.centered {
display: block;
margin-left: auto;
margin-right: auto;
}
img.alignright {
padding: 4px;
margin: 0 0 2px 7px;
display: inline;
}
img.alignleft {
padding: 4px;
margin: 0 7px 2px 0;
display: inline;
}
.alignright {
float: right;
}
.alignleft {
float: left;
}
/* End Images */
I see the problem as well with IE 8. The trouble is your max-width property for the <img>. IE will not render a max-width correctly with the XHTML doctype (which you appear to be using). You can either remove the max-width or use a doctype which will trigger standards mode in IE. I recommend the HTML5 doctype as per this article.
First off, I see about 14 javascript errors in IE when I pull that up stating 'null' is null or not an object. Maybe start there?
EDIT: By the way, I was in IE8
Working Solution:
I removed the <p class="alignright"></p> that was wrapping the image in question, and it worked like a charm.
View in my working jsFiddle demo.