Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Navigation Alignment Issue in IE only. Help!

    Hello - I've been working on my portfolio site for awhile now (and I don't know all that much about code, just how to make it look OK on the user end). I use a jQuery effect on the two instances of navigation on my site: http://quinnianniciello.com which works fine in both Firefox & Safari.

    The problem happens in Internet Explorer. The leftmost "button" floats up on top of the others in both rows for no reason, whereas they should be centered on the page. I apologize that the code is probably ridiculously messy - I still need to go through and clean up a bunch of stuff - but I am stuck trying to make it work in IE. The weird thing is it used to, a friend of mine fixed it with a text-center property once, but now I don't know what to do...

    SO, if anyone has the time to look at the source code on my site I would be very grateful!

    This is the site where I learned about the jQuery effect: http://jqueryfordesigners.com/image-fade-revisited/

    This is another site I have been looking at in my search for answers, maybe it is more clear to you?!: http://matthewjamestaylor.com/blog/b...rowser-support

    Again, thanks for any help!

  • #2
    New Coder
    Join Date
    Dec 2009
    Posts
    27
    Thanks
    0
    Thanked 2 Times in 2 Posts
    You have set the width of the navigation UL to 1000px, normally you could design the site for 1024px width screen resolution. Actual window width will vary in ie, opera, and firefox.

    In your case set the UL id=navigation2 width to 980px... you navigation bar will look perfect.

    for more html tutorials

    http://www.******************

  • #3
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I tried changing the width like you said, but now it bumps the farthest right button down below (in both Safari & Firefox). Is there any other solution? The "buttons" are 250px wide (1000/4) if that helps... I can never win, everyone should just use one browser!

    Update: Undid that change so it should look normal in Safari/Firefox again
    Last edited by qianniciello; 12-27-2009 at 10:27 PM. Reason: Update

  • #4
    New Coder
    Join Date
    Dec 2009
    Posts
    27
    Thanks
    0
    Thanked 2 Times in 2 Posts
    you should remember one thing,

    all user donot use the same browser resolution... most widely used is 1024 x 768.. and the height is varying.

    You could design the site for 100 percent width or for fixed width.

    I would choose 980px and reduce the button size accordingly.

    980/4

    980 will look better in IE6

    try viewing your site in different resolutions. you can find the difference.

    You just have to tweak a bit.

    let me know your improvements

    thanks

    http://www.******************

  • #5
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for your help! I was kind of hoping there would be another solution, since I think this will mean I would have to resize all of my page elements and templates (which will take a while).

    If anyone else has any ideas to make it work in IE I would be very grateful (before I have to resize the whole page 20px less).

  • #6
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Other options

    Are there any other proprieties I could try before resizing things?

    Also, if I do resize everything to 980px wide, how would this solve the problem in IE? Thanks (Sorry i'm just trying to figure it all out)

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,688
    Thanks
    22
    Thanked 1,829 Times in 1,813 Posts
    Quote Originally Posted by qianniciello View Post
    Are there any other proprieties I could try before resizing things?
    The way things fit in their containers is called the Box Model.
    The total widths of your floated menu items, plus any margin/padding/border cannot add up to a total width greater than the container your putting them in.

    Just because your box model is right doesn't mean that IE6 (and 7 and 8) can't find a way to mess it up. That browser has plenty of bugs that can affect pixel perfect layouts -

    After you fix your box model, get it working in Firefox and make sure your code is valid ... then see what IE6 does to it. If needed, some fixes can be found here - http://www.positioniseverything.net/explorer.html
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #8
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    so the only way to fix my box model is to reduce the width of everything to 980px?


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •