Internet Explorer: Broken Underlines - html

I'm having some trouble getting this layout to work correctly in IE. The problem is that when I have a bit of small-caps, underlined text, an image with vertical-align set to middle breaks up the underline. Lower case letters have their underline shifted down. See the picture.
This looks fine in Firefox, Chrome and Opera, but it's broken in every version of IE that I tried, including 8. This happens for underlined links as well. Here's the code:
<html>
<head>
<title>Test</title>
<style type="text/css">
img { vertical-align: middle; }
span { text-decoration: underline; font-variant: small-caps; }
</style>
</head>
<body>
<img src="pic.png">
<span>Abc QWerty AbCdEfGhIjKlMnOpQrStUvWxYz1234567890</span>
</body>
</html>
Thanks for any suggestions.

If you don't care about CSS validation adding a zoom:1 declaration (or any other hasLayout invoking declaration) to your span style will solve the problem (in IE6/7 at least).

I also haven't managed to get this to work (zoom:1 does nothing for me). I now resorted to using border-bottom instead of underline...

Related

Is there a need to install CSS3 plug-ins?

I'm working on styling my web page on a separate CSS file. I have created a link on my HTML file to apply the styling effects to my web page but it doesn't show any effect.
I tried the most basic styles to see if there was an effect to my webpage but nothing happened. I tried writing the codes with Microsoft Visual Studio, and then Notepad++ but still, no effect occurred. I also tried opening my web page using the latest version of Mozilla Firefox, Internet explorer and Microsoft Edge to see any effect but nothing happened.
I tried styling my h1 element using the codes I'll show on the next field
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="Stylesheet" href="../css/staret.css" type="text.css">
</head>
<body>
<h1> Football lives </h1>
</body>
</html>
on my staret.css file, here's what I wrote:
h1 {
color: Red;
}
I expected to see "Football lives" in red color but the actual output was the default color black.
No need to install CSS plugin. There is a little error in your code while linking CSS with HTML.
It should be, type = "text/css" in place of "text.css"
No. CSS3 is included. No need to think about it as an 'addon' or separate thing.
Your issues are with however you are authoring the file. Try putting it in a jsFiddle. : )
.box {
width: 20px;
height: 20px;
background: #ff0066;
padding: 1rem;
transform: rotate(20deg); /* CSS3 */
}
<section class='example'>
<div class='box'>hi</div>
</section>

MacOS Safari text-shadow missing

Here is an example of the problem https://jsfiddle.net/smdLzsx5/1/
Can someone please take a look and see if the bug occurs for them? I am interested in knowing if the problem can be consistently reproduced so I can report it to apple.
Code:
<html>
<head>
<style>
.header01{
background-color:#d0d0d0;
overflow:hidden;
border-radius:5px;
width:500px;
}
.heading01{
color:#ffffff;
text-shadow:0px 2px 4px #000000;
font-size:40pt;
}
</style>
</head>
<body>
<div class="header01" id="header">
<div class="heading01">
BAD<span>GOOD</span>
</div>
</div>
</body>
</html>
In certain circumstances (e.g. the above code) the text-shadow is not rendered - or it appears briefly then disappears again.
I am using MacOX 10.12.6 (16G29), Safari 11.0 (12604.1.38.1.7)
Problem does not occur on Firefox 56 or Chrome 61.0.3163.100
Many things can affect the issue such as:
Changing the width of the header01 div (change it to 200px and none of
the text-shadow renders)
Setting the header01 div to overflow:visible; (shadow renders correctly)
Changing the heading01 font size to 20pt (shadow renders correctly)
Try removing the 'overflow: hidden;' from your '.header01' class. It looks like this is causing it.

CSS hover not working on Safari

I am trying to make a really simple CSS hover. It works fine in IE, Edge, Chrome and Firefox, but doesn't work for Safari (9.1) on Mac.
Have searched the internet and Stack Overflow for a fix, but no joy.
Found this simple example on codepen. That works on safari.
BUT: If i take that code, put it into a plain html document and serve it from Azure, it does not work on hover. You have to click on/off the element for the bit that should show on hover to appear. Oddly, if I use the web inspector and toggle the hover state, it works. Example code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
#thumbnail {
display: block;
width: 150px;
height: 150px;
}
#thumbnail:hover + #title {
display: block;
}
#title {
display: none;
color: #ffffff;
background-color: #000000;
text-align: center;
width: 130px;
padding: 10px;
}
</style>
</head>
<body>
<a id="thumbnail" href="#"><img src="http://dummyimage.com/150x150/0066ff/fff"></a>
<div id="title">filename.jpg 1</div>
</body>
</html>
I then created a plnkr to see if something extra was going on in codepen. The plunk also works in Safari on Mac.
What do I need to do to get it working in a standard page please?
I have tested your codepen example and even created a HTML file with the contents above and tested it again in Safari 9.1.1 - all working absolutely fine.
You may find the issue is Safari caching your content from Azure, can you clear the web browser cache and retry the issue?
Perhaps there's a cache on Azure that needs clearing also?

How can I remove the single pixel space between these elements on retina displays?

http://jsfiddle.net/36ykrp9x/5/
HTML
<div class="container">
<button>O</button><button>O</button>
</div>
CSS
.container {
width: 100%;
background-color: rgb(120, 200, 200);
text-align: center;
}
button {
border: 0;
width: 3rem;
height: 3rem;
opacity: 0.8;
background-color: gray;
}
This above code best captures the visual bug I am interested in solving. I should note that this does not appear to affect Firefox or Safari's latest versions. I am currently on Chrome 39. If you are on a retina display and a recent version of Chrome and do not already see the thin line between the elements, try resizing the window a bit. A thin line between the buttons will flicker in and out of presence.
For my purposes, there is at least one element above the button group in the hierarchy with 100% width, and the buttons must be horizontally centered within it. The buttons themselves must have opacity between 0 and 1. They can be divs, or any other element for that matter - but I have indeed tried others and found the problem remains.
Unfortunately, centering the button group within a fixed-width element doesn't appear to solve this issue for me, as the fixed-width button group must ultimately also be centered somehow which appears to resurrect the issue. Nudging with margins can lead to overlapping which is more obvious with elements that have such opacity - which is really no better than having the gap in the first place.
It is worth noting that indeed using background-color: rgba(r,g,b,a) addresses the problem for most intents and purposes, but I am very interested in resolving this without it if only to see that it's possible.
I am not particularly interested in solutions that involve JavaScript. Am I out of luck?
Based on the information you provided, and my own experience with Google Chrome, I'm led to the suggestion that this is a browser bug in Chrome, considering it only occurs in Chrome on a Retina screen, and other browsers such as Safari and Firefox do not exhibit the problem. Your HTML and CSS looks perfect so I don't see issues here.
You can verify that this is a browser rendering issue by also checking this in a latest version of Opera (on your Retina display), as Opera now uses the same Blink rendering engine as Chrome (which is forked from Webkit). If Opera exhibits the same issue then its a Engine issue which should be logged as a bug.
Unless someone else figures out a way around it, I am normally inclined to leave browser rendering bugs like this alone where possible so that you're not hacking code in your site, and when the bug is fixed, you don't have to do anything to your site.
The problem is with jsfiddle.net. I have the same 1 pixel space in Chrome 40 on retina. Try this: http://dabblet.com/gist/c0068a79fc0268482ee1
or the following code, loaded directly:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.container {
width: 100%;
background-color: rgb(120, 200, 200);
text-align: center;
}
button {
border: 0;
width: 3rem;
height: 3rem;
opacity: 0.8;
background-color: gray;
}
</style>
</head>
<body>
<div class="container">
<button>O</button><button>O</button>
</div>
</body>
</html>

ie9 vs chrome ie causing problems changing header

but having problems viewing it on ie.
how can i make my code good for ie
what is the best way
this is an example
http://jsfiddle.net/Jntuw/
might be
h1 {
color: #A9218E;
font-family: 'LeagueGothic';
font-size: 2.9em;
}
the header changes in ie9
sometimes the border shows lines.
You could try something like this:
Just put this in your header!
<!--[if IE 9]> IE 9 style content goes here <![endif]-->
Target IE9 Only via CSS
Take out the inline styles and add to your stylesheet.
Style the table in the CSS.
table {border:0;}
th {}
td {}
http://www.w3schools.com/css/css_table.asp - this should help