Website Design Forum

**Korzonek** · 10-13-2006, 11:08 AM

I'm making my site and I've chosen to make the width of the div.container in"%" .But still in 800x600 resolution everything moves slightly so It dosent look good...Could some one tell me what I'm doing wrong??
this Is the code...(I've validate this in W3C)
I've cut out the text so it would more understandable besides it was in polish

and it works in FF,IE and I think in Opera also..

<?xml version="1.0" encoding="windows-1250"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250" />
<title>Schizofrenia.net.pl</title>
<style type="text/css">

div.container {width:100%; height:100%;}

img.mp {float:left;}

div.header {color: #FFC0CB; width: 100%; text-align: center; height: 10%; position: absolute; left: 0%; top: 0%; background: #FF9900; bottom: 0%}

div.footer {color: #FFC0CB; background-color: #CC0000; clear: left; width: 100%; text-align: center; height: 3%; position: fixed; bottom: 0%; float: left; left: 0%; }

div.left {float: left; width: 15%; text-align: left; position: absolute; top: 10%; left: 0%; background-color: #FF9900; height: 87%; bottom: 90%; }

div.right {float: right; width: 15%; text-align: right; position: absolute; top: 10%; right: 0%; background-color: #FF9900; height: 87%; bottom: 90%; }

div.content {width: 70%; text-align: left; background: url(sianob.jpg); height: auto; position: absolute; top: 10%; left: 15%; right: 15%; margin-right: auto; margin-left: auto; }

</style>

</head>
<body>

<div class="container">
<div class="header" > <img src="../Grafika/Loga/mologoS1.gif" width="60" height="60" alt="logo" /> <img src="baner.gif" width="468" height="60" alt="baner"/></div>
<div class="left">

<script type="text/javascript" src="menu_.js" alt="menu"></script>

</div>
<div class="content">
<h2>Free Web Building Tutorials</h2>
<p>At W3Schools you will find all the Web-building tutorials you need,
from basic HTML and XHTML to advanced XML, XSL, Multimedia and WAP.</p>
<p>W3Schools - The Largest Web Developers Site On The Net!</p>
<img class="mp" src="../Grafika/Loga/ologoS10.gif" width="149" height="153" alt="logo"/>

</div>
<div class="right">

<script type="text/javascript" src="menu_.js" alt="menu" ></script>

</div>
<div class="footer">Copyright 2006 by Różowe Słonie w Seledynowe Groszki.</div>
</div>
</div>
</body>
</html>

**LadynRed** · 03:46 PM

Quote:

<?xml version="1.0" encoding="windows-1250"?>

Having THAT in the document will throw IE into Quirks Mode. Unless you're using PHP, take it out.

On top of that, IE doesn't support XHTML 1.1, go back and use 1.0 in Strict mode.

Your other problem is all the positioning. Not necessary and causes problems of it's own. Learn to use the normal document flow and use floats where needed.

**Korzonek** · 05:44 AM

So I cant use XHTML 1.1 as long as I want my page to be working on IE??
I've used all of that positioning because it was messd up while viewing it in IE and FF and now it looks good...it could use a bit of tiding up but it would all crash again...i found something like that and they said that using this will make the IE read xml...but I dont have a clue how to use it properly...;(

<?xml version="1.0" encoding="iso-8859-1"?>
<?xml-stylesheet type="text/xsl" href="copy.xsl"?>
<!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>
<stylesheet version="1.0"
xmlns="http://www.w3.org/1999/XSL/Transform">
<template match="/">
<copy-of select="."/>
</template>
</stylesheet>