Doctype:
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
HTML:
<a href="http://www.somelink.com">
<img src="images/someimage.jpg" alt="sometag" />
</a>
CSS:
div.something img {
display: inline;
border: none;
}
Firefox shows them just fine, IE just adds a little inlined box (presumably where it expects text to be?) with a purple-ish border that IE uses for visited links. It occurs in all versions (6, 7 and 8).
Using the following HTML, I was able to reproduce your problem:
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
div.something img
{
display: inline;
border: none;
}
div.something a
{
border: 0;
}
</style>
</head>
<body>
<div class="something">
<a href="http://www.somelink.com">
<img src="images/someimage.jpg" alt="sometag" />
</a>
<a href="http://www.somelink.com">
<img src="images/someimage.jpg" alt="sometag" />
</a>
<a href="http://www.somelink.com">
<img src="images/someimage.jpg" alt="sometag" />
</a>
</div>
</body>
</html>
The problem with this is that the whitespace between the end of the opening "a" tag and the start of the "img" tag is considered to be part of the link.
Replacing those with:
<img src="images/someimage.jpg" alt="sometag" />
solved the problem in IE8 for me.
EDIT: Removed the CSS. Turned out not to be necessary.
You need to set border="0" on your image tag, that will resolve the issue. IE when an image is inside a link, automatically puts the "link" border around it, to show it is a link.
You might also be able to use CSS to set the border to 0 for the img tag
Related
I've created a basic page, from a template I had for the rest of my site, but pulled most of it apart to make the page look "not designed". It only has an unordered list with a short paragraph fixed to the top and a logo float right. It works in system preview, but when uploaded to the server it loses all the CSS styling.
This is the html:
#title {
width:400px;
position:fixed;
}
#icon {
position:relative;
float:right;
}
h5 {
font-size:25px;
color:#ff6682;
line-height:1.35em;
}
a:link {
color:#253b84;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>/other</title>
<link href="assets/scripts/AMK_Website.css" rel="stylesheet"
type="text/css" />
</head>
<body>
<div id="icon">
<img src="assets/images/icon/icon.gif" width="80" height="106" alt=""/>
</div>
<div id="title">
<h5> /other is a collection of personal work in design photography, as
well as work that inspires me. To get back to
the important stuff, click here
</h5>
</div>
<div id="photolist">
<ul>
<li><img src="assets/images/other/1.jpg" width="768" height="1024"
alt=""/></li>
</ul>
</div>
</body>
</html>
Help appreciated!
Sounds like your css isn't where the html link expects it to be. If you're pointing to a file in assets/, make sure that folder is in the same directory as your html file, and make sure it contains that specific css file.
Bear with me, i am very new to web programming.
here is my simple code:
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>Carlton Banks</title>
</head>
<body>
<h1>CLICK ON CARLTONS HEAD!</h1>
<a href="http://youtu.be/zS1cLOIxsQ8" target="_blank">
<img src="hey.jpg" alt="A picture" style="width:300px">
</a>
</body>
</html>
Here is the extremly simple css file:
body{
h1: green
}
When opening the site on a browsers nothing at all shows up, just this error message:
This page contains the following errors:
error on line 7 at column 10: Opening and ending tag mismatch: link line 0 and head
Below is a rendering of the page up to the first error.
As you are using XHTML, all tags needs to be closed.
The link tag should have a slash at the end to close it:
<link rel="stylesheet" type="text/css" href="style.css" />
The same for the image tag:
<img src="hey.jpg" alt="A picture" style="width:300px" />
The CSS is incorrect. I think that this is what you are trying to do:
body h1 {
color: green;
}
I am trying to position a <span> relative to a particular image. I must use the XHTML Transitional doctype because that is what the application has been using since years before I ever laid hands on it and too much depends on it.
The following code correctly positions the <span> way off to the side:
<html>
<head>
<style type="text/css">
span.tooltip {
z-index:1000;
position:absolute;
top:200;
left:600;
}
</style>
</head>
<body>
<span class="hasTooltip">
<img src="https://www.google.com/images/srpr/logo3w.png" />
<span class="tooltip">Tooltip!</span>
</span>
</body>
</html>
However, this code breaks the <span> position, and it always appears in the same spot no matter what the left or top values are:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
span.tooltip {
z-index:1000;
position:absolute;
top:200;
left:600;
}
</style>
</head>
<body>
<span class="hasTooltip">
<img src="https://www.google.com/images/srpr/logo3w.png" />
<span class="tooltip">Tooltip!</span>
</span>
</body>
</html>
How can I correctly position this <span> element with the XHTML Transitional doctype?
Use top: 200px and left: 600px. They work in any mode, whereas if you omit `px', it is incorrect CSS code and only works in Quirks Mode.
You can play with my code here:
http://jsfiddle.net/gqQnd/
Basically I want to have a div of content to have a semi-transparent border.
The border is semi-transparent but the insider div also become semi-transparent.
I want the inner div to be white BG
Anyone has suggestion?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#transparency {filter: alpha(opacity=75);opacity:.75; -moz-opacity:.75; background-color:#ccc;border:5px solid #333; position:absolute;top:50px; left:50px;}
#cont {background-color:#fff;filter: alpha(opacity=100);opacity:1;}
</style>
</head>
<body>
This is so cool way to do this
<br />
This is so cool way to do this
<br />
This is so cool way to do this<br />
This is so cool way to do this<br />
This is so cool way to do this<br />
This is so cool way to do this<br />
This is so cool way to do this<br />
This is so cool way to do this<br />
This is so cool way to do this<br />
This is so cool way to do this
<div id="transparency">
<div id="cont">
<div>
This is header
</div>
<div>This is body</div>
</div>
</div>
</body>
</html>
Your styles for #cont are actually being applied (hence the white background, even if it is semi-transparent). The problem is that opacity is inherited, and so if you apply it to a parent element, there's no way to stop it being applied to the child elements.
You could use an rgba value for the border-color, but then you get dark corners in Chrome and Safari (I think), where the borders overlap. Read about it here (with workarounds).
What about just setting an rgba background on the parent, with some padding?
http://jsfiddle.net/Kp7JJ/
Update: see css3please.com for cross browser support for rgba, e.g. you will need to apply a Microsoft filter in the CSS to get it to work in IE
Here is an option how to do this, but in this case your popup will be with the fixed size and I don't know if it's possible to make it flexible without javascript (jQuery) with only css
http://jsfiddle.net/gqQnd/13/
Without the use of a rgba background, i would recommend you to create a container containing two divs. One for the opacity, the other for plain color.
The cons are that you can't user without knowing the height and width of the div you're going to create.
But it's working in every browser :)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="fr">
<head>
<title>my super page</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<style type="text/css">
body { background:#EF9; }
.container { width:200px;height:140px; }
.container > div { width:196px; height:136px; position: absolute;}
.c-opacified { position:absolute; border:2px solid #000;opacity: 0.5;-moz-opacity: 0.5;filter:alpha(opacity=50);}
.c-plain { background:red;margin:2px;/*because we have a border: 2px */}
</style>
</head>
<body>
<div class="container">
<div class="c-opacified"></div>
<div class="c-plain"></div>
</div>
</body>
</html>
I can't get IE padding around my <a> tags to work correctly. This only works in Firefox, Safari, Chrome, but not IE - please help!
My simplified HTML code looks like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<div id="mydiv">
<table>
<tr>
<td>
<a style="padding: 20px; background: red;" href="#">Some link</a>
</td>
</tr>
</table>
</div>
</html>
Firefox Result (which is what I want):
Internet Explorer (7) Result (incorrect padding):
(broken image)
How can I fix this to work in IE? Many thanks in advance!
For elements which are naturally inline, IE requires that the element have the display: inline-block; css property before it will apply properties like padding. So just add display: inline-block to your anchor element.
<a style="display: inline-block; padding: 20px; background: red;" href="#">Some link</a>