Notifikationer

Markér alle som læst Log ud

Max Novice

25. juni 2004 - 01:43 Der er 7 kommentarer og
1 løsning

CSS forskel i IE og Opera mht. tables og position.

Hej alle.
Jeg gør nok ikke nogen klogere, ved at fortælle, at der er forskel på IE og Mozilla. :-/
MEN; jeg har store problemer med at få designet på min side til at holde stik i begge browsere. Jeg placerer forskellige elementer på siden vha. CSS's position:absolute, etc. Heriblandt forskellige tabeller. Problemet jeg ikke lige kan gennemskue er følgende:
Jeg har en tabel med hvid baggrund og en sort 3px solid ramme i bunden og i højre side. I IE ser det jo fantastisk ud, og alt er fryd og gammen, men i Opera er højre ramme forskudt ca. 1px til højre, så man kan se baggrunden (som er lyseblå). Hvordan? Hvorfor? Det hjælper ikke at bruge hverken "margin: 0px;", "padding: 0px;" eller "border-collapse: collapse;". Men hvad virker så?
Kan det være jeg har overset noget simpelt og har stirret mig selv skeløjet på koden, eller er Opera bare et knudeprogram?

Håber I kan hjælpe.
/Mnc

Synes godt om

Max Novice

25. juni 2004 - 01:46 #1

Det skal lige siges, at det også virker smukt i Netscape. :-/

Synes godt om

skovenborg Nybegynder

25. juni 2004 - 15:38 #2

måske du kunne vise koden eller en side

Synes godt om

Max Novice

25. juni 2004 - 19:44 #3

Klart.
Først HTML'en :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Titel</title>
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" href="styles/ml.css" type="text/css" />
</head>
<body>

<table ID="topbar"> 
<tr>
<td height="100" class="borderbottom">
<pre> </pre>
</td>
</tr>
</table>

<table ID="headerbar"> 
<tr>
<td height="40" class="borderbottom">
<pre> </pre>
</td>
</tr>
</table>

<img ID="toppic" src="pictures/top.jpg"></img> 

<img ID="menupic" src="pictures/menu.jpg"></img> 

<a class="cell" style="position:absolute;left:10px;top:150px;z-index:102;width:100px;" href="http://www.google.com/">Google</a>

<table ID="mosafe"> 
<tr>
<td>
<pre> </pre>
</td>
</tr>
</table>

<table ID="contens"> 
<tr>
<td class="borderleftrightbottom">
indhold<br />
</td>
</tr>
</table>

</body>
</html>

.. og så CSS'en :

body {
font-family: Trebuchet MS;
font-size: 16px;
color: #000000;
background-color: #6495ED;
margin: 0px 0px 0px 0px;
border: 0px;
padding: 0px 0px 0px 0px;
}

a:link {
color: #B0C4DE;
text-decoration: none;
}

a:visited {
color: #6589B4;
text-decoration: none;
}

a:active {
color: #FFFFFF;
text-decoration: none;
}

a:hover {
color: #FFFFFF;
text-decoration: none;
}

a:hover.cell {
background-color: #FDF5E6;
display: block;
}

#topbar {
position: absolute;
left: 0px;
top: 0px;
width: 100%;
background-color: #F2F2F2;
}

#headerbar {
width: 100%;
position :absolute;
left: 0px;
top: 100px;
z-index:2;
background-color: #000000;
}

#toppic {
position: absolute;
left: 203px;
top: 100px;
z-index:102;
border: 0px;
}

#menupic {
position: absolute;
left: 0px;
top: 100px;
z-index:100;
border-bottom: solid 4px #000000;
}

#mosafe {
position: absolute;
left: 200px;
top: 140px;
z-index: 50;
background-color: #000000;
width: 450px;
height: 10px;
}

#contens {
position: absolute;
left: 200px;
top: 143px;
z-index: 100;
background-color: #FFFFFF;
width: 450px;
}

table {
background-color: #FFFFFF;
color: #000000;
border: 0px;
font-family: Trebuchet MS;
font-size: 16px;
font-weight: normal;
margin: 0px;
padding: 0px;
border-collapse: collapse;
}

.borderbottom {
border-bottom: solid 4px #000000;
}

.borderleftrightbottom {
border-left: solid 3px #000000;
border-right: solid 3px #000000;
border-bottom: solid 4px #000000;
}

/Mnc

Synes godt om

skovenborg Nybegynder

25. juni 2004 - 21:39 #4

er den mozilla safety tabel virkelig nødvendig? For uden den vil du blot kunne skrive:
#contens {
position: absolute;
left: 200px;
top: 143px;
z-index: 100;
background-color: #FFFFFF;
width: 450px;
border-left: solid 3px #000000;
border-right: solid 3px #000000;
border-bottom: solid 4px #000000;
}

og så skrive:
<table ID="contens"> 
<tr>
<td>
indhold<br />
</td>
</tr>
</table>

Og så slet mozilla safety hvis du ikke skal bruge den

Synes godt om

Max Novice

25. juni 2004 - 23:45 #5

Heh, well.. Det er faktisk pga. endnu en pixelfejl, som jeg glemte at nævne. Når jeg skal vise siden i Opera, bliver indholdsrammen vist forskudt en pixel nedad, så det ser ud som om den hænger og svæver frit under titellinien (altså den sorte dims, jeg selv har lavet). Derfor "mosafe".. :-/

/Mnc

Synes godt om

skovenborg Nybegynder

26. juni 2004 - 00:20 #6

okay - det var ellers den jeg prøvede at fjerne ;-)

Bare ærgeligt mosafe laver noget mærkeligt med IE :-|

Synes godt om

Max Novice

26. juni 2004 - 01:20 #7

Gør den? Hvilke underlige ting laver den?

Synes godt om

Max Novice

26. juni 2004 - 02:19 #8

Well.. Jeg fandt en vej udenom problemerne. Problemet lå et eller andet sted i tabellerne. Resultatet blev følgende :

html :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Titel</title>
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" href="styles/ml.css" type="text/css" />
</head>
<body>
<div ID="topbar"></div> 
<div ID="headerbar"></div> 
<div ID="toppic"></div> 
<div ID="menupic"></div> 
<iframe ID="contens" name="contens" src="http://www.google.com/" scrolling="no"></iframe> 

<a class="cell" style="position:absolute;left:10px;top:150px;z-index:102;width:100px;" href="http://www.google.com/">Google</a>
</body>
</html>

css :

body {
font-family: Trebuchet MS;
font-size: 16px;
color: #000000;
background-color: #6495ED;
margin: 0px 0px 0px 0px;
border: 0px;
padding: 0px 0px 0px 0px;
}

a:link {
color: #B0C4DE;
text-decoration: none;
}

a:visited {
color: #6589B4;
text-decoration: none;
}

a:active {
color: #FFFFFF;
text-decoration: none;
}

a:hover {
color: #FFFFFF;
text-decoration: none;
}

a:hover.cell {
background-color: #FDF5E6;
display: block;
}

#topbar {
height: 96px;
width: 100%;
position: absolute;
left: 0px;
top: 0px;
background-color: #F2F2F2;
}

#headerbar {
height: 47px;
width: 100%;
position: absolute;
left: 0px;
top: 96px;
z-index:2;
background-color: #000000;
}

#toppic {
height: 40px;
width: 450px;
position: absolute;
left: 203px;
top: 100px;
z-index: 102;
border: 0px;
background-image: url(../pictures/top.jpg);
background-repeat: no-repeat;
}

#menupic {
position: absolute;
left: 0px;
top: 100px;
z-index: 100;
height: 504px;
width: 203px;
border-bottom: solid 4px #000000;
background-image: url(../pictures/menu.jpg);
background-repeat: no-repeat;
}

#contens {
position: absolute;
left: 200px;
top: 143px;
z-index: 100;
background-color: #FFFFFF;
width: 450px;
height: 600px;
border-left: solid 3px #000000;
border-right: solid 3px #000000;
border-bottom: solid 4px #000000;
}

.. og det virker både i IE, Netscape og Opera.
Lukker spm.

/Mnc

Synes godt om

Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Hjælp med HTML og CSS Af Nojsa i HTML	18	10/09/202515:07	17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML	3	19/03/202522:16	20/03/202513:04
Se og ændre html på en webside Af magger i HTML	4	11/03/202513:55	12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML	5	02/03/202520:05	04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML	3	30/10/202409:37	01/01/202515:27

Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS