PHPhulp.nl PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact
M

[Opgelost] FF goed IE slecht...

Door Mebus Hackintosh op 02-01-2007 14:31
605 views
Ik heb nu een simpele layout:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>

	<head>

		<title></title>

		<style type="text/css" media="screen">

			*
					{
					margin: 0px;
					padding: 0px;
					}

			body
					{
					background-color: #CCAC8F;
					}

			#container
					{
					background-color: #BF8D60;
					margin: 0px auto;
					width: 650px;
					height: 500px;
					}

			#content
					{
					float: left;
					background-color: #E6D9CF;
					margin: 10px;
					width: 420px;
					height: 200px;
					}

			#menu
					{
					float: right;
					background-color: #E6D9CF;
					margin: 10px;
					width: 180px;
					height: 200px;
					}

			#menu ul
					{
					list-style-type: square;
					margin-left: 30px;
					margin-right: 15px;
					}

			#menu li a
					{
					font-family: Tahoma;
					font-size: 10px;
					margin: 5px;
					padding: 3px 0px 3px 7px;
					background-color: #E69573;
					text-decoration: none;
					width: 100%;
					display: block;
					}

			html>body #menu li a
					{
					width: auto;
					}

			#menu li a:hover
					{
					font-family: Tahoma;
					font-size: 10px;
					background-color: #BF5A30;
					}

			h2
					{
					background-color: #806B59;
					margin: 5px;
					text-align: center;
					}

		</style>

	</head>

<body>

<div id="container">

	<div id="content">

		<h2>Content</h2>

	</div>

	<div id="menu">

		<h2>Menu</h2>

		<ul>

			<li><a href="http://localhost:8080/">Home</a></li>
			<li><a href="http://localhost:8080/">Home</a></li>
			<li><a href="http://localhost:8080/">Home</a></li>

		</ul>

	</div>

</div>

</body>
</html>


In FF werk ie goed maar in IE schuift het menu onder de content...

Is hiervoor een oplossing?

GR. mebus
P
Paul K
02-01-2007 14:39
kan je ff screenie posten?
Martijn Wieringa
02-01-2007 14:42
Na wat testen valt me dit op:



html>body #menu li a
{
	width: auto;
}


wordt (blijkbaar) niet toegepast..
als ik um aanpas naar




#menu li a
{
	width: auto;
}


werkt ie wel..

succes!
M
Mebus Hackintosh
02-01-2007 14:43
Pholeron schreef op 02.01.2007 14:42
Na wat testen valt me dit op:



html>body #menu li a
{
	width: auto;
}


wordt (blijkbaar) niet toegepast..
als ik um aanpas naar




#menu li a
{
	width: auto;
}


werkt ie wel..

succes!


Het is nu al wat beter ja:) nouw nog even rotzooien met die margins en paddings...
Martijn Wieringa
02-01-2007 14:44
ps: in IE 7 zijn er ook weer een boel zaken m.b.t. het stylen via CSS veranderd. Ik heb deze code echter getest in 6.0.29....
M
Mebus Hackintosh
02-01-2007 14:45
Als je de site in FF bekijkt is ie goed en zo zouw ik hem ook in IE willen hebben enig idéé wat dan zouw moeten veranderen?
Martijn Wieringa
02-01-2007 14:50
Als je in plaats van 'float' een absolute positionering instelt voor de 'content-div' en 'menu-div' geeft dit misschien minder 'drastische' problemen als bijv. de inhoud van bepaalde vakken te groot wordt?

M
Mebus Hackintosh
02-01-2007 15:05
Ik heb het al opgelost:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>

	<head>

		<title></title>

		<style type="text/css" media="screen">

			@import url("css-FF.css") all;
			@import: url("css-IE.css");

		</style>

	</head>

<body>

<div id="container">

	<div id="content">

		<h2>Content</h2>

	</div>

	<div id="menu">

		<h2>Menu</h2>

		<ul>

			<li><a href="http://localhost:8080/">Home</a></li>
			<li><a href="http://localhost:8080/">Home</a></li>
			<li><a href="http://localhost:8080/">Home</a></li>

		</ul>

	</div>

</div>

</body>
</html>


http://www.gigadesign.be/tabel/css_import.html

GR. mebus

Reageren

Inloggen om te reageren