IE vil ikke lage div'ene mine så store som i FF

nahoy · 13. oktober 2006

Jeg er 100% sikker på at noen har spurt om dette før. Allikevel poster jeg her, for aner ikke hva jeg skal søke på.

Problemet mitt er som jeg skrev i overskriften at div'en min ikke fyller hele plassen sin.

Har lagt ut siden her 193.216.204.44/testside

Her er css filen: 193.216.204.44/testside/style.css

Logoboksen skal være like bred som alle de andre til sammen og "insert logo here" skal være på midten.

Dette er første gangen jeg bruker skriver css på egenhånd, og jeg tar gjerne i mot litt kritikk hvis noen synes jeg har programmert dumt eller feil.

Martin A. · 14. oktober 2006

Du angir ingen bredde på "logoframe".

Og "logoframe" skal være en <div id="">, ikke class.

ID brukes en gang, class brukes flere ganger.

Hvorfor samler du ikke disse sammen til en "klasse" pr stk.

div.right1, div.left1
{
top: 100px;
}

div.left1, div.left2
{
left:25px;
}

div.right1, div.right2
{
right:25px;
}

div.left1
{
height:150px;
}

div.left2
{
top:275px;
}

div.right1
{
height:150px;
}

div.right2
{
top:275px;
}

div.left1
{
height:150px;
left:25px;
top: 100px;
}

div.left2
{
top:275px;
left:25px;
}

div.right1
{
height:150px;
right:25px;
top: 100px;
}

div.right2
{
top:275px;
right:25px;
}

Skjønner heller ikke hva du bruker "clear: xxxx" til.

-Martin

nahoy · 14. oktober 2006

Men hva skal bredden være? Det er problemet mitt!

Martin A. · 15. oktober 2006

Prøv deg fram.

Start med 600px. Er ikke det nok, så øker du.

Ser ikke problemet.

Endret 15. oktober 2006 av M4rTiN

nahoy · 15. oktober 2006

Problemet er at vidden skal variere i forhold til oppløsningen. Alle har ikke lik oppløsning, men allikevel skal den være så bred at det er 25 piksler på hver side.

Martin A. · 15. oktober 2006

Kjør 100%, og margin på 25px på høyre og venstre.

glad · 15. oktober 2006

hva med litt padding på div-en til teksten

nahoy · 16. oktober 2006

med margin-right:25px; og width:100%; blir den 50px for stor. Sånn som jeg har forstått det så varierer %-bredde i forhold til hele bildet. dvs. når jeg har 1024*768, så blir 100% 1024. og 1024 blir 50 piksler for stort. hvis det hadde gått an å skrive 100%-50px, så hadde det vært perfekt.

glad · 16. oktober 2006

hva med 90%. ?

nahoy · 16. oktober 2006

Det blir også galt. Da blir den for lang ved noen oppløsninger og for kort ved andre.

Herregud så tilbakestående IE er

qualbeen · 16. oktober 2006

Herregud så tilbakestående IE er
7085311[/snapback]

Amen to that :hrm:

Martin A. · 17. oktober 2006

Skrev om CSS'en din, så nå ser den fin ut i IE og FF. Hvordan den ser ut i lavere oppløsning enn 1024*768 vet jeg ikke.

Skjult tekst: (Marker innholdet i feltet for å se teksten):

* {
margin: 0;
padding: 0;
}
html, body
{
background-color:#cff0ff;
background-image: url(images/bg3.jpg);
font-family: verdana;
font-size: 14px;
}

a.menuitem
{
text-decoration: none;
color: #003399;
}

a.menuitem:hover
{
text-decoration: none;
margin-left:5px;
color:#FF0000;
}

p {
padding: 5px;
margin: 2px;
}

#logoframe {
background-color:#FFFFFF;
border: 1px solid #555555;
position: absolute;
text-align: center;
margin: 25px;
height: 50px;
width: 95%;

}

#mainframe {
background-color:#FFFFFF;
border: 1px solid #555555;
position: absolute;

margin: 100px 200px 0px 200px;
width: 60%; 
}

div.right1, div.right2, div.left1, div.left2 {
background-color:#FFFFFF;
border: 1px solid #555555;
position: absolute;
width: 150px;
}

div.right1, div.left1
{
top: 100px;
height:150px;
right:25px;
}

div.left1, div.left2
{
left:25px;
}

div.left2, div.right2
{
top:275px;
right:25px;
}


div.header
{
color:#000000;
padding:6px;
clear:left;
background-color: #4191ED;
border-bottom: 1px solid #555555;
}

span.logoletter
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 38px;
font-weight: bold;
color: #4191ED;
vertical-align:middle;
}
span.logoletter:hover
{
color:#A4E1FF;
}

HTML:

Skjult tekst: (Marker innholdet i feltet for å se teksten):

<!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" lang="no" xml:lang="no">
 <head>
   <title>Testside</title>
   <meta http-equiv='Content-Type' content='text/html; charset=iso-8859-1' />
   <meta http-equiv='Content-Language' content='no' />
   <link rel="stylesheet" type="text/css" href="style.css" />
 </head>
<body>

<div id="logoframe">

<span class="logoletter">I</span>
<span class="logoletter">n</span>
<span class="logoletter">s</span>
<span class="logoletter">e</span>
<span class="logoletter">r</span>
<span class="logoletter">t</span>
 
<span class="logoletter">L</span>
<span class="logoletter">o</span>
<span class="logoletter">g</span>
<span class="logoletter">o</span>
 
<span class="logoletter">H</span>
<span class="logoletter">e</span>
<span class="logoletter">r</span>
<span class="logoletter">e</span>

</div>

<div class="left1">
<div class="header">Sections:</div>
<p>
<a href="index.html" class="menuitem">Home</a><br />
<a href="index.html" class="menuitem">Videos</a><br />
<a href="index.html" class="menuitem">Channels</a><br />

<a href="index.html" class="menuitem">Groups</a><br />
<a href="index.html" class="menuitem">Categories</a><br />
<a href="index.html" class="menuitem">Upload</a>
</p>
</div>

<div class="left2">
Et eller annet her...<br />
Du er logget inn som: Bæsdfsdf<br />
sdfs afd kjøl pådu mpiudim. sdfs afd kjøl pådu mpiudim. sdfs afd kjøl pådu mpiudim.<br />
sdfs afd kjøl pådu mpiudim.sdfs afd kjøl pådu mpiudim.<br />

</div>

<div class="right1">
<div class="header">Related Media</div>
<p>
<a href="index.html" class="menuitem">Related media 1</a><br />
<a href="index.html" class="menuitem">Related media 2</a><br />
<a href="index.html" class="menuitem">Related media 3</a><br />
<a href="index.html" class="menuitem">Related media 4</a><br />
<a href="index.html" class="menuitem">Related media 5</a><br />
<a href="index.html" class="menuitem">Related media 6</a></p>

</div>

<div class="right2">Et eller annet her...</div>

<div id="mainframe">
<div class="header">Home</div>

<p style="text-align: center"><img src="test.jpg" alt="" /></p>
<p>Et layout laget av johan klokkhammer helsing. No rights reserved. Et layout laget av johan klokkhammer helsing. No rights reserved. Et layout laget av johan klokkhammer helsing. No rights reserved. Et layout laget av johan klokkhammer helsing. No rights reserved. Et layout laget av johan klokkhammer helsing. No rights reserved. Et layout laget av johan klokkhammer helsing. No rights reserved.
</p>
</div>

</body>
</html>

Og den er tilogmed Valid XHTML 1.0 Strict.

nahoy · 17. oktober 2006

Skrev om CSS'en din, så nå ser den fin ut i IE og FF. Hvordan den ser ut i lavere oppløsning enn 1024*768 vet jeg ikke.

Skjult tekst: (Marker innholdet i feltet for å se teksten):

* {
margin: 0;
padding: 0;
}
html, body
{
background-color:#cff0ff;
background-image: url(images/bg3.jpg);
font-family: verdana;
font-size: 14px;
}

a.menuitem
{
text-decoration: none;
color: #003399;
}

a.menuitem:hover
{
text-decoration: none;
margin-left:5px;
color:#FF0000;
}

p {
padding: 5px;
margin: 2px;
}

#logoframe {
background-color:#FFFFFF;
border: 1px solid #555555;
position: absolute;
text-align: center;
margin: 25px;
height: 50px;
width: 95%;

}

#mainframe {
background-color:#FFFFFF;
border: 1px solid #555555;
position: absolute;

margin: 100px 200px 0px 200px;
width: 60%; 
}

div.right1, div.right2, div.left1, div.left2 {
background-color:#FFFFFF;
border: 1px solid #555555;
position: absolute;
width: 150px;
}

div.right1, div.left1
{
top: 100px;
height:150px;
right:25px;
}

div.left1, div.left2
{
left:25px;
}

div.left2, div.right2
{
top:275px;
right:25px;
}


div.header
{
color:#000000;
padding:6px;
clear:left;
background-color: #4191ED;
border-bottom: 1px solid #555555;
}

span.logoletter
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 38px;
font-weight: bold;
color: #4191ED;
vertical-align:middle;
}
span.logoletter:hover
{
color:#A4E1FF;
}

HTML:

Skjult tekst: (Marker innholdet i feltet for å se teksten):

<!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" lang="no" xml:lang="no">
 <head>
   <title>Testside</title>
   <meta http-equiv='Content-Type' content='text/html; charset=iso-8859-1' />
   <meta http-equiv='Content-Language' content='no' />
   <link rel="stylesheet" type="text/css" href="style.css" />
 </head>
<body>

<div id="logoframe">

<span class="logoletter">I</span>
<span class="logoletter">n</span>
<span class="logoletter">s</span>
<span class="logoletter">e</span>
<span class="logoletter">r</span>
<span class="logoletter">t</span>
 
<span class="logoletter">L</span>
<span class="logoletter">o</span>
<span class="logoletter">g</span>
<span class="logoletter">o</span>
 
<span class="logoletter">H</span>
<span class="logoletter">e</span>
<span class="logoletter">r</span>
<span class="logoletter">e</span>

</div>

<div class="left1">
<div class="header">Sections:</div>
<p>
<a href="index.html" class="menuitem">Home</a><br />
<a href="index.html" class="menuitem">Videos</a><br />
<a href="index.html" class="menuitem">Channels</a><br />

<a href="index.html" class="menuitem">Groups</a><br />
<a href="index.html" class="menuitem">Categories</a><br />
<a href="index.html" class="menuitem">Upload</a>
</p>
</div>

<div class="left2">
Et eller annet her...<br />
Du er logget inn som: Bæsdfsdf<br />
sdfs afd kjøl pådu mpiudim. sdfs afd kjøl pådu mpiudim. sdfs afd kjøl pådu mpiudim.<br />
sdfs afd kjøl pådu mpiudim.sdfs afd kjøl pådu mpiudim.<br />

</div>

<div class="right1">
<div class="header">Related Media</div>
<p>
<a href="index.html" class="menuitem">Related media 1</a><br />
<a href="index.html" class="menuitem">Related media 2</a><br />
<a href="index.html" class="menuitem">Related media 3</a><br />
<a href="index.html" class="menuitem">Related media 4</a><br />
<a href="index.html" class="menuitem">Related media 5</a><br />
<a href="index.html" class="menuitem">Related media 6</a></p>

</div>

<div class="right2">Et eller annet her...</div>

<div id="mainframe">
<div class="header">Home</div>

<p style="text-align: center"><img src="test.jpg" alt="" /></p>
<p>Et layout laget av johan klokkhammer helsing. No rights reserved. Et layout laget av johan klokkhammer helsing. No rights reserved. Et layout laget av johan klokkhammer helsing. No rights reserved. Et layout laget av johan klokkhammer helsing. No rights reserved. Et layout laget av johan klokkhammer helsing. No rights reserved. Et layout laget av johan klokkhammer helsing. No rights reserved.
</p>
</div>

</body>
</html>

Og den er tilogmed Valid XHTML 1.0 Strict.

7087117[/snapback]

Det er ikke perfekt nå heller, men det får gå.

Vet ikke hvordan det er med IE 7, men jeg håper inderlig at ie6 vil dø veldig snart.

Tusen takk for all hjelp, nå vet jeg i hvertfall at det ikke bare er jeg som ikke klarer å skrive ordentlig kode. Er det andre ulemper med IE jeg bør vite om?

Takk for omkodingen, det var snilt av deg.

Endret 17. oktober 2006 av nahoy

dan1el · 18. oktober 2006

Du trenger en doctype.

nahoy · 18. oktober 2006

Hva er en doctype?

nahoy · 18. oktober 2006

Nå har jeg lest en del om css, og jeg har funnet ut at det går visst allikevel. Hvis jeg fjerner position: absolute; fra alle divene og bruker en fin liten egenskap som heter float, så kan det la seg gjøre.

Man kan lese om float her.

Det var visst bare meg som var dårlig i css allikevel.

Det var bare en dum ting, nå ble bakgrunnen min herpa .

Ta en titt.

Logg inn

IE vil ikke lage div'ene mine så store som i FF

Anbefalte innlegg

nahoy

Lenke til kommentar

Videoannonse

Martin A.

Lenke til kommentar

nahoy

Lenke til kommentar

Martin A.

Lenke til kommentar

nahoy

Lenke til kommentar

Martin A.

Lenke til kommentar

glad

Lenke til kommentar

nahoy

Lenke til kommentar

glad

Lenke til kommentar

nahoy

Lenke til kommentar

qualbeen

Lenke til kommentar

Martin A.

Lenke til kommentar

nahoy

Lenke til kommentar

dan1el

Lenke til kommentar

nahoy

Lenke til kommentar

nahoy

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer