...

View Full Version : layout problem with xhtml and css



akonsu
11-18-2008, 09:18 PM
hello,

the markup below creates a table with a border and puts a row of images in to it. the problem is that IE as well as FF render a gap between the bottom edge of the images and the bottom edge of the table cell. i tried all sort of style combinations i could think of to no avail. if i get rid of the DOCTYPE directive the gap disappears. but i would prefer to stay with the strict mode if possible. please help!

thanks!
konstantin

<?xml version="1.0" encoding="utf-8"?>
<!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/xhtml1">
<body>

<table border="1">
<tr>
<td>
<a href="#" style="display:inline-block;"><img src="http://localhost:8000/static/_150x150_0807140.jpg" style="display:block;" border="0"/></a><a href="#" style="display:inline-block;"><img border="0" style="display:block;" src="http://localhost:8000/static/_150x150_0807141.jpg"/></a>
</td>
</tr>
</table>

</body>
</html>

jcdevelopment
11-18-2008, 09:37 PM
try adding this instead and see if it helps


<!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>blah</title>
<style type="text/css">
* {
margin:0px;
padding:0px;
}
</style>
</head>
<body>

<table border="1">
<tr>
<td>
<a href="#" style="display:inline-block;"><img src="http://localhost:8000/static/_150x150_0807140.jpg" style="display:block;" border="0"/></a><a href="#" style="display:inline-block;"><img border="0" style="display:block;" src="http://localhost:8000/static/_150x150_0807141.jpg"/></a>
</td>
</tr>
</table>

</body>
</html>

drhowarddrfine
11-18-2008, 09:45 PM
The problem arises from images being inline and the <a> is inline. Inline elements are set to the base of the text so there is a slight gap at the bottom for the type descenders. To get the images to the bottom of the line, add 'vertical-align:bottom' to the images (and I think you'll have to do it to the <a> also).

As an aside, while you are correctly using the xml prologue, the very first line, only modern browsers handle that properly while IE goes into quirks mode (can't recall if this was fixed in IE7 or will be fixed in IE8). Best to remove it.

jamesicus
11-18-2008, 10:02 PM
.......... As an aside, while you are correctly using the xml prologue, the very first line, only modern browsers handle that properly while IE goes into quirks mode (can't recall if this was fixed in IE7 or will be fixed in IE8). Best to remove it.

An excellent reference:

W3C Tutorial - Serving XHTML 1.0 (http://www.w3.org/International/tutorials/tutorial-char-enc/#Slide0140)

JFP

akonsu
11-18-2008, 10:13 PM
thanks everyone!

setting margins and padding to 0 helped only in FF, but not in IE, so i ended up setting the vertical-align style on anchors (but not on images), and it seems to work.

cheers
konstantin

abduraooft
11-19-2008, 09:16 AM
Remove
<?xml version="1.0" encoding="utf-8"?> from the top, other wise IE will turn in to quirks mode.

jamesicus
11-19-2008, 04:44 PM
Remove
<?xml version="1.0" encoding="utf-8"?> from the top, other wise IE will turn in to quirks mode.

True for IE6 but not for IE7 and IE8 -- both will render pages that contain the above prolog in Strict compliance mode (but still without XML functionality).

Ref: IE Blog (http://blogs.msdn.com/ie/archive/2005/09/15/467901.aspx)

JFP



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum