Problemi nei link con firefox e css

**topodiddl** · 26-02-2007, 17:47

Ciao a tutti,

ho un problema che mi sta facendo diventare matto:

ho una pagina dove utilizzo un css formata da una testata e un contenitore che racchiude un menu a sx e una colonna centrale per i contenuti e un piede più o meno così:

-----------testata------------

-menu- * ----contenuti----
- m m - * - aaaaaaaaaa -
- m m - * - aaaaaaaaaa -
- m m - * - aaaaaaaaaa -
--------- * - aaaaaaaaaa -
******* - bbbbbbbbbb -
******* - bbbbbbbbbb -
******* - bbbbbbbbbb -
******* -------------------

------------piede------------

Ora il problema è che con firefox tutti i link che sono presenti nel div contenuti funzionano solo dopo l'altezza del menu (dove ci sono le b nel disegnino) mentre con explorer vanno tutti.

Spero sia chiaro... qualcuno sa come posso risolvere?

**Leilond** · 26-02-2007, 17:55

Se avessimo l'html e il css magari potremmo fare qualcosa... così dovremmo essere degli indovini!!

**topodiddl** · 26-02-2007, 18:28

Hai ragione scusa...

*HTML*

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>il mio titolo</title>

<meta name="Author" CONTENT="io">
<meta name="Copyright" CONTENT="-">
<meta name="Description" CONTENT="il mio titolo">
<meta name="Keywords" CONTENT="bla bla bla">

<link rel="stylesheet" href="../Style/style.css" type="text/css" />

<script type="text/javascript">

</script>

</head>
<body link="#0166B3" vlink="#0166B3" alink="#0166B3">
<div id="masthead">

<table cellpadding=0 border=0 cellspacing=0>
<tr>
<td>[img]../images/Logo2.gif[/img]</td>
<td align=left valign=bottom width=100%><h1>Titolo1</h1><h2>Subtitolo</h2></td>
<td align=bottom right>[img]../images/Logo.gif[/img]</td>
</tr>
</table>

<table width=100% cellpadding=0 border=0 cellspacing=0>
<tr>
<td background="../images/headerline2.gif" border=0 width=84% height=25 rules=none><div id="globalNav">
Home | Novita' | Eventi | Ricerca |
Competenze | Progetti | Personale | Pubblicazioni</div></td>
<td align=right valign=middle background="../images/headerline2.gif" border=0 width=15% height=25 rules=none>
<script type="text/javascript">document.write(now.getDate() + " " + monthNames[now.getMonth()] + " " + thisYear );</script></td>
<td align=right valign=middle background="../images/headerline2.gif" border=0 width=1% height=25 rules=none>
[img]images/pixel.gif[/img]</td>
</tr>
</table>

</div>

<div id="pagecell1">

<div id="col2">

<div class="feature">
<center>

[img]../images/mail.gif[/img]
<h2>Webmail Bologna</h2>
(mail@xxxxxx.xxx.it)

<h2>Webmail Pisa</h2>
(mail@xx.xxxxxxxxx.it)

</center>
</div>

</div>

<div id="pageNav">

[img]../images/box_head.gif[/img]
<table border="0" cellpadding="0" cellspacing="0" background="../images/box_headline.gif" width="160" height="21"><tr><td align=center class="menuehead">
Menu
</td></tr></table>
<table border="0" cellpadding="0" cellspacing="0" width="160" background="../images/bgw.gif">
<tr valign="top"><td width="20" background="../images/box_bg_l.gif">[img]../images/pixel.gif[/img]</td><td class="artsubhead">[img]../images/pixel.gif[/img]

<div id="navcontainer">
<ul>
<li id="active">Home[*]Novita'[*]Eventi[*]Ricerca[*]Competenze[*]Progetti[*]Personale[*]Pubblicazioni[*]Collana XXXXXXX[*]Webmail[*]Area riservata[/list]
</div>
</td><td width="15" background="../images/box_bg_r.gif">[img]../images/pixel.gif[/img]</td></tr></table>[img]../images/box_foot.gif[/img]

[img]../images/box_head.gif[/img]

<table border="0" cellpadding="0" cellspacing="0" background="../images/box_headline.gif" width="160" height="21">
<tr>
<td align=center class="menuehead">
Lingua</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="160" bgcolor="FFFFFF">
<tr valign="top">
<td width="20" background="../images/box_bg_l.gif" bgcolor="#FFFFFF">[img]../images/pixel.gif[/img]</td>
<td class="artsubhead" bgcolor="#FFFFFF">[img]../images/pixel.gif[/img]

