Hi Jule,
This is a big problem in ie when trying to line elements up exactly. Ie has a rounding bug that as you see goes up and down by 1px depensing on the size of the screen. This is also noticable on background images in the body that need to line up with other images.
The same rounding problem occurs when you add to or three elements together to make 100% and Ie makes them bigger than 100% resulting in the layout breaking.
The solution is usually to place things that need to line up in the same stacking context so that the co-ordinats are taken from the element that is being rounded incorrectly. In your case this would mean lining up your right column based on the co-ordinates of the centre content .
One way to do this would be to float the right column inside your centre content and then drag it outside the centre content with 145px negative margin.
e.g.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> -->
<!-- doctype switching activated by the transitional declaration. the browser will be more flexible and tolerant than with the strict-declaration .
there is no url declared in the doctype-declaration for the ie6 will then automatically use the standard-mode and not the tolerant transitional
mode.
there is no xml-declaration first for the ie6 ignores the doctype-declaration when there is a xml-declaration before it. -->
<html lang="de" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Wilhelm Schickard Institut für Informatik - Lehrstuhl Technische Informatik</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
/* Julia Spiegel, Diplomarbeit Barrierefreie Internetseiten, FH Wedel im WS2004/2005
in Zusammenarbeit mit der Universit?t T?bingen Lehrstuhl Technische Informatik */
body {
scrollbar-face-color: red;
scrollbar-highlight-color: #CFCFCF;
scrollbar-shadow-color: #999999;
scrollbar-3dlight-color: #999999;
scrollbar-arrow-color: #000000;
scrollbar-track-color: #EEEEEE;
scrollbar-darkshadow-color: #E6E2DA;
background-color: #ffffff;
font-family: helvetica, arial, sans-serif;
margin: 0;
}
html, body {
margin: 0;
padding: 0;
}
/* hidden text */
.hidden {
position: absolute;
left: -3000px; /* with display:none some screenreader would
read exactly that statement "display:none" */
font-size: medium;
}
/* header of the accessibility- and external-links-box */
.boxHeader {
display: block;
padding-bottom: 4px;
font-size: small;
font-weight: bold;
}
/* ---------------------- HEAD --------------- */
.head {
background-color: #ffffff;
height: 95px;
padding: 5px 0px 0px 0px;
}
/* blue line at the top */
.blueLine {
width: 200px;
height: 8px;
background-color: #003366;
float: left;
}
/* grey line at the top */
.greyLine {
margin-left: 201px;
height: 8px;
background-color: #999999;
}
/* a wrapper element for the logo and header */
.headWrapper {
position: absolute;
top: 14px;
width: 100%;
padding: 1px 0px;
background-color: #ffffff;
text-align: center;
height: 75px;
}
.logo {
height: 75px;
width: 200px;
background: url(http://stud.fh-wedel.de/~mi4254/dipl/pics/logo.gif) no-repeat;
float: left;
}
/* header */
.headText {
padding-top: 14px;
font-size: large;
font-weight: bold;
letter-spacing: 0.05em;
color: #999999;
}
/* -------------- TOP MENU -------------------------------------*/
.mainMenu {
padding: 0px 5px;
background-color: #003366;
line-height: 1.5em;
height: 1.5em;
margin-bottom: 0.1em;
letter-spacing: 0.05em;
}
.mainMenu span {
color: #ffffff;
font-size: medium;
line-height: 1.5em;
}
/* opened link in the main menu (will not be shown as a link but as text-only) */
span.openMainLink {
text-decoration: none;
background-color: #ffffff;
color: #003366;
}
.mainMenu a:link {
text-decoration: none;
font-size: medium;
color: #ffffff;
}
.mainMenu a:visited {
text-decoration: none;
font-size: medium;
color: #ffffff;
}
.mainMenu a:active {
text-decoration: none;
background-color: #ffffff;
color: #003366;
}
.mainMenu a:hover{
text-decoration: none;
background-color: #ffffff;
color: #003366;
}
/* --------------MIDDLE WITH LEFT AND RIGHT MENU----------------- */
/* container is neccessary for the border at the bottom of the left and
right column (menu) */
.container {
border-bottom: 1px #003366 solid;
background-color: #cccccc;
}
/* an element with big margin on the right and left hand -
for getting a three column-layout. the background of the enclosing container-element
is grey and lets the menus on the left and
right hand appear as if they were as long as the content */
.content_no_padding {
background-color: #ffffff;
margin-left: 200px;
margin-right: 144px;
border-left: 1px #003366 solid; /* right border for the left menu */
border-right: 1px #003366 solid; /* left border for the right menu */
}
/* this inner element of content_no_padding is just neccessary
for the padding (there was no other way because of the borders for the left and right menu */
.content {
padding: 0px 15px;
}
.content a:link {
color: #0000ff;
text-decoration: none;
font-weight: bold;
font-size: medium;
}
.content a:visited {
color: #6633cc;
text-decoration: none;
font-weight: bold;
font-size: medium;
}
.content a:active {
color: #6633cc;
text-decoration: none;
font-weight: bold;
font-size: medium;
}
.content a:hover{
text-decoration: none;
font-size: medium;
font-weight: bold;
letter-spacing: 0em;
}
/* image on the left hand of the content (bottom) */
.layoutImgLeft {
margin-left: -215px; /* 200px border+15px content-padding*/
width: 200px;
}
.layoutImgLeft img {
border-top: 1px #003366 solid;
border-bottom: 1px #003366 solid;
margin-bottom: 1.5em;
}
/* menu-columns on the left and right hand */
.left, .right {
position: absolute;
background-color: #cccccc;
top: 100px;/* height from header + padding */
margin: 1.6em 0 0 0;
border-top: 1px #003366 solid;
}
/* --------------- MENU LEFT ---------------------- */
.left {
left: 0;
width: 200px;
}
/* submenu for the active entry in the main menu */
.contextMenu {
margin-top: 1.5em;
background-color: #ffffff;
}
/* the links are represented by a list */
.contextMenu ul {
list-style: none;
margin: 0px;
padding: 0;
}
/* links of the context menu will be shown as block elements */
.contextMenu a {
display: block;
width: 190px;
padding: 1px 5px 1px 5px;
text-decoration: none;
background-color: #ffffff;
border-top: 1px #999999 solid;
font-weight: normal;
font-size: medium;
color: #666666;
height: 1.5em;
line-height: 1.5em;
}
.contextMenu a:link {
text-decoration: none;
font-weight: normal;
letter-spacing: 0em;
}
.contextMenu a:visited {
text-decoration: none;
font-weight: normal;
letter-spacing: 0em;
}
.contextMenu a:active {
text-decoration: none;
font-weight: bold;
letter-spacing: 0em;
}
.contextMenu a:hover {
text-decoration: none;
font-weight: bold;
letter-spacing: 0em;
}
/* submenu of an entry in the context menu */
.contextMenu ul li ul {
list-style: none;
margin: 0px 0px 0px 25px;
padding: 0;
color: #666666;
}
/* links of a submenu */
.contextMenu ul li ul a {
display: block;
width: 170px;
padding: 1px 0px 1px 5px;
text-decoration: none;
background-color: #ffffff;
border-top: none;
font-weight: normal;
font-size: medium;
color: #666666;
letter-spacing: 0em;
line-height: 1.5em;
height: 1.5em;
}
/* active/opened link will be shown as text-only */
.shownLink {
display: block;
padding: 1px 5px 1px 5px;
width: 190px;
font-size: medium;
color: #666666;
font-weight: bold;
background-color: #ffffff;
border-top: 1px #999999 solid;
line-height: 1.5em;
height: 1.5em;
}
/* this element replaces a border-bottom for the contextMenu element.
that's neccessary for some browsers don't show the border-bottom when
the user resizes the text */
.contextMenuBorder {
background-color: #cccccc;
border-top: 1px #999999 solid;
margin-bottom: 40px;
}
/* menu on the left side under the context menu */
/* contains the contact, sitemap, search, .. */
.globalMenu {
padding: 0;
background-color: #999999;
color: #ffffff;
font-size: medium;
}
/* the links in the global menu are represented by a list */
.globalMenu ul {
list-style: none;
margin: 0;
padding: 0;
}
/* an active/openend link will be shown as text-only */
.shownLinkGM {
display: block;
padding: 1px 5px 1px 5px;
font-size: medium;
color: #ffffff;
font-weight: bold;
background-color: #999999;
border-bottom: 1px #003366 solid;
line-height: 1.5em;
height: 1.5em;
}
/* the links of the global menu */
.globalMenu a {
display: block;
width: 190px;
padding: 1px 5px 1px 5px;
text-decoration: none;
font-weight: normal;
font-size: medium;
color: #ffffff;
line-height: 1.5em;
height: 1.5em;
border-top: 1px #003366 solid;
}
.globalMenu a:link {
text-decoration: none;
font-weight: normal;
}
.globalMenu a:visited {
text-decoration: none;
font-weight: normal;
}
.globalMenu a:active {
text-decoration: none;
font-weight: bold;
}
.globalMenu a:hover {
text-decoration: none;
font-weight: bold;
}
/* this element replaces a border-bottom for the globalMenu element.
that's neccessary for some browsers don't show the border-bottom when
the user resizes the text */
.globalMenuBorder {
background-color: #cccccc;
border-top: 1px #003366 solid;
}
/* --------------------------------------- */
/* search menu */
.search {
padding: 1.5em 5px 1px 5px;
border-top: 1px #003366 solid;
}
.searchForm {
color: #ffffff;
font-size: medium;
display: inline; /* prevents line break after form */
}
input.searchField {
border: 1px #003366 solid;
}
input.searchBtn {
padding: 0;
}
/* --------------- RIGHT MENU ---------------- */
.right {
width: 144px;
right: 0px;
}
/* layout image */
/* image on the right hand of the content (top) */
.layoutImgRight {
margin-top: 1.5em;
}
.layoutImgRight img {
border-top: 1px #003366 solid;
border-bottom: 1px #003366 solid;
margin-bottom: 1.5em;
}
/*------------ accessibility advices----------- */
.accessibility {
padding: 2px 5px;
background-color: #ffffff;
border-top: 1px #003366 solid;
}
.accessibility ul {
list-style: none;
margin: 0px 0px 10px 0px;
padding: 0;
font-size: small;
line-height: 1.4em;
}
.accesskeys {
font-size: small;
font-weight: bold;
line-height: 1.4.em;
}
.accessibility a:link {
display: inline;
padding: 0;
background-color: #ffffff;
border-bottom: none;
color: #0000ff;
letter-spacing: 0em;
line-height: 1.5em;
text-decoration: none;
font-weight: bold;
font-size: small;
}
/* links in the accessibility-box */
.accessibility a:visited {
color: #6633cc;
text-decoration: none;
font-weight: bold;
font-size: small;
}
.accessibility a:active {
color: #6633cc;
text-decoration: none;
font-weight: bold;
font-size: small;
}
.accessibility a:hover{
text-decoration: none;
font-size: small;
font-weight: bold;
letter-spacing: 0em;
}
/* this element replaces a border-bottom for the accessibility element.
that's neccessary for some browsers don't show the border-bottom when
the user resizes the text */
.accessibilityBorder {
background-color: #cccccc;
border-top: 1px #003366 solid;
height: 1.5em;
}
/* --------------------------------------- */
/* external links */
.external {
padding: 1px 5px 1px 5px;
background-color: #ffffff;
color: #000000;
font-size: small;
border-top: 1px #003366 solid;
}
/* the links are listed by a list with squares */
.external ul {
list-style-type: square;
margin: 0px 5px 0px 7px;
padding: 0px 5px 0px 7px;
}
.external ul li {
padding: 4px 0px 4px 0px;
}
/* the behaviour of the external links */
.external a {
text-decoration: none;
font-weight: bold;
font-size: small;
display: inline;
padding: 0;
background-color: #ffffff;
border-bottom: none;
color: #0000ff;
letter-spacing: 0em;
line-height: 1.1em;
}
.external a:link {
color: #0000ff;
text-decoration: none;
font-weight: bold;
font-size: small;
}
.external a:visited {
color: #6633cc;
text-decoration: none;
font-weight: bold;
font-size: small;
}
.external a:active {
color: #6633cc;
text-decoration: none;
font-weight: bold;
font-size: small;
}
.external a:hover{
text-decoration: none;
font-size: small;
font-weight: bold;
letter-spacing: 0em;
}
/* this element replaces a border-bottom for the external-links element.
that's neccessary for some browsers don't show the border-bottom when
the user resizes the text */
.externalBorder {
background-color: #cccccc;
border-top: 1px #003366 solid;
}
/* ---------------- FOOTER ------------------- */
/* to hide the bottom-border of the container-element
under the content */
.overlapper {
margin-left: 201px;
margin-right: 145px;
margin-top: -0.1em;
background-color: #ffffff;
height: 1em;
z-index: 1;
}
/* footer with contact info */
.footer {
background-color: #003366;
margin-top: -0.8em;
padding: 1px 5px;
z-index: 3;
text-align: center;
}
.footer span {
color: #ffffff;
font-size: small;
letter-spacing: 0.05em;
}
/* last line with imprint, last update and copyright */
.lastLine {
padding: 4px 5px;
}
.imprint, .date, .copyright {
width: 33.3%;
font-size: small;
float: left;
}
.imprint a:link {
color: #0000ff;
text-decoration: none;
font-weight: bold;
font-size: small;
}
.imprint a:visited {
color: #6633cc;
text-decoration: none;
font-weight: bold;
font-size: small;
}
.imprint a:active {
color: #6633cc;
text-decoration: none;
font-weight: bold;
font-size: small;
}
.imprint a:hover{
text-decoration: none;
font-size: small;
font-weight: bold;
letter-spacing: 0em;
}
.date {
text-align: center;
}
.copyright {
text-align: right;
}
#right-inner {
width:144px;
float:right;
position:relative;
margin-right:-145px;
margin-top:0;
display:inline;/*ie double margin bug*/
border-top: 1px #003366 solid;
border-left: 1px #003366 solid;
}
</style>
</head>
<body>
<!-- hidden links for jumping directly to the content or one of the menus -->
<span class="hidden"> Direkte Links:<br />
<a href="index.php?inverted=" title="zur Startseite" accesskey="1" tabindex="0">zur
Startseite</a><br />
<a href="#content" title="Menüs überspringen und direkt zum Inhalt" accesskey="2" tabindex="0">zum
Inhalt</a><br />
<a href="#mainMenu" title="zum Hauptmenü" accesskey="3" tabindex="0">zum
Hauptmenü</a><br />
<a href="#contextMenu" title="zum Kontextmenü" accesskey="5" tabindex="0">zum
Kontextmenü</a><br />
<a href="#accessibility" title="zu den Hilfsmitteln zur Bedienung der Seite" tabindex="0">zu
den Barrierefreiheits-Hilfsmitteln</a> </span>
<div class="head">
<div class="blueLine"> </div>
<div class="greyLine"> </div>
<div class="headWrapper">
<div class="logo"> </div>
<div class="headText">Wilhelm Schickard Institut für Informatik - Lehrstuhl
Technische Informatik - Prof. Dr. W. Rosenstiel</div>
</div>
</div>
<!-- main menu in the darkblue horizontal blockelement -->
<div class="mainMenu"> <span class="hidden"><a name="mainMenu">Hauptmenü: </a></span>
<span class="hidden">Geöffneter Menüpunkt </span> <span class="openMainLink">Start </span>
<!-- tabindex = 1 -->
<span>| </span> <a href="about.php?inverted=" title="zu Informationen über uns" tabindex="2">Über
uns</a> <span> | </span> <a href="projects.php?inverted=" title="zu den Forschungsprojekten" tabindex="3">Projekte</a>
<span> | </span> <a href="studies.php?inverted=" title="zu Informationen zum Studium" tabindex="4">Studium</a>
<span> | </span> <a href="internal.php?inverted=" title="zu den internen Seiten, nur innerhalb des Instituts erreichbar" tabindex="5">Intern</a>
</div>
<!-- left menu (context menu and global menu) -->
<div class="left">
<!-- context menu is the submenu for the activated entry in the main menu -->
<!-- tabindices for context menu: 6-12 -->
<div class="contextMenu"> <span class="hidden"><a name="contextMenu">Kontextmenü
zum geöffneten Menüpunkt im Hauptmenü :</a></span>
<!-- list of context menu entries -->
<ul>
<li><span class="shownLink"><span class="hidden">Angezeigte Seite:</span>Aktuelles</span></li>
<!-- tabindex="6" -->
<li><a href="jobs.php?inverted=" title="zu den Jobangeboten" tabindex="7">Jobs</a></li>
</ul>
</div>
<div class="contextMenuBorder"> </div>
<!-- global menu with contact, search, sitemap ,.. -->
<div class="globalMenu"> <span class="hidden">Globales Menü :</span>
<ul>
<li><a href="kontakt.php?inverted=" title="zu den Kontaktinformationen" tabindex="13">Kontakt</a></li>
<li><a href="hilfe.php?inverted=" title="zur Hilfe" accesskey="0" tabindex="14">Hilfe</a></li>
<li><a href="sitemap.php?inverted=" title="zur Inhaltsübersicht" tabindex="15">Inhalt</a></li>
<li lang="en"><a href="en/index.php?inverted=" title="switch to english language" tabindex="16">English
pages</a></li>
<li>
<div class="search" lang="de">
<form class="searchForm" method="post" action="" name="search">
<label for="query">Suche: </label>
<br />
<input class="searchField" size="15" id="query" name="query" value="Suchbegriff" title="Suchbegriff eingeben" accesskey="4" tabindex="17"/>
<input class="searchBtn" type="submit" value="Los!" title="Suche starten" name="searchBtn" tabindex="18"/>
</form>
</div>
</li>
</ul>
</div>
<div class="globalMenuBorder"> </div>
</div>
<!-- right column with accesskeys and external links -->
<!-- end right -->
<!-- hidden hint, where the user is located. just visible in non-visual browsers or browsers that don't understand that stylesheet-link -->
<span class="hidden"> Sie befinden sich hier: Start/Aktuelles (Startseite) </span>
<hr class="hidden" />
<!-- container-element is just neccessary for the border at the bottom of the left and right column -->
<div class="container">
<!-- element content_no_padding contains the content-block-element and the borders on the left and right side (the borders
of the left and right menu-column -->
<div class="content_no_padding">
<div id="right-inner">
<div class="layoutImgRight"><img src="http://stud.fh-wedel.de/~mi4254/dipl/pics/topright.jpg" alt="" />
</div>
<div class="accessibility"> <span class="boxHeader"><a name="accessibility">Hilfsmittel
für Barrierefreiheit:</a></span> <span class="accesskeys">Tastaturkürzel:</span>
<ul>
<li>0: Hilfe</li>
<li>1: zur Startseite</li>
<li>2: direkt zum Inhalt</li>
<li>3: Hauptmenü</li>
<li>4: Suche</li>
<li>5: Kontextmenü</li>
<li>6: Farben invertieren</li>
</ul>
<a href="?inverted=true" title="Farben der Seite invertieren" accesskey="6" tabindex="19">Farben
invertieren</a> </div>
<div class="accessibilityBorder"> </div>
<!-- external links to other university-webpages -->
<div class="external"> <span class="boxHeader">Weitere Links:</span> <span class="hidden">Die
Links in der folgenden Liste werden in einem neuen Browser-Fenster geöffnet.</span>
<ul>
<li><a href="http://www.uni-tuebingen.de" target="_blank" title="zur Universität Tübingen. Neues Browser-Fenster wird geöffnet." tabindex="20">Universität
Tübingen</a></li>
<li><a href="http://www.informatik.uni-tuebingen.de" target="_blank" title="zum Informatikinstitut der Uni Tübingen. Neues Browser-Fenster wird geöffnet." tabindex="21">Wilhelm
Schickard Institut (WSI) für Informatik</a></li>
<li><a href="http://www.uni-tuebingen.de/ub" target="_blank" title="zur Universitätsbibliothek. Neues Browser-Fenster wird geöffnet." tabindex="22">Unibibliothek</a></li>
<li><a href="httP://sunny.informatik.uni-tuebingen.de/kladde3" target="_blank" title="zur Bibliothek des Informatikinstituts. Neues Browser-Fenster wird geöffnet." tabindex="23">WSI-Bibliothek</a></li>
</ul>
</div>
<div class="externalBorder"> </div>
</div>
<!-- the content-element contains the content and the layout-image at the bottom of the content on the
left side -->
<!-- tabindices for content: 25+ -->
<div class="content">
<!-- insert content here -->
<a name="content"> </a>
<!-- change header here (we need the anchor named content, and we need a header on every page !!) -->
<h2>Aktuelles</h2>
<h3>28.02.2005: Neuer, barrierefreier Webauftritt</h3>
<p>Endlich ist es soweit und der neue Webauftritt der Technischen Informatik
geht online! Die Seiten sind barrierefrei, das heiß behindertengerecht
gestaltet und nun für Menschen mit Behinderungen, aber auch Menschen,
die mit einem PDA oder Handy im Internet surfen, zugäglich. Wir bitten
nun um Ihre Meinung und wrden uns freuen, wenn Sie kurz einen Augenblick
Zeit hätten, um unser <a href="feedback.php?inverted=" title="zum Feedback-Formular" tabindex="25">Feedback-Formular</a>
auszufüllen. </p>
<br/>
<h3>15.10.2004: Tutoren/Tutorinnen gesucht!</h3>
<p>Für das Basispraktikum Technische Informatik suchen wir weiterhin
Tutoren/Tutorinnen! Bitte bei ... melden. </p>
<br/>
<br />
<br />
<br />
<br />
<br />
<br />
<!-- insert content until here -->
<!-- image on the bottom left side of the content -->
<div class="layoutImgLeft"> <img src="http://stud.fh-wedel.de/~mi4254/dipl...bottomleft.jpg" alt=""/>
</div>
</div>
<!-- end content-div -->
</div>
<!-- end content_no_padding -->
</div>
<!-- end container -->
<!-- overlapper needed for hiding the bottom-border of the container-element under the content but not under the left and right column -->
<div class="overlapper"> </div>
<!-- footer contains contact information -->
<div class="footer"> <span class="hidden">Kontaktinformationen: </span> <span>Universität
Tübingen - Wilhelm-Schickard-Institut für Informatik - Lehrstuhl Technische
Informatik - Prof. Rosenstiel - Sand 13 - 72076 Tübingen<br/>
Tel. (07071) 29 - 7 89 56 - Fax
(07071) 29 - 50 62</span> </div>
<!-- last line contains imprint, last update and copyright -->
<div class="lastLine">
<div class="imprint"> <a href="impressum.php?inverted=" title="zum Impressum" tabindex="24">Impressum</a>
</div>
<div class="date"> Letzte Änderung: 24.11.2004 </div>
<div class="copyright"> Universität Tübingen 2004 </div>
</div>
</body>
</html>
There may be other ways to do this with absolutely placing the right content in respect of a stacking context on the centre content and again dragging it wise.
The example above renders correctly in ie and firefox but I understan if you didn't want to make that big a change.
The only other answer would be to make your right content 1px smaller so that there is a space of 1px and the border will not disappear but a small gap in the right content would appear which isn't so noticable.
Hope that helps.
Paul
Bookmarks