SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Member
    Join Date
    Jul 2005
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help with IE layout. Safari, FF, Chrome=good

    Can someone please help me figure out how to fix all of the alignment issues in IE?

    I imagine that I need some conditional comments to load an alternative CSS file, but not sure what changes I can make to the CSS to get this working in IE as well.

    You can find the index at http://www.JayceMcQuerter.com/DEV

    and a Safari screenshot of how it SHOULD look at: http://www.JayceMcQuerter.com/DEV/safari_correct.jpg


    In the index, the first 3 links in the nav are functional (I've Got Answers, Wine Director, Wine Snob). There are alignment issues on the index, along with throughout the 3 other pages. Disregard the other 4 navigation items for now—I do not have images and content there yet.

    The links in the top right corner should all be functional.

    Any help would be appreciated. An article came out about me yesterday, so I am rushing to get this up before traffic starts coming to the site! Thank you!

  2. #2
    SitePoint Guru
    Join Date
    Jan 2007
    Posts
    936
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I don't see the middle text in the HTML. Is it an image?

  3. #3
    SitePoint Member
    Join Date
    Jul 2005
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There is not any text in the middle in the index.html file. Go to the first link in the nav (I've Got Answers) which takes you to accred.html. That is the page that I took a screen shot of. The text is in the html document (but the opening copy, "Rumor has it.." is in image that is sourced in the html.

  4. #4
    Non-Member
    Join Date
    Jun 2010
    Location
    47°27′35″N 26°18′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i don't see a "Safari, FF, Chrome=good".

    position:fixed is a bad option and solution. also the position: absolute. also, the scroll bars are present even when there is no content to overflow the viewport.

    you think you have a good thing going over there with those. try making your browser window smaller and see how the content gets cut out top and bottom.

    to start with: you have <div id="jayce_photo"/> which is not needed. use the body background for that.

    and make another layout that's not based on fixed and absolute positioning

  5. #5
    SitePoint Member
    Join Date
    Jul 2005
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your help.

    The issue with position:fixed is that I need the navigation div not to scroll out of view when the user is scrolling the page to read the additional text. Is there a way have the navigation div not scroll without the fixed position? Likewise, I have position fixed on the logo div and also the content in the upper right hand corner. This is because I want it all to stay there when scrolling the text that overflows the viewport. Do I have to give this up?

    The scroll bars are present because I have a very tall black image set behind everything. The showcase images (triggered on and off by roll-over states in the navigation) do not cause an overflow, but when the page reverts back to text content there IS an overflow. This gives the viewport scroll bars and make my nav images jump back and forth about 20px. Forcing there to ALWAYS be scroll bars was the only way I could find to solve this issue.

    You're right about the jaycephoto. I can just set that to body background instead of another div.

    What sort of positioning do I need to use? Just use relative? and give up my ability to have the navigation in a fixed position when scrolling?

  6. #6
    Non-Member
    Join Date
    Jun 2010
    Location
    47°27′35″N 26°18′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    make a layout that works properly. you are trying to many things there.

    start from a normal layout and work your way up to a different user experience. but start from a real user experience. so far your site its so confusing (frustrating would be the word) my cat wants to eat it

    and if you want so bad that your picture be the center of attraction, use

    body { background: url("you.png") fixed top left no-repeat; }

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,825
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    As noonnope said above you may need to re-think this a little as it won't really be usable the way it is.

    Fixed positioning is ok in small doses for things like a small header or footer but isn't really suitable for anything that will go below the fold such as your side nav.

    I would change that right nav into a horizontal nav across the top of the page and under the header (and make it a bit smaller). I'm sure it could be browser text rather than images anyway but if you are doing an image swap then use css and not masses of javascript.

    Then your main text can run wider alongside your big image which could be fixed to the body as mentioned above. Set a margin-left on the content to keep it clear of the image.

    I'm not sure what those image rollovers are for but they don't do a lot for me. They would be better off on their own page.

    Too much absolute positioning makes for a layout that is too rigid and unusable and you need to let pages flow a bit better.

    I did actually try to revive your page but it wouldn't come round

  8. #8
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    I attempted to fix this for about 5 minutes, but alas I'd feel guilty even giving you a fix due to how poorly that page is (sorry)

    Recode it
    Off Topic:

    No need to PM me, I read all threads
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  9. #9
    Non-Member
    Join Date
    Jun 2010
    Location
    47°27′35″N 26°18′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Off Topic:

    this OP is a real player

    i guess we all got the same PM:

    "Reading through other posts, you seem to be the one that I should ask for help. Can you take a look at this issue for me?"

    he should apply to write nigerian letters

  10. #10
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    I suspect that if this site is important and likely to get a bunch of traffic soon, it likely needs to be rewritten entirely by a professional.

    http://stommepoes.nl/wine1.png
    http://stommepoes.nl/wine2.png
    http://stommepoes.nl/wine3.png

    unless you're hitting the architectural graphics crowd, you'll have to give up your idea of navigation that doesn't scroll, because nobody's got a screen that tall (well, it fits ok if I F11 to full-screen but I can't actually browse that way : )

  11. #11
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by noonnope View Post
    Off Topic:

    this OP is a real player

    i guess we all got the same PM:

    "Reading through other posts, you seem to be the one that I should ask for help. Can you take a look at this issue for me?"

    he should apply to write nigerian letters
    Off Topic:


    I've read through many posts on here, and you seem the far-and-away best person to ask for help

    Can you please see my post here? Thanks! http://www.sitepoint.com/forums/show...25#post4705125
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  12. #12
    Non-Member
    Join Date
    Jun 2010
    Location
    47°27′35″N 26°18′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Off Topic:

    the OP has suddenly grow on me, i respect him even more after seeing what RyanReese got!
    talking about a man with a problem to solve. he actually has a play for each one of us! well, at least, he's not cheap

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,825
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Off Topic:


    This is the message:

    After reading through a lot of posts, you seem to be the right person to ask for help. Can you take a look at this for me?



    Note to OP - It is bad etiquette to PM members asking for help especially when you have PM'd multiple members.

    Members help out in the forums free of charge and should not be badgered into helping you. If you want paid help then visit the marketplace section of the forums.

    I think we've helped all we can here so i'm closing the thread.

    If you have new issues or have started a re-design and want help then please post a new thread but please don't PM members to help you as that is against the guidelines.


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
  •