SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Evangelist CyberFuture's Avatar
    Join Date
    May 2001
    Location
    San Diego, CA
    Posts
    434
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    div layers not positioning right in IE only

    Hi, I have two divs in my header. One sits on top of the other and is position to 0px top and 0px left, but in IE it kind of centered itself. It looks fine in Dreamweaver, Firefox and Safari. You can view the page here: Link Removed

    Does anybody have an idea of what's going on here and how to correct it.

    Thanks, Sandra
    Last edited by CyberFuture; May 31, 2007 at 14:10. Reason: Link No Longer Good

  2. #2
    SitePoint Enthusiast
    Join Date
    Aug 2006
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The only difference I see is in IE there's more space above the "More Cheerleading Uniforms" part.

  3. #3
    SitePoint Evangelist CyberFuture's Avatar
    Join Date
    May 2001
    Location
    San Diego, CA
    Posts
    434
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What version of IE are you using? Mine is 6.

    Below are some screenshots of what it should look like and how it looks on IE6.





    I hope this helps.

  4. #4
    SitePoint Addict
    Join Date
    Apr 2007
    Location
    Phoenix, AZ
    Posts
    230
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try this. Add

    width: 100%;

    to your mLinks css definition

    Code:
    .mLinks {
    	border-bottom: solid 22px #65509D;
    	padding-right: 15px;
    	text-align: right;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	font-weight: bold;
    	padding-bottom: 3px;
    	padding-top: 38px;
    	position: relative;
                 width: 100%;
    	}
    Joe

  5. #5
    SitePoint Evangelist CyberFuture's Avatar
    Join Date
    May 2001
    Location
    San Diego, CA
    Posts
    434
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Joe

    Thank you for pointing me in the right direction. 100% width actually made the div to big, but width: 620px did the trick.

    Do you know why I needed the width? I though block level emelents without a width attribute automatically expanded to fill the advailable width. Then again we're talking about IE here.

  6. #6
    SitePoint Addict
    Join Date
    Apr 2007
    Location
    Phoenix, AZ
    Posts
    230
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    As you are aware IE has a few fun ways of doing things. I read about this in one of the CSS books I use regularly (CSS The Missing Manual). Talks a lot about certain IE issues.

    From what I have read, one of the issues is that IE6 sometimes has problems when using things like top, right, bottom or left, especially when used in conjunction with a positioning of absolute or relative. This was fixed in IE7.

    The book provided a list of "fixes" for these types of issues, so I just experimented with the code until I found one that worked for IE. Putting a height property may have worked too, I didn't try that one.

    I have only been doing CSS for a little while, so my explanation is a little basic. Hopefully one of the more experienced CSSers will shed some more light on this.

    But I am glad it worked. Make sure it still works in the other browsers, but I think it will be OK.
    Joe


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
  •