#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2008
    Posts
    59
    Rep Power
    15

    Various positioning problems in IE and Safari


    I was told earlier that absolute positioning was a bad practice, at least to do it excessively in code, so I learned about margins and floats and fixed my page to where I want it. I test my page in Firefox 3 and Safari 4 (beta) and they both look exactly how I want the page to look. However, IE doesn't like a few things:

    1. The top header positioning doesn't match up where it should (leaving yellow showing, which I placed behind the images to make sure I was aligning the images correctly rather than using the same background color).

    2. The navigation by letter (A-Z and View All) is positioned right under the light blue bar when it should be in the middle of the light blue bar.

    Safari 3 has the same problem mentioned in #2 but is positioned level with the bottom of the light blue bar.

    Any suggestions and solutions would be most appreciated as I have tried looking for some explanation/solution to this problem for a few days now. Thanks ahead of time.

    P.S. the link is advance.byu.edu/sgtest
  2. #2
  3. Eager to learn
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Jan 2009
    Location
    Maryland, USA
    Posts
    2,223
    Rep Power
    2184
    I'm sorry, I have to laugh at this result from the validator. You tried using float:both;

    Originally Posted by Jigsaw
    float both is not a float value : both
    . Sorry, it seems I can't look at your page in IE. My IE tab extension for Firefox is crapping up on me..it's not loading your page. (Is the issue in IE7 or IE6, or both?)
    "Quality of responses may vary. I reserve the right to change my mind for any reason what-so-ever without admitting I was wrong. I'd prefer to change your mind however, it's easier on my ego". - jwdonahue

    "so no-one has actually bothered to post an original quote ? what's wrong with making up your own?"
    - marnixR
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2008
    Posts
    59
    Rep Power
    15
    It is in IE6 and 7 but I had practically given up on IE6, but if we can get it to work too, that would be great. And sorry about the float:both; I just learned about them a little bit ago and must have read something wrong. I tried display:inline but it didn't seem to have an effect. Is another part of my code overriding this command?
  6. #4
  7. Eager to learn
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Jan 2009
    Location
    Maryland, USA
    Posts
    2,223
    Rep Power
    2184
    Use padding instead of margin. use this..

    css Code:
     
    div.navletter{margin:0;padding:9px 9px 9px 15px;}


    Works perfectly
    "Quality of responses may vary. I reserve the right to change my mind for any reason what-so-ever without admitting I was wrong. I'd prefer to change your mind however, it's easier on my ego". - jwdonahue

    "so no-one has actually bothered to post an original quote ? what's wrong with making up your own?"
    - marnixR
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2008
    Posts
    59
    Rep Power
    15
    It does work perfectly! Thanks for help on issue #2.

    Now for updates on issue #1. I applied some changes to the top header and got rid of the yellow background and readjusted the margins and it seems to work great in all browsers. Now the second level of the masthead (the "BYU STYLE GUIDE) is messed up in IE6 at least. I can't get onto the other computer I was using to test it in IE7 just yet, but I assume it would be close to the same. I think the issue may be arising from the fact that I have a search bar on top of a jpeg in the upper right corner but I'm not sure. Any help would be great!
  10. #6
  11. Eager to learn
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Jan 2009
    Location
    Maryland, USA
    Posts
    2,223
    Rep Power
    2184
    Ah, I see you went on Sitepoint. RyanReese is my brother actually I think the issue is coming from the jpeg, but I can't be positive because I don't have IE6 on this laptop.

    ps. If you could, please let RyanReese know on Sitepoint that a guy called Eric Reese (aka Skipt) on DevShed solved your probllem number 2.
    "Quality of responses may vary. I reserve the right to change my mind for any reason what-so-ever without admitting I was wrong. I'd prefer to change your mind however, it's easier on my ego". - jwdonahue

    "so no-one has actually bothered to post an original quote ? what's wrong with making up your own?"
    - marnixR
  12. #7
  13. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2008
    Posts
    59
    Rep Power
    15
    i just figured i should post on a few forums to get faster responses and different ideas. i hope that's kosher. and sure, i'll let your brother know that you beat him to the solution.

    also, what would be a good way to fix the text portion of my site since it is coming from a database? all my ul, li, and blockquotes seem to have been destroyed with the *{margin:0;padding:0;}

    Comments on this post

    • Skipt agrees : :)
    Last edited by b_radikal; June 4th, 2009 at 05:23 PM. Reason: needed to add a bit
  14. #8
  15. Eager to learn
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Jan 2009
    Location
    Maryland, USA
    Posts
    2,223
    Rep Power
    2184
    Thank you hehe. But don't make it sound like I asked you..

    Incidentally, what do you mean kosher? I don't blame you for posting multiple forums.

    All you have to do is reset the margins and padding for the elements. It might be a tedious task, but it is the only way I can think off the top of my head, besides recoding the layout, to fix the margin and padding issue, since those are the only things that reset affects.
    Last edited by Skipt; June 4th, 2009 at 05:28 PM.
    "Quality of responses may vary. I reserve the right to change my mind for any reason what-so-ever without admitting I was wrong. I'd prefer to change your mind however, it's easier on my ego". - jwdonahue

    "so no-one has actually bothered to post an original quote ? what's wrong with making up your own?"
    - marnixR
  16. #9
  17. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2008
    Posts
    59
    Rep Power
    15
    Well that seems to have solved everything for me as far as CSS goes. Thanks for your help!

    oh, and i guess kosher might have just been something we used in school as another way of saying it's acceptable.
  18. #10
  19. Eager to learn
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Jan 2009
    Location
    Maryland, USA
    Posts
    2,223
    Rep Power
    2184
    Oh ok, well on sitepoint, i see RyanReese has responded. Could you post this? "

    "No, the solution Eric gave me fixed my problem in all browsers. He said changing it to padding works, and that the real error was likely a margin collapse. Sorry Ryan, seems he beat you to the answer on this problem "

    Thanks if you can
    "Quality of responses may vary. I reserve the right to change my mind for any reason what-so-ever without admitting I was wrong. I'd prefer to change your mind however, it's easier on my ego". - jwdonahue

    "so no-one has actually bothered to post an original quote ? what's wrong with making up your own?"
    - marnixR

IMN logo majestic logo threadwatch logo seochat tools logo