Gå til innhold

Sliter med IE 6 kompatibilitet. (Menyproblemer, blir luft mellom meny og innhold)

AnaXyd

Av AnaXyd
i Programmering og webutvikling

Anbefalte innlegg

AnaXyd

AnaXyd

Skrevet
Skrevet

Heisann!

 

Jeg driver og rekoder siden vår, og går nå over fra custom DW generert kode til skikkelig XHTML og CSS kode. Men jeg sliter litt med en kompibilitetsbug i IE6 angående dette.

 

Se selv:

 

post-91181-1200938899_thumb.jpg

 

 

 

Det er altså menyen som forårsaker denne groteske avstanden mellom meny og innhold. (Glem .png feilene i denne omgang, disse tar jeg knekken på med en hack)

 

Prøvd meg på en display:inline/outline på alle menyitemsene, men det hjalp dessverre lite.

 

Gir dere koden her, så om noen hadde giddi og hjulpet meg hadde det vært knallbra! :)

 

 

CSS

Klikk for å se/fjerne innholdet nedenfor
/* ========================================================= */
/* =================Kodet av Vegard Brenden================= */
/* =======================Tendoub.no======================== */
/* ========================================================= */
/* ========================================================= */

/* ===== Globale instillinger ===== */


* { margin: 0; padding: 0; list-style-type: none; border: none; } 

* .hidden { display: none; } 

body, html { background: url(images/bg.gif) repeat; }

html {height: 100.1%} /*Scrollfix*/


/* ====== Styles ======hater styles== */

/*Footer*/
.style1 {
font-family: Arial, Helvetica, sans-serif;
color: #919799;
font-size: 14px;
}

/*Brødtekst Style*/
.style2 {
font-family: Arial, Helvetica, sans-serif;
color: #79a3bd;
font-size: 14px;
}

.style3 {
font-family: Arial, Helvetica, sans-serif;
color: #79a3bd;
font-size: 14px;
padding-left: 7px;
}

.style4 {
font-size: 14pt;
font-family: Arial, Helvetica, sans-serif;
color: #6b99b6;
padding-left: 5px;
}

.style5 {
font-family: Arial, Helvetica, sans-serif;
color: #79a3bd;
font-size: 12px;
}

.style6 {
font-family: Arial, Helvetica, sans-serif;
color: #79a3bd;
font-size: 12px;
padding-right: 10px;
}

.style7 {
font-size: 21px;
font-family: Arial, Helvetica, sans-serif;
color: #74a0ba;
padding-left: 15px;
padding-top: 7px;
}

.style8 {
color: #ffc770;
font-weight: bold;
}

.style9 {
color: #79a3bd;
font-family: Arial, Helvetica, sans-serif;
font-size: 9px;
padding-left: 7px;
}

.style10 {
font-size: 14pt;
font-family: Arial, Helvetica, sans-serif;
color: #6b99b6;
}

.style11 { /* Brødtekst uten padding*/
font-family: Arial, Helvetica, sans-serif;
color: #79a3bd;
font-size: 14px;
text-align: center;
}

.style12 { /* Brødtekst uten padding (18px)*/
font-family: Arial, Helvetica, sans-serif;
color: #79a3bd;
font-size: 18px;
}

/* Lenker */
a:link {
color: #79a3bd;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #6697B5;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: none;
}

/* ==== Headers, submenus ==== */
h1 { background: url(images/banner.png) no-repeat top left; width: 900px; height: 128px; }
#undermeny { background: url(images/undermenu_produkter.gif) no-repeat top left; width: 900px; height: 26px; }
#undermeny2 { background: url(images/undermenu_kontakt.gif) no-repeat top left; width: 900px; height: 26px; }
#undermeny3 { background: url(images/undermenu_nyheter.gif) no-repeat top left; width: 900px; height: 26px; }
#undermeny4 { background: url(images/undermenu_butikk.gif) no-repeat top left; width: 900px; height: 26px; }
#undermeny5 { background: url(images/undermenu_misc.gif) no-repeat top left; width: 900px; height: 26px; }


/* == Span styles ==*/
.info {
background:url(images/bg.msg.info.gif) repeat-x;
padding-top: 2px;
padding-right: 5px;
padding-left: 2px;
}
.info img {
float: left;
margin-top: -2px;
}

.ok {
background:url(images/bg.msg.ok.gif) repeat-x;
padding-top: 2px;
padding-right: 5px;
}

.ok img {
float: left;
margin-top: -2px;
}

.warning {
background:url(images/bg.msg.warning.gif) repeat-x;
padding-top: 2px;
padding-right: 5px;
}

/*=============================================*/
/*=========== Side: Forside ===================*/
/*=============================================*/

div#wrapper {
margin: 0 auto;
width: 900px;
}

/* Menyen */
#meny {
 list-style: none;
 padding: 0;
 margin: 0;
 width: 900px;
 height: 36px;
 background: url(images/meny/bg.meny.gif) no-repeat;
 position: relative;
}


#meny .hjem a{
 width: 140px;
 height: 36px;
 display: block;
 text-indent: -900%;
 position: absolute;
 background: url(images/meny/btn.meny.hjem.gif) no-repeat;
}

#meny .hjem a:hover {
 background-position: left bottom;
}

body#hjem .hjem a{
 background: url(images/meny/btn.meny.hjem.hover.gif) no-repeat;
}


#meny .produkter a{
 width: 140px;
 height: 36px;
 display: block;
display:inline;
 text-indent: -900%;
 position: absolute;
 background: url(images/meny/btn.meny.produkter.gif) no-repeat;
 left: 140px;
 top: 0px;
}

#meny .produkter a:hover {
 background-position: left bottom;
}

body#produkter .produkter a{
 background: url(images/meny/btn.meny.produkter.hover.gif) no-repeat;
}

#meny .butikk a{
 width: 100px;
 height: 36px;
 display: block;
 text-indent: -900%;
display:inline;
 position: absolute;
 background: url(images/meny/btn.meny.butikk.gif) no-repeat;
 left: 280px;
 top: 0px;
}

#meny .butikk a:hover {
 background-position: left bottom;
}

body#butikk .butikk a{
 background: url(images/meny/btn.meny.butikk.hover.gif) no-repeat;
}

#meny .omoss a{
 width: 110px;
 height: 36px;
 display: block;
 text-indent: -900%;
 position: absolute;
display:inline;
 background: url(images/meny/btn.meny.omoss.gif) no-repeat;
 left: 380px;
 top: 0px;
}

#meny .omoss a:hover {
 background-position: left bottom;
}

body#omoss .omoss a{
 background: url(images/meny/btn.meny.omoss.hover.gif) no-repeat;
}

#meny .aktuelt a{
 width: 122px;
 height: 36px;
 display: block;
 display:inline;
 text-indent: -900%;
 position: absolute;
 background: url(images/meny/btn.meny.aktuelt.gif) no-repeat;
 left: 490px;
 top: 0px;
}

#meny .aktuelt a:hover {
 background-position: left bottom;
}

body#aktuelt .aktuelt a{
 background: url(images/meny/btn.meny.aktuelt.hover.gif) no-repeat;
}

/* ====== */
div#shocker {
width: 900px;
float: left;
height: 400px;
background: url(images/shocker_1.png)
}

div#shocker_content {
padding-left: 28px;
width: 850px;
float: left;
height: 400px;
}

div#innholdwrapper { 
float: left; 
width: 900px; 
height: auto; 
background: url(images/bg_innhold.gif) repeat-y;
}

div#innhold {
margin: 20px;
}

div#cms {
float: left;
height: auto;
width: auto;
padding-left: 39px;
padding-top: 20px;
font-family: Arial, Helvetica, sans-serif;
color: #79a3bd;
font-size: 14px;
}

div#sponsorer {
float: left;
height: auto;
width: 880px;
padding-right: 20px;
}

div#sponsorer img {
margin-left: 4px;
margin-bottom: 2px;
float:right;
}

div#footer {
float: left;
width: 900px;
height: 53px;
background: url(images/footer.png);
}

div#footer p {
text-align: center;
font-family: Arial, Helvetica, sans-serif;
color: #919799;
font-size: 14px;
}
div#footertxt {
padding: 14px;
}

#footer a {
color: #919799;
text-decoration: none;
}

#footer a:hover {
color: #7f8486;
text-decoration: underline;
}


/*==================================================*/
/*=========== Side: Produktsiden ===================*/
/*==================================================*/

div#undrtxt {
width: 745px;
height: 21px;
padding-left: 155px;
padding-top: 4px;
}

#container {
margin-left: 78px;
margin-right: 30px;
margin-top: 30px;
margin-bottom: 50px;
width: auto;
height: auto;
float: left;
}
#container h4 {
padding-top: 2px;
font-family: Arial, Helvetica, sans-serif;
color: #79a3bd;
font-size: 16px;
padding-left: 5px;
}

#container p {
font-family: Arial, Helvetica, sans-serif;
color: #79a3bd;
font-size: 12px;
padding-left: 6px;
line-height: 16px;
}

#container img {
margin-left: 60px;
margin-right: 60px;
margin-top: 20px;
display: block;
}

#container .pute a{
 width: 211px;
 height: 180px;
 display: block;
 outline: none;
 background: url(images/bg.pute.produkt.png) no-repeat;
 margin: 0 auto;
 margin-top: 20px;
}

#container .trekk a{
 width: 228px;
 height: 180px;
 display: block;
 outline: none;
 background: url(images/bg.trekk.produkt.png) no-repeat;
 margin: 0 auto;
 margin-top: 20px;
}

#container_pute {
width: 331px;
height: 301px;
background: url(images/bg.ramme.png) no-repeat;
float: left;
margin-right: 80px;
}

#container_trekk {
width: 331px;
height: 301px;
background: url(images/bg.ramme.png) no-repeat;
float: left;
}

/*==================================================*/
/*=========== Side: Butikksiden= ===================*/
/*==================================================*/

div#undrtxt4 {
width: 850px;
height: 21px;
padding-left: 300px;
padding-top: 4px;
}

/*==================================================*/
/*=========== Side: Kontaktsiden ===================*/
/*==================================================*/

div#undrtxt2 {
width: 499px;
height: 21px;
padding-left: 401px;
padding-top: 4px;
}
div#container_kontakt {
width: 450px;
height: auto;
float: left;
padding-left: 65px;
padding-top: 30px;
padding-bottom: 20px;
}
div#kontakt {
background: url(images/kontakt_bg.gif);
width: 400px;
height: auto;
float: left;
}

div#kontakt_over {
width: 400px;
height: 39px;
background: url(images/kontakt_over.gif);
}
div#kontakt_under {
width: 400px;
height: 20px;
background: url(images/kontakt_under.gif);
}
div#teamet_pic {
padding-top: 71px;
width: 375px;
height: 310px;
float: right;
padding-right: 7px;
}

/*==================================================*/
/*=========== Side: Nyheter ========================*/
/*==================================================*/

div#undrtxt3 {
width: 850px;
height: 21px;
padding-left: 50px;
padding-top: 4px;
}

/*===================================================*/
/*=========== Side: Aktuelt siden ===================*/
/*===================================================*/

div#undrtxt5 {
width: 380px;
height: 21px;
padding-left: 520px;
padding-top: 4px;
}


/*===========================*/


/* Produkter */

ul#list {
list-style:square;
list-style-type:square;
list-style-position: outside;
}

div#container_squ {
width: 600px;
height: auto;
float: left;
padding-left: 140px;
padding-top: 10px;
padding-bottom: 20px;
background:url(images/produkter_linedown.gif) repeat-y
}
div#ending {
width: 600px;
height: 10px;
float: left;
padding-bottom: 10px;
background:url(images/produkter_linedown_end.gif) repeat-x
}
div#container_wrapper_squi {
width: 800px;
height: auto;
float: left;
padding-left: 9px;
}
/*Putene*/
div#container_b4squ {
width: 900px;
height: 508px;
float: left;
background:url(images/puter/01_pute_hg.png)
}
/*Trekkene*/
div#container_b4trk {
width: 900px;
height: 508px;
float: left;
background:url(images/puter/01_trekk_hg.png)
}

/*==================================================*/
/*=========== Side: Messesidene= ===================*/
/*==================================================*/

/*Hadelandsmessa*/
div#sml_pics {
padding-top: 28px;
width: 345px;
height: auto;
float: right;
}

 

HTML:

Klikk for å se/fjerne innholdet nedenfor
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nb-no" lang="nb-no">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="Vegard Brenden" />
<meta name="keywords" content="pute, alpakka, alpakkatrekk, reiseputer, squishtie, tendo, ungomsbedrift, komfort, komfort i farten, reise, tendo ungdomsbedrift, comfort, comfort i farten, bil, buss, fly, tog"/>
<meta name="description" content="Vi i TendoUB selger myke puter, samt vårt egenproduserte flerbrukstrekk i alpakka!"/>
<meta name="robots" content="ALL" />
<title>Tendo Ungdomsbedrift - Comfort i farten</title>
<link rel="icon" href="images/favicon.ico" type="" />
<link rel="shortcut icon" href="images/favicon.ico" type="" />
<link rel="made" href="http://www.tendoub.no" title="Tendo UB" />
<link rel="author" href="http://www.tendoub.no" />
<link rel="stylesheet" type="text/css" href="style.css"/>
<!--
	Tendo UB - Opprettet Høsten '07
	post (at) tendoub.no
  		All kopiering er forbudt
-->
</head>

<body id="produkter">
<div id="wrapper">
 <h1><span class="hidden"><a href="#">Tendo Ungdomsbedrift</a></span><a href="./"><img src="images/logo.gif" alt="logo" /></a></h1>
	<ul id="meny">
		<li class="hjem"><a href="./">Hjem</a></li>
		<li class="produkter"><a href="produkter.php">Produkter</a></li>
		<li class="butikk"><a href="butikk.php">Butikk</a></li>
		<li class="omoss"><a href="om_oss.php">Om oss</a></li>
		<li class="aktuelt"><a href="aktuelt.php">Aktuelt</a></li>
</ul>
 <div id="undermeny">
<div id="undrtxt">
  <p class="style2"> » Produktvalg</p>
		</div>
	</div>
	<div id="innholdwrapper">
	  <div id="container">
		<div id="container_pute">
				<span class="pute"><a href="puter.php"></a></span>
		  <h4>Squishtie pute</h4>
				<p>En behagelig og deilig pute som du kan klemme og<br />
				forme,kose og vri rundt. Den har samt en egenskap som<br />
		  holder på varmen, og dette er kjekt nå som det er så kaldt.</p>
			</div>
			<div id="container_trekk">
				<span class="trekk"><a href="trekk.php"></a></span>
				<h4>Alpakkatrekk</h4>
			  <p>Det myke og deilige trekket som fåes i tillegg til putene.<br />
			  En perfekt kombinasjon som utgjør den perfekte komfort!</p><br />
		</div>
		</div>
	</div>
	<div id="footer">
	  <div id="footertxt">
		<p><a href="omsiden.php">Design og kode</a> av TendoUB.no | <a href="omoss.php">Om oss</a></p>
		</div>
	</div>
</div> <!--Wrapper:end-->
</body>
</html>

Lenke til kommentar

Videoannonse

Videoannonse
Annonse
howieD

howieD

Skrevet
Skrevet (endret)
Riktig, og slenge dette inn i en <!--[if IE6]> greie?

 

Dette skal jeg prøve med en gang! Takk! Men jeg skjønner rett og slett ikke den wrapper feilen. Samme med body. Ser da riktig ut i koden?

 

Dette er kode jeg har for å laste inn CSS..

Det er 3 i utgangspunktet identiske CSS filer, men med mindre modifikasjoner for hver nettleser.

 

<![if !IE]>
<link rel="stylesheet" type="text/css" href="css/stilark_firefox.css" />
<![endif]>

<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="css/stilark_ie6.css" />
<![endif]-->

<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="css/stilark_ie7.css" />
<![endif]-->

 

Jeg løste mitt problem ved å gjøre som ovenfor hvertfall.

Jeg hadde akkurat samme problem som deg, og jeg løste det ved å gi topp-delen margin-bottom: -5px;

Men jeg hadde en liten avstand som tilsvarte 5px.

Det fungerte helt perfekt.

 

Display inline virker bare på de tilfellene hvor margin går i samme retning som float.

margin-left: 20px; blir da egentlig til 40px med IE6.

I slike tilfeller vil display inline funke visstnok.

Men fra topp mot bunn virker det tydeligvis ikke.

 

Du kan jo først lage deg en CSS som er helt perfekt i f.eks firefox, også bruker du den som utganspunkt for å rette på koden til IE6 og IE7.

 

 

Jeg har ikke sett på koden din, har ikke tid.

Men jeg pleier alltid å ha en ytre (wrapper) div dersom jeg har flere divs eller lignende. Da trenger man bare å forandre float på wrapperen for å få den riktig plassert.

 

Bare begynn på nytt med å lage skjelettet. Ta bort innholdet.

Det er det jeg pleier å gjøre.

Lager selve skjelettet, og legger til fra topp mot bunn og sjekker for hver del av siden etterhvert som den legges til.

Endret av Haavard82
Lenke til kommentar
AnaXyd

AnaXyd

Skrevet
  • Forfatter
Skrevet (endret)

Fant ut nøstefeilen min, og har nå rettet på dette slik at siden validerer som bare det.

Margin-bottom fungerer også utmerket med avstanden fra menyen til innholdet!

 

Men siden dette kun skjer i IE6, trenger jeg bare å bruke en <!--[if IE 6]>, og slenge inn original CSS fila med endringer på menyen, eller bare menyen?

 

#meny {
(...)
margin-bottom: 55px;
}

 

 

Takk for gode svar forresten! :)

Endret av AnaXyd
Lenke til kommentar
howieD

howieD

Skrevet
Skrevet

Det du trenger å gjøre er å angi en CSS fil for browsere som ikke er IE, dermed bruker du !IE som betyr ikke IE. Her kommer f.eks firefox inn under.

 

Så må du lage en referanse til å laste inn dersom nettleser ER IE6 spesifikt.

if IE 6 fikser den biffen.

 

Og opplever du problemer med IE 7 så bruker du den samme som for IE 6, bare at det står 7. :=)

 

Kodesnuttene plasserer du rett nedenfor <title></title>.

 

 

<![if !IE]>
<link rel="stylesheet" type="text/css" href="css/stilark_firefox.css" />
<![endif]>

<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="css/stilark_ie6.css" />
<![endif]-->

<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="css/stilark_ie7.css" />
<![endif]-->

 

Jeg ville kodet CSS som er perfekt for Firefox siden den støttter webstandarden, og modifiseret den med margin-bottom: -55px; og eventuelle andre rettelser, og lagre den nye CSS filen som stilark_IE6 og kalle på den ved hjelp av kodene ovenfor.

 

De to filene skal være helt identiske med unntak av margin-bottom: -55px;

 

Var det svar nok? :D eller var det utydelig?

 

:)

Lenke til kommentar
howieD

howieD

Skrevet
Skrevet (endret)
Svarte! Nå fikk jeg ett problem med denne marginfixen... Det går ikke an å trykke på submenyen som ligger inne i marginen... Dette er kun i IE6.

 

Prøv selv, og trykk på noen av undermenyene: http://www.tendoub.no/aktuelt.php

 

 

Hvordan kan jeg fikse dette? Setter pris på svar! :)

 

Kanskje legge til en overflow: visible eller overflow: hidden på den delen der submenyene skal dukke opp?

 

Lite gjennomtenkt svar fra meg denne gangen, men men. tror ikke det vil funke, men du kan forsøke :p

Endret av Haavard82
Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
Gå til emneliste
×
×
  • Opprett ny...