HTML & CSSur HTML, XHTML & CSS
7 svar · 1 793 visningar · startad av Kalle M
Har gjort en sida och jag upplever den ser lite annorlunda ut i Firefox än internet explorer.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>mallsida</title>
<link href="css1.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="heldiv">
<div id="header"> <img src="images/magwill3.gif" alt="MAGWILL">
<hr>
<div id="kontakt"><strong>MAGWILL</strong><br>
kjlkj<br>
9456456
<a href="kontakt.htm"><br>
cvvcv<br>
Info@magwill.se </a><br>
<br>
</div>
<table width="730" border="0">
<tr>
<td width="59"><a href="default.html">Hem</a></td>
<td width="110"><a href="utb.html">Utbildningar</a></td>
<td width="122"><a href="konsult.html">Konsultjänster</a></td>
<td width="81"><a href="omoss.html">Om oss</a></td>
<td width="137"><a href="arb_med_oss.html">Arbeta med oss</a></td>
<td width="104"><a href="kontakt.html">Kontakta oss</a></td>
<td width="87"> </td>
</tr>
</table>
</div>
<table width="790" border="0" cellpadding="10" cellspacing="10">
<!--DWLayoutTable-->
<tr>
<td width="158" valign="top" height="400"><h4>Utbildning för Projektledare</h4>
<p>asdfasjk dfölkajs dfölkasj dfölkasj fölaksjd föalskjf öalskjf aölskfj aöslkdjf ölkj asöldkfj asödlfkjas f</p>
<h3>sdfgsdfg <br>
<br>
</h3>
<p><img src="dator.jpg" width="157" height="236"></p>
<h4> </h4></td>
<td width="374" valign="top"0><h4>MAGWILL
</h4>
<p>cfasdfaskdjf öalksjdf aölksdfj aöslkdfj asölkfja söldkfja sdölfkajs döflkajs fölkajs dfölkasj dfölaksj dfölaksjdf öalksdjf aölskdjf aölskfj aslökfj aösldkfja öslkfj asölkfj asölkfj asölkfj asdölfkja sdölfkjas fölkajs dfölkasjd fölaksjf öalskjf aölskfj aölskfj aölskfj asölkfj asölkfja söldfkj asölfkjas ölfkj </p>
<h4>Lär för framtiden</h4>
<p>aklsjf öslakdfj aölskdfj asöldkfj asöldkfja södflkja sdöflkjas dfölkajs dfölkasj fölaksj fdölaksjf ölaksjf aölskjdf aölskdjf aölskdjf aölskdjf aöslkdfj asölkfj saölkfj asölkfj asölkdfj asöldkfj asöldkfj asöldfkja slkfja sf</p>
<h4> </h4></td>
<td width="158" valign="top"><h4><img src="lila.jpg" width="157" height="236"><br>
<br>
</h4>
<h4>aslökdfja öslkdfj sasdlkf<br>
</h4></td>
</tr>
</table>
<div id="foot">MAGWILL Lär för framtiden, <a href="mailto:Info@magwill.se">Info@magwill.se</a>, </div>
</div>
</body>
</html>
html { overflow-y: scroll; }
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-style: normal;
margin-top: 7px;
margin-left: 0px;
background-color:#CCC;
}
table {
font-size: 11px;
}
h3 {
color: #933;
font-size: 14px;
margin:0px
padding:0px;
margin-bottom: 0px;
}
p {
margin-top: 0px;
}
h4 {
color: #933;
font-size: 11px;
margin:0px
padding:0px;
margin-bottom: 0px;
margin-top: -1px;
}
a {
color: #039;
text-decoration: none;
}
a:hover {
font-weight: normal;
color: #933;
important;}
}
a:visited{
color:#039;
text-decoration:none;
}
#header {
position:relative;
background:#000;
height: 100px;
width: 750px;
padding-top: 20px;
padding-right: 20px;
padding-bottom: 0px;
padding-left: 20px;
margin-left:0px;
margin-right:10px;
margin-bottom:10px;
}
#kontakt {
color: #FFF;
position: absolute;
width: 120px;
left: 621px;
top: 13px;
font-family: Verdana, Geneva, sans-serif;
border: thin none #FFF;
text-align: right;
font-size:11px;
height: 69px;
}
#header a {
color: #fff; /*Vit*/
font-size: 13px;
}
#header a:hover { color: #ccc;/* ljus grå*/ }
#kontakt a {
color:#fff;
font-size:11px;
}
#heldiv{
Width:790px;
position: relative;
margin-right: auto;
margin-left: auto;
background-color:#FFF;
}
#foot {
height: 17px;
width: 789px;
text-align: center;
margin: 0px;
padding: 0px;
color: #933;
font-weight: normal;
}
Det ser ut som texten har en tunnare typsnitt när den är i firefox. I Internet explorer ser det bra ut. Sen kommer linjen längst upp i den svarta bakgrunden för nära infomailen i firefox.
Hur kommer jag runt så linjen inte är så nära infomailen där uppe i firefox? Om typsnittet ser lite tunnare ut i Firefox kan jag väl leva med men att linjen är för nära infomailen där uppe i firefox är störigt.
Jag vill det ska se ut som i Internet explorer kring gällande linjen.
Se bifogade bilder.
Eller löser jag problemet att helt enkelt flytta upp kontakt lite!?
Kan jag göra det i CSS och hur isåfall?
Eller löser jag problemet att helt enkelt flytta upp kontakt lite!?
Kan jag göra det i CSS och hur isåfall?
Ja du kan lösa det med CSS och ja, det hade nog hjälp att flytta upp ditt kontakt block. Du kan lösa det på många sätt jag hade inte haft den i absolut position som du kör, men det är väl det enklaste lösningen att göra just nu.
Ja enklast möjliga.
Ändra top till 10px och det verkar se bättre ut nu i firefox.
Ser den ok ut i övriga? Verkar se ok ut i firefox,explorer,Google chroom iallafal. Kan i och för sig installera opera och kolla.
#kontakt {
color: #FFF;
position: absolute;
width: 120px;
left: 621px;
top: 10px;
font-family: Verdana, Geneva, sans-serif;
border: thin none #FFF;
text-align: right;
font-size:11px;
height: 69px;
Du behöver inte installera annan läsare.
Det finns sajter som visar dig hur de olika läsarna upplever din text.
Vill tacka för hjälpen!
I opera, internet explorer ser det bra ut och kontakt får avstånd mellan linjen och kontakt. Men i firefox är den närmare!? Kan i och för sig leva med det om det blir allt för krångligt. Det är precis vid linjen i firefox. Det är väl det att avståndet mellan raderna är större i firefox. Själva radavståndet.
Kalle,
Ungefär så här funkar det:
Så länge du inte specificerar EXAKT ALLT i din stilmall, så slänger olika webbläsare in de värden deras respektive utvecklare ansett vara OK. Exempel: Om du inte specificerar att h1 ska vara t.ex. 40px med en marginal neråt på 12px så slänger webbläsarna in sina standardinställningar. Den ena webbläsaren kanske tycker att det ska vara 36px och 8px marginal. Den andra kanske har 44px och 20px marginal som grundinställning.
Vill du få allt at se exakt likadant ut i alla webbläsare har du två (eller faktiskt tre) vägar att gå:
Antingen skriver du in t.ex. conditional comments, dvs särskild stilmall för vissa webbläsare, eller så "nollställer" du alla taggar för alla webbläsare direkt och ger därefter de värden du vill ha.
Vill du "nollställa" (eller "neutralisera"), så använd t.ex. den här stilmallen: http://necolas.github.io/normalize.css/
Därefter, dvs i en stilmall som ligger närmare källkoden, kan du specificera saker och ting som du vill at dom ska vara i alla webbläsare.
Den tredje vägen är att helt enkelt skita i om det ser lite olika ut....
Det är inte så att jag får panik radavståndet är större i firefox.
Går det dock väldigt enkelt lösa radavståndet i
Kontakt så det ser ut som i explorer ,opera så är det ju bra så linjen ej så nära
men jag överlever ju.