<center>[img]../images/flag-english.png[/img]
[img]../images/pixel.gif[/img][img]../images/flag-italian.png[/img]</center></td>
<td width="15" background="../images/box_bg_r.gif">[img]../images/pixel.gif[/img]</td>
</tr>
</table>
[img]../images/box_foot.gif[/img]

</div>

<div id="siteInfo">

<center><table border="0" cellpadding="0" cellspacing="0" width="96%">
<tr>
<td width="4">[img]../images/toplefti.gif[/img]</td>
<td background="../images/topi.gif">[img]../images/topi.gif[/img]</td>
<td width="4">[img]../images/toprighti.gif[/img]</td>
</tr>
<tr>
<td background="../images/midlefti.gif" width="4">[img]../images/midlefti.gif[/img]</td>
<td class="boxcontent" align="center" bgcolor="#FFFFFF">

<center>
© XXXXXXX - XXXXXXXXXXXXXXXX

XXXXXXXXXXXXXX

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Tel.+39.XXXXXXXXX / +39.XXXXXXXX - Fax +39.XXXXXXXXX

</center>
</td>
<td background="../images/midrighti.gif" width="4">[img]../images/midrighti.gif[/img]</td>
</tr>
<tr>
<td width="4">[img]../images/botlefti.gif[/img]</td>
<td background="../images/boti.gif">[img]../images/boti.gif[/img]</td>
<td width="4">[img]../images/botrighti.gif[/img]</td>
</tr>
</table></center>

</div>

</body>
</html>

**topodiddl** · 26-02-2007, 18:30

*CSS*

/***********************************************/
/* XXXXXXXXXXXXXXXXXXXXXXXXXXX */
/* XXXXXXXXXXXXXXX */
/***********************************************/

/***********************************************/
/* HTML tag styles */
/***********************************************/

body{
font-family: bold Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 76%
color : #880000;
background-image: url(../images/MAIN-BG.GIF);
line-height: 1.166;
margin: 0px;
padding: 0px;
}

A:active {
text-decoration : none;
font-weight : bold;
color : 0166B3;
font-family: Verdana, Arial, Helvetica, sans-serif;
}

A:link {
text-decoration : none;
font-weight : bold;
color : 0166B3;
font-family: Verdana, Arial, Helvetica, sans-serif;
}

A:visited {
text-decoration : none;
font-weight : bold;
color : 0166B3;
font-family: Verdana, Arial, Helvetica, sans-serif;
}

A:hover {
text-decoration : underline;
font-weight : bold;
color : #990000;
font-family: Verdana, Arial, Helvetica, sans-serif;
}

h1{
font-family: Verdana,Arial,sans-serif;
font-size: 200%;
color: #0166B3;
margin: 0px;
padding: 0px;
}

h2{
font-family: Arial,sans-serif;
font-size: 150%;
color: #0166B3;
margin: 0px;
padding: 0px;
}

h3{
font-family: Arial,sans-serif;
font-size: 100%;
color: #334d55;
margin: 0px;
padding: 0px;
}

h4{
font-size: 100%;
font-weight: normal;
font-variant: small-caps;
margin: 0px;
padding: 0px;
}

h5{
font-family: Verdana,Arial,sans-serif;
font-size: 120%;
margin: 0px;
padding: 0px;
}

ul{
list-style-type: square;
}

ul ul{
list-style-type: disc;
}

ul ul ul{
list-style-type: none;
}

label{
font-family: Arial,sans-serif;
font-size: 100%;
font-weight: bold;
color: #334d55;
}

@font-face {
font-family:Pixel Classic ;
src:local(Pixel Classic), url(http://www.userwear.de/fonts/PixelClassic.TTF) format(TrueType);
}

@font-face {
font-family:Micro ;
src:local(Micro), url(http://www.userwear.de/fonts/micro___.TTF) format(TrueType);
}

TABLE, BODY, P, DIV {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
color: #660000;

}

.arthead {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
color:#660000;
font-weight: bold;
}

.artsubhead {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
}

.art {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
}

.menuehead {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
font-weight: bold;
}

INPUT, TEXTAREA, SELECT {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
}

img.top {
vertical-align:text-top
}

img.bottom {
vertical-align:text-bottom
}

img.right {
position: absolute;
top: 10px;
right: 10px
}

/***********************************************/
/* Layout Divs */

/************************************/
#pagecell1{
position:absolute;
top: 120px;
left: 1%;
right: 1%;
width: 745px;
}

#tl {
position:absolute;
top: -1px;
left: -1px;
margin: 0px;
padding: 0px;
z-index: 100;
}

