SitePoint Sponsor |
|
User Tag List
Results 1 to 13 of 13
Thread: White spaces
-
Aug 6, 2005, 03:28 #1
- Join Date
- Aug 2005
- Location
- Netherlands
- Posts
- 7
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
White spaces
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!
-
Aug 6, 2005, 03:37 #2
- Join Date
- Jan 2005
- Location
- Netherlands
- Posts
- 4,300
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Hello
img{display:block;}
-
Aug 6, 2005, 03:39 #3
- Join Date
- Aug 2005
- Location
- Netherlands
- Posts
- 7
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
That didn't do the trick quiet correct, as you can see.
It caused an "return" behind al images didn't it?
-
Aug 6, 2005, 03:57 #4
- Join Date
- Jan 2005
- Location
- Netherlands
- Posts
- 4,300
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Hello
No your form / input is not fitting in its higher in FF Moz, in OP its aligned to the left
-
Aug 6, 2005, 06:37 #5
- Join Date
- Aug 2005
- Location
- Netherlands
- Posts
- 7
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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;
Code:<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>
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?
Last edited by Prophecy; Aug 6, 2005 at 07:35.
-
Aug 6, 2005, 08:43 #6
- Join Date
- Jan 2005
- Location
- Netherlands
- Posts
- 4,300
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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;
-
Aug 6, 2005, 09:26 #7
- Join Date
- Aug 2005
- Location
- Netherlands
- Posts
- 7
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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?
-
Aug 6, 2005, 09:57 #8
- Join Date
- Jan 2005
- Location
- Netherlands
- Posts
- 4,300
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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>
-
Aug 6, 2005, 11:37 #9
- Join Date
- Aug 2005
- Location
- Netherlands
- Posts
- 7
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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)?
-
Aug 6, 2005, 11:53 #10
- Join Date
- Jan 2005
- Location
- Netherlands
- Posts
- 4,300
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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
-
Aug 6, 2005, 12:17 #11
- Join Date
- Aug 2005
- Location
- Netherlands
- Posts
- 7
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Originally Posted by all4nerds
I don't understand what you mean with that!
.nav img{margin-left:6px;} Is not in my CSS... :S
-
Aug 6, 2005, 12:22 #12
- Join Date
- Jan 2005
- Location
- Netherlands
- Posts
- 4,300
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Hello
maybe write it in ?
-
Aug 6, 2005, 13:45 #13
- Join Date
- Aug 2005
- Location
- Netherlands
- Posts
- 7
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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;
Code:.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; }
EDIT:
SolvedLast edited by Prophecy; Aug 7, 2005 at 02:12.
Bookmarks