6 replies [Last post]
soniclnd
Offline
Regular
Last seen: 15 years 41 weeks ago
Joined: 2005-01-06
Posts: 29
Points: 0

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?

[email protected]

Tags:
Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 41 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

soniclnd
Offline
Regular
Last seen: 15 years 41 weeks ago
Joined: 2005-01-06
Posts: 29
Points: 0

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--->

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 30 weeks 6 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

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.

Verschwindende wrote:
  • CSS doesn't make pies

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 30 weeks 6 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

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>

Verschwindende wrote:
  • CSS doesn't make pies

soniclnd
Offline
Regular
Last seen: 15 years 41 weeks ago
Joined: 2005-01-06
Posts: 29
Points: 0

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)

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 30 weeks 6 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

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.

Verschwindende wrote:
  • CSS doesn't make pies