Netscape problem med <div> opbygget html

Læg lige et link til siden.

<ole>

Det er ikke hensigtsmæssigt at undgå tabeller for enhver (religiøs) pris. Det er jo ikke uden grund, vi har sådan et element til rådighed - og der er ikke noget somhelst, der tyder på, det kommer til at udgå af standarderne de næste mange år.

1. Hvilken NS-version er det, du har problemer med?
2. Det giver ikke mening, både at angive en left- og right-værdi
3. Fejlen kan ligge flere steder, så du bør afgjort følge Eriks henstilling

/mvh
</bole>

fx denne: http://asp.o-n-l-i-n-e.dk/website/venstrestillet/index.asp?UserName=lejskiboks

Netscape 7.1

Jeg har angivet både left og right, fordi jeg har oplevet problemer med width afhængig af DOCTYPE.

Start med at få den igennem http://validator.w3.org/ uden fejl

Fjern position:absolute; fra din body css

^ selve den body css der står på selve siden ikke i det seperate stylesheet

eller rettere ret den til det her:

<style type="text/css">
body{background: #fff url('images/bg/standard.gif') repeat-y;}   
</style>

i hoved css udskift din banner css med denne:

#banner     {      z-index: 1;
                position: absolute;
                  text-align:center;
                top: 2%;
                left: 2%;
                width: 96%;
                right: 2%;
                  height: 20%;
                  margin: 0px;
                padding-top:20px;
                border: 2px dashed #6666CC;
                overflow:hidden;
                  color: black;
                  background-color: rgb(217,217,242);}

edit ... ret lige padding-top:20px; til padding-top:0px; i banner css også ...

nåh, content css skulle også have en tur så der skulle rettes i banner igen her er de to css rettelser til hoved filen (husk den fra 26/04-2006 21:38:00 også ) :


#banner     {      z-index: 1;
                position: absolute;
                  text-align:center;
                top: 2%;
                left: 2%;
                width: 96%;
                right: 2%;
                  height: 20%;
                  margin: 0px;
padding:1px;
                padding-top:0px;
                border: 2px dashed #6666CC;
                overflow:hidden;
                  color: black;
                  background-color: rgb(217,217,242);}




#content     {  z-index: 3;
                position: absolute;
                top: 24%;
                right: 2%;
                left: 22%;
                width: 76%;
                height: 74%;
                border: 2px dashed #6666CC;
                background-color: #eeeeee;
                padding: 1px;
                overflow:auto;}

og lidt finpudsning... indsæt denne i din css efter rettelserne:
h1{padding:0px;margin:0px;line-height:45px;font-size:32px;}

html,body{margin:0px;padding:0px;}

hehe, slet lige right værdierne som olebole nævnte ... sidder og sover lidt kiggede kun lige på hvad der skulle tilføjes/ændres for at ordne visningen :D
(håber det hjalp)

En validering som erik nævner er nok også god nok (anbefales)... Det kan måske være lidt hårdt/umuligt afhængig af din (eller hvis du ejer cms systemet så kundernes) frihed i cms systemet...

Edit: [ Det kan måske være lidt hårdt/umuligt afhængig af din (eller hvis du ejer cms systemet så kundernes) frihed i cms systemet... ]
Det minder mig selv om:

Hvis du ikke kan rette i selve html filen /cms systemet
(rette det der står i 26/04-2006 21:38:00)
så sæt disse ind i din css:

h1{padding:0px;margin:0px;line-height:45px;font-size:32px;}
html,body{margin:0px;padding:0px;height:100%;width:100%;position:relative!important;}

og ret din css med det fra 26/04-2006 21:54:44

//Undskyld de mange posts :D

Hej mclemens

øøøøhhh ... jeg er relativt forvirret over ovenstående ... mange poster som du selv skriver. Men jeg prøver lige, når jeg rammer min egen pc i aften.

Foreløbig tak for indsatsen.

Hej igen

Mange tak for hjælpen mclemens. Tricket med position:absolute i body på selve siden gjorde hele forskellen. Fra selt ikke at kunne se indholdet i NS ses pludseligt alt. De øvrige detaljer var blot ad-ons.

I den forbindelse har jeg i øvrigt et par uddybende svar. Jeg kan se, at du retter min baggrundsfarve i banner. Tanken var nu, at det skulle være gennemsigtigt, hvilket ikke opnås nu. Kan NS slet ikke takle attributten alpha-opacity?

Derudover kan jeg se, at du konsekvent fjerner padding. Og jeg kan jo også se, at padding har en uheldig effekt i NS, fordi bredden bliver tilsvarende større, hvilket "skupper" rundt på tingene. Men på den anden side, ser det dumt ud i IE, hvis tingene står helt op ad kanten ... kan man løse det problem og stadig tilgodese begge browsere?

Hvis du lige laver et svar tildeler jeg nogle points.

Tak.

[ Jeg kan se, at du retter min baggrundsfarve i banner. Tanken var nu, at det skulle være gennemsigtigt, hvilket ikke opnås nu. Kan NS slet ikke takle attributten alpha-opacity? ]

- Den tænkte jeg ikke over der er 4 forskellige attributter der skal bruges til opacity (afhænger af browser) leder lige efter dem om lidt...

mener det er noget i stil med moz-opacity:0.25; khtml-opacity:0.25; opacity:0.25; samt den til IE men da jeg ikke selv bruger filters og opacity skal jeg lige slå efter...

[ Derudover kan jeg se, at du konsekvent fjerner padding. Og jeg kan jo også se, at padding har en uheldig effekt i NS, fordi bredden bliver tilsvarende større, hvilket "skupper" rundt på tingene. Men på den anden side, ser det dumt ud i IE, hvis tingene står helt op ad kanten ... kan man løse det problem og stadig tilgodese begge browsere? ]
- padding lægges inden til boksen og margin uden til at IE gør det forkert er fordi den går i quirks... jeg kan se at du har haft mulighed for at rette i selve html'en også så der er lidt rettelser der skal laves i selve html sturkturen for at IE gør det samme som FF og NS m.v. - doctype skal bl.a. tilføjes... kigger på den om lidt...

Prøv de opacity css'er her ...

filter:alpha(opacity=100);-moz-opacity:1.0;opacity:1.0;

filter:alpha(opacity=75);-moz-opacity:0.75;opacity:0.75;

Kigger lige lidt dybere i din css struktur (højde defineringer m.v.)
- for at browsere opfatter din html markup nogenlunde ens skal du have en doctype erklæring sat ... og da du kører xhtml er kunne det f.eks. være denne doctype - men vent lige med at sætte den ind ... dit design går helt i kage ellers ... det er fordi IE har været i quirksmode da du har designet siden...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="da">

(slet den nuværende <html> start tag og indsæt ovenstående)


... Hvis man skal forestille at køre rigtig xhtml skal denne linje indsættes før de to ovenstående - det vil så få IE til at bevare sin quirks og det ville umiddelbart være en fordel som siden ser ud lige nu ... ulempen er dog at IE og FF/NS/OP m.v. ikke opfatter css ens da IE går i quirks og opfatter padding og margin forkert... (IE kan ikke køre rigtig xhtml idag)

<?xml version="1.0" encoding="iso-8859-1"?>

... læs evt. olebole's artikler om xhtml:
http://www.eksperten.dk/artikler/537
http://www.eksperten.dk/artikler/538

- kigger lidt lokalt på din xhtml og css uden ie er i quirks
(det vil sige uden den sidste linje men med de 2 første linjer erstattet)

Tak for

Ja, jeg ved godt, at jeg skal have en DOCTYPE. Sprang det over, fordi programmeringen gik lidt stærkt ... har før været runden igennem med validering af xhtml, så jeg kender problematikken. Men det får nu vente lidt. Det er indtil videre fint, som det er nu.

Tak igen.

Det var så lidt... men nu har jeg lavet noget du kan arbejde videre på - så istedet for at smide det ud ... poster jeg det lige ... og tak for point :)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="da">

<head>

<meta name="Title" content="Lej en skiboks ... privat udlejning af skibokse" />
<title>Lej en skiboks ... privat udlejning af skibokse</title>
<meta name="Description" content="Lej din skiboks på lej-skiboks.dk. Vi har gode priser på skibokse for en eller to uger." />
<meta name="Keywords" content="lej skiboks skibokse skiferie vinterferie sommerferie vinter ski tagboks leje" />
<meta name="Robots" content="ALL" />
<meta name="Revisit-after" content="30" />
<meta name="author" content="now@net" />
<meta name="Copyright" content="now@net - 2005 - all rights reserved" />
<meta http-equiv="Content-language" content="dan" />

<meta name="ObjectType" content="Text" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />

<meta name="DC.Title" content="Lej en skiboks ... privat udlejning af skibokse" />
<meta name="DC.Description" content="Lej din skiboks på lej-skiboks.dk. Vi har gode priser på skibokse for en eller to uger." />
<meta name="DC.Subject" content="lej skiboks skibokse skiferie vinterferie sommerferie vinter ski tagboks leje" />
<meta name="DC.Creator" content="now@net" />
<meta name="DC.Contributor" content="Timm W. Larsen" />
<meta name="DC.Rights" content="now@net - 2005 - all rights reserved" />
<meta name="DC.Identifier" content="http://asp.o-n-l-i-n-e.dk" />
<meta name="DC.Publisher" content="http://www.nowanet.dk" />
<meta name="DC.Language" scheme="NISOZ39.50" content="dan" />
<meta name="DC.Type" content="Text" />
<meta name="DC.Format" scheme="MIME" content="text/html" />
<link rel="schema.dc" href="http://purl.org/metadata/dublin_core_elements" />
<meta http-equiv="Content-Language" content="da" />


<link rel="stylesheet" type="text/css" href="css/stiblet-blaa.css">

<script type="text/javascript">
<!-- javascript start
var bookmarkurl="http://asp.o-n-l-i-n-e.dk?website=lejskiboks"
var bookmarktitle="Lej-skiboks.dk"
function addbookmark(){
if (document.all)
window.external.AddFavorite(bookmarkurl,bookmarktitle)
}
// javascript slut -->
</script>

</head>








<body>

<div id="topikoner">&nbsp;</div>

<div id="banner"><span>&nbsp;</span></div>

<div id="bannerHeader"><h1><span>Lej-skiboks.dk</span></h1></div>

<div id="toppic"><img src="../../images/spacergif.gif"></div>


<div id="menu">
  <!--- MENU -->
  <table cellspacing="0" cellpadding="0"><tr><td class="menuheader">Menu</td></tr><tr><td><a class="menu" href="index.asp?UserName=lejskiboks">Startside</a></td></tr><tr><td></td></tr><tr><td><a class="menu" href="index.asp?pageId=182&UserName=lejskiboks">Vores skibokse</a></td></tr><tr><td><a class="menu" href="index.asp?pageId=20&UserName=lejskiboks">Kontakt</a></td></tr><tr><td><a class="menu" href="index.asp?pageId=19&UserName=lejskiboks">Priser</a></td></tr><tr><td class="menu-bottom"><img style="border:0px none; " src="../../images/spacergif.gif" width="10" height="3" alt="cms scms hjemmeside gratis layout design webdesign asp smarte funktioner" /></td></tr></table>
    <img height="4px" width="10px" alt="cms scms hjemmeside gratis layout design webdesign asp smarte funktioner" src="../../images/spacergif.gif"><br>
    &nbsp;<a href="java script:addbookmark()"><img style="border:0" src="../../images/ikoner/bookmark.gif" alt="Gem lej-skiboks.dk under foretrukne!"></a><a href="index.asp?UserName=lejskiboks&cms-mode=emailformular"><img style="border:0" src="../../images/ikoner/email.gif" alt="Send en e-mail til lej-skiboks.dk!"></a>&nbsp;&nbsp;<a href="index.asp?cms-mode=login&UserName=lejskiboks"><img style="border:0" src="../../images/ikoner/admin.gif" alt="Gå til din administrationsside - adgangsbeskyttet"></a>
  <!--- MENU -->
</div>


<div id="content"><div class="continn">
  <!--- INDHOLD -->
<h2>Lej-skiboks.dk<br />
Skal du på ferie ... vinter eller sommer?<br />
Hvad&nbsp;enten du&nbsp;er på vej på skiferie eller sommerferie, så kan det være godt med lidt ekstra plads til&nbsp;bagagen ... og skiene. Det opnår du&nbsp;ved at leje en rummelig skiboks.<br /><br />Så hvis du er på vej på ski ... eller anden ferie,&nbsp;er du kommet til det rette sted. Vi udlejer skiboks til yderst fornuftige priser.<br /><br />Vælg et link i menuen til venstre for at læse om skiboksen og priserne eller for at kontakte os!</h2><br />
<IMG height=184 src="http://asp.o-n-l-i-n-e.dk/rte/my_documents/my_pictures/billeder/skibokse/ocean_700-4.jpg" width=400 border=0></div></div>

  <!--- INDHOLD -->
</div>

<div id="copyright">
  <!-- BUNDTEKST HER -->
  lej-skiboks.dk<br>Sct. Nilsvej 2<br>3550 Slangerup<br>3834 1634<br>
  <!-- BUNDTEKST SLUT -->
  <!--- BUND SLUT -->
</div>

</body></html>

@import "generel.css";

html,body{margin:0px;padding:0px;overflow:hidden;height:100%;}

body{
background: #fff url('images/bg/standard.gif') repeat-y;
font: 12px arial, sans-serif;
color: #000;
}

#topikoner{
z-index: 3;
position: absolute;
top: 20px;
right: 2.5%;
}

#banner{
z-index: 1;
position: absolute;
top: 2%;
left: 2%;
width: 96%;
text-align:center;
height: 20%;
border: 2px dashed #66c;
overflow:hidden;
color: #000;
background: #d9d9f2;
}

#bannerHeader{
z-index: 2;
position: absolute;
top: 7%;
left: 2%;
width: 96%;
text-align:center;
filter:alpha(opacity=100);-moz-opacity:1.0;opacity:1.0;
color: #666;
}

#bannerHeader h1{padding:0px;margin:0px;line-height:45px;font-size:32px;}

#toppic{
z-index: 2;
position: absolute;
top: 0px;
left: 0px;
}    

#menu{
z-index: 3;
position: absolute;
top: 25%;
left: 2%;
height: 73%;
width: 18%;
border: 2px dashed #66c;
overflow:hidden;
color: #000;
background: transparent;
filter:alpha(opacity=100);-moz-opacity:1.0;opacity:1.0;
}

#admin-menu{
z-index: 3;
position: absolute;
top:17px;
right:100px;
}

#content{
z-index: 3;
position: absolute;
top: 25%;
left: 22%;
width: 76%;
height: 73%;
border: 2px dashed #66c;
background-color: #eee;
overflow:auto;
overflow-x:hidden;

scrollbar-face-color: #fff;
scrollbar-highlight-color: #bbb;
scrollbar-shadow-color: #bbb;
scrollbar-3dlight-color: #fff;
scrollbar-arrow-color: #66c;
scrollbar-track-color: #fff;
scrollbar-darkshadow-color: #fff;
}

.continn{margin:20px;}

#content p{
font: bold 24px Arial, Helvetica, sans-serif;
}
                               
#copyright{
z-index: 5;
position: absolute;
color: #66c;
bottom: 2%;
left: 2%;
width: 16%;
border-top: 1px dashed #66c;
padding: 1%;
}         






.table_98        {    width: 98%;
                    border-collapse:collapse;
                    border: 0px }



.broed            {    font-family: Arial, sans-serif;
                    font-size: 10pt;
                    font-weight: bold;
                    text-decoration: none;
                    color: #000000;
                    margin: 8px }

.lille            {    font-family: Verdana, Arial, sans-serif;
                    font-size: 9pt;
                    text-decoration: none;
                    color: #000000;
                    margin: 8px }

a                {     font-family: Arial, sans-serif;
                    font-size: 10pt;
                    font-weight: bold;
                    text-decoration: none;
                    color: #6666CC}
                   
a:hover          {     font-family: Arial, sans-serif;
                    text-decoration: underline;
                    font-weight: bold;
                    color: #6666CC}

.menuheader        {    font-family: Arial, sans-serif;
                    width: 300px;
                    font-weight: bold;
                    font-size: 11pt;
                    text-align: left;
                    background: #6666CC;
                    color: #ffffff;
                    padding: 2px;
                    padding-left: 10px;
                    filter: alpha(opacity=75)  }

.menu-bottom    {    background: none;
                    border-bottom: 1px dashed #6666CC;
                    height: 5px }

.menu            {    font-family: Arial, sans-serif;
                    font-size: 10pt;
                    padding: 2px;
                    filter: alpha(opacity=100) }

a.menu            {    font-family: Arial, sans-serif;
                    font-size: 10pt;
                    font-weight: bold;
                    color: #000000;
                    background: none;
                    text-decoration: none;
                    margin:1px;
                    padding: 2px;
                    padding-left: 7px;
                    padding-bottom: 3px;
                    display: block;
                    filter: alpha(opacity=100) }

a:hover.menu     {     font-family: Arial, sans-serif;
                    font-weight: bold;
                    color: #000000;
                    border-left: 5px solid #6666CC;
                    border-bottom: 1px solid #6666CC;
                    background: #ffffff;
                    padding: 2px;
                    text-decoration : none;
                    display: block;
                    filter: alpha(opacity=100)  }
   
.button          {     font-family: arial, verdana, sans-serif;
                    font-weight: bold;
                    background-color: #6666CC;
                    color: #ffffff;
                    font-size: 10px;
                    height: 25px;
                    border: 1px solid #000000;
                    padding: 5px;
                    cursor: hand }

.button:hover      {     font-family: arial, verdana, sans-serif;
                    font-weight: bold;
                    background-color: #6666CC;
                    color: #444444;
                    font-size: 10px;
                    height: 20px;
                    border: 1px solid #000000;
                    padding: 5px }
   
   
   
   
   
   
.table_admin    {    width: 90%;
                    border: 1px solid black;
                    background: #bbbbbb }

.td_adminheader    {    font-size: 12px;
                    font-Style: italic;
                    font-weight: bold;
                    text-align: center;
                    margin: 8px;
                    margin-top: 2px;
                    margin-bottom: 2px;
                    border: 1px solid #000000;
                    color: #444444;
                    Background: #6666CC }

.errorText        {    font-family: Verdana, Arial, sans-serif;
                    font-size: 10pt;
                    font-weight: bold;
                    font-style: italic;
                    text-decoration: none;
                    color: #993333;
                    margin: 8px }

a.skjult    {    font-family: Verdana, Arial, sans-serif;
                    font-size: 8pt;
                    font-weight: bold;
                    color: #ffffff;
                    text-decoration: none }

a:hover.skjult    {    font-family: Verdana, Arial, sans-serif;
                    font-size: 8pt;
                    font-weight: bold;
                    color: #444444;
                    text-decoration: none }

a.admin_retmenu    {    font-family: Arial, sans-serif;
                    font-size: 10pt;
                    font-weight: bold;
                    color: #888888;
                    border: 1px solid #ffffff;
                    background: #ffffff;
                    text-decoration: none;
                    margin:1px;
                    padding: 4px;
                    padding-left: 9px;
                    padding-bottom: 5px;
                    display: block }
   
a:hover.admin_retmenu {     font-family: Arial, sans-serif;
                    font-weight: bold;
                    color: #000000;
                    border: 1px solid #ffff00;
                    text-decoration : none }
   
.admin_retmenuActive    {    font-family: Arial, sans-serif;
                    font-size: 10pt;
                    font-weight: bold;
                    color: #000000;
                    border: 1px solid #ffffff;
                    background: #ffff00;
                    text-decoration: none;
                    margin:1px;
                    padding: 4px;
                    padding-left: 9px;
                    padding-bottom: 5px;
                    display: block }

... det kan godt tænkes at denne sti i css'en skal rettes lidt...
background: #fff url('images/bg/standard.gif') repeat-y;

... denne definerer margin ind til indholdet
(valgte at bruge margin istedet for padding...)
.continn{margin:20px;}