Thu, 2005-01-06 23:59
hello i know html and want to change my work into xhtml. however when i put an image it always put a padding to the bottom of it (even if specifically assign no border, margin, or padding) can anybody help me?
Fri, 2005-01-07 00:16
#1
XHTML strict help
Could really do with a little detail here, some code or a link perhaps e-mail addy isn't much help.
Are you sure it's padding? or could it be the base line and the space left for the dangly bits on letters as mentioned recently in a post by Gary, I think.
Hugo.
Fri, 2005-01-07 01:48
#2
XHTML strict help
sure....
(xhtml transitional):
http://www.freewebs.com/soniclnd/marcos.htm
(xhtml strict):
http://www.freewebs.com/soniclnd/marcostrict.htm
also, when i validate my html i keep geting this anoying message:
Line 28, column 21: invalid comment declaration: found name character outside comment but inside comment declaration
<!---startminitable--->
Fri, 2005-01-07 10:04
#3
XHTML strict help
The correct syntax for a comment is <!-- comment --> - two hyphens, not three.
Just as I though. Not only have you got
<?xml version="1.0" encoding="ISO-8859-1"?>
in the wrong place, it's also hideously unnecessary. Remove it immediately.
And you really shouldn't be using tables to do something that simple. Also, most of your CSS should be sombined into classes.
I'll rebuild it for you and show you what I mean.
Fri, 2005-01-07 10:54
#4
XHTML strict help
Here you go - cleaner, leaner code, and I did away with the need for a horrible spacer image. Bleh.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Marcos</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<style type="text/css">
* {
border: 0;
padding: 0;
margin: 0;
}
body {
font-family: arial, sans-serif;
font-size: 12px;
color: #fff;
background: #000 url(sbck.gif);
text-align: center;}
.box {
width: 500px;
margin: 4em auto;
}
.heading {
border: 1px solid #fff;
border-bottom: 0;
background-color: rgb(0, 51, 153);
height: 4px;
}
.title {
width: 200px;
border: 1px solid #fff;
background-color: rgb(0, 51, 153);
border-bottom: 1px solid rgb(0, 51, 153);
padding: 0 2px;
height: 13px;
line-height: 20px;
}
.content {
border: 1px solid #fff;
padding: 1em;
}
img.right {
float: right;
margin: -1px -3px 0 0;
}
img.left {
float: left;
margin: -1px 0 0 -3px;
}
.left {
margin: -15px 0 0 -1px;
}
.center {
margin: -15px auto 0 auto;
text-align: center;
}
.right {
margin: -15px -1px 0 0;
float: right;
}
</style>
</head>
<body>
<div class="box">
<div class="heading">
<div class="title left">
<img src="right.gif" alt="right" width="15" height="15" class="right" />
title
</div>
</div>
<div class="content"> Content <br /> content <br /> content </div>
</div>
<div class="box">
<div class="heading">
<div class="title center">
<img src="right.gif" alt="right" width="15" height="15" class="right" />
<img src="left.gif" alt="left" width="15" height="15" class="left" />
title
</div>
</div>
<div class="content"> Content <br /> content <br /> content </div>
</div>
<div class="box">
<div class="heading">
<div class="title right">
<img src="left.gif" alt="left" width="15" height="15" class="left" />
title
</div>
</div>
<div class="content"> Content <br /> content <br /> content </div>
</div>
</body></html>
Fri, 2005-01-07 23:51
#5
XHTML strict help
thanx a lot you guys.... it seems you really put a lot of effor to try and help me and i appreciate it.... the problem was that the images were being displayed as an inline element causing the height to be more than 15px tall... i fixed it (an advice from a guy) by putting "display: block;" as an atribute for images.... thanx a lot
PS: the css code made by pineaplehead also works great but right now i'm a bit more comfortable with tables (as you can see i'm only getting into the xhtml and css stuff, thanx a lot)
Sat, 2005-01-08 10:52
#6
XHTML strict help
No probs mate. However I would really suggest you ditch tables as soon as you can - ie now, and move to css layouts.