#tr {
position:absolute;
top: -1px;
right: -1px;
margin: 0px;
padding: 0px;
z-index: 100;
}

/************************************/

/************************************/
#masthead{
position: absolute;
top: 0px;
left: 1%;
right: 1%;
width: 745px;

}

/************************************/

/************************************/
#pageNav {
position: absolute;
top: 5px;
left: 0;
right: 2%;
}

#pageNav ul a:link, #pageNav ul a:visited {
display: block;
}

#pageNav ul {
list-style: none;
margin: 0; padding: 0;
}

/* hack to fix IE/Win's broken rendering of block-level anchors in lists */

#pageNav li {
border-bottom: 1px solid #EEE;
}

/* fix for browsers that don't need the hack */

html>body #pageNav li {
border-bottom: none;
}

/************************************/

/************************************/
#col2{
margin:0px 0px 0px 178px;
padding: 0px 0px 0px 0px;
}
/************************************/

/* End Layout Divs */
/***********************************************/

/***********************************************/
/*Component Divs */

/************************************/
#siteName{
margin: 0px;
padding: 16px 0px 8px 0px;
color: #ffffff;
font-weight: normal;
}

/************************************/

#utility{
font-family: Verdana,sans-serif;
font-size: 9pt;
position: absolute;
top: 16px;
right: 0px;
color: #919999;
}

#utility a{
color: #ffffff;
}

#utility a:hover{
text-decoration: underline;
}

/************************************/
#pageName{
padding: 0px 0px 14px 10px;
margin: 0px;
border-bottom:1px solid #ccd2d2;
}

#pageName h2{
font-family: Arial,sans-serif;
font-size: 21pt;
color: #000000;
margin:0px;
padding: 0px;
}

#pageName img{
position: absolute;
top: 0px;
right: 6px;
padding: 0px;
margin: 0px;
}

/************************************/

/************* #globalNav styles **************/

#globalNav{
padding: 0px 0px 5px 10px;
color: #880000;
}

#globalNav a {
font-size: 90%;
color: 0166B3;
padding: 0 4px 0 0;
}

#gnl {
position: absolute;
top: 0px;
left:0px;
}

#gnr {
position: absolute;
top: 0px;
right:0px;
}

#globalLink{
position: absolute;
top: 6px;
height: 22px;
min-width: 640px;
padding: 0px;
margin: 0px;
left: 10px;
z-index: 100;
}

a.glink:link{
font-size: 10pt;
color: #000000;
font-weight: bold;
margin: 0px;
padding: 2px 5px 4px 5px;
border-right: 1px solid #8FB8BC;
}

a.glink:visited{
font-size: 10pt;
color: #000000;
font-weight: bold;
margin: 0px;
padding: 2px 5px 4px 5px;
border-right: 1px solid #8FB8BC;
}

a.glink:hover{
font-size: 10pt;
margin: 0px;
font-weight: bold;
padding: 2px 5px 4px 5px;
background-image: url("glblnav_selected.gif");
border-right: 1px solid #8FB8BC;
text-decoration: none;
color: #000000;
}

/************************************/

/************************************/
.subglobalNav{
position: absolute;
top: 84px;
left: 0px;
/*width: 100%;*/
min-width: 640px;
height: 20px;
padding: 0px 0px 0px 10px;
visibility: hidden;
color: #ffffff;

}

.subglobalNav a:link{
font-size: 80%;
color: #ffffff;
}

.subglobalNav a:visited{
font-size: 80%;
color: #ffffff;
}

.subglobalNav a:hover{
font-size: 80%;
color: #cccccc;
}
/************************************/

/************************************/
#search{
position: absolute;
top: 5px;
right: 10px;
z-index: 101;
}

#search input{
font-size: 70%;
margin: 0px 0px 0px 10px;
}

#search a:link{
font-size: 80%;
font-weight: bold;

}

#search a:visited{
font-size: 80%;
font-weight: bold;

}

#search a:hover{
font-size: 80%;
margin: 0px;
font-weight: bold;

}

/************************************/

/************** .feature styles ***************/

.feature{
padding: 0px 10px 0px 10px;
font-size: 90%;
border: 1px solid #660000;
background-color: #FFFFFF;
}

.feature h3{
padding: 30px 0px 5px 0px;
text-align: center;
}

.feature img{
float: left;
padding: 10px 10px 0px 0px;
}

.feature hr{
color: sienna;
}

/************************************/

/************************************/
.story{
clear: both;
padding: 0px 0px 0px 0px;
font-size: 80%;
}

.story h3{
font-family: Arial,sans-serif;
font-size: 15pt;
font-weight: bold;
color: #000000;
}

.story p{
padding: 0px 10px 10px 0px;

}

.story a.capsule{
font-family: Arial,sans-serif;
font-size: 12pt;
color: #005FA9;
display:block;
padding-bottom: 5px;
font-weight: bold;
}

.story a.capsule:hover{
text-decoration: underline;
}

td.storyLeft{
padding-right: 12px;
}
/************************************/

/************************************/

#siteInfo{
clear: both;
}

/************************************/
#sectionLinks{
margin: 0px;
padding: 0px;
font-size: 10pt;
}

#sectionLinks h3{
padding: 10px 0px 2px 10px;
border-bottom: 1px solid #cccccc;
font-size: 10pt;
}

#sectionLinks a:link{
display: block;
border-top: 1px solid #ffffff;
border-bottom: 1px solid #cccccc;
background-image: url("bg_nav.jpg");
font-weight: bold;
padding: 3px 0px 3px 10px;
color: #21536A;
}

#sectionLinks a:visited{
display: block;
border-top: 1px solid #ffffff;
border-bottom: 1px solid #cccccc;
background-image: url("bg_nav.jpg");
font-weight: bold;
padding: 3px 0px 3px 10px;
color: #21536A;
}

#sectionLinks a:hover{
display: block;
border-top: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
background-color: #DDEEFF;
background-image: none;
padding: 3px 0px 3px 10px;
font-weight: bold;
text-decoration: none;
}
/************************************/

/************************************/
.relatedLinks{
margin: 0px;
padding: 0px 0px 10px 10px;
border-bottom: 1px solid #cccccc;
}

.relatedLinks h3{
padding: 10px 0px 2px 0px;
font-size: 10pt;
}

.relatedLinks a{
display: block;
}
/************************************/

/************************************/
#advert{
padding: 10px;
}

#advert img{
display: block;
}
/************************************/

/***********************************************/
/*End Component Divs */
/***********************************************/

**topodiddl** · 26-02-2007, 18:42

Questo è quello che ne viene fuori...

In pratica i link all'interno del blocco centrale al di sopra della linea come da immagine funzionano solo se uso Explorer

**Leilond** · 27-02-2007, 10:51

L'errore è nel div "pageNav"
Prova ad aggiungere questa regola all'interno del div
border:1px solid red;

E vedrai che tale div COPRE il corpo centrale
Quando si mette un elemento float o posizionato con absolute, bisogna SEMPRE SEMPRE definire una "width"
Metti un width 175px o che in generale possa CONTENERE la larghezza di pageNav e risolvi

Comunque ti devo fare un appunto
Fai un uso massivo di tabelle per posizionare gli elementi: è scorretto. Ci sono i div, con i float per il posizionamento e ci sono i tag <ul> e[*] per le liste di link

Ti consiglio vivamente di studiare un po' di layout tableless se vuoi passare finalmente al web 2.0

**topodiddl** · 27-02-2007, 11:21

Innanzi tutto grazie per la risposta!

Non sapevo che fosse necessario definire la width perchè pensavo si adattasse da solo una volta che iniziava l'altro div posizionato in modo "assoluto"... ora lo so

In effetti è vero ho dovuto utilizzare molte tabelle per ottenere un posizionamento che mi andasse bene perchè non trovavo nessuna altra soluzione... se comunque hai qualche link da darmi come spunto per iniziare a vedere il "tableless" lo guarderò molto volentieri.

Ti ringrazio ancora per l'aiuto e la rapidità.
Buona giornata!

Discussione: Problemi nei link con firefox e css

Strumenti discussione

Ricerca discussione

Visualizza

Problemi nei link con firefox e css

Permessi di invio