SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Dec 2004
    Location
    germany
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    1px problem at ie

    hi all,
    i really really need your help. i got a weird problem with css and ie at a page i'm doing for my diploma.
    you can visit the page here.
    everything works fine with mozilla, firefox, opera, konqueror and safari. but with ie i'm getting a weird problem.
    on the right i have an absolute positioned element with the pic and the elements "Hilfsmittel für Barrierefreiheit" and "Weitere Links". it ends here, the rest of the grey column is the background-color of another element.
    in ie6 it seems as if this absolute positioned element is moved 1px to the left and overlaps the darkblue border (the border is from the content-element). when you resize the window slowly you'll see that the absolute positioned element is moving 1px to the left and right in turn.
    i'm searching for a solution since a few days now...but found noone with the same problem. i'd be so happy if i got this problem solved....!!
    thanks for your help!!
    jule

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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&uuml;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&uuml;s &uuml;berspringen und direkt zum Inhalt" accesskey="2" tabindex="0">zum 
    Inhalt</a><br />
    <a href="#mainMenu" title="zum Hauptmen&uuml;" accesskey="3" tabindex="0">zum 
    Hauptmen&uuml;</a><br />
    <a href="#contextMenu" title="zum Kontextmen&uuml;" accesskey="5" tabindex="0">zum 
    Kontextmen&uuml;</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&uuml;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&uuml;:&nbsp;</a></span> 
      <span class="hidden">Ge&ouml;ffneter Men&uuml;punkt&nbsp;</span> <span class="openMainLink">Start&nbsp;</span> 
      <!-- tabindex = 1 -->
      <span>|&nbsp;</span> <a href="about.php?inverted=" title="zu Informationen &uuml;ber uns" tabindex="2">&Uuml;ber 
      uns</a> <span>&nbsp;|&nbsp;</span> <a href="projects.php?inverted=" title="zu den Forschungsprojekten" tabindex="3">Projekte</a> 
      <span>&nbsp;|&nbsp;</span> <a href="studies.php?inverted=" title="zu Informationen zum Studium" tabindex="4">Studium</a> 
      <span>&nbsp;|&nbsp;</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&uuml; 
    	zum ge&ouml;ffneten Men&uuml;punkt im Hauptmen&uuml;&nbsp;:</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"> &nbsp; </div>
      <!-- global menu with contact, search, sitemap ,.. -->
      <div class="globalMenu"> <span class="hidden">Globales Men&uuml;&nbsp;:</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&uuml;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"> &nbsp; </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&uuml;r Barrierefreiheit:</a></span> <span class="accesskeys">Tastaturk&uuml;rzel:</span> 
    		<ul>
    		  <li>0: Hilfe</li>
    		  <li>1: zur Startseite</li>
    		  <li>2: direkt zum Inhalt</li>
    		  <li>3: Hauptmen&uuml;</li>
    		  <li>4: Suche</li>
    		  <li>5: Kontextmen&uuml;</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&auml;t T&uuml;bingen. Neues Browser-Fenster wird ge&ouml;ffnet." tabindex="20">Universit&auml;t 
    			T&uuml;bingen</a></li>
    		  <li><a href="http://www.informatik.uni-tuebingen.de" target="_blank" title="zum Informatikinstitut der Uni T&uuml;bingen. Neues Browser-Fenster wird ge&ouml;ffnet." tabindex="21">Wilhelm 
    			Schickard Institut (WSI) f&uuml;r Informatik</a></li>
    		  <li><a href="http://www.uni-tuebingen.de/ub" target="_blank" title="zur Universit&auml;tsbibliothek. Neues Browser-Fenster wird ge&ouml;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&ouml;ffnet." tabindex="23">WSI-Bibliothek</a></li>
    		</ul>
    	  </div>
    	  <div class="externalBorder"> &nbsp; </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"> &nbsp; 
    	  <!-- insert content here -->
    	  <a name="content">&nbsp;</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&szlig; behindertengerecht 
    		gestaltet und nun f&uuml;r Menschen mit Behinderungen, aber auch Menschen, 
    		die mit einem PDA oder Handy im Internet surfen, zug&auml;glich. Wir bitten 
    		nun um Ihre Meinung und wrden uns freuen, wenn Sie kurz einen Augenblick 
    		Zeit h&auml;tten, um unser <a href="feedback.php?inverted=" title="zum Feedback-Formular" tabindex="25">Feedback-Formular</a> 
    		auszuf&uuml;llen. </p>
    	  <br/>
    	  <h3>15.10.2004: Tutoren/Tutorinnen gesucht!</h3>
    	  <p>F&uuml;r das Basispraktikum Technische Informatik suchen wir weiterhin 
    		Tutoren/Tutorinnen! Bitte bei ... melden. </p>
    	  <br/>
    	  &nbsp; <br />
    	  &nbsp; <br />
    	  &nbsp; <br />
    	  &nbsp; <br />
    	  &nbsp; <br />
    	  &nbsp; <br />
    	  &nbsp; 
    	  <!-- 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"> &nbsp; </div>
    <!-- footer contains contact information -->
    <div class="footer"> <span class="hidden">Kontaktinformationen: </span> <span>Universit&auml;t 
      T&uuml;bingen - Wilhelm-Schickard-Institut f&uuml;r Informatik - Lehrstuhl Technische 
      Informatik - Prof. Rosenstiel - Sand 13 - 72076 T&uuml;bingen<br/>
      Tel. (07071) 29 - 7 89 56&nbsp;&nbsp;&nbsp;&nbsp;-&nbsp;&nbsp;&nbsp;&nbsp;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 &Auml;nderung: 24.11.2004 </div>
      <div class="copyright"> Universit&auml;t T&uuml;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

  3. #3
    SitePoint Member
    Join Date
    Dec 2004
    Location
    germany
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thanks So Much!!

    hi paul,
    you really can't imagine what you did for me
    thanks so much for your help!!!
    i chose the alternative with the right-inner class.
    many greetings from germany!
    jule

  4. #4
    SitePoint Member
    Join Date
    Sep 2007
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is very old topic, but I found another solution on this issue and I'd love to share it!

    If you're dealing with background images which are to be lined up exactly, you can extend a background image to 1px with exactly the same colors on 2px right corner.
    set absolute positionning to -1px so other user agents will show only 1px of the corner. ie6 will show 1px or 2 px. This is gonna work out if only backgrounds transform one into another smoothly.


    PS: This is not a 100% solution comparing to Paul O'B's but this does'n involve changes into the code.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Thanks for sharing


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •