|
|
Posted by Gary Dale on 10/12/05 13:32
Can someone please explain what is going on here? I have some examples
of weird behaviour that I can't figure out.
I have valid XHTML 1.1 and CSS according to W3C validators.
I have an image at the top left of my page. If I specify a
border-bottom, the border starts a couple of pixels below the bottom of
the image. My workaround was to create a span and manually position it
at the bottom of the image. Why do I need to do this (yes, my
measurements are correct - the image is 94 pixels high and I have to
position the span at 94px down to get it in the right position)? I've
read some material that suggests that the <div> tag is like <p> and puts
extra space below it, but this even happens when I don't have a <div> tag.
I have a table that is just below the span. Again, I had to manually
position it. I've specified border: none; margin: 0px; padding: 0px; but
the table is still one pixel from the edge of the page. Moreover,
although it is the same width as the span above it, it looks like it
ends a pixel before the span as well.
The effect is the same with both FireFox and IE 6 on Linux and XP. I've
had the table problem on other pages too, but as my left column is
usually white, it didn't matter. On this site, the left and right
columns are different colours from the background, so the white
background shows the problem quite visibly.
Can someone explain where these extra pixels are coming from and how to
position a table to start at left: 0px;?
Here's the relevant HTML:
<!--
<body class="main">
<div>
<img src="images/banner.jpg" width="382" height="94" alt="MCC
logo" />
<span class="banner"><script
type="text/javascript">document.write(document.title);</script>
</span>
</div>
<table class="full">
<tr>
<td class="leftcolumn">
<div><a href="index.html">Home</a></div>
<div><a href="whoweare.html">Who we are</a></div>
<div><a href="mission.html">Our mission</a></div>
<div><a href="events.html">Events</a></div>
<div><a href="contact.html">Contact</a></div>
<div><a href="donate.html">Donations</a></div>
<div><a href="membership.html">Join</a></div>
<div><a href="articles.html">Articles</a></div>
<div><a href="links.html">Links</a></div>
</td>
<td class="mainarea">
...
-->
Navigation:
[Reply to this message]
|