Problema solo en IE con botoneras

rubito25 · #1 (**permalink**) 27/11/2012, 14:43

Buenas

soy principiante... salseador del mundo webmaster. Hago mis propias web para mi uso, y en una nueva que estoy haciendo me encontrado con un problema q no le doy solucion.

En safari y chrome me va de lujo
pero en Internet Explorer no me reconoce los menus-botoneras para acceder a las siguientes fases de mi web
creo q es el codigo <DIV id=..........> apartir de aqui es donde iria todo el tema de los menus-botones

creo q este problema es bastante comun pero no se resolverlo

espero vuestra ayuda

graciassssssssssss

pzin · #2 (**permalink**) 27/11/2012, 15:32

Tendrás que especificar un poco más cual es tu problema y dejar algo de código...

rubito25 · #3 (**permalink**) 28/11/2012, 23:54

HTLM:

</SCRIPT>
</DIV>
<DIV id=bandoBas>
<DIV id=boutonHome onMouseOver="$(this).css('cursor','pointer')"
onmouseout="$(this).css('cursor','auto')"
onclick="window.location.href='index.html';"></DIV>
<DIV id=boutonTourDates onMouseOver="$(this).css('cursor','pointer')"
onmouseout="$(this).css('cursor','auto')"
onclick="window.location.href='tour.html';"></DIV>
<DIV id=boutonBiographie onMouseOver="$(this).css('cursor','pointer')"
onmouseout="$(this).css('cursor','auto')"
onclick="window.location.href='bio.html';"></DIV>
<DIV id=boutonGalerie onMouseOver="$(this).css('cursor','pointer')"
onmouseout="$(this).css('cursor','auto')"
onclick="window.location.href='photo.html';"></DIV>
<DIV id=boutonAudio onMouseOver="$(this).css('cursor','pointer')"
onmouseout="$(this).css('cursor','auto')"
onclick="window.location.href='audio2.html';"></DIV>
<DIV id=boutonVideo onMouseOver="$(this).css('cursor','pointer')"
onmouseout="$(this).css('cursor','auto')"
onclick="window.location.href='video.html';"></DIV>
<DIV id=boutonContact onMouseOver="$(this).css('cursor','pointer')"
onmouseout="$(this).css('cursor','auto')"
onclick="window.location.href='contact.html';"></DIV>
<DIV id=boutonMyspace onMouseOver="$(this).css('cursor','pointer')"
onmouseout="$(this).css('cursor','auto')"
onclick="window.location.href='http://www.myspace.com/mikelboudj';"></DIV>
<DIV id=boutonFacebook onMouseOver="$(this).css('cursor','pointer')"
onmouseout="$(this).css('cursor','auto')"
onclick="window.location.href='http://www.facebook.com/mikeldjbou';"></DIV>
<DIV id=boutonYoutube onMouseOver="$(this).css('cursor','pointer')"
onmouseout="$(this).css('cursor','auto')"
onclick="window.location.href='http://www.youtube.com/housesensations2010';"></DIV>
<DIV id=boutonTwitter onMouseOver="$(this).css('cursor','pointer')"
onmouseout="$(this).css('cursor','auto')"
onclick="window.location.href='http://twitter.com/mikeldjbou';"></DIV>
<DIV id=boutonEckounltd onMouseOver="$(this).css('cursor','pointer')"
onmouseout="$(this).css('cursor','auto')"
onclick="window.location.href='http://www.tuenti.com';"></DIV>
<DIV id=boutonClubcatwalk onMouseOver="$(this).css('cursor','pointer')"
onmouseout="$(this).css('cursor','auto')"
onclick="window.location.href='http://www.locafmsansebastian.com';"></DIV>
<DIV id=boutonElpeluche onMouseOver="$(this).css('cursor','pointer')"
onmouseout="$(this).css('cursor','auto')"
onclick="window.location.href='http://www.hotmail.com';"></DIV>
<img src="images2/bandoBas2.jpg" width="1024" height="239"></DIV>
</DIV></CENTER>
<DIV id=contenerPlayerVideos></DIV></B></B></B></BODY></HTML>

rubito25 · #4 (**permalink**) 28/11/2012, 23:55

CSS:

div { text-align:left; font-family:Arial, Helvetica, sans-serif; font-size:12px; color:white; }
a { text-align:left; font-family:Arial, Helvetica, sans-serif; font-size:12px; color:white; text-decoration:none; }
a:hover { text-decoration:underline; }
input { width:271px; height:21px; background-color:#264c6c; border:none; color:white; }
textarea { width:271px; height:147px; background-color:#264c6c; border:none; color:white; }
form { margin:0px; padding:0px; }

#contenerPrincipal { width:1024px; position:relative; }

#bandoHaut { background-image:url(../images/bandoHaut.jpg); background-position:top; width:1024px; height:203px; position:relative; }
#ecran { width:1024px; height:326px; position:relative; }
#bandoBas { background-image:url(../images/bandoBas.jpg); background-position:top; width:1024px; height:239px; position:relative; }
#boutonHome {
position:absolute;
width:77px;
height:35px;
left:125px;
top:0px;
}
#boutonTourDates { position:absolute; width:133px; height:35px; left:202px; top:0px; }
#boutonBiographie { position:absolute; width:125px; height:35px; left:335px; top:0px; }
#boutonGalerie { position:absolute; width:102px; height:35px; left:460px; top:0px; }
#boutonAudio {
position:absolute;
width:93px;
height:35px;
left:562px;
top:0px;
}
#boutonVideo {
position:absolute;
width:101px;
height:35px;
left:660px;
top:0px;
}
#boutonContact {
position:absolute;
width:163px;
height:35px;
left:763px;
top:0px;
}
#boutonMyspace { position:absolute; width:180px; height:40px; top:65px; left:240px; }
#boutonFacebook { position:absolute; width:110px; height:40px; top:65px; left:430px; }
#boutonYoutube { position:absolute; width:85px; height:40px; top:65px; left:550px; }
#boutonTwitter { position:absolute; width:120px; height:40px; top:65px; left:645px; }
#boutonEckounltd {
position:absolute;
width:119px;
height:40px;
top:115px;
left:360px;
}
#boutonClubcatwalk {
position:absolute;
width:91px;
height:40px;
top:115px;
left:489px;
}
#boutonElpeluche {
position:absolute;
width:77px;
height:40px;
top:115px;
left:593px;
}

#contenerNews { width:1024px; height:326px; position:relative; background-image:url(../images/accueil.jpg) }
#contenerListeNews { position:absolute; width:400px; height:220px; top:97px; left:555px; overflow:hidden; }
.newsElement { width:400px; position:relative; float:left; padding-left:3px; margin-right:3px; margin-top:10px; }
.newsPhoto { width: 110px; float: left; font-size:13px; }
.newsTitre { font-size:22px; }
.newsTexte { font-style:italic; }

#contenerBiographie { width:1024px; height:326px; position:relative; background-image:url(../images/biographie.jpg) }
#bioFlagAng { width:30px; height:20px; background-image:url(../images/englishFlag.jpg); position:absolute; top:70px; left:850px; }
#bioFlagEsp { width:28px; height:20px; background-image:url(../images/spanishFlag.jpg); position:absolute; top:70px; left:890px; }
#contenerBiographieAnglais { position:absolute; top:100px; left:375px; width:530px; height:220px; overflow:hidden; }
#contenerBiographieEspagnol { position:absolute; top:100px; left:375px; width:530px; height:220px; overflow:hidden; }

#contenerTourDates { width:1024px; height:326px; position:relative; background-image:url(../images/tourDates.jpg) }
#contenerListeTourDates { position:absolute; width:561px; height:220px; top:95px; left:365px; overflow:hidden; }
.tourDatesElement { width:265px; height:70px; position:relative; float:left; background-image:url(../images/tourBackElement.png); padding-left:3px; margin-right:3px; margin-top:2px; }
.tourDatesDate { font-size:13px; }
.tourDatesTitre { font-size:22px; }
.tourDatesTexte { font-style:italic; }

#contenerGaleriePhotos { width:1024px; height:326px; position:relative; background-image:url(../images/galeriePhotos.jpg) }
#contenerGalerieElements { position:relative; top:100px; left:235px; width:300px; height:220px; overflow:hidden; }
.galerieElement { width:88px; height:63px; position:relative; float:left; background-image:url(../images/photoBackElement.png); margin:2px; }
.galerieElement div { width:82px; height:57px; position:relative; margin:3px; overflow:hidden; }

#contenerVideos { width:1024px; height:326px; position:relative; background-image:url(../images/videos.jpg) }
#contenerVideosElements { position:relative; top:100px; left:570px; width:300px; height:220px; overflow:hidden; }
.videosElement { width:88px; height:63px; position:relative; float:left; background-image:url(../images/photoBackElement.png); margin:2px; }
.videosElement div { width:82px; height:57px; position:relative; margin:3px; overflow:hidden; }

