SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Member AMC's Avatar
    Join Date
    Jul 2001
    Location
    Sesimbra/Portugal
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS, beginner problems.

    I'm testing with css but i'm having some problems that I don't know how to fix, this is my code:

    HTMl:
    Code:
    	 <div id="box">
    		 <div id="menuleft">
    			<img src="menu_player.jpg" alt="menu left">
    		 </div>
    		 <div class="menspace"></div>
    		 <div class="menu" id="menuqs">
    			<h1 class="menufont"><a href="quemsomos.php">Quem Somos</a></h1>
    		 </div>
    		 <div class="menspace"></div>
    		 <div class="menu" id="menueq">
    			<h1 class="menufont"><a href="equipas.php">Equipas</a></h1>
    		 </div>
    		 <div class="menspace"></div>
    		 <div class="menu" id="menurk">
    			<h1 class="menufont"><a href="rankings.php">Rankings</a></h1>
    		 </div>
    		 <div class="menspace"></div>
    		 <div class="menu" id="menurg">
    			<h1 class="menufont"><a href="regulamentos.php">Regulamentos</a></h1>
    		 </div>
    		 <div class="menspace"></div>
    		 <div class="menu" id="menues">
    			<h1 class="menufont"><a href="estadios.php">Estádios</a></h1>
    		 </div>
    		 <div class="menspace"></div>
    		 <div class="menu" id="menuin">
    			<h1 class="menufont"><a href="inscricoes.php">Inscrições</a></h1>
    		 </div>
    		 <div class="menspace"></div>
    		 <div class="menu" id="menuct">
    			<h1 class="menufont"><a href="contactos.php">Contactos</a></h1>
    		 </div>
    		 <div class="menspace"></div>
    		 <div class="menu" id="menuright">
    			<h1 class="menufont">&nbsp;</h1>
    		 </div>
    		 <div id="leftbox">
    			<div id="perna">
    			 <img src="perna.jpg" alt="perna">
    			</div>
    		 </div>
    CSS:
    Code:
     
    body {text-align:center}
    h1 {margin:0px}
    h1 {font:8pt Verdana,Arial,Helvetica,sans-serif; color:#000000}
    h1.menufont {text-align:center; color:#FFFFFF}
    h1.menufont A:link {text-decoration:none; color:#FFFFFF}
    h1.menufont A:visited {text-decoration:none; color:#FFFFFF}
    h1.menufont A:hover {text-decoration:none; color:#009600}
    #box {text-align:left; margin:10px auto 0px auto; width:800px}
    .menu {float:left; background:#009600; height:14px}
    .menu a:hover {float:left; background:#FFFFFF; height:14px}
    .menspace {float:left; background:#FFFFFF; width:2px; height:14px}
     
    #menuleft img {float:left; width:151px; height:14px}
    #menuqs {width:100px}
    #menuqs a:hover {width:100px}
    #menueq {width:78px}
    #menueq a:hover {width:78px}
    #menurk {width:83px}
    #menurk a:hover {width:83px}
    #menurg {width:114px}
    #menurg a:hover {width:114px}
    #menues {width:69px}
    #menues a:hover {width:69px}
    #menuin {width:94px}
    #menuin a:hover {width:94px}
    #menuct {width:78px}
    #menuct a:hover {width:78px}
    #menuright {width:15px}
    #leftbox {text-align:center; float:left; width:255px}
    #perna img {float:left; width:255px; height:100px}
    Now the problem is that in Internet explorer, the two images have some space in between, like you can see here: http://www.promptusonline.com/debug/teste.html

    Is something wrong with my code?
    How can I fix this ?

    Thanks in advance.
    Last edited by AMC; Mar 19, 2003 at 01:44.

  2. #2
    Degrading Gracefully PalmerB's Avatar
    Join Date
    Sep 2001
    Location
    Ohio - U.S.A. Outlook: Cautiously Optimistic
    Posts
    3,283
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Add padding: 0px to your h1 tag and see what happens.

  3. #3
    SitePoint Member AMC's Avatar
    Join Date
    Jul 2001
    Location
    Sesimbra/Portugal
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the quick reply, but the bug is still there, no changes.
    I managed to found out that the bug only happens when this line is in the css code:
    Code:
    .menspace {float:left; background:#FFFFFF; width:2px; height:14px}
    this is the css for the little divs, between the menu buttons, and I can't go round it

  4. #4
    Degrading Gracefully PalmerB's Avatar
    Join Date
    Sep 2001
    Location
    Ohio - U.S.A. Outlook: Cautiously Optimistic
    Posts
    3,283
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try span class=menspace instead of div class=menspace When you use a div it automatically puts some extra space around the div

    Palmer

  5. #5
    SitePoint Member AMC's Avatar
    Join Date
    Jul 2001
    Location
    Sesimbra/Portugal
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Nop the problem persists, I made the changes from div to span and the anoying bug is still there

    I'm going crazy with this stupid bug.

  6. #6
    Degrading Gracefully PalmerB's Avatar
    Join Date
    Sep 2001
    Location
    Ohio - U.S.A. Outlook: Cautiously Optimistic
    Posts
    3,283
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think Internet Explorer is the only browser that has understood the "height" attribute for me. It looks like that is the problem. A work around would be to put in a "spacer.gif" image in the green part of the menu that is 1px wide and 14px high. A spacer.gif is a transparent 1 pixel gif image file that is never seen but helps get things to look like they're supposed to. You can look at the code of almost every web site and you'll see they are used very often.

  7. #7
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,236
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Why not just add the 14px space to another of your divs, rather than placing empty div tags all over your page? It will make your code easier to read and your markup will be more structurally "correct".

  8. #8
    SitePoint Member AMC's Avatar
    Join Date
    Jul 2001
    Location
    Sesimbra/Portugal
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    First thanks to all for your time.

    Why not just add the 14px space to another of your divs, rather than placing empty div tags all over your page? It will make your code easier to read and your markup will be more structurally "correct".
    vgarcia, I don't think you understood my code, or maybe I don't understand what you're saying, I'm not adding empty divs, please follow the link I posted in the first post, the div's are those white spaces between the menu butons.
    How can i add them without adding white divs ?
    I already tried adding white borders to the menu butons but they get messed up in IE<6.0 because of the mouseover effect.

    PalmerB
    I don't think the problem is related with the green part of the menu because when I delete the code related with the white space between the green butons:
    .menspace {float:left; background:#FFFFFF; width:2px; height:14px}
    The bug disapears.

  9. #9
    Degrading Gracefully PalmerB's Avatar
    Join Date
    Sep 2001
    Location
    Ohio - U.S.A. Outlook: Cautiously Optimistic
    Posts
    3,283
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, later on, I'll copy your code and try to see if I can fix it on my machine. We'll get it fixed don't worry

  10. #10
    SitePoint Member AMC's Avatar
    Join Date
    Jul 2001
    Location
    Sesimbra/Portugal
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks PalmerB, I really apreciate it

  11. #11
    Degrading Gracefully PalmerB's Avatar
    Join Date
    Sep 2001
    Location
    Ohio - U.S.A. Outlook: Cautiously Optimistic
    Posts
    3,283
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The problem is with the empty divs...
    <div class="menspace"></div>
    I replaced those with spacer.gifs and and it works now...
    <div class="menspace"><img src="spacer.gif" height="1" width="2" border="0"></div>

    Thing is, you'll need an invisible 1 px spacer.gif.

  12. #12
    SitePoint Member AMC's Avatar
    Join Date
    Jul 2001
    Location
    Sesimbra/Portugal
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It works really well !!
    One more bug squashed

    Thanks


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
  •