SitePoint.com

BrunoFacca · Aug 12, 2004, 17:32

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

Paul O'B · Aug 13, 2004, 08:18

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

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Aug 13, 2004, 08:18	#2
Paul O'B CSS Advisor Join Date: Jan 2003 Location: Hampshire UK Posts: 27,436	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