#contenerAudio { width:1024px; height:326px; position:relative; background-image:url(../images/audio.jpg) }
#contenerAudioElements { position:relative; top:100px; left:120px; width:170px; height:125px; overflow:hidden; font-size:14px; }
#contenerAudioPlayer { position:absolute; top:70px; left:100px; width:10px; height:10px; overflow:hidden; }
#audioBoutonPlay { position:absolute; top:266px; left:180px; width:15px; height:15px; }
#audioBoutonPause { position:absolute; top:266px; left:200px; width:15px; height:15px; }
#audioBoutonStop { position:absolute; top:266px; left:220px; width:15px; height:15px; }
#audioMessage { position:absolute; top:233px; left:140px; width:100px; height:25px; color:#C20E6D; }
#vinyle { position: absolute; top:80px; left:130px; }
#buttonDownloadAudioMix { position:absolute; top:289px; left:115px; width:180px; height:25px; }

#contenerAudio2 { width:1024px; height:326px; position:relative; background-image:url(../images/audio2.jpg) }
#contenerAudio2Elements { position:relative; top:100px; left:68px; width:340px; height:200px; overflow:hidden; font-size:14px; }
.audio2Element { margin-bottom:8px; }

#contenerContact { width:1024px; height:326px; position:relative; background-image:url(../images/contact.jpg); }
#messageContact { top:105px; left:635px; width:300px; height:300px; position:absolute; }

#contenerMessage { width:1024px; height:326px; position:relative; background-image:url(../images/message.jpg) }
#contenerMessage div { position:absolute; top:130px; left:390px; width:450px; height:150px; }

/* ECRAN CONTENER PLAYER VIDEOS */
#contenerPlayerVideos { height:100%; width:100%; background-color:black; position:absolute; display:none; top:0px; left:0px; }

/* SLIDER PANEL */
.slider1 {width: 16px; height: 300px; background-color: #1a3244; position: absolute; overflow: hidden; }
.indicator { width: 16px; height: 16px; background-color: #1f4663; position: absolute; font-size: 1px; overflow: hidden; }
.container { overflow: hidden; position: relative; }
.content { position: absolute; }

/* CSS SCROLLER PAR DEFAUT*/
body {scrollbar-3dlight-color:#1a3244;
scrollbar-arrow-color:white;
scrollbar-base-color:#1a3244;
scrollbar-darkshadow-color:#1a3244;
scrollbar-face-color:#1f4663;
scrollbar-highlight-color:#1a3244;
scrollbar-shadow-color:#1a3244}

/* IMAGE BOX*/
#ImageBoxOverlay
{
background-color: #000;
z-index: 1000;
}
#ImageBoxOuterContainer{
z-index: 1000;
}
#ImageBoxCaption
{
background-color: #1f4663;
}
#ImageBoxContainer
{
width: 250px;
height: 250px;
background-color: #1f4663;
}
#ImageBoxCaptionText
{ padding-bottom: 5px; font-size: 12px; color: #fff; font-family: Verdana, Arial, Helvetica, sans-serif; }
#ImageBoxCaptionImages
{ color: #fff; font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif; font-style: italic; margin: 0; }
#ImageBoxNextImage
{
background-image: url(../images/spacer.gif);
background-color: transparent;
}
#ImageBoxPrevImage
{
background-image: url(../images/spacer.gif);
background-color: transparent;
}
#ImageBoxNextImage:hover
{
background-image: url(../images/next_image.gif);
background-repeat: no-repeat;
background-position: right center;
}
#ImageBoxPrevImage:hover
{
background-image: url(../images/prev_image.gif);
background-repeat: no-repeat;
background-position: left center;
}

rubito25 · #5 (**permalink**) 28/11/2012, 23:58

El problema es que la web en safari,crhome... q son las q he probado van bien. Pero en Internet Explorer no funciona nada es decir, solo se ve la web como imagen pero no reconoce ningun enlace... solo se me ve el INDEX, no puedes acceder al resto de contenidos y links

ArturoGallegos · #6 (**permalink**) 29/11/2012, 02:35

madre santa que lio con ese código, compañero cuando coloque código use el Highlight correspondiente, no me he tomado la molestia de probar su código con una maquetación tan precaria....

los menús o las botoneras como usted las llama, se hacen con listas desordenadas pruebe creando los menús con este formato y le garantizo que en ningún navegador fallara, sera mucho mas fácil de crear, modificar, y sobre todo no estará tan pesado con tanto jquery innecesario.

Código HTML:

Ver original<ul id="menu">
    <li><a href="#">Enlace1</a></li>
    <li><a href="#">Enlace2</a></li>
    <li><a href="#">Enlace3</a></li>
</ul>