White spaces

[Prophecy]

Hello all,

About an hour ago, I validated my new site to XHTML 1.1, but now there are a few strange white spaces between my table cells. Before the validation there was no problem at all. GameJunkies.nl BETA is the link.

Hope you guys can help me out!

Thanks in advance!

[all4nerds]

Hello

img{display:block;}

[Prophecy]

That didn't do the trick quiet correct, as you can see.

It caused an "return" behind al images didn't it?

[all4nerds]

Hello

No your form / input is not fitting in its higher in FF Moz, in OP its aligned to the left

[Prophecy]

Well, I will fix that then.

But what happened to the menu to the menu to the left?

EDIT: Making the forms smaller did the trick for the header, but now I need some help with the menu. I don't know why the links are placed below the arrow, this is the code for those texts;

<table width="130" border="0" class="nav"  cellpadding="0" cellspacing="0">
     <tr> 
          <td>
              <img src="img/arrow.gif" alt="arrow" width="3" height="5" /> <a href="#" class="menu">home</a><br />
              <img src="img/arrow.gif" alt="arrow" width="3" height="5" /> <a href="#" class="menu">nieuws</a><br />
              <img src="img/arrow.gif" alt="arrow" width="3" height="5" /> <a href="#" class="menu">forum</a><br />
              <img src="img/arrow.gif" alt="arrow" width="3" height="5" /> <a href="#" class="menu">reviews</a><br />
              <img src="img/arrow.gif" alt="arrow" width="3" height="5" /> <a href="#" class="menu">previews</a><br />
              <img src="img/arrow.gif" alt="arrow" width="3" height="5" /> <a href="#" class="menu">columns</a><br />
              <img src="img/arrow.gif" alt="arrow" width="3" height="5" /> <a href="#" class="menu">downloads</a><br />
              <img src="img/arrow.gif" alt="arrow" width="3" height="5" /> <a href="#" class="menu">crew</a><br />
              <img src="img/arrow.gif" alt="arrow" width="3" height="5" /> <a href="#" class="menu">contact</a> 
         </td>
     </tr>
</table>

EDIT2:
It looks like there is an "return" placed after every image! Including the shields from W3C XHTML 1.1 and W3C CSS... Is this due to the "img{display:block;}" I have added to my CSS file?

[all4nerds]

Hello

your table css is abit slopy

.nav img{margin-left:6px;}

.nav { font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 10px;
color: #000000;
padding: 5px;
padding-left:0px;

[Prophecy]

I think everything works fine now. Except for the XHTML and CSS shields. According to the code they should be next to each other. But the fact is, that the shields are placed straight under each other and their link is clickable on the entire page.

*See the site for yourself, it's hard to explain.

How can I solve this?

[all4nerds]

Hello

floats

<p style="border:1px solid #ffff99;float:left;">
<a href="http://validator.w3.org/check?uri=referer" style="float:left;">
<img src="http://www.w3.org/Icons/valid-xhtml11" alt="Valid XHTML 1.1!" height="31" width="88" style="border: 0;"/></a>
<a href="../../jigsaw.w3.org/css-validator/validator8047.html?uri=http://www.gamejunkies.nl/beta/style.css" style="float:left;">
<img src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS" height="31" width="88" style="border: 0;"/></a>
<p style="clear:both;"></p>
</p>

[Prophecy]

Ok, that works fine, but there is a little yellow line around the 2 shields right now. Is that removable?

And then my second question, why does the menu stick to the side of the page in IE and takes a little space in Firefox (the way it should be)?

[all4nerds]

hello

delete the border

<p style="float:left;">
<a href="http://validator.w3.org/check?uri=referer" style="float:left;">
<img src="http://www.w3.org/Icons/valid-xhtml11" alt="Valid XHTML 1.1!" height="31" width="88" style="border: 0;"/></a>
<a href="../../jigsaw.w3.org/css-validator/validator8047.html?uri=http://www.gamejunkies.nl/beta/style.css" style="float:left;">
<img src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS" height="31" width="88" style="border: 0;"/></a>
<p style="clear:both;"></p>
</p>

space in FF IE see my post 6

[Prophecy]

Hello

your table css is abit slopy

.nav img{margin-left:6px;}

.nav { font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 10px;
color: #000000;
padding: 5px;
padding-left:0px;

So you mean this one?

I don't understand what you mean with that!

.nav img{margin-left:6px;} Is not in my CSS... :S

[all4nerds]

Hello

maybe write it in ?

[Prophecy]

Ow, sorry, that did work out!

But now, on the second box (under the menu) it starts with no images just text. So I made a second CSS class for that box;

.news	   {	font-family: Arial, Verdana, Helvetica, sans-serif;
				font-size: 10px;
				color: #000000;
				padding: 5px;
				padding-left: 6px;
				border-color: #D3D3D3;
				border-style: solid;
				border-left-width: 1px;
				border-right-width: 1px;
				border-top-width: 0px;
				border-bottom-width: 0px; }

In FireFox it works great all the way, but IE has some problems...

EDIT:
Solved