SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Thread: CSS Help Please

  1. #1
    SitePoint Enthusiast Telemakhos's Avatar
    Join Date
    Nov 2003
    Location
    wherever
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Help Please

    I am having trouble getting my layout to work right in IE.

    www.elivy.com/index.html <-- the site
    www.elivy.com/elivy.css <-- the CSS

    Whenever I add content to the side bar the content area drops further down. It's prefect in Firebird but IE is giving me trouble.

    Ignore the gray, that's just temporary so I can see how wide everything is.

  2. #2
    Word Painter silver trophy Shyflower's Avatar
    Join Date
    Oct 2003
    Location
    Winona, MN USA
    Posts
    10,053
    Mentioned
    142 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by Telemakhos
    I am having trouble getting my layout to work right in IE.

    www.elivy.com/index.html <-- the site
    www.elivy.com/elivy.css <-- the CSS

    Whenever I add content to the side bar the content area drops further down. It's prefect in Firebird but IE is giving me trouble.

    Ignore the gray, that's just temporary so I can see how wide everything is.
    I think you meant to have your content 210px. You have margin-left 210px. That doesn't give you a lot of room for content on a 760 px layout when your sidebar takes up 220px.
    Linda Jenkinson
    "Say what you mean. Mean what you say. But don't say it mean." ~Unknown

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

    Ie adds padding to floats automatically and therefore there isn't enough room to fit your images in the space provided. This is why the images drop below the float to make room for it.

    You will need to give ie a smaller margin-left in order to fit and also you will need to combat another bug (the ie 3pixel jog). This can be done by setting a specified width or adding a height of 1%.

    This needs to be hidden from other browsers. Here is the code to fiix all these problems:
    Code:
    #content {
     padding: 0px;
     margin-left: 210px;
     background-color: #6a6a6a;
     }
    * html #content {height:1%;margin-left:205px;}/* combat ie 3pix jog bug */
    #content img {display:block}/*get rid of bottom margin */
    I also note that you are using a hack for ie5 5.5. but it doesn't make any sense.
    your code:
    Code:
    #container {
     width: 760px;
     \width: 780px;
     w\idth: 760px;
     margin: 0px;
     margin-left: left;
     margin-right: left;
     padding: 0px;
     }
    You are telling ie5 and 5.5. to have a width of 780px but I can't see why? Unless you have a reason for it then get rid of it.

    Also you have an incorrect attribute there:
    Code:
    margin-left:left;
    margin-right:left;
    I think you mean:
    Code:
    margin-left:auto;
    margin-right:auto;
    This will centre the layout in compliant browsers (although you will have to add text-align:center to a parent element to make ie5 and 5.5. center).

    Hope this helps.

    paul

  4. #4
    SitePoint Enthusiast Telemakhos's Avatar
    Join Date
    Nov 2003
    Location
    wherever
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I didn't want it centered, I wanted it to the left.

    But thanks a lot both of you! It works now!

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,272
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    I didn't want it centered, I wanted it to the left.
    It's still the wrong attribute!! margin-leftx (where xx must be a unit of measurement e.g. 0px or 10px or 10% etc). It worked in your case because the browsers ignored it altogether so just take it out.

    Glad you've got it working otherwise.

    Paul


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
  •