SitePoint Sponsor

User Tag List

Results 1 to 17 of 17
  1. #1
    SitePoint Addict Fire59's Avatar
    Join Date
    Aug 2003
    Location
    mn
    Posts
    272
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS absolute position in Mozilla and IE6

    I'm trying to create a site without tables. I ran into a problem with either IE or Mozilla, where the left side is not at the correct position.

    here the page
    http://www.d.umn.edu/~vuxx0062/index.php


    Can anyone see if there's something wrong with my css ?


    Thanx in advance.

  2. #2
    chown linux:users\ /world Hartmann's Avatar
    Join Date
    Aug 2000
    Location
    Houston, TX, USA
    Posts
    6,455
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    What is it supposed to look like because here it looks ok in Mozilla Firebird.

  3. #3
    SitePoint Wizard
    Join Date
    May 2003
    Location
    Berlin, Germany
    Posts
    1,829
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    Code:
    #content {
    	background-color: #FFF;
    	margin: 0;
    	margin-left: 100px;
    }
    #left {
    	background-color: #FFF;
    	position: absolute;
    	top: 146px;
    	width: 100px;
    	border-right:1px solid #000;
    }
    #left {
    	left: 0;
    }
    change that to:

    Code:
    #content {
           position:relative;
    	background-color: #FFF;
    	margin: 0;
    	margin-left: 100px;
    }
    #left {
    	background-color: #FFF;
    	position: absolute;
    	top: 146px;
    	width: 100px;
    	border-right:1px solid #000;
            left:0;
            float:left;
    }
    This may not solve the problem completely, but might point you to the right direction.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Ther reason the left column is not in line with the centre column is that your smspacer divs are different sizes in Ie and Mozilla. Therefore when you specified top :146px for yor left id it doesn't match the centre column as that has not been placed absolutely.

    Either take out the top:146px from your left id then the columns will match up but the smspacer id's will still be different sizes in moz and IE. Or (and) add this to correct the widths of the smspacer divs .

    Code:
    #smspacer img {display:block}
    This should even things out.

    BTW you shouldn't really need to use spacer divs as you can usually manage just with css. (In IE6 For small heights less than the default line height you will need to set the line-height to 0px and give the div some content such as a non-breaking space - Still not very elegant but better than lots of transparent gifs. Also with a little bit more work your two column layout could be achieved without javascript - if you wanted to of course )

    Hope this helps.

    Paul

  5. #5
    SitePoint Addict Fire59's Avatar
    Join Date
    Aug 2003
    Location
    mn
    Posts
    272
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul and DarkAngel. Paul your display:block worked. I would love it if i could get it to work without java. But i learned that from kevin yank article. Other then that i haven't had to much success with getting things to even up. And on some of my old site stuff seems to overflow so when i saw the article I jump on it. But if you could show me some stuff that would get me started so i could dump the java that would be awsome.

  6. #6
    1-800-JMULDER JMulder's Avatar
    Join Date
    May 2001
    Location
    The Netherlands
    Posts
    1,745
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul O'B - Regarding IE6 and small heights for a div. I managed to solve it by assigning a height and setting the overflow to hidden. This way I was able to keep the content of the div empty.

    Another ugly way is to assign padding to the div, but with no content this won't show up in IE5.x
    Jeroen Mulder

    w: www.jeroenmulder.com

  7. #7
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by JMulder
    Another ugly way is to assign padding to the div, but with no content this won't show up in IE5.x
    It should show if you use the box model hack.

  8. #8
    SitePoint Addict Fire59's Avatar
    Join Date
    Aug 2003
    Location
    mn
    Posts
    272
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    another question. Now that i have the left and conten match up there seems to be a problem with some extra spcace in the header area. I gave the header red background so you can see. It only appears in IE, this happen when i take out my trans.gif and replace it with some nonbreaking space.

  9. #9
    1-800-JMULDER JMulder's Avatar
    Join Date
    May 2001
    Location
    The Netherlands
    Posts
    1,745
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    vgarcia - Yeah, if you like making an ugly way uglier, it will
    Jeroen Mulder

    w: www.jeroenmulder.com

  10. #10
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by JMulder
    vgarcia - Yeah, if you like making an ugly way uglier, it will
    I never said it was pretty, just that it worked

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Quote Originally Posted by J mulder
    Paul O'B - Regarding IE6 and small heights for a div. I managed to solve it by assigning a height and setting the overflow to hidden. This way I was able to keep the content of the div empty
    Thanks for the tip, I'll try and remember that

    Quote Originally Posted by fire59
    Other then that i haven't had to much success with getting things to even up.
    Here's a simple example that lets 2 columns stay the same height, but is dependent on having both columns the same colour to achieve the effect.
    Code:
    <!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>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    <!--
    .wrapper {
     border: 1px solid black;
     width:300px; 
     background-color: #FFFFCC;
    }
    .outer {
     position:relative;/*hack for mozilla*/
    }
    .outer p {margin:0px;}
    .left {
     border-right: 1px solid #000000;
     margin-right:33%;
    }
    .right {
     width: 33%;
     float: right;
     border-left: 1px solid #000000;
     }
    -->
    </style>
    </head>
    <body>
    <div class="wrapper"> 
      <div class="outer"> 
    	<div class="right"> 
    	  <p>right content goes here</p>
    	  <p>right</p>
    	  <p>right</p>
    	  <p>right</p>
    	  <p>right</p>
    	  <p>right</p>
    	  <p>r</p>
    	  <p>r</p>
    	  <p>r</p>
    	  <p>r</p>
    	  <p>&nbsp;</p>
    	  <p>&nbsp;</p>
    	</div>
    	<div class="left"> 
    	  <p>Left content goes here </p>
    	  <p>leftcontent</p>
    	  <p>l</p>
    	  <p>l</p>
    	  <p>l</p>
    	  <p>l</p>
    	  <p>l</p>
    	  <p>l</p>
    	  <p>l</p>
    	  <p>l</p>
    	  <p>l</p>
    	  <p>l</p>
    	  <p>l</p>
    	  <p>l</p>
    	  <p>l</p>
    	  <p>l</p>
    	  <p>l</p>
    	</div>
      </div>
    </div>
    </body>
    </html>
    Only tested in IE6, mozilla 1.2 and Opera7.

    For an even better solution see doug btx's three column layout :http://www.redmelon.net/tstme/3cols2/noborder.htm

    Hope that helps.

    Paul

  12. #12
    SitePoint Addict Fire59's Avatar
    Join Date
    Aug 2003
    Location
    mn
    Posts
    272
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i think i'm the only one seeing red. It render fine in IE4, but weird on my IE version. Does anyone else see this?

    My ie version is: 6.0.2800.11606.xpsp1.020828-1920

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Try changing your smspacer (as recommended by J mulder above) to:

    Code:
    #smspacer {
     margin:0px;
     height:10px;
     background-color:#000;
     overflow:hidden;
     }
    and then take ot the &nbsp; from the smpacer div:
    Code:
    <div id="smspacer"></div>
    Hope this helps.

    Paul

  14. #14
    SitePoint Addict Fire59's Avatar
    Join Date
    Aug 2003
    Location
    mn
    Posts
    272
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank Paul and J mulder that works out great.

  15. #15
    SitePoint Addict Fire59's Avatar
    Join Date
    Aug 2003
    Location
    mn
    Posts
    272
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So i changed the site so it doesn't use java to adjust the height. And i ran into some more problems. The big one that i can't seem to figure out is to get left and right padding on the left and content div. If i apply any padding it would overflow, i'm assuming this is the float left properties.

    here's the site again:

  16. #16
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Why can't you just add padding to the inner elements as required.
    Code:
    .left h1 {padding-left:5px}
    .center p {padding-left:20px;padding-right:20px}
    Or is that not what you meant?

    Paul

  17. #17
    SitePoint Addict Fire59's Avatar
    Join Date
    Aug 2003
    Location
    mn
    Posts
    272
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    right i could but i was wondering if there's a way that i could just do it without adding padding to each of my .left and .center element.


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
  •