|
Posted by DM on October 13, 2004, 2:26 pm
Please log in for more thread options
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;
}
|
|
Posted by Leif K-Brooks on October 13, 2004, 6:31 pm
Please log in for more thread options
DM wrote:
> 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.)
http://tw.ecritters.biz/html_examples/threeimages/
|
|
Posted by DM on October 13, 2004, 6:06 pm
Please log in for more thread options Leif K-Brooks wrote:
> DM wrote:
>
>> 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.)
>
>
> http://tw.ecritters.biz/html_examples/threeimages/
Thanks for the reply. I appreciate the help. Your example doesn't include the
anchor tags which were present in my original post, but I was still able to get
it to work following your example.
I'm still not sure why space was being added. Even now, it's still being added
in IE 5 for the PC, but I'm willing to allow that.
dm
|
|
Posted by StarQuake on October 14, 2004, 6:54 pm
Please log in for more thread options DM wrote:
> Leif K-Brooks wrote:
>
>> DM wrote:
>>
>>> 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.)
>>
>>
>>
>> http://tw.ecritters.biz/html_examples/threeimages/
>
>
> Thanks for the reply. I appreciate the help. Your example doesn't
> include the anchor tags which were present in my original post, but I
> was still able to get it to work following your example.
>
> I'm still not sure why space was being added. Even now, it's still being
> added in IE 5 for the PC, but I'm willing to allow that.
>
> dm
Maybe you should delete the line breaks:
<img src="image1.jpeg" alt="" id="image1"><img src="image2.jpeg"
alt=""><img src="image3.jpeg" alt="">
I know its ugly, but it solve my problem last time.
--
-----------------------------------------
Visit my site! http://solid.bounceme.net
-----------------------------------------
|
|
Posted by Frances Del Rio on October 14, 2004, 2:00 pm
Please log in for more thread options
StarQuake wrote:
> DM wrote:
>
>> Leif K-Brooks wrote:
>>
>>> DM wrote:
>>>
>>>> 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.)
>>>
>>>
>>>
>>>
>>> http://tw.ecritters.biz/html_examples/threeimages/
>>
>>
>>
>> Thanks for the reply. I appreciate the help. Your example doesn't
>> include the anchor tags which were present in my original post, but I
>> was still able to get it to work following your example.
>>
>> I'm still not sure why space was being added. Even now, it's still
>> being added in IE 5 for the PC, but I'm willing to allow that.
>>
>> dm
>
> Maybe you should delete the line breaks:
>
> <img src="image1.jpeg" alt="" id="image1"><img src="image2.jpeg"
> alt=""><img src="image3.jpeg" alt="">
>
> I know its ugly, but it solve my problem last time.
this is exactly right.. I had the same problem a few weeks ago, and was
tearing up my hair over it, until I realized that putting tags right
next to each other, no line breaks, no spaces, nothing between them,
solves this problem.. hope this helps.. good luck..
Frances
|
| Similar Threads | Posted | | Space around images? | November 21, 2007, 4:29 pm |
| make a div take up space | August 21, 2004, 7:33 am |
| Why unwanted space? | July 23, 2005, 10:39 pm |
| SSI Nav Menu Space | February 20, 2007, 12:38 pm |
| Bold takes up more space? | July 13, 2004, 10:35 am |
| Why Blank Space on Last Row of Table? | July 29, 2004, 3:00 am |
| Zero width space still unsafe? | December 20, 2004, 4:46 pm |
| why paragraphs have a space on top in FireFox? | May 19, 2005, 11:30 am |
| adding white space in | August 31, 2005, 4:34 pm |
| White space, collapsing | March 28, 2006, 10:47 am |
|
XML Sitemap