[Css] DIV uitlijning in IE7 en FF 2.0 probleem

[Lord_Nemesis]

Ik heb de volgende code in mij masterpage.master:

code:

<div id="krwrapper">
            <div id="krhead">
            </div>
            <div id="krnav_left">
            </div>
            <div id="krnav_mid">
                <asp:Menu ID="Menu1" runat="server" Orientation="Horizontal" DataSourceID="SiteMapDataSource1"
                    CssSelectorClass="PrettyMenu">
                </asp:Menu>
            </div>
            <div id="krcontent">
                <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
                </asp:ContentPlaceHolder>
                <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" ShowStartingNode="False" />
            </div>
            <div id="krfooter">
            </div>
        </div>

De bijbehorende (alleen van het probleem stukje) CSS:

code:

#krnav
{

}

#krnav_left
{
    position: absolute;
    height: 45px;
    width: 72px;
    background-image: url(App_Themes/KR_default/menu_left.jpg);
}

#krnav_mid
{
    padding-top: 12px;
    margin-left: auto;
    margin-right: auto;
    height: 33px;
    width: auto;
    max-width: 950px;
    background-image: url(App_Themes/KR_default/menu_mid.jpg);
    background-repeat: repeat-x;
}

Als ik een pagina die gelinkt is aan de .master run in IE7 werkt alles zoals ik het wil hebben.
Dit ziet er zo uit:

^Clickable.

Ik blij en nam aan dat dit ook in FF goed zou werken. Uiteindelijk toch maar even in FF getest. Met het volgende resultaat:

^Clickable.

Zoals je ziet verschuift mijn linker menu div ineens naar links. Deze moet aansluiten bij het menu zoals op de screenie van IE7.

Ik heb geprobeerd dit op te lossen door een div om deze 2 elementen heen te knutselen en daar enige css aan te verbinden. Dit hielp niet.
Ik ben in Visual Web Developer alle CSS tags bij langs geweest voot het #krnav_left divje (ie dus de problemen geeft). Zonder succes.

Na een dag proberen en knutselen hoop ik dat jullie me in de goeie richting kunnen loodsen, want ik ben de weg even kwijt...

[ Voor 1% gewijzigd door Lord_Nemesis op 07-03-2007 15:49 . Reden: typo's ]

[IntToStr]

Ik denk dat het eerder aan krnav_mid ligt.

IE snapt dit max-width niet, dus daar krijgt hij gewoon 100% width. In FF 950px. Bovendien zijn staan de margins op auto, dus zal hij worden gecentreerd. Klopt het dat op je scherm die balk van 950px links en rechts evenveel ruimte heeft?

Volgens mij wil je iets als een left-margin van 72px op die krnav_mid en een width van 950px of zo.

(Dit alles zonder kennis over de rest en zonder testen e.d., dus ik geef geen garanties )

[Lord_Nemesis]

Links en rechts is idd evenveel ruimte. Wil alles graag gecentreerd hebben.

Volgens mij wil je iets als een left-margin van 72px op die krnav_mid en een width van 950px of zo.

Voor zover ik weet staat de left margin van krnav_mid dan vast op 72px. Dat zou dus betekenen dat als ik de window kleiner/groter maak, de hele handel niet meer netjes gecentreerd staat. Dat is juist wel de bedoeling.
Ik heb het wel even geprobeerd natuurlijk, maar het enige wat ik daar me bereik is dat krnav_mid niet meer gecentreerd staat en ook naar links springt. krnav_left blijft tegen de linkerkant.

[IntToStr]

Als je die 2 divs naast elkaar en in totaal gecentreerd wilt hebben zul je een parent div moeten hebben en die centreren. left en mid kunnen dan gewoon naast elkaar met vaste breedtes in die parent div komen te staan.

Uit je beschrijving begreep ik dat je alles links op de pagina wilde. Misschien iets meer info over wat je precies wilt?

[Lord_Nemesis]

Mijn excuses als de OP niet voldoende duidelijk is.

Wat ik wil is dat krnav_left en krnav_mid naast elkaar komen met een totaal breedte van 950px en gecentreerd onder krhead.

Ik heb krnav_left en krnav_mid nu in een parent div. Probleem wat ik nu heb is dat ze onder elkaar komen ipv naast elkaar.

[IntToStr]

Google hiervoor op "float".
Ik denk dat je de position: absolute; ook van die left af moet halen.

[Lord_Nemesis]

Die position: absolute had ik al verwijdert. Heb nu op de krnav_left float: left; en nu staan ze netjes naast elkaar, gecentreerd, onder de banner!

Dank je voor de hulp en je snelle reacties!