8 svar · 652 visningar · startad av Fredde Mannen
Jag blir inte riktigt klok på firefox.
har skapat en mall till en site, som funkar fint i IE, utan som helst problem.
Men i firefox blir den helt störd. Har aldrig varit med om det.
Allt har blivit så fint tidigare, jag vet dock att storleken varierar att de tänker lite annorlunda, men fasiken så här annorlunda kan de inte tänka..
kolla de bifogade bilderna!
Vad tror ni?
Säg om ni vill ha koderna till css och html.
Fredde Mannen skrev:
Säg om ni vill ha koderna till css och html.
Det blir liiiiiiiiite knepigt utan att få se dem... ;)
emission skrev:
Det blir liiiiiiiiite knepigt utan att få se dem... ;)
Moa ha ha ha..
nåja en del brukar få stor idéer utan dem så. Här kommer de:
css-style:
* {
margin: 0;
padding: 0;
}
body {
font: 62.5%/1.5 Verdana, Arial, Helvetica, sans-serif;
}
p {
padding-left: 0px;
padding-right: 0px;
padding-bottom: 5px;
}
/* h1 {
color: #604D12;
font-size: 1.5em;
letter-spacing: 0.1em;
}
*/
h1 {
font-family: courier new,arial,verdana,sans-serif;
font-size: 1.3em;
font-weight: 400;
color: #647816;
margin-bottom: 0em;
line-height:1.3em;
}
h2
{
font-family: verdana, Arial, sans-serif;
font-size: 1.1em;
font-weight: bold;
color: #000000;
margin-bottom: 0em;
line-height:1.1em;
}
h3
{
font-family: verdana, Arial, sans-serif;
font-size: 1em;
color: #000000;
margin-bottom: 0em;
line-height:1em;
font-weight: bold;
}
ul {
list-style-type: circle;
margin: 0;
padding-top: 5px;
padding-bottom: 5px;
}
li {
margin-left: 3em; /* 30px */
padding-top: 1px;
padding-bottom: 1px;
}
a {
color: #604D12; /* viktig färg, den blåa. KME-loggan innehar den också. */
text-decoration: none;
}
a:hover {
color: #604D12; /* viktig färg, den blåa. KME-loggan innehar den också. */
text-decoration: underline;
}
#bodydiv {
width: 70.2em; /* 700px */
margin: auto;
position: relative;
}
#topdiv
{
width: 70.2em; /* 700px */
margin: auto;
height: 5em;
background-color: #E9E8E8; /* #E7E3CC; 86ADFF*/
margin-top: 5em;
position: relative;
}
#contentdiv
{
height: 29.6em; /* 300px */
background-color: #ffffff; /* #E7E3CC; 86ADFF*/
}
#footer
{
display: block;
border-top: 1px solid #cccccc; /* #5984FD; #efefef; färg osäker */
margin: auto;
width: 50em;
margin-top: 1em;
color: #666666;
text-align: center;
background-color: #E7E3CC; /* 86ADFF */
position: relative;
}
#footerdiv
{
margin: auto;
width: 70.2em;
height: 2em;
position: relative;
}
/************** undermeny **********************/
#submenudiv
{
padding-left: 0.3em;
width: 51.5em; /* 450px */
border-bottom: solid 1px #cccccc;
border-top: solid 2px #E9E8E8;
height: 1.7em;
background-color: #666666;
position: relative;
}
#submenudiv a
{
display: block;
float: left;
margin-right: 0.5em;
text-decoration: none;
color: #ffffff;
border: solid 1px #666666;
padding-left: 0.2em;
padding-right: 0.2em;
}
#submenudiv a:hover
{
border: solid 1px #666666;
background-color: #C57016;
padding-left: 0.2em;
padding-right: 0.2em;
}
/**********************************************/
#logodiv
{
float: left;
height: 10em;
width: 51.7em;
/* background-color: #F1F1F1; */
position: relative;
}
#logoline
{
border-bottom: solid 1px #cccccc;
border-top: solid 1px #cccccc;
background-color: #666666;
float: left;
height: 0.5em;
width: 51.8em;
position: relative;
}
/************** meny **********************/
#menudiv
{
float: left;
height: 10.3em;
background-color: #F1F1F1; /* #E7E3CC; 86ADFF*/
width: 18em;
border-top: 10px solid #F1F1F1;
position: relative;
}
#menudiv a
{
border-right: solid 5px #666666;
font-size: 1em;
font-family: verdana;
padding-left: 2px;
background-color: #666666; /* #CBC27F; #BBB16A; */
text-align: left;
margin-top: 2px;
color: #ffffff;
text-decoration: none;
display: block;
height: 1.7em;
}
#menudiv a:hover {
/* color: #124FFC; */
border-right: solid 5px #C57016;
}
/**********************************************/
/* Diven med det väsentliga innehållet, informationen. */
#content {
/* background-color: blue; */
width: 46em; /* 450px */
float: left;
padding-top: 0.2em;
padding-left: 2em;
padding-right: 2em;
padding-bottom: 0.2em;
height: 30em;
}
/* Div med tänkbara underlänker samt en nice bild som representerar varje avsnitt. */
#left
{
height: 40em; /* 296px */
width: 18em; /* 250px */
float: left;
background-color: #E9E8E8;
}
#left a {
display: block;
}
#left a:hover {
display: block;
}
#contentimage {
float: left;
border: none;
padding-right: 2px;
padding-bottom: 2px;
}
#Link
{
display:none;
}
/*************************************/
html-mallen
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Axsa IT - Webbutveckling Norrbotten / 404 (Not found) - Sidan finns ej.</title>
<meta name="keywords" content="CMS, Content Managment System, Publicering, Publiceringsverktyg, AxWeb Publicering" />
<meta name="description" content="Beskrivning av siten. " />
<style media="all" type="text/css">
@import url( '/axweb/_templates/style.css' );
</style>
</head>
<body>
<div id="topdiv"></div>
<div id="bodydiv">
<div id="left">
<div id="menudiv">
<!-- start:menu --> <!-- end:menu -->
</div>
<div id="leftcontent">
<!-- start:column --> <!-- end:column -->
</div>
</div>
<div id="contentdiv">
<div id="logoline"></div>
<div id="logodiv">
<a href="http://www.axsait.se/"><img src="/axweb/_templates/grafik/logo.gif" height="100" width="515" style="border: none;" /></a>
</div>
<div id="submenudiv">
<!-- start:submenu --><a href="http://www.axsait.se/">Startsidan »</a> <a href="mailto:webmaster@axsait.se">Rapportera fel »</a><!-- end:submenu -->
</div>
<div id="content">
<!-- start:content --><h1>404 (Not found) - Sidan finns ej.</h1>Länken som du angav fungerar inte, antingen är sidan borttagen eller flyttad. Om du klickade på en länk vänligen meddela ansvarig på den webbplatsen att länken är felaktig.<!-- end-content -->
</div>
</div>
</div>
<div id="footerdiv">
<span id="footer">
<!-- start:copyright -->Axsa IT - Webbutveckling Norrbotten, Tel 0738-29 77 16 © 2006 Axsa IT<!-- end:copyright -->
</span>
</div>
</body>
</html>
Nåja! Säkert har jag tänkt helt galet. men men..
Nu verkar jag se vad som är problemet.
I firefoxen blir inte den omslutande diven större om den inre blir det. How come?
det vanliga problemet vid användandet av float. du har ingenting mellan den omslutande diven och innehållet som avslutar float genom clear:both
lägg alltså till
<div class="clear"> </div>
innan sista </div>
och lägg till i css'en
.clear { clear:both; }
caya skrev:
det vanliga problemet vid användandet av float. du har ingenting mellan den omslutande diven och innehållet som avslutar float genom clear:both
lägg alltså till
<div class="clear"> </div>
innan sista </div>
och lägg till i css'en
.clear { clear:both; }
Det stämmer.. löste det.
Fick sedan ett problem till som jag hade glömt bort. måste ju förtusan ha en min-height också, för firefox låser höjden på diven med height, dvs det som IE inte gör. :)
SÅ nu verkar allt se fint ut!
men måste du ha height då?
om du har en clear så flyter ju höjden med...
eller en padding-bottom skulle passa herrn. dvs i den div som till synes ligger innan footer så har du en padding-bottom på en sisådär 100 pixlar så ser inte sidan så hoptryckt ut, utan att för den delen låsa fast layouten...
Fredde Mannen skrev:
firefox låser höjden på diven med height, dvs det som IE inte gör. :)
Dvs. IE gör FEL, Firefox (och resten av alla webbläsare) gör RÄTT! :birp
Fredde - kunde inte komma åt din sida så jag tar en OT här
[OT]tack för komplimangen :)[/OT]