Site werkt in Chrome en Firefox maar niet in IE

Status
Niet open voor verdere reacties.

ppllz

Gebruiker
Lid geworden
24 okt 2008
Berichten
16
Hallo,

Ik ben bezig om een site te maken voor een rijschool.
Ik was er mee bezig en opende de site eens via IE8. Toen kwam ik erachter dat de site er heel raar uit zag. Alles groot. Dus alsof de woorden 4x zo groot zijn. Ook klopt de opmaak niet qua balken etc.

De site werkt wel via Chrome En FF

Een linkje naar de site: Link

Zouden jullie mij hierbij kunnen helpen?

Mijn CSS:

html
{ height: 100%;}

*
{ margin: 0;
padding: 0;}

body
{ font: normal .80em 'trebuchet ms', arial, sans-serif;
background: #F0EFE2;
color: #777;}

p
{ padding: 0 0 20px 0;
line-height: 1.7em;}

img
{ border: 0;}

h1, h2, h3, h4, h5, h6
{ font: normal 175% 'century gothic', arial, sans-serif;
color: #43423F;
margin: 0 0 15px 0;
padding: 15px 0 5px 0;}

h2
{ font: normal 175% 'century gothic', arial, sans-serif;
color: #A4AA04;}

h4, h5, h6
{ margin: 0;
padding: 0 0 5px 0;
font: normal 120% arial, sans-serif;
color: #A4AA04;}

h5, h6
{ font: italic 95% arial, sans-serif;
padding: 0 0 15px 0;
color: #000;}

h6
{ color: #362C20;}

a, a:hover
{ outline: none;
text-decoration: underline;
color: #1293EE;}

a:hover
{ text-decoration: none;}

.left
{ float: left;
width: auto;
margin-right: 10px;}

.right
{ float: right;
width: auto;
margin-left: 10px;}

.center
{ display: block;
text-align: center;
margin: 20px auto;}

blockquote
{ margin: 20px 0;
padding: 10px 20px 0 20px;
border: 1px solid #E5E5DB;
background: #FFF;}

ul
{ margin: 2px 0 22px 17px;}

ul li
{ list-style-type: circle;
margin: 0 0 6px 0;
padding: 0 0 4px 5px;}

ol
{ margin: 8px 0 22px 20px;}

ol li
{ margin: 0 0 11px 0;}

#main, #logo, #menubar, #site_content, #footer
{ margin-left: auto;
margin-right: auto;}

#header
{ background: #025587;
height: 240px;}

#logo
{ width: 825px;
position: relative;
height: 168px;
background: #025587 url(logo.png) no-repeat;}

#logo #logo_text
{ position: absolute;
top: 20px;
left: 0;}

#logo h1, #logo h2
{ font: normal 300% 'century gothic', arial, sans-serif;
border-bottom: 0;
text-transform: none;
margin: 0;}

#logo_text h1, #logo_text h1 a, #logo_text h1 a:hover
{ padding: 22px 0 0 0;
color: #FFF;
letter-spacing: 0.1em;
text-decoration: none;}

#logo_text h1 a .logo_colour
{ color: #80FFFF;}

#logo_text h2
{ font-size: 100%;
padding: 4px 0 0 0;
color: #DDD;}

#menubar
{ width: 877px;
height: 72px;
padding: 0;
background: #29415D url(menu.png) repeat-x;}

ul#menu, ul#menu li
{ float: left;
margin: 0;
padding: 0;}

ul#menu li
{ list-style: none;}

ul#menu li a
{ letter-spacing: 0.1em;
font: normal 100% 'lucida sans unicode', arial, sans-serif;
display: block;
float: left;
height: 37px;
padding: 29px 26px 6px 26px;
text-align: center;
color: #FFF;
text-transform: uppercase;
text-decoration: none;
background: transparent;}

ul#menu li a:hover, ul#menu li.selected a, ul#menu li.selected a:hover
{ color: #FFF;
background: #1C2C3E url(menu_select.png) repeat-x;}

#site_content
{ width: 837px;
overflow: hidden;
margin: 0 auto 0 auto;
padding: 20px 24px 20px 37px;
background: #FFF url(content.png) repeat-y;}

.sidebar
{ float: right;
width: 190px;
padding: 0 15px 20px 15px;}

.sidebar ul
{ width: 178px;
padding: 4px 0 0 0;
margin: 4px 0 30px 0;}

.sidebar li
{ list-style: none;
padding: 0 0 7px 0; }

.sidebar li a, .sidebar li a:hover
{ padding: 0 0 0 40px;
display: block;
background: transparent url(link.png) no-repeat left center;}

.sidebar li a.selected
{ color: #444;
text-decoration: none;}

#content
{ text-align: left;
width: 595px;
padding: 0;}

#content ul
{ margin: 2px 0 22px 0px;}

#content ul li
{ list-style-type: none;
background: url(bullet.png) no-repeat;
margin: 0 0 6px 0;
padding: 0 0 4px 25px;
line-height: 1.5em;}

#footer
{ width: 878px;
font: normal 100% 'lucida sans unicode', arial, sans-serif;
height: 33px;
padding: 24px 0 5px 0;
text-align: center;
background: #29425E url(footer.png) repeat-x;
color: #FFF;
text-transform: uppercase;
letter-spacing: 0.1em;}

#footer a
{ color: #FFF;
text-decoration: none;}

#footer a:hover
{ color: #FFF;
text-decoration: underline;}

.search
{ color: #5D5D5D;
border: 1px solid #BBB;
width: 134px;
padding: 4px;
font: 100% arial, sans-serif;}

.form_settings
{ margin: 15px 0 0 0;}

.form_settings p
{ padding: 0 0 4px 0;}

.form_settings span
{ float: left;
width: 200px;
text-align: left;}

.form_settings input, .form_settings textarea
{ padding: 5px;
width: 299px;
font: 100% arial;
border: 1px solid #E5E5DB;
background: #FFF;
color: #47433F;}

.form_settings .submit
{ font: 100% arial;
border: 1px solid;
width: 99px;
margin: 0 0 0 212px;
height: 33px;
padding: 2px 0 3px 0;
cursor: pointer;
background: #263C56;
color: #FFF;}

.form_settings textarea, .form_settings select
{ font: 100% arial;
width: 299px;}

.form_settings select
{ width: 310px;}

.form_settings .checkbox
{ margin: 4px 0;
padding: 0;
width: 14px;
border: 0;
background: none;}

.separator
{ width: 100%;
height: 0;
border-top: 1px solid #D9D5CF;
border-bottom: 1px solid #FFF;
margin: 0 0 20px 0;}

table
{ margin: 10px 0 30px 0;}

table tr th, table tr td
{ background: #3B3B3B;
color: #FFF;
padding: 7px 4px;
text-align: left;}

table tr td
{ background: #F0EFE2;
color: #47433F;
border-top: 1px solid #FFF;}
 
Laatst bewerkt:
Geef uw site een doctype.
vb Niet
HTML:
<!DOCTYPE HTML>
<html>
Maar
HTML:
<!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">
begin eens met eenzelfde font maat (vb px)te gebruiken!
Hier style je al uw headings
Code:
h1, h2, h3, h4, h5, h6
{ font: normal 175% 'century gothic', arial, sans-serif;
color: #43423F;
margin: 0 0 15px 0;
padding: 15px 0 5px 0;}
En hier begin je ze nog een te herstylen.
Code:
h2
{ font: normal 175% 'century gothic', arial, sans-serif;
color: #A4AA04;}

h4, h5, h6
{ margin: 0;
padding: 0 0 5px 0;
font: normal 120% arial, sans-serif;
color: #A4AA04;}

h5, h6
{ font: italic 95% arial, sans-serif;
padding: 0 0 15px 0;
color: #000;}

h6
{ color: #362C20;}
 
Ik heb het eerste gedaan.

en wat bedoelt u precies met het 2e?

gewoon:

h2
{ font: normal 175% 'century gothic', arial, sans-serif;
color: #A4AA04;}

h4, h5, h6
{ margin: 0;
padding: 0 0 5px 0;
font: normal 120% arial, sans-serif;
color: #A4AA04;}

h5, h6
{ font: italic 95% arial, sans-serif;
padding: 0 0 15px 0;
color: #000;}

h6
{ color: #362C20;}
weghalen?
 
Nee deze niet weghalen
Code:
h2
{ font: normal 175% 'century gothic', arial, sans-serif;
color: #A4AA04;}

h4, h5, h6
{ margin: 0;
padding: 0 0 5px 0;
font: normal 120% arial, sans-serif;
color: #A4AA04;}

h5, h6
{ font: italic 95% arial, sans-serif;
padding: 0 0 15px 0;
color: #000;}

h6
{ color: #362C20;}
Maar deze weghalen
Code:
h1, h2, h3, h4, h5, h6
{ font: normal 175% 'century gothic', arial, sans-serif;
color: #43423F;
margin: 0 0 15px 0;
padding: 15px 0 5px 0;}
Hierboven geeft alle headings dezefde style
bij de bovenste stylt U iedere heading apart wat ook de bedoeling moet zijn.
en geef dan eens iedere heading een grote in px inplaats van % en of em
vb
Code:
h1    
{
	color: #43423F;
	margin: 0 0 15px 0;
	padding: 15px 0 5px 0;
	font-family: 'century gothic', arial, sans-serif;
	font-size: 18px;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
}
h2
{
	color: #A4AA04;
	font-family: 'century gothic', arial, sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
}
h4  
{
	margin: 0;
	padding: 0 0 5px 0;
	color: #A4AA04;
	font-family: arial, sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
}
enz...
 
oke, het ziet er al beter uit.
De lettergrootte klopt nu.
Alleen onder de menu knoppen, zit nu een grote witte balk.
Enig idee hoe ik die weg kan krijgen?
 
Die zie ik niet in IE9,Chrome
De style van de p tag ook aanpassen de line height verwijderen.
Hier is de h2 tag niet gesloten
HTML:
 <h2>Waar kwaliteit voorrang heeft.<h2>
In sommige browsers loopt die style dan door naar verdere tekst op je pagina.
Ook eens uw site door de html en css validator halen zal ook een stuk helpen
 
Laatst bewerkt:
er is echt een witte balk.
Tussen de menu's boven en de tekst.
Een balk van 2 cm

maar ik heb de css door de validator gehaald en dan krijg ik dit:

146 Same colors for color and background-color in two contexts #site_content and #logo_text h1
146 Same colors for color and background-color in two contexts .form_settings input and #logo_text h1
146 Same colors for color and background-color in two contexts .form_settings textarea and #logo_text h1
146 Same colors for color and background-color in two contexts blockquote and #logo_text h1
146 Same colors for color and background-color in two contexts #site_content and #logo_text h1 a
146 Same colors for color and background-color in two contexts .form_settings input and #logo_text h1 a
146 Same colors for color and background-color in two contexts .form_settings textarea and #logo_text h1 a
146 Same colors for color and background-color in two contexts blockquote and #logo_text h1 a
146 Same colors for color and background-color in two contexts #site_content and #logo_text h1 a:hover
146 Same colors for color and background-color in two contexts .form_settings input and #logo_text h1 a:hover
146 Same colors for color and background-color in two contexts .form_settings textarea and #logo_text h1 a:hover
146 Same colors for color and background-color in two contexts blockquote and #logo_text h1 a:hover

Wat bedoelen ze daar precies mee
 
Waarschuwingen:
146 Same colors for color and background-color in two contexts #site_content and #logo_text h1
Zelfde kleuren voor background-color in twee contexten #site_content and #logo_text h1
Op zichzelf geen probleem is maar een waarschuwing kan je ook veranderen als je wil.
Maar onderaan die pagina stond uw gevalideerde css
Heb er een beetje aan gewerkt en de html en de css is nu w3c gevalideerd.
Alles kan nog wel wat bijgeschaafd worden wil dit even vermelden om eventueel het muggeziften te vermijden
Let wel de css heb ik rijschool.css genoemd.

Hierbij dan de gevalideerde html en css:
Html
HTML:
<!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>
  <title>Autorijschool Ninivé</title>
  <meta name="description" content="website description" />
  <meta name="keywords" content="website keywords, website keywords" />
  <meta http-equiv="content-type" content="text/html; charset=windows-1252" />
  
<link href="rijschool.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="header">  
		<div id="logo">
        	<div id="logo_text">
          	<!-- class="logo_colour", allows you to change the colour of the text -->
          	<h1><a href="index.php">Autorijschool<span class="logo_colour">Ninivé</span></a></h1>
          	<h2>Waar kwaliteit voorrang heeft.</h2>
        	</div>
   		</div>
<div id="menubar">
        <ul id="menu">
          <!-- put class="selected" in the li tag for the selected page - to highlight which page you're on -->
          <li><a href="index.php">Home</a></li>
          <li><a href="info.php">Info</a></li>
          <li><a href="rijles.php">Rijles</a></li>

          <li><a href="2todrive.php">2toDrive</a></li>
		  <li><a href="prijzen.php">prijzen</a></li>
          <li><a href="contact.php">Contact</a></li>
        </ul>
  </div>
</div>  
<div id="maincontent">
	<div id="content">      
<h2>Welkom op de internetsite van rijschool Ninivé.</h2>
<p> Op deze website willen wij u vertellen wie wij zijn en wat wij voor u kunnen doen.</p>


Autorijschool Ninivé bestaat vanaf 2003.
<p>In deze afgelopen periode hebben wij een goede naam opgebouwd en veel tevreden klanten aan hun rijbewijs geholpen.</p>
Ons motto is niet voor niks:
<p>Waar kwaliteit voorrang heeft! </p>
<img src="/elmina/afbeeldingen/autorechtsvoor.jpg" alt="" width="400px" height="300px"/>
      </div>
    
<div class="sidebar">
			<!-- insert your sidebar items here -->
       		<h3>Adres gegevens</h3>
        	Autorijschool Ninivé
			Operastraat 95
			7534EH, Enschede
			06-10798686
		
        	<h3>Zakelijke gegevens</h3>
        	<p></p>
        	<p></p>
        	<h4>2toDrive van start gegaan!</h4>
        	<h5>1 November 2011</h5>

        <p>Vanaf nu mag je vanaf je 17e al je rijbewijs halen!.<br /><a href="http://informatica.bc-enschede.nl/elmina/2todrive.php">Lees meer</a></p>
        <h3>Handige links</h3>
        <ul>
          <li><a href="http://www.cbr.nl/">CBR</a></li>
          <li><a href="http://www.digid.nl/">DigID</a></li>
          <li><a href="https://mijn.cbr.nl/">Machtigen rijschool</a></li>

          <li><a href="http://www.2todrive.nl/">2toDrive</a></li>
        </ul> 
        <p>
    <a href="http://validator.w3.org/check?uri=referer"><img
      src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Transitional" height="31" width="88" /></a>
      <a href="http://jigsaw.w3.org/css-validator/check/referer">
        <img style="border:0;width:88px;height:31px"
            src="http://jigsaw.w3.org/css-validator/images/vcss"
            alt="Valide CSS!" />
    </a>
</p>
</div>  
<div id="content_footer">
    <div id="footer">
    	<div align="left">></div>
         <p>Autorijschool Ninivé</p>
        </div>
    </div>
</div>
</body>
</html>
CSS
Code:
html {
height : 100%;
}
* {
margin : 0;
padding : 0;
}
body {
font : normal 0.8em 'trebuchet ms', arial, sans-serif;
background : #f0efe2;
color : #777;
}
p {
padding : 0 0 15px 0;
}
img {
border : 0;
}
h1 {
color : #43423f;
margin : 0 0 15px 0;
padding : 15px 0 5px 0;
font-family : 'century gothic', arial, sans-serif;
font-size : 18px;
font-style : normal;
font-weight : normal;
font-variant : normal;
}
h2 {
color : #a4aa04;
font-family : 'century gothic', arial, sans-serif;
font-size : 16px;
font-style : normal;
font-weight : normal;
font-variant : normal;
}
h4 {
margin : 0;
padding : 0 0 5px 0;
color : #a4aa04;
font-family : arial, sans-serif;
font-size : 16px;
font-style : normal;
font-weight : normal;
font-variant : normal;
}
h5 {
margin : 0;
padding : 0 0 5px 0;
color : #000;
font-family : arial, sans-serif;
font-size : 15px;
font-style : normal;
font-weight : normal;
}
h6 {
margin : 0;
padding : 0 0 5px 0;
color : #362c20;
font-family : arial, sans-serif;
font-size : 15px;
font-style : normal;
font-weight : normal;
}
a, a:hover {
outline : none;
text-decoration : underline;
color : #1293ee;
}
a:hover {
text-decoration : none;
}
.left {
float : left;
width : auto;
margin-right : 10px;
}
.right {
float : right;
width : auto;
margin-left : 10px;
}
.center {
display : block;
text-align : center;
margin : 20px auto;
}
blockquote {
margin : 20px 0;
padding : 10px 20px 0 20px;
border : 1px solid #e5e5db;
background : #fff;
}
ul {
margin : 2px 0 22px 17px;
}
ul li {
list-style-type : circle;
margin : 0 0 6px 0;
padding : 0 0 4px 5px;
}
ol {
margin : 8px 0 22px 20px;
}
ol li {
margin : 0 0 11px 0;
}
#maincontent {
margin-left : auto;
margin-right : auto;
height : auto;
width : 878px;
}
#header {
background : #025587;
height : 240px;
width : 100%;
}
#logo {
width : 825px;
position : relative;
height : 168px;
background : #025587 url(logo.png) no-repeat;
margin-right : auto;
margin-left : auto;
}
#logo #logo_text {
position : absolute;
top : 20px;
left : 0;
}
#logo h1, #logo h2 {
font : normal 300% 'century gothic', arial, sans-serif;
border-bottom : 0;
text-transform : none;
margin : 0;
}
#logo_text h1, #logo_text h1 a, #logo_text h1 a:hover {
padding : 22px 0 0 0;
color : #fff;
letter-spacing : 0.1em;
text-decoration : none;
}
#logo_text h1 a .logo_colour {
color : #80ffff;
}
#logo_text h2 {
font-size : 100%;
padding : 4px 0 0 0;
color : #ddd;
}
#menubar {
width : 877px;
height : 72px;
padding : 0;
background : #29415d url(menu.png) repeat-x;
margin-right : auto;
margin-left : auto;
}
ul#menu, ul#menu li {
float : left;
margin : 0;
padding : 0;
}
ul#menu li {
list-style : none;
}
ul#menu li a {
letter-spacing : 0.1em;
font : normal 100% 'lucida sans unicode', arial, sans-serif;
display : block;
float : left;
height : 37px;
padding : 29px 26px 6px 26px;
text-align : center;
color : #fff;
text-transform : uppercase;
text-decoration : none;
background : transparent;
}
ul#menu li a:hover, ul#menu li.selected a, ul#menu li.selected a:hover {
color : #fff;
background : #1c2c3e url(menu_select.png) repeat-x;
}
.sidebar {
float : right;
width : 190px;
height : auto;
margin : 10px;
padding : 0;
}
.sidebar ul {
width : 178px;
padding : 4px 0 0 0;
margin : 4px 0 30px 0;
}
.sidebar li {
list-style : none;
padding : 0 0 7px 0;
}
.sidebar li a, .sidebar li a:hover {
padding : 0 0 0 40px;
display : block;
background : transparent url(link.png) no-repeat left center;
}
.sidebar li a.selected {
color : #444;
text-decoration : none;
}
#content {
text-align : left;
width : 595px;
padding : 0;
float : left;
height : auto;
margin : 10px;
}
#content ul {
margin : 2px 0 22px 0;
}
#content ul li {
list-style-type : none;
background : url(bullet.png) no-repeat;
margin : 0 0 6px 0;
padding : 0 0 4px 25px;
line-height : 1.5em;
}
#footer {
width : 878px;
font : normal 100% 'lucida sans unicode', arial, sans-serif;
height : 33px;
text-align : center;
background : #29425e url(footer.png) repeat-x;
color : #fff;
text-transform : uppercase;
letter-spacing : 0.1em;
float : left;
padding-top : 24px;
padding-right : 0;
padding-bottom : 5px;
padding-left : 0;
}
#footer a {
color : #fff;
text-decoration : none;
}
#footer a:hover {
color : #fff;
text-decoration : underline;
}
.search {
color : #5d5d5d;
border : 1px solid #bbb;
width : 134px;
padding : 4px;
font : 100% arial, sans-serif;
}
.form_settings {
margin : 15px 0 0 0;
}
.form_settings p {
padding : 0 0 4px 0;
}
.form_settings span {
float : left;
width : 200px;
text-align : left;
}
.form_settings input, .form_settings textarea {
padding : 5px;
width : 299px;
font : 100% arial;
border : 1px solid #e5e5db;
background : #fff;
color : #47433f;
}
.form_settings .submit {
font : 100% arial;
border : 1px solid;
width : 99px;
margin : 0 0 0 212px;
height : 33px;
padding : 2px 0 3px 0;
cursor : pointer;
background : #263c56;
color : #fff;
}
.form_settings textarea, .form_settings select {
font : 100% arial;
width : 299px;
}
.form_settings select {
width : 310px;
}
.form_settings .checkbox {
margin : 4px 0;
padding : 0;
width : 14px;
border : 0;
background : none;
}
.separator {
width : 100%;
height : 0;
border-top : 1px solid #d9d5cf;
border-bottom : 1px solid #fff;
margin : 0 0 20px 0;
}
table {
margin : 10px 0 30px 0;
}
table tr th, table tr td {
background : #3b3b3b;
color : #fff;
padding : 7px 4px;
text-align : left;
}
table tr td {
background : #f0efe2;
color : #47433f;
border-top : 1px solid #fff;
}
Hou dit aan de kant dan kan je er altijd nog op terugvallen(copy maken)
P.S.
Na iedere verandering aan de html of css bij het herbekijken in uw browser de pagina vernieuwen(verversen)
 
Laatst bewerkt:
Oke, het ziet er nu al stukken beter uit.
Maar kan ik vanaf hier nu ook verder gaan met de php code: Include?
Want om elke pagina aan te passen als ik een stukje in het menu wil aanpassen lijkt me niet echt handig.

En Ik krijg de lettergrootte van de h2,h3,h4 niet meer hoe het eerst was.

Er valt me nog iets op.
De achtergrond en de achtergrond waar de tekst op staat is nu hetzelfde geworden.
Als ik die aanpas, veranderen ze beide. Hoe krijg ik dat weer goed?
 
Laatst bewerkt:
Maar kan ik vanaf hier nu ook verder gaan met de php code: Include?
In de div plaatsen waar de tekst moet komen.
En Ik krijg de lettergrootte van de h2,h3,h4 niet meer hoe het eerst was.
De heading h3 staat momenteel niet in de css.De andere moet je font-size aanpassen.
Code:
h2 {
color : #a4aa04;
font-family : 'century gothic', arial, sans-serif;
[COLOR="red"][B]font-size : 16px;[/B][/COLOR]
font-style : normal;
font-weight : normal;
font-variant : normal;
}
Naar bv
Code:
h2 {
color : #a4aa04;
font-family : 'century gothic', arial, sans-serif;
[COLOR="red"][B]font-size : 18px;[/B][/COLOR]
font-style : normal;
font-weight : normal;
font-variant : normal;
}
De achtergrond en de achtergrond waar de tekst op staat is nu hetzelfde geworden.
ook aan te passen in de css.
 
In de div plaatsen waar de tekst moet komen.

ook aan te passen in de css.

De rest heb ik kunnen vinden en ben er nu mee bezig, maar die achtergrond krijg ik maar niet goed.

Als ik het verander, veranderen beide delen mee.
 
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan