SitePoint Sponsor

User Tag List

Results 1 to 13 of 13

Thread: White spaces

  1. #1
    SitePoint Member
    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!

  2. #2
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    img{display:block;}

  3. #3
    SitePoint Member
    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?

  4. #4
    Non-Member
    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

  5. #5
    SitePoint Member
    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>
    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?
    Last edited by Prophecy; Aug 6, 2005 at 06:35.

  6. #6
    Non-Member
    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;

  7. #7
    SitePoint Member
    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?

  8. #8
    Non-Member
    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>

  9. #9
    SitePoint Member
    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)?

  10. #10
    Non-Member
    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

  11. #11
    SitePoint Member
    Join Date
    Aug 2005
    Location
    Netherlands
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by 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;
    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

  12. #12
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    maybe write it in ?

  13. #13
    SitePoint Member
    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; }
    In FireFox it works great all the way, but IE has some problems...

    EDIT:
    Solved
    Last edited by Prophecy; Aug 7, 2005 at 01:12.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •