Avatar billede strikerdk Novice
12. marts 2008 - 16:05 Der er 11 kommentarer og
1 løsning

CSS forskel i Firefox og IE

Hej Eksperter. Jeg sidder og roder lidt med et stylesheet - der i grunden er meget simpelt. Jeg har valgt udelukkende CSS og undgå tabeller.

I firefox står denne side flot - men noget går galt i IE 7.
Contentboksen ude til højre ryger til tops i IE. Nogen der kan finde en løsning her?

Se eksemplet her: www.slaskeren.dk
------------------------------------------------------------------

Stylesheet:

body
    {
        text-align:center;
        background-color:#c3c3c3;
        width:100%;
        min-width:900px;
        color:#ffffff;
    }

#overall
    {
        float:left;
        clear:both;
        width:940px;
        min-width:940px;
        margin-left: 10%;
        margin-right:10%;
        background-color:#333333;
    }

#top
    {
        float:left;
        clear:both;
        width:920px;
        min-width:920px;
        height:100px;       
        margin-left: 10px;
        margin-right:10px;
        clear:both;       
        background-color:#581919;
    }
   
   
#contentholder
    {
        float:left;
        clear:left;
        width:800px;
        min-width:800px;       
        height:400px;       
        margin-left: 10px;
        margin-right:10px;
        background-color:#581919;
    }
   
#rightcontent
    {
        float:right;
        clear:right;
        width:100px;
        min-width:100px;       
        height:400px;       
        margin-left: 10px;
        margin-right:10px;
        background-color:#581919;
    }
   
#menu
    {
        float:left;
        clear:both;
        display:inline;
        width:920px;
        min-width:920px;
        margin: 10px 10px 10px auto;
}
   
.menu1
    {
        float:left;
        width:920px;
        font-family:Calibri, Verdana, Arial;
        font-size:16px;
        color:#ffffff;
}
Avatar billede strikerdk Novice
12. marts 2008 - 16:06 #1
Smider lige HTMLén her. Der anvendes VS2008 og ASP.NET som frontend.

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>

<!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 runat="server">
    <title>Untitled Page</title>
    <asp:ContentPlaceHolder id="head" runat="server">
    </asp:ContentPlaceHolder>
    <link href="StyleSheet.css" type="text/css" rel="Stylesheet" />
</head>
<body>

<div id="overall">
    <div id="top">
    </div>
   
    <div id="menu">
        <span class="menu1">
        Forside
        Test
        Test
        Test
        Test
        Test
        Test
        </span>
    </div>
     
    <div id="contentholder">
        <form id="form1" runat="server">
            <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
                 
            </asp:ContentPlaceHolder>
        </form>
    </div>
   
    <div id="rightcontent">
        Hej med dig
  </div>
   
   
    </div> 
</body>
</html>
Avatar billede adetunji88 Nybegynder
12. marts 2008 - 17:39 #2
du bliver nødt til at arbejde me to forskellige style sheets.
se min kode på www.mandkvinde.dk eller læs artikel på webdesign101
Avatar billede olebole Juniormester
12. marts 2008 - 19:15 #3
<ole>

Sikke noget vrøvl! Der er da ikke noget i vejen for, at det pågældende design kan laves med et enkelt stylesheet. Hvis det kniber med CSS, kommer det ikke til at knibe mindre med to stylesheets - tværtimod.

strikerdk >> Hvad vil du med dine floats - og hvad vil du med dine clears? Jeg forstår ikke rigtig den måde, de er strøet ud over stylesheet'et på  :)

/mvh
</bole>
Avatar billede strikerdk Novice
12. marts 2008 - 22:30 #4
Det jeg i bund og grund ønsker er, at centrere siden så den tilpasses både IE og FF.

Clear anvendes for at "informere" browseren om, at der intet er placeret på venstre, højre ELLER begge sider af DIVén.

Float anvendes for at "informere" browseren om, at contentright skal stå til højre, og contentholderen skal stå til venstre ( For at undgå sammenfald ).

I praksis ønsker jeg bare - at placere contentholderen og rightcontent lige under toppen.

Med tabeller og celler ville det se således ud:

<table>

<tr>
<td colspan="2"></td>
</tr>

<tr>
<td></td>
<td></td>
<tr>

</table>
Avatar billede strikerdk Novice
12. marts 2008 - 22:33 #5
float:left & clear:left siger bare, at indholdet skal placeres til venstre på siden, og at der intet er til venstre for indholdet. :-)
Avatar billede strikerdk Novice
13. marts 2008 - 10:38 #6
Jeg har lige konstateret at ovenstående ser FÆLT ud i IE 6 også :-s
Avatar billede strikerdk Novice
13. marts 2008 - 20:15 #7
Ingen med et fornuftigt bud på dette? :-)
Avatar billede olebole Juniormester
13. marts 2008 - 20:54 #8
Læg et div helt i bunden af dit overall-div:
    <div class="clear">&nbsp;</div>

- og prøv så med denne CSS:

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    color: #ffffff;
    background-color: #c3c3c3;
}
#overall {
    position: relative;
    width: 940px;
    margin: 0 auto;
    background: #333333;
}
#top {
    width: 920px;
    height: 100px;
    margin-left: 10px;
    background-color: #581919;
}
#menu {
    width: 920px;
    margin: 10px;
    text-align: center;
}
.menu1 {
    width: 920px;
    font: 16px Calibri, Verdana, Arial, sans-serif;
    color: #ffffff;
}
#contentholder {
    width: 800px;
    height: 500px;
    margin-left: 10px;
    display: inline;
    float: left;
    background-color: #581919;
}
#rightcontent {
    width: 110px;
    height: 500px;
    float: left;
    margin-left: 10px;
    background-color: #581919;
}
.clear {
    clear: both;
    height: 1px;
    overflow: hidden;
}
Avatar billede strikerdk Novice
13. marts 2008 - 22:52 #9
Ja om ikke det virker! :-) Nice indeed.
Jeg tror ikke jeg har helt styr på de floats der endnu. Den logiske tanke må jo være at contentholder er float:left og rightcontent er float:right - men sådan er det åbenbart ikke.

Jeg takker mange gange olebole - smid et svar og pointene er dine :-)
Avatar billede olebole Juniormester
15. marts 2008 - 00:47 #10
Det er vigtigt at huske, at float'ede elementer ikke har nogen fysisk udstrækning i det almindelige dokument-flow. Et div med rød baggrund vil således kun være ét tegn højt, hvis det kun indeholder float'ede elementer - uanset, hvor høje disse end måtte være.
Afslutter man derimod med et element, der har style="clear:both", fylder de float'ede elementer pludselig i flow'et - og det røde div vil lægge sig hele vejen rundt om de float'ede.

Hvis du leger lidt med CSS for at teste virkningerne, er det vigtig at teste i flere browsere - som minimum i IE og FF. Ideelt ville et clear-element ikke have nogen højde (height:0), men så virker det ikke i alle browsere. Derfor er der indhold (&nbsp;) i divet - og det er lavet 1px højt.

IE har også en særhed med left-margin på det første venstre-float'ede element - hvis dette er et block-element (f.eks. et div). Her vil IE rendere med den dobbelte left-margin. Et 'hack', der virker, er at gøre div'et til et inline-element:

    margin-left: 10px;
    display: inline;

Uden 'display:inline' ville IE rendere din contentholder 20px fra venstre side.

Håber, det forklarede en lille smule  :)
Avatar billede strikerdk Novice
17. marts 2008 - 10:08 #11
Det gør det bestemt. :-) Beklager det sene svar. Mange tak for hjælpen.
Avatar billede olebole Juniormester
17. marts 2008 - 14:45 #12
Tak for points  :)
Avatar billede 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.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

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