If I put three images next to each other (each within an anchor tag) they all
line up horizontally as expected with no space between them. I.e., they're
sitting flush up against each other.
However, in my design I need them to be laid out like this:
XXXXXXXXooooooooo
XXXXXXXXooooooooo
XXXXXXXXooooooooo
XXXXXXXXLLLLLLLLL
XXXXXXXXLLLLLLLLL
XXXXXXXXLLLLLLLLL
(Each letter, "X", "o", and "L" represents a different image.)
There should be no space at all between the images.
I have tried several different ways to get that to work using, <div>s, the float
attribute, and tables. I've set up CSS rules that specify margin: 0, padding: 0
and border: none. I've made sure there are no extraneous spaces in the XHTML
code itself. I've also made sure the document validates as XHTML 1.0 strict.
No matter what I do, the arrangement of images renders with space between them.
In Mozilla 1.7.3 for the PC there's a gap between the two right images and in IE
6 there is a gap between all the images.
How can I get these images to not have any space between them?
Any help would be greatly appreciated.
Code follows.
================================================== ==================================
<!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>
<title>MTC -- <!--#include virtual="include/sectionTitle.htm" --></title>
<!--#include virtual="/include/headElements.htm" -->
</head>
<body>
<p class="invisible"><a href="#features">Skip navigation links</a></p>
<p class="invisible"><a id="top" name="top"></a></p>
<div id="headlineleft">
<a href="audio/audio.htm" class="unmarked"><img src=
"../images/headline_audio.jpg" alt="Streaming Audio - Listen to MTC committee
meetings" /></a>
</div>
<div>
<a href="press_releases/" class="unmarked" id="headlinetopright"><img src=
"../images/headline_news2.jpg" alt="MTC press releases" /></a>
<br />
<a href="headlines.htm" class="unmarked" id="headlinebottomright"><img src=
"../images/headline_news3.jpg" alt="Transportation Headlines" /></a>
</div>
<p><img src="../images/bar_features.gif" alt="Features" /></p>
</body>
</html>
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
a#headlinebottomright{
margin: 0;
padding: 0;
border: none;
}
div#headlineleft{
margin: 0;
padding: 0;
border: none;
float: left;
}
a#headlinetopright{
margin: 0;
padding: 0;
border: none;
}
a,
a:link,
a:active,
a:visited {
border-bottom: solid 1px;
text-decoration: none;
}
a:hover {
border-bottom: none;
text-decoration: none;
}
body {
padding: 4px;
}
div#navbardiv {
width: 132px;
padding-bottom: 12px;
background-color: #E3E7EE;
}
div#navbardiv a {
border: none;
background: none;
text-decoration: none;
}
div#navbardiv p {
width: 120px;
margin: 0 4px 2px 4px;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
div#navbardiv ul{
margin: 0;
padding: 0;
}
div#navbardiv ul li{
padding: 0 4px 0 6px;
margin: 0;
display: list-item;
list-style-position: inside;
list-style-type: disc;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 14px;
}
form#search input {
margin: 0;
padding: 1px;
border: solid 1px #000000;
background-color: #CCCCCC;
color: #EC2F00;
font-size: 10px;
}
h1{
font-size: large;
}
h1, h2, h3, h4, h5, h6, p {
margin: 12px 0 0 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
}
h2{
font-size: medium;
}
h3{
font-size: small;
}
h4{
padding: 2px 4px 2px 4px;
background-color: #6B8EBD;
color: #FFFFFF;
font-size: x-small;
text-transform: uppercase;
}
h5{
padding: 2px 4px 2px 4px;
background-color: #BDBDBD;
color: #FFFFFF;
font-size: x-small;
text-transform: uppercase;
}
h6{
font-size: small;
}
hr {
margin: 0;
margin-top: 8px;
margin-bottom: 8px;
padding: 0;
border: none;
border-top: solid 1px #000000;
}
img {
margin: 0;
padding: 0;
border: none;
}
li{
margin: 8px 0 8px 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: small;
}
p {
font-size: small;
}
p.invisible {
height: 0;
width: 0;
display: none;
color: #FFFFFF;
position: absolute;
overflow: hidden;
}
table {
border-collapse: collapse;
}
table#innercontent{
margin: 6px 0 0 0;
padding: 0;
border: none;
border-collapse: collapse;
}
table#innercontent td{
vertical-align: top;
}
table#main {
background-color: #FFFFFF;
}
table#main td {
vertical-align: top; /* border: solid 1px #cc0000; */
}
table#main td#footer {
margin: 0;
padding: 12px;
border-top: solid 1px #000066;
text-align: center;
}
table#main td#footer p {
margin: 0;
margin-top: 6px;
margin-bottom: 6px;
padding: 0;
color: #000066;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
}
table#main td#maincontent {
padding-left: 16px;
padding-bottom: 20px;
}
table#main td#topbanner {
padding-bottom: 6px;
}
table#main td#topbanner a,
div#headlines a{
border: none;
background: none;
text-decoration: none;
}
table#main td#topbanner img#logo {
margin-right: 12px;
}
td.leftcol{
padding: 0 6px 0 0;
}
td.leftcol p,
td.rightcol p{
}
td.leftcol,
td.rightcol{
width: 221px;
}
td.rightcol{
padding: 0 0 0 6px;
}
a.unmarked{
border: none;
background:transparent;
text-decoration: none;
}
