Div centreren hoogte 100% firefox en ie7 - Softwareontwikkeling

vrijdag 20 april 2007 10:07

Acties:

Verwijderd

Topicstarter

Ik loop tegen het probleem aan dat ik in ie7 we de pagina kan zien maar in firefox niet

ik wil graag een container maken deze is gecentreerd en heeft een hoogte van 100%.
In deze container zit een div links, div menu, div content, div rechts en een footer.

----------------
| | menu | |
| |-----------| |
| | | |
| | | |
|l|content|r|
| | | |
| | | |
| | | |
| |---------- | |
| | footer | |
----------------

Ik heb de site geplaats op http://testing.aenv-ict.nl/ met de css in deze pagina. Kunnen jullie me in de juiste richting helpen om dit probleem op te lossen.

vrijdag 20 april 2007 10:12

Acties:

Lifelogger

In je body css zet je: text-align: center;
In de css van je container: Margin: 0 auto;

Dan staat de div in zowel ie als firefox gecentreerd.

[EDIT]
Dat je overigens niets ziet in IE komt volgens mij doordat je een min-height gebruikt. Die wordt niet ondersteund door IE 6. Als je iets toch 100% hoog wil hebben, kun je er net zo goed height: 100% neer zetten.

[ Voor 43% gewijzigd door Lifelogger op 20-04-2007 10:15 ]

vrijdag 20 april 2007 10:26

Acties:

maxtz0r

Lifelogger schreef op vrijdag 20 april 2007 @ 10:12:
In je body css zet je: text-align: center;
In de css van je container: Margin: 0 auto;

Dan staat de div in zowel ie als firefox gecentreerd.

[EDIT]
Dat je overigens niets ziet in IE komt volgens mij doordat je een min-height gebruikt. Die wordt niet ondersteund door IE 6. Als je iets toch 100% hoog wil hebben, kun je er net zo goed height: 100% neer zetten.

volgens mij lees je de TS niet goed want hij zegt dat hij de pagina weL in IE goed ziet meer niet FF. Ik geloof dat dit een bug is van firefox. Volgens mij zijn er wel zat work arounds voor maar dat moet je even googlen.

edit:
Ik zie inderdaad net dat in IE niks ziet maar volgens mij heeft de TS hier geen last van aan zijn verhaal te lezen en zal dus wel IE 7 gebruiken

[ Voor 10% gewijzigd door maxtz0r op 20-04-2007 10:28 ]

Dying is God's way of telling you, you've been FIRED.

vrijdag 20 april 2007 10:53

Acties:

Sappie

De Parasitaire Capaciteit!

Kun je, na aanpassing die je zelf mag doen, hier nix mee:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>test</title>
    <style type="text/css">      
        html {
            margin: 0; 
            height: 100%; 
            background: white;
        } 
        
        body {
            position: relative; 
            min-height: 100%; 
            width: 580px;
            border-left: 1px solid black;
            border-right: 1px solid black;
            margin: 0 auto;
            background: #eeeeee;  
        }
       
    #header {
        width: 570px;
        height: 100px;
        border-bottom: 1px solid black;
        background: red;
        padding: 5px;
    }
        
        #container {
            width: 570px; 
            padding: 5px 5px 35px;
        }
        
        #footer {
            position: absolute; 
            bottom: 0;
            left: 0;
            border-top: 1px solid black;
            width: 570px;
            height: 15px;
        padding: 5px;
            background: yellow;
        }        
  </style>
  <!--[if lt IE 7]>
      <style type="text/css">
          div#footer { bottom: expression((document.body.clientHeight % 2) ? "-1px" : "0" ); }
          body { height: 100%; }
      </style>
    <![endif]-->
</head>
<body>
    <div id="header">Header...</div>
    <div id="container">lorem ipsum..</div>
    <div id="footer">lorem ipsum...</div>
</body>
</html>

Mocht het in IE7 niet goed werken, dan raad ik je ten eerste aan de conditional comment eens te veranderen in

code:

1	if lte IE7

, zodat datgene wat erin staat ook voor IE7 geldt. Ik ben zelf op moment amper bezig met webdevelopment en heb sinds de release van beta2 IE7 niet meer aangeraakt.

[ Voor 8% gewijzigd door Sappie op 20-04-2007 10:56 ]

Specs | Audioscrobbler

vrijdag 20 april 2007 13:26

Acties:

Verwijderd

Topicstarter

Hallo Mensen,

Het probleem doet zich voor als ik de div content toevoeg dit is in principe het zelfde als de div links en rechts. Dit maakt me gek!!!!!

HTML:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>[docTitel]</title>
<style type="text/css">
/* CSS Document */
html { 
    margin: 0;  
    height: 100%;  
    background: white; 
}  

body { 
    position: relative;  
    min-height: 100%;  
    width: 898px;
    border-left: 1px solid black; 
    border-right: 1px solid black; 
    margin: 0 auto; 
    background: #eeeeee;   
} 
    

.container {
    position:relative;
    width:898px;
    background:#00FF00;
    overflow:hidden;
}

.left{
    position:absolute;
    top:0px;
    left:0px;
    width:199px;
    height:100%;
    background-color:#FFFF00;
}


.logo{
    position:absolute;
    top:0px;
    left:200px;
    width:175px;
    height:70px;
    background-image:url(Img/logo.png);
}

.menu{
    position:absolute;
    top:72px;
    left:199px;
    height:25px;
    width:500px;
    line-height:25px;
    z-index:100;
}

.content{
    position:absolute;
    top:100px;
    bottom:25px;
    left:199px;
    width:490px;    
}

.right{
    position:absolute;
    top:0px;
    left:699px;
    width:199px;
    height:100%;
    background-color:#FFFF00;
}   


.footer {
    position:absolute;  
    bottom: 0;
    left:199px;
    height:25px;
    width:500px;
    font-family:inherit;
    text-align:center;
    line-height:37px;
}
</style>
</head>
<body>
    <div id="container" class="container">
        <div id="Links" class="left"></div>
        <div id="Menu" class="menu"></div>
        <div id="Content" class="content"></div>
        <div id="Rechts" class="right"></div>
        <div id="Footer" class="footer">Footer</div>
</div>  
</body>
</html>

vrijdag 20 april 2007 16:30

Acties:

Sappie

De Parasitaire Capaciteit!

anders negeer je mijn post gewoon.. dat je maar gek mag worden

PS Waarom hebben je elementen uberhaupt een id én een class?? En waarom gebruik je de class om de specificity mee te bepalen?

[ Voor 89% gewijzigd door Sappie op 20-04-2007 16:33 ]

Specs | Audioscrobbler

vrijdag 20 april 2007 16:35

Acties:

moozzuzz

Verwijderd schreef op vrijdag 20 april 2007 @ 13:26:
Dit maakt me gek!!!!!

Google op psychiater?

Welke websites heb je al geconsulteerd om te zien waar het probleem ligt? Probeer ook es onze forum-search, het regent dagelijks van dit soort vragen (100% height).

vrijdag 20 april 2007 18:43

Acties:

Verwijderd

Topicstarter

Voor dat ik naar psychiater ga moet ik dit toch effe kwijt.
Dit is en forum waar mensen elkaar helpen, als je geen zinnige informatie heb hoef je op mijn bericht niet te reageren!

Het probleem wat ik heb is dat mijn pagina niet wordt weer gegeven in firefox. Ik gebruik standaard css. Als je de volledige bericht leest

Het probleem doet zich voor als ik de div content toevoeg dit is in principe het zelfde als de div links en rechts.

vrijdag 20 april 2007 19:57

Acties:

Sappie

De Parasitaire Capaciteit!

Inderdaad, ook op dit forum wordt verder verwacht dat je zelf al serieuze zoekacties hebt gedaan. Daarnaast moet je de replies op je topic ook _LEZEN_.

Specs | Audioscrobbler

vrijdag 20 april 2007 20:07

Acties:

PhoenixT

Toch wel grappig dat 't werkt in IE maar niet in Firefox. Hier is 't altijd andersom

Maar serieus:
Je gebruikt veel absolute waarden zie ik. Je moet het natuurlijk zelf weten maar ik houdt het liever liquid.
Ik doe meestal dit:

Cascading Stylesheet:

.container
{
width:100%;
}
.navmenu
{
float:left;
width:15%;
margin:0;
padding:1em;
}
.content
{
float:left;
max-width:38em;
}

[ Voor 9% gewijzigd door PhoenixT op 20-04-2007 20:13 ]

With PlaneShift since 2003. WC-Grid ftw!