SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Oct 2003
    Location
    London, Ontario
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS positioning problem

    I am attempting to build my first table-less site and have run into some problems.

    I can't seem to get the menu positioned properly. It seems to work fine in Mozilla (Mac and PC), Safari and Firebird. It's only Internet Explorer that seems to be giving me grief. The main text seems to shift a bit as well when the menu is dropped, again only in Explorer.

    I have had a look at my code and can't seem to find anything, but I'm fairly new to designing with CSS so I may be missing something. Any help would be much appreciated.
    Last edited by Furious_D; Jan 8, 2005 at 08:51.

  2. #2
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Do you have the <?xml ?> declaration on your first page? If so, then drop it, because that forces IE6/Windows into quirks mode.

  3. #3
    SitePoint Member
    Join Date
    Oct 2003
    Location
    London, Ontario
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No, as far as I can tell I'm using the right declaration

  4. #4
    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,
    If you're talking about the menu being further left in IE6 than Mozilla etc then it's probably due to a margin bug in IE.

    Ie seems to almost double the left margin on a float when it is next to the viewport edge.

    You can use the child selector to give mozilla the correct co-ordinates as IE6 doesn't understand the child selector.

    Something like this (although you may need to tweak the measurements a bit:

    Code:
      #mainMenu {
      float: left;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 10px;
      margin: 3px 0px 0px -9px;
    }
    html>body #mainmenu {margin-left:-18px}
    Hope that helps.

    Paul

  5. #5
    SitePoint Member
    Join Date
    Oct 2003
    Location
    London, Ontario
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ya, that's what I was talking about. I'll try out that code you posted when I get home, thanks!

  6. #6
    SitePoint Member
    Join Date
    Oct 2003
    Location
    London, Ontario
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have implemeted your code and posted it. It seems to work fine in IE6/WIN but is messed up in Mozilla now. I'm going to keep playing around and see what I can figure out.
    Last edited by Furious_D; Jan 8, 2005 at 08:52.

  7. #7
    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,

    You've an extra closing tag in your stylesheet that is confusing mozilla.

    here:
    Code:
      html>body #mainmenu {margin-left:-18px} 
    }
    It should be
    Code:
      html>body #mainmenu {margin-left:-18px}
    It will work now

    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
  •