Simple layout problem

[kthe00]

Hi!

I am trying to create a simple webpage. When displaying it in Opera 7.23 it looks correct but when displaying it in IE 6.0 there is a small width problem.

See for yourself:
http://www.control.auc.dk/~kthe00/test/index.php

The stylesheet I am using is:
http://www.control.auc.dk/~kthe00/test/kt.css

The problem is to the upper right where the width varies in IE but not in Opera.

I dont' know much about it but I have heard about a classical widt problem in IE... something about setting widt to 99% instead of 100%... but that didn't work.

I hope you are willing to help :-)

Best regards
Kim Therkelsen

[PeOfEo]

actually, opera is the browser reading your scripts wrong, because mozilla and ie display it about the same (not the usual result). Think of a different way to do your scripts. How about making that layout fluid? Not everyone uses 1028 x 786, have your layout move to specify their needs. www.bluerobot.com has fundamental layouts, just the basic framework, I suggest modding it because it will give you what you want and be fluid. Just leave credit to them in your source.
EDIT, I see you did make it fluid, nevermind, it just stretches real funny. I would fix the nav width and make the middle stretch, in Ie the middle does not stretch but rather slides down, in mozilla the nav overlaps the content.

[kthe00]

Thank you for your answer. Your link has given me some good inspiration and I now have a fixed nav width but still I have some problems stretching the middle. In IE it can't stretch very much before it slides down. It depends on the content of the page (the index page is not good). If the middle slides down it sometimes help to reload the page some times - then it stays where it should :confused:

Another problem is that the middle is still too narrow. It is not much but I hate looking at it.

I could make alle the positions and sizes static but then it is not very nice to look at in different resolutions for instance 800x600 - but the layout is correct :-)

Do you have any idea about what to do about the middle being too narrow while maintaining it stretchable?

[Paul Jr]

Mozilla FireBird v0.7 -- Resolution 1024*764 -- PC/Windows. The content drops down below the menu. It's too wide.

[spufi]

Unrelated to your problem, but here's some issues I see with your code.

http://www.alistapart.com/articles/taminglists/

<div class="leftcontainer">
<div class="menuitem"><a class="currentmenu" href="index.php" onmouseover="lite(this)" onmouseout="lite(this)">Forside</a></div>
<div class="menuitem"><a class="menu" href="projekter.php" onmouseover="lite(this)" onmouseout="lite(this)">Projekter</a></div>
<div class="menuitem"><a class="menu" href="curriculum_vitae.php" onmouseover="lite(this)" onmouseout="lite(this)">Curriculum Vitae</a></div>
<div class="menuitem"><a class="menu" href="fritid.php" onmouseover="lite(this)" onmouseout="lite(this)">Fritid</a></div>
<div class="menuitem"><a class="menu" href="billeder.php" onmouseover="lite(this)" onmouseout="lite(this)">Billeder</a></div>
<div class="menuitem"><a class="menu" href="webkamera.php" onmouseover="lite(this)" onmouseout="lite(this)">Webkamera</a></div>
<div class="menuitem"><a class="menu" href="soeg.php" onmouseover="lite(this)" onmouseout="lite(this)">Søg</a></div>
<div class="menuitem"><a class="menu" href="links.php" onmouseover="lite(this)" onmouseout="lite(this)">Links</a></div>
<div class="menuitem"><a class="menu" href="webmail.php" onmouseover="lite(this)" onmouseout="lite(this)">Webmail</a></div>
</div>

<br><br>
Civilingeniørstuderende <br> med speciale i <br> computer vision og grafik
<!--Polyteknisk studerende -->
<!-- M.Sc. stud. in computer engineering --></b></font>
</ul>
</font>


Following examples should be redone using the header tag, <h1>, <h2>, <h3>, etc.

<b><ul><font face="verdana, sans-serif" color=#000000 size=+2>Kim Therkelsen</font></b>

<div class="titlebox">
<div class="rightdecor">&nbsp;</div>
<div class="leftdecor">&nbsp;</div>
kimtherkelsen.dk
</div>

<font face="verdana, sans-serif" color=#000000 size=+1><b>Kontaktinformation</b></font><br>

And this is totally not needed. Use margins defined in CSS to help control space between things.

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

[kthe00]

spufi:

You are right about the code is very ugly. I will try to do something about it.

The problem with:
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

is that if I remove it, all the text in the list will drop below the box and for some reason changing the margin for the content box doesn't seem to help.

[kthe00]

I have cleaned up the code in the index file.

That solved the problem with stretching. It can now stretch to fit almost any screen resolution. But the list looks wrong in Opera.

And I still have a cosmetic problem in the upper right corner. The boxes are not aligned.

[Paul Jr]

You seem to have run into another snag with FireBird. Check the screenshot.

[kthe00]

Paul:

Thank you for your reply.

I am currently adjusting the page and therefore it looks strange sometimes. I am not checking it in Firebird (allthough I should :-) ) but only checking the layput in IE and Opera.

[davidbrent]

would it be something to do with the fixed; menu?

[kthe00]

davidbrent: I am not sure but I don't think so. The menu was not fixed at first but that didn't work either. Then PeOfEo suggested to make the menu fixed and only let the middle stretch. It looks a bit nicer but still it did not solve my problem.

The problem is that the whole page is in one class (container) with a width of 92%. When loaded, the upper bar class(titlebox) is inside the container. After that comes a "leftcontainer" class holding the menu and a "rightcontainer" holding the "infobox" and a "contentbox" - also inside the container.

For some reason when having the left and right container the width can't be full 92%.
I will maybe try moving the classes loaded inside the container out and the define the width for each of them.

[kthe00]

Now it looks right in IE:
[URL=http://kimtherkelsen.dk]

but looks a bit wrong in Opera and in Netscape.:(