Archief - HTML: font size in opera/ff

frensj · 29 nov 2007

Een goeden dag

ik heb volgende html en css:
(vraag volgt onder de code)

Code:

<body>



<div id='top'>
<img src="images/banner.jpg" alt='banner' />
</div>
<div id='menu'>
<table id='menutabel'>
<tr>
<td><a href="nelink.html">Home</a></td><td><a href="nenanderelink.html" id='current' >Activiteiten</a></td><td><a href="nognelink.html">Nieuws</a></td><td><a href="weeralnelink.html">Teams</a></td><td><a href="nelink.html">Events</a></td><td><a href="nelink.html">Leden</a></td><td><a href="nelink.html">Contact</a></td><td><a href="nelink.html">Links</a></td>
</tr>
</table>
</div>
<div id='container-inh-bottom'>
<div id='containerinh'>
    <div id='inhoud'>
<h1>CAPUT 1 </h1>
quaeram te, domine, invocans te, et invocem te credens in te: praedicatus enim es nobis. invocat te, domine, fides mea, quam dedisti mihi, quam inspirasti mihi per humanitatem filii tui, per ministerium praedicatoris tui. 

<h1>CAPUT 2 </h1>
 aut unde venias in me? quo enim recedam extra caelum et terram, ut inde in me veniat deus meus, qui dixit: caelum et terram ego impleo? 

<h1>CAPUT 3 </h1>

an quia non possunt te totum capere omnia, partem tui capiunt et eandem partem simul omnia capiunt? an singulas singula et maiores maiora, minores minora capiunt? ergo est aliqua pars tua maior, aliqua minor? an ubique totus es et res nulla te totum capit? 
 </div>
 <div id='rechterbalk'>
 <table bgcolor='#ffffff' width='100%' >
 <tr>
 <td>
 BalkBalk<br />
 balk<br /><br />
 balkbalkbalk. BalkBalk<br />
 balk<br /><br />
 balkbalkbalk. BalkBalk<br />
 balk<br /> BalkBalk<br />
 balk<br /><br />
 balk<br />
 </td>
 </tr>
 </table>
 <br />
  <table bgcolor='#ffffff' width='100%' >
 <tr>
 <td>
 2e balk balk <br />
 2e balk jaja <br /> <br />
 2e2ebalkbalk
 </td>
 </tr>
 </table>
  <br />
  <table bgcolor='#ffffff' width='100%' >
 <tr>
 <td>
 balkie balkie balkie balkie balk <br />
 balkie balkie balkie balkie balk <br />
 balkie balkie balkie balkie balk <br /><br />
 balkie balkie balkie balkie balk <br />
 balkie balkie balkie balkie balk <br />
 balkie balkie balkie balkie balk <br /><br />
 </td>
 </tr>
 </table>
  </div>
</div>
    <div id='bottom'>
    &copy; 2007 VC Beerse <br />Alle rechten voorbehouden
    </div>
 </div>


</body>
</html>

css:

Code:

body{
	margin:0px;
	padding:0px;
	height:100%;
	
	background-color:#a00000;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
	
	background-image:url(./images/top-repeat.jpg);
	background-repeat:repeat-x;
}



A:link{
	color:#CCCCCC;
	text-decoration:none;
}
A:visited{
	color:#CCCCCC;
	text-decoration:none;
}
/* Menu */
#menutabel a:hover{
	background-color:#C00000;
	color:#000000;
	border:none;
	text-decoration:none;
	font-weight:bold;
}
#menutabel a
{
    font-size:12px;
	background-color:#A00000;
	color:#ffffff;
	text-decoration:none;
	font-weight:bold;
}

#menutabel a#current{
	background-color:#FFFFFF;
	color:#000000;
	text-decoration:none;
	font-weight:bold;
}

#menutabel td{
	border-top:2px solid;
	border-right:2px solid;
	border-left:2px solid;
	border-top-color:black;
	border-right-color:black;
	border-left-color:black;

	padding:0px;
	border-bottom: 1px solid #ffffff;
}


/* Divs */
div{
	position: absolute;
}

#top{
	left:8%;
	width:900px;
	top:0px;
	height:100px;
	background-image:url(./images/top-repeat.jpg);
	background-repeat:repeat-x;
	padding:0px;
	margin:0px;
}



#menu{
	left:8%;
	width:900px;
	top:100px;
	height:20px;
	
	background-color:#a00000;
	color:white;
	text-align:left;
}
#container-inh-bottom{
    position:absolute;
	left:8%;
	width:900px;
	top:117px;
}
#containerinh{
    position:relative;
}

#rechterbalk{
    width:188px;
    float:right;
    position:relative;
 /*   background-color:#555555; 
    padding:5px;*/
}


#inhoud{
    float:left;
	position:relative;
	background-color:white;
	width:680px;
	padding:10px 10px 10px 10px;
	


}
#bottom{
    float:left;
    width:698px;
	position:relative;
	background-color:#000000;
	text-align:center;
	color:white;
	font-size:10px;
	padding:1px;
}

Als ik nu dieje site bekijk in IE 7, dan is er geen vuiltje aan de lucht, alle tekst is zo groot als ik verwacht, en wil. In firefox/opera is echter de tekst in die zijbalk rechts een fontsize 16 ongeveer (de rest 12) en ik zie echt geen enkele reden waarom dat zou zijn, en wat ik ook aan pas, het heeft totaal geen invloed op de fontsize in opera/ff, wel in IE7.

Weet iemand hoe dit komt?

frensj

frensj · 29 nov 2007

ok, euhm... door ne restart van menne pc is het problem verholpen (ziede wel dat er niks was

) kvind het wel raar want het was de eerste test in beide browsers... (ivm caches enzo)

nuja, problem solved!

Zero Grav · 29 nov 2007

Toch maar even vermelden dat er enkele structurele fouten in uw code zitten.
Zoals het gebruiken van h1's voor iets wat lijkt op nieuwsberichten, het zou beter zijn als ge h1 voor een sitetitel gebruikt en dan h2's voor nieuwsberichten.

Je menu maak je met een <ul><li></li>...</ul> en niet met een tabel. ('k Kan u daar nog wel een artikelke over geven maar op't moment heb ik even geen tijd meer)

Het maken van 2 containers? waar uw 'top' dan nog niet inzit.
Ge noemt uw header een banner en steekt em als "<img>" in uw code in plaats van als background.

Tekst mag je niet zomaar in divs gooien zonder er een gepast element (een paragraaf in dit geval) rond te gooien.

Het gebruiken van ' in plaats van ".
En uiteindelijk gebruik je toch nog tabellen om je data te structureren, dat is niet de bedoeling van met divs te werken.

Ik realiseer me best dat het hier geen site-check is, maar een groot deel van de dingen die ik hier opsom zouden later nog tot problemen kunnen leiden, zeker als je (zoals nu) crossbrowser wilt werken.

Archief - HTML: font size in opera/ff

frensj

Legacy Member

frensj

Legacy Member

Zero Grav

Legacy Member