SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Aug 2004
    Location
    brazil
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Very weird CSS bug.

    I made CSS popups with the description of the links in my navbar. It works great in IE 6, 5.5, 5.01, it also works in Firefox 9.0.3 but theres something very weird about it. Every time I pass the mouse over a button in the nav bar, along with the image rollover (java) and the CSS text popup I get this:

    http://www.djbrunofacca.com.br/bug.gif

    My tag board pops up in the upper left corner of the viewport, it's there for like 1/4 second and then it dissapears. Every time I pass the mouse over a button in the navbar this happens.

    I can't find a reasonable explanation for this. Maybe my web site is haunted lol

    here's the html for my header (content in portuguese)
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
    <HTML lang="pt">
    <HEAD>
    
    blah blah blah, meta tags, java script, etc etc.
    
    </HEAD>
    <BODY>
    
    <div id="container">
    <div id="headerdiv">
    <h1><a href="http://www.djbrunofacca.com.br"><img src="http://www.djbrunofacca.com.br/images/title.jpg" width="720" height="90" alt="DJ Bruno Facca"></a>
    <br><span class="t10b">
    <a href="http://www.djbrunofacca.com.br/index.php" onmouseover="rollOn('home'); return true;" onmouseout="rollOff('home'); return true;"><img src="http://www.djbrunofacca.com.br/images/nav_home_off.gif" width="62" height="25"  name="home" alt="Home"><span class="navdesc">Página principal do site. Últimas novidades, Tag Board, Rádios online, etc.</span></a>
    <a href="http://www.djbrunofacca.com.br/artigos.php" onmouseover="rollOn('artigos'); return true;" onmouseout="rollOff('artigos'); return true;"><img src="http://www.djbrunofacca.com.br/images/nav_artigos_off.gif" width="63" height="25"  name="artigos" alt="Artigos"><span class="navdesc">Artigos sobre a música, cultura eletrônica, Hip-Hop, ou qualquer outro assunto que se encaixe neste site.</span></a>
    <a href="http://www.djbrunofacca.com.br/bio.php" onmouseover="rollOn('bio'); return true;" onmouseout="rollOff('bio'); return true;"><img src="http://www.djbrunofacca.com.br/images/nav_bio_off.gif" width="74" height="25"  name="bio" alt="Biografia"><span class="navdesc">Conheça um pouco da minha história e os motivos que me levaram a ser DJ.</span></a>
    <a href="http://www.djbrunofacca.com.br/estilos.php" onmouseover="rollOn('estilos'); return true;" onmouseout="rollOff('estilos'); return true;"><img src="http://www.djbrunofacca.com.br/images/nav_estilos_off.gif" width="123" height="25"  name="estilos" alt="Estilos Musicais"><span class="navdesc">Descrição bastante específica dos tipos de música que você ouve nos meus sets.</span></a>
    <a href="http://www.djbrunofacca.com.br/sets.php" onmouseover="rollOn('sets'); return true;" onmouseout="rollOff('sets'); return true;"><img src="http://www.djbrunofacca.com.br/images/nav_sets_off.gif" width="106" height="25"  name="sets" alt="Sets Mixados"><span class="navdesc">Demo sets para serem ouvidos online ou para download, mostrando um pouco do meu trabalho e estilo.</span></a>
    <a href="http://www.djbrunofacca.com.br/agenda.php" onmouseover="rollOn('agenda'); return true;" onmouseout="rollOff('agenda'); return true;"><img src="http://www.djbrunofacca.com.br/images/nav_agenda_off.gif" width="119" height="25"  name="agenda" alt="Agenda e Fotos de Festas"><span class="navdesc">Festas em que eu toquei (ou tocarei) e fotos de algumas delas.</span></a>
    <a href="http://www.djbrunofacca.com.br/equip.php" onmouseover="rollOn('equip'); return true;" onmouseout="rollOff('equip'); return true;"><img src="http://www.djbrunofacca.com.br/images/nav_equip_off.gif" width="101" height="25"  name="equip" alt="Equipamento"><span class="navdesc">Especificações e fotos do meu equipamento. Pickups, CDJs, Mixer, Amps, Caixas de Som, Iluminações, etc.</span></a>
    <a href="http://www.djbrunofacca.com.br/contato.php" onmouseover="rollOn('contato'); return true;" onmouseout="rollOff('contato'); return true;"><img src="http://www.djbrunofacca.com.br/images/nav_contato_off.gif" width="72" height="25"  name="contato" alt="Contato"><span class="navdesc">Entre em contato para obter mais informações, preços, dar a sua opiniao ou crítica sobre meu trabalho.</span></a>
    </span></h1>
    </div>
    <div id="clearheaderdiv"></div>
    <span class="thetitle"><?php echo $page_title; ?></span>
    These are some fixes I used in the html code, just in case you're thinking "why the hell is he using that many spans?":
    The font size of h1 is set to 1pt to fix the vertical spacing between images in strict mode. The <span class="t10b"> in there is because the h1 text is set to 1pt but the CSS popup text (wich appears inside h1) is set to 10pt, that causes the vertical space to re-appear in IE... for more info on the vertical spacing thing go here: http://www.sitepoint.com/forums/show...19#post1347919
    anyways, back to the real problem:

    This is the CSS code:
    Code:
    BODY { 
    	background-color:white;
    	background-image: url(images/bg.gif); 
    	background-position: left;
    	background-repeat: repeat-y;
    
    	font-size: 10pt; 
    	color: black;
    	font-family: arial, sans-serif;
    	vertical-align: top;
    	text-align:left;
    	padding: 0px 0px 0px 0px;
    	margin: 15px 0px 0px 10px;
    }
    
    /* ------------- Links ------------- */
    a:link {color: #008EF2; text-decoration: none; font-weight: bold }
    a:visited {color: #008EF2; text-decoration: none; font-weight: bold} 
    a:active {color: #008EF2; text-decoration: none; font-weight: bold} 
    a:hover {text-decoration: underline; color: black; border: none;}
    
    
    /* ------------- Elementos básicos da página ------------- */
    ul { margin-left: 40px; margin-right: 12px; padding: 0px; text-align: left;}
    li { margin-top: 10px; padding: 0px;}
    img {border: none;}
    H1 { margin-top: 0px; font-size: 1px;}
    hr { color: #008EF2; background-color: #008EF2; width:100%; height: 3px; text-align: center; border: none;}
    p { margin-left: 12px; margin-right: 12px; margin-top: 0; text-align: left;}
    
    /* ------------- Texto - tamanhos ------------- */
    .t7 {font-size: 7pt}
    .t8 { font-size: 8pt}
    .t8b { font-size: 8pt; font-weight: bold;}
    .t9 { font-size: 9pt}
    .t9b { font-size: 9pt; font-weight: bold }
    .t10b { font-size: 10pt; font-weight: bold }
    .t11b { font-size: 11pt; font-weight: bold }
    .t13b { font-size: 13pt; font-weight: bolder }
    .t13bred { font-size: 13pt; font-weight: bolder; color: red }
    .t15b { font-size: 15pt; font-weight: bolder }
    
    /* ------------- Textos - características especiais ------------- */
    .bold { font-weight: bold }
    .invisible { visibility: hidden; color: white}
    .zero { margin: 0px; }
    .copyright { font-size: 7pt; margin-left: 245px }
    .block { display: block; } 
    .centertxt { text-align: center; }
    
    
    /* ------------- CSS de objetos específicos (não mecher) ------------- */
    .statusimg{ float:right; margin-top: -15px;}
    .botao { background: #E1E1E1; color: black; font-family: arial, sans-serif; font-size: 8pt }
    
    .txtmsg { 
    	width:125px; 
    	border: #000000 1px solid; 
    	background-color: #E1E1E1; 
    	font-family: Arial, sans-serif; 
    	font-size: 8pt; 
    	overflow: hidden; 
    	}
    
    .txturl { 
    	width:100px; 
    	border: #000000 1px solid; 
    	background-color: #E1E1E1;
    	font-family: Arial, sans-serif; 
    	font-size: 8pt; }
    
    .txtname { 
    	width:100px; 
    	border: #000000 1px solid; 
    	background-color: #E1E1E1;
    	font-family: Arial, sans-serif; 
    	font-size: 8pt; 
    	}
    
    form  {margin-top: 0px; margin-bottom: 0px;}
    
    
    /* ------------- Popups da descrição dos links e titulos das paginas do header ------------- */
    span.navdesc {
      display: none;
    }
    
    a:hover span.navdesc {
    color: black;
    display: block;
    text-decoration: none;
    position: absolute;
    top: 120px;
    left: 0px;
    width: 720px;
    font-size: 10pt;
    background: #CCCCCC;
    z-index: 2;
    }
    
    .thetitle {
    color: black;
    display: block;
    font-style: italic;
    font-weight: bold;
    font-size: 10pt;
    position: absolute;
    top: 120px;
    left: 0px;
    width: 720px;
    z-index: 1;
    }
    
    
    /* ------------- DIVs - Containers e floats ------------- */
    #container {
    	padding-top: 0px;
    	padding-bottom: 20px;
    	padding-left: 0px;
    	padding-right: 0px;
    	position: relative;
    	width:720px;
    	border: 1px solid black;
    	background-color: #E1E1E1;
    	background-image: url(images/bg3col.gif) repeat-y;
    	text-align: center;
    	}
    
    * html #container {
    width: 722px;
    w\idth: 720px;
    }
    
    #headerdiv {
    	width:720px; 
    	height: 140px;
    	background: #CCCCCC;
    	float: left;
    	border: none;
    	margin-bottom: 15px;
    	}
    
    #clearheaderdiv {
    	clear: both; line-height: 0px;
    	background: white;
    	}
    
    		
    #left {
    	width:150px;
    	float:left;
    	}
    	
    /* o main é 2 pixels menor por causa da borda de 1px do container: */
    #main {
    	width:430px; 
    	float:left;
    	}
    	
    #right {
    	width:140px;
    	float:left;
    	}
    
    #tagboard
    	{
    	margin: 0 auto;
    	position: static;
    	width:127px;
    	}
    
    #clear {
    	clear: both; line-height: 0px;
    	}
    
    #news {
    	margin: 0 auto;
    	position: static;
    	width:400px;
    	}
    
    		
    #newsleft {
    	width:130px;
    	padding:0px;
    	float:left;
    	}
    	
    #newsright {
    	width:270px; 
    	padding:0px;
    	float:left;
    	}
    
    #clearnews {
    	clear: both; line-height: 0px;
    	}
    
    #bruno {
    	width:200px;
    	padding:0px;
    	margin: 0px 15px 15px 10px;
    	float:left;
    	}
    
    #radios {
    	margin: 0 auto;
    	position: static;
    	width:400px;
    	padding-bottom: 15px;
    	padding-top: 15px;
    	padding-left: 0px;
    	padding-right: 0px;
    	border: 1px solid black;
    	}
    The CSS is valid and the HTML is valid 4.01 strict EXCEPT for the iframe wich I really can't replace (I tried <object> and divs but it was not good enough for my purpose).

    Anyone can explain this thing?

    Thanks
    Bruno Facca

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,784
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi,

    I've seen this a few times with firefox now and it seems to draw the element first and then places it afterwards so you get this flashing effect.

    It usually happens on floats and when some js is executed.

    The only solution I've found is to make the element position absolute.

    e.g.
    Code:
    #tagboard
     {
     margin: 0 auto;
     position:static;
     width:127px;
     }
    html > body #tagboard {
     position:absolute;
     margin-left:5px;
    }
    This will cure the jumping but of course you will have to make sure that the absolute elements doesn't cause other problems. (e.g. if other columns are shorter.)

    If the iframe is just on the one page then you can target that page only with a body id which will keep your other pages floated.

    Paul


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
  •