Forum Moderators: not2easy
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<title>Testing</title>
<style type="text/css">#picture {
position: relative;
float: left;
margin: 4px;
}
#picture a {
display: block;
border: 3px solid blue;
padding: 4px;
}
#picture img{
border: 1px solid red;
}</style>
</head>
<body>
<div id="picture">
<a href="#link"><img src="put a picture here!.jpg" alt="alt text here"/></a>
</div></body>
</html>
You would need to edit this code to some picture you have to see what I'm talking about. I don't know if it is a Mozilla bug or a some coding mistake.
One thought I had was Mozilla was trying to add an underline to the picture, like a regular text link, resulting in the extra padding, but I'm not really sure...
Any help would be appreciated :)
Thanks
Your also technically supposed to declare a width on a non-replaced floated element (the div):
[w3.org...]
but that doesn't seem to be the cause of your problem.
Adam
Mozilla is carrying forward all the inline attributes including line-height. Set "line-height: 0;"
#picture a {
display: block;
border: 3px solid blue;
padding: 4px;
line-height: 0;
}
