[CSS] Niet cross-browser

**Jos van Marrewijk** · 10-06-2010, 16:27

Hallo allemaal!

Ik heb een layout gedesigned en gecodeerd. Helaas is het in sommige browsers niet helemaal correct...

De layout staat op:
www.zoozio.nl

In de bijlage kunt u zien hoe de layout eruit hoort te zien.

Dit is mijn css code:

Code:

body
{
	background-color: #f2f2f2;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 14px;
	color: #000;
	margin: 0;
}

#menu_boog
{
	background-image: url('images/boog.png');
	width: 600px;
	height: 158px;
	float: right;
	filter: alpha(opacity=40);
	-khtml-opacity: 0.4;      
	-moz-opacity: 0.4;
	opacity: 0.4;
	clear: both;
	margin-top: -109px;
}

.server
{
	background-image: url(images/server.png);
	width: 159px;
	height: 159px;
	float: right;
	clear: both;
}

div#menu
{
	background-image: url('images/headmenu_bg.png');
	height: 56px;
	background-repeat: repeat-x;
	font-family: Calibri;
	font-size: 20px;
	color: #FFF;
	margin: 0;
}

li
{

	list-style-type: none;
	text-align: center;
	display: inline-block;
	float: left;
}

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


a
{
	text-decoration: none;
	color: #6C0;
}

ul
{
	font-family: Calibri;
	font-size: 20px;
	color: #FFF;
	list-style-type: none;
	margin-right: 20px;
	margin-top: 0px;
	display: inline-block;
	float: left;
}

ul#menu a 
{
	background-image: url('images/headmenu_bg.png');
	width: 125px;
	height: 40px;
	display: inline-block;
	padding-top: 10px;
}

ul#menu a:hover
{
	background-image: url('images/headmenu_bg_over.png');
	color: #FFF;
}

#header
{
	background-image: url('images/header_bg.png');
	height: 159px;
	background-repeat: repeat-x;
	margin-top: -5px;
	border-bottom: 1px solid #ABABAB;
}

h1
{
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 50px;
	color: #FFF;
	margin: 0;
	padding-left: 40px;
	padding-top: 15px;
	clear: both;
}

h3
{
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 16px;
	color: #333;
	padding-left: 40px;
	clear: both;
	margin: 0;
}

.content
{
	background-color: #E5E5E5;
	width: 600px;
	border: 1px solid #ACACAC;
	margin: 0;
	padding: 7px;
	float: left;
	margin-left: 25px;
}

#container
{
	width: 1150px;
	margin: auto;
	margin-top: 25px;
}

.twitter_menu
{
	background-color: #E5E5E5;
	width: 200px;
	border: 1px solid #ACACAC;
	padding: 7px;
	float: left;
	margin-left: 25px;
}

En dit is de index.php:

PHP Code:


<!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>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>ZoozioWeb</title>

<link href="style.css" rel="stylesheet" type="text/css" />

</head>



<body>



<div id="menu"> 

            <ul id="menu">  

                            <li><a href="index.php">Startpagina</a></li> 

                            <li><a href="#">Over ons</a></li> 

                            <li><a href="#">Domeinnaam</a></li> 

                            <li><a href="#">Webhosting</a></li>

                            <li><a href="#">Webdesign</a></li> 

                            <li><a href="login.php">Inloggen</a></li> 

                            <li><a href="register.php">Aanmelden</a></li> 

                            <li><a href="contact.php">Contact</a></li>

            </ul> 

</div>  



        <div id="header">

        

                    

                    <h1>ZoozioWeb</h1>

                    <h3>Webhosting en design met uitstekende service!</h3>

                    

                    <div id="menu_boog"><div class="server"></div></div>



        </div>

        

<div id="container">



                <div class="twitter_menu">

                                            <font style="font-size: 14px; font-weight: bold;">Inloggen</font><br /><br />

                                            Hieronder kunt u inloggen.<br />

                                            <?php include('inloggen.inc.php'); ?>

                                            <br />

                                            Heeft u nog geen account?<br />

                                            Registreer je <a href="register.php">hier!</a>



                                             

                </div>  

                                            

                <div class="content">

                <b>Welkom op ZoozioWeb!</b>

                <br /><br />

                Welkom op onze website! Wij bieden vele webdiensten aan, waaronder:<br /><br />

                •Domeinnamen<br />

                •Webhosting<br />

                •Webdesign<br />

                Op aanvraag kunnen wij ook hele websites voor u realiseren, dit kan al vanaf €199!<br />

                <br />

                Mocht u ergens anders naar op zoek zijn, dan kunt u ons natuurlijk altijd mailen, wellicht kunnen wij u verder helpen!<br /><br />

                Wij staan bij onze klanten onder de volgende aspecten bekend: professioneel, sterke kwaliteit en vooral onze snelle en goede service!

                

                

                <br /><br />

                Groetjes,<br />

                <b>Het ZoozioWeb Team</b>

                </div>  

                 

                <div class="twitter_menu">

                                            <font style="font-size: 14px; font-weight: bold;">Laatste Tweet</font><br />

                                            <?php include('twitter.inc.php'); ?> 

                </div>  

        

                

                

</div>



</body>

</html>

Het is de bedoeling dat die witte "golf" rechts in de header (groen) daar blijft staan, met daarin het plaatje van de pc/server.
Echter staat dit niet zo in IE8 en Safari. (Voor zover ik weet)
Ook heb ik een probleem met het menu, bovenin de pagina.
Als de pagina wordt verkleind, dus niet op het hele scherm staat, dan staat 1 van de menuknoppen links onder de startpagina knop. Wie heeft een idee hoe ik deze problemen kan oplossen?

Alvast bedankt voor jullie hulp!

Met vriendelijke groet,

Jos

**Lennart** · 10-06-2010, 16:34

Misschien moet je even een min-width opgeven

**M. Van Dam** · 10-06-2010, 16:34

Menu probleem:
zet er een container div rond, met de breedte van je menu, dan kapt ie niet meer af

**Jos van Marrewijk** · 10-06-2010, 16:34

@Lennart,

Bedankt voor je antwoord, maar waar zou ik dit moeten plaatsen?

EDIT:

M. van Dam,

Ook u bedankt voor uw antwoord, ik ga het proberen, maar is het dan niet zo dat ie niet meer over de hele achtergrond gaat?

**Freek G** · 10-06-2010, 16:38

Je kan denk ik ook je ul.menu een min-width meegeven of een standaard width.

**Jos van Marrewijk** · 10-06-2010, 16:38

Oké, want die manier van M. van Dam werkt helaas niet..

**Freek G** · 10-06-2010, 16:53

@Jos, ook even een height in de ul zetten van het menu.

**Jos van Marrewijk** · 10-06-2010, 16:56

@Freek,

Hartstikke bedankt! Het probleem met het onderelkaar schuiven van de menu-buttons is nu opgelost, heb alleen nog een oplossing nodig voor het probleem met de header.

**S. van Laere** · 10-06-2010, 17:13

<div id="menu">
<ul id="menu">

Volgens de HTML specificatie dient een id uniek te zijn, dus maak er dan een class van.
Ook je twitter menu bevat ongeldige HTML:
<title>ZoozioCMS ~ Inloggen</title>
<link href="style.css" rel="stylesheet" type="text/css" />

En verander POST naar:
<form method="post" action="">

Los dat op en je pagina zal valideren zo vermoed ik.

**Jos van Marrewijk** · 10-06-2010, 17:14

Zal ik doen, maar dit verhelpt niet mijn probleem...

**Freek G** · 10-06-2010, 17:14

Jos, ik heb zelf gekeken in Safari (op mijn Mac) maar zag het probleem niet. Kan je misschien een screenshot plaatsen?
Aanvullend bericht:
En je moet even de height van de ul.menu op 50 zetten ipv 56.. Het rechter plaatje wordt nu namelijk naar beneden geschoven.

**Jos van Marrewijk** · 10-06-2010, 17:17

@Freek

Ik heb het probleem zelf ook niet, maar ik hoor van andere mensen dat die 2 plaatjes rechts in de header (witte 'golf' en server/pc) naar beneden zijn geschoven in IE8 en Safari, ik heb hier zelf dus geen screenshot van...

Ik hoop dat u mij alsnog kunt helpen.

PS: Ze hebben dat o.a. als ze het scherm verkleinen.(wat ik dus ook had met het menu, maar dat is fixed)

**Freek G** · 10-06-2010, 17:23

Vraag de mensen om nog eens te kijken.. Het kan zijn dat het menu de bug was, want die werd hoger als je je scherm verkleinde.

**Jos van Marrewijk** · 10-06-2010, 18:13

Hier een screenshot van het probleem:
http://i45.tinypic.com/ziosua.jpg

**S. van Laere** · 10-06-2010, 18:26

Origineel gepost door Jos van M

Hier een screenshot van het probleem:
http://i45.tinypic.com/ziosua.jpg

En dat is een probleem omdat?
Zelfde verkrijg je met Windows/Firefox, als het venster maar smal genoeg is.

[CSS] Niet cross-browser

[CSS] Niet cross-browser

Tags voor dit bericht

Quick links

Sitedeals

Andere media

Over Sitedeals