Firefox css problem :(

Tags:    html css

Hejsa...

jeg har et lille problem.

jeg denne kode:

<pre>
<html>
<head>
<title>Welcome</title>
<style type="text/css">
html, body {
text-align: center;
height: 100%;
margin: 0px;
}

#outer {
text-align: left;
margin-left: auto;
margin-right: auto;
border-left: 1px solid #5F696B;
border-right: 1px solid #5F696B;
width: 774px;
height: 100%;
margin:0 auto; width:774px;
}

#top {
background-image: url('/images/main/banner-top.jpg');
width: 774px;
height: 136px;
}

#navigate {
height: 28px;
width: 774px;
border-top: 1px solid #5F696B;
border-bottom: 1px solid #5F696B;
background-image: url('/images/main/button-no-spacer.jpg');
}


#main{margin:0 auto; width:774px; background-color: transparent; background-image: url('/images/main/banner-bottom.jpg'); background-repeat: no-repeat;}
.main_outer{width:200px; background-color: transparent; }
.main_inner{padding:20px; background-color: transparent; }
.read_me{font-weight:bold;font-variant:small-caps;}


</style>
</head>
<body>

<div id="outer">

<div id="top"></div>
<div id="navigate"></div>


<div id="main">
<div style="width: 774px; height: 80px;"></div>
<div class="main_outer" style="float: left; width: 540px; margin-right: 17px;">
<div class="main_inner" >
Boks 1.<br>
Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah<br>
Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah<br>
Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah<br>
</div>
</div>
<div class="main_outer" style="float: right; margin-right: 0px; margin-left: 17px;">
<div class="main_inner">
Boks 2.<br>
Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah<br>
Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah<br>
Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah<br></div>
</div>
</div>
</div>
</body>
</html>
</pre>

Hvis man åbner den i internet explore virker det 100%, men i firefox vil man se at boks 1 og 2 dækker over billede der ligger nedeunder. Men hvis man ikke bruger float i boksene kan man godt, men det ødeligger designet :(

hvad kan jeg gøre for at få de 2 bokse til at være transparente i firefox?

Håber i kan hjælpe :|

- SpeC|DK - #SpeC.DK @ Q-NET



8 svar postet i denne tråd vises herunder
2 indlæg har modtaget i alt 2 karma
Sorter efter stemmer Sorter efter dato
Kan man ik lave de 2 kasser i css'en som en id istedet for en class??

-------------------------------------
Jacob Funch
www.jacob.hfabc.dk



Har du prøvet med background: none; ?
--
Ronni Egeriis



Kan man få lov til at se siden?

For default er en div da transparent...

/Daniel
www.theemann.dk



Kan man få lov til at se siden?

For default er en div da transparent...

/Daniel
www.theemann.dk


ja det er også derfor jer er blank :( og det virker også perfekt i ie :(

anyway. http://web1417.nh3.needhost.dk

- SpeC|DK - #SpeC.DK @ Q-NET

[Redigeret d. 08/04-05 20:05:09 af Mikkel Snitker (SpeC|DK)]



Kan man ik lave de 2 kasser i css'en som en id istedet for en class??

-------------------------------------
Jacob Funch
www.jacob.hfabc.dk


Jo men hvad skulle det ændre? har prøvet men virker heller ikke :(
- SpeC|DK - #SpeC.DK @ Q-NET



Kan man ik lave de 2 kasser i css'en som en id istedet for en class??

-------------------------------------
Jacob Funch
www.jacob.hfabc.dk


Jo men hvad skulle det ændre? har prøvet men virker heller ikke :(
- SpeC|DK - #SpeC.DK @ Q-NET


Ok. Troede jeg. Har ik lige en ide... Lige nu :P

-------------------------------------
Jacob Funch
www.jacob.hfabc.dk



the oddity style :)(husk lige selv at rette background url tilbage.)

#main{position:absolute;margin:0 auto; width:774px; background-color: transparent;bottom:0px;top:164px;background-image: url('Welcome_files/banner-bottom.jpg'); background-repeat: no-repeat;}
-----------------------------------------------------------------------------

Min side ->www.the-hive.dk/~donp/

[Redigeret d. 09/04-05 01:48:57 af Nørden]



Det ville ikke hjælpe særligt meget for det slet ikke baggrunden der er et problem. men Firefoxes måde at håndtere boxe på. Når du sætter float i firefox opfatter den tilsyneladende ikke det element som en intern del at parent elementet. som derfor ikke bliver satte til at omgive det floatende element. og derfor altså bliver mindre. til kun at omgive elementer der er interne i parent elementet. det samme sker når du sætter position i til absolute i en hvilken som helst browser.


Hvad jeg mener kan gøres viseligt ved at sætte main element til at have en border på fx 1px solid black.
-----------------------------------------------------------------------------

Min side ->www.the-hive.dk/~donp/

[Redigeret d. 09/04-05 08:51:58 af Nørden]



t