SitePoint Sponsor

User Tag List

Results 1 to 18 of 18
  1. #1
    SitePoint Zealot
    Join Date
    Aug 2004
    Location
    Michigan
    Posts
    156
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Please help. $5.00 gratuity

    Ok guys, I have an important project I need to finish up and Iíve run into a few bugs. As it says in the title, Iím offering a small $5.00 incentive via PayPal to the first person that can squash these bugs for me and explain how they did it. Any code you add or modify needs to validate as XHTML 1.0 Transitional and be semantically sound. I think these problems are fairly evident and I suspect they probably aren't very difficult to fix for someone with a basic understanding of XHTML and CSS. Currently the stylesheet is inline for convenience.

    View Site

    Bug Number 1:
    Iíll start from the top and work my way down. The first bug is a cross browser inconsistency Iím getting with the #shadows div. This DIV contains a background image that repeats vertically to create the shadows on the outsides of the main content area. In Internet Explorer it tiles properly and looks as I intended it to but in Firefox it doesnít.

    Bug Number 2:
    This bug resides in the navigation and occurs in Internet Explorer. When you mouseover the individual list items, the header image is supposed to change, and it does in Firefox. I need this to work in IE also. I used Eric Meyerís method here to achieve this effect: http://www.meyerweb.com/eric/css/edge/popups/demo2.html

    As you can see, his works flawlessly in both Internet Explorer and Firefox. Iím not sure what I did wrong here.

    Bug Number 3:
    This bug occurs in Firefox but displays fine in IE. Iíve placed a red 1 pixel border around the offending DIV which you can clearly see in IE but not so well in Firefox. The name of the DIV is #content_container. It is meant to contain the #news and #start DIVS on the mainpage and will also contain subpage content. Like I said, it does what I want it to do in IE but not in Firefox. You can tell something isnít right when you view the page in Firefox because the white background has different heights. I want it to look the way it does in IE.

    Thanks for taking the time to read and to (hopefully) help me fix these problems. Unfortunately I can only PayPal the $5.00 to the first person who successfully fixes the bugs. A brief explanation of what you did to fix the bugs would be appreciated. If you have any questions before you decide to squash these annoying bugs, let me know. Once you've fixed the problems you may either upload the site to your own server or paste the code back into the thread. If you decide to upload to your server, please understand it will need to be removed after I've viewed it.

    Thanks a lot!

  2. #2
    SitePoint Wizard drhowarddrfine's Avatar
    Join Date
    Aug 2005
    Posts
    3,438
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    A third of your problems would go away if you just knew how to spell.

  3. #3
    ¨.¨ shoooo... silver trophy logic_earth's Avatar
    Join Date
    Oct 2005
    Location
    CA
    Posts
    9,013
    Mentioned
    8 Post(s)
    Tagged
    0 Thread(s)
    Oh boy $5.00!!!

    these Bugs arn't bugs IE got it wrong, anyways you need to 'clear' your floats.

    Bug 2: rethink it. use 'right' instead of 'left'. try setting 'z-index'
    Last edited by logic_earth; Mar 8, 2006 at 20:53.
    Logic without the fatal effects.
    All code snippets are licensed under WTFPL.


  4. #4
    SitePoint Zealot
    Join Date
    Aug 2004
    Location
    Michigan
    Posts
    156
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    drhowarddrfine: Thanks for the insightful response.

    Logic_earth: I'm just asking for a little bit of help. This forum is full of people asking for help and not offering anything in return (which is fine because that is the point of this forum: to help people and to learn.). Of course $5.00 isn't much, but to sit on your ace and help someone with something that might take you less than 20 minutes seems like a good deal to me.

  5. #5
    ¨.¨ shoooo... silver trophy logic_earth's Avatar
    Join Date
    Oct 2005
    Location
    CA
    Posts
    9,013
    Mentioned
    8 Post(s)
    Tagged
    0 Thread(s)
    I just did help you...i am not going to do it for you.

    clear your floats.

    use right instead of left and try z-index.
    Logic without the fatal effects.
    All code snippets are licensed under WTFPL.


  6. #6
    SitePoint Zealot
    Join Date
    Aug 2004
    Location
    Michigan
    Posts
    156
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've tried changing right to left and using z-index before. I've changed it though so you can see. I think I changed it in the right place.

  7. #7
    ¨.¨ shoooo... silver trophy logic_earth's Avatar
    Join Date
    Oct 2005
    Location
    CA
    Posts
    9,013
    Mentioned
    8 Post(s)
    Tagged
    0 Thread(s)
    Code:
     #comic_nav li:hover a img {
       position: absolute; 
       top: 46px; 
       
       right: XXpx; 
       z-index: XX;
       
       width: 435px; 
       height: 187px;
     }
    replace "XX"s with some numbers

    now clearing:

    HTML Code:
     <div id="content_wrapper">
     	..........
     	<div style="clear:both;"></div>
     </div>
    Logic without the fatal effects.
    All code snippets are licensed under WTFPL.


  8. #8
    SitePoint Zealot
    Join Date
    Aug 2004
    Location
    Michigan
    Posts
    156
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your help. I'll try that.

  9. #9
    SitePoint Zealot
    Join Date
    Aug 2004
    Location
    Michigan
    Posts
    156
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks. Clearing fixed that. How did you know it needed to be cleared there? I guess I really don't understand the clear property that well.

  10. #10
    SitePoint Wizard drhowarddrfine's Avatar
    Join Date
    Aug 2005
    Posts
    3,438
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    My insightful response may have made you look for spelling errors in your CSS but I guess not. Like logic_earth, I'm not going to do the work for you. Especially, obvious errors.

  11. #11
    ¨.¨ shoooo... silver trophy logic_earth's Avatar
    Join Date
    Oct 2005
    Location
    CA
    Posts
    9,013
    Mentioned
    8 Post(s)
    Tagged
    0 Thread(s)
    Logic without the fatal effects.
    All code snippets are licensed under WTFPL.


  12. #12
    SitePoint Zealot
    Join Date
    Aug 2004
    Location
    Michigan
    Posts
    156
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    A third of your problems would go away if you just knew how to spell.

    @drhowdrfine: Not knowing how to spell and making typos are two completely different things. I found 1 spelling error (width). Thanks for suggesting that I look for typos in the CSS.

    Thanks logic_earth.

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,797
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    How did you know it needed to be cleared there? I guess I really don't understand the clear property that well.
    Floats are basically removed from the flow and that means that a parent container knows nothing about them and will not react to them in anyway such as placing its borders around them.

    When you clear the float you force the parent around the float and regain the flow of the document back. So when you place a clearer (of some sort - see faq) after a float then the parent suddenly has some content and will extends its borders and backgrounds around the cleared element.

    When you clear a float with clear:both you are saying don't take any more notice of the float and start the flow of the document from here. (clear:right and clear:left applies to clearing floats on one side or the other. Clear:both ensures no floats are either side.)

    The faq has a large entry on floats that is worth reading

    BTW please don't offer remuneration in theses threads. In these parts of the forums help is freely given and you should only offer money in the looking to hire section.

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

    Bug 2)

    You have applied the hover to the list tag and ie only understands hover on anchors so you need to apply the hover to the anchor instead. Ypu will need to set the anchor to display:block and give it a height.

    Then you also need a fix for ie as something needs to change on a:hover before ie will implement a:hover img (a fact missing from eric meyers demo if i remember correctly)

    Code:
    #comic_nav ul li a{
    display:block;
    height:24px;
    }
    a:hover {visibility:visible}/* ie bugfix */
    #comic_nav li a:hover img {/* not li:hover a */
    position: absolute; 
    top: 46px; 
    right: 250px; 
    width: 435px; 
    height: 187px;
    z-index: 10;
    }
    It now works the same in both browsers

  15. #15
    SitePoint Zealot
    Join Date
    Aug 2004
    Location
    Michigan
    Posts
    156
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your help very much Paul. I really appreciate the explanation and the time you took to fix that for me! It works perfectly.

    I noticed though that if I change the size of the viewport, the mouseover image moves (which I expect because it is absolutely positioned). How can I ensure that the mouseover image appears over the default_header.gif image?

  16. #16
    SitePoint Zealot
    Join Date
    Aug 2004
    Location
    Michigan
    Posts
    156
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul, disregard my PM. I glanced over the last sentence of your first post, sorry!

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

    noticed though that if I change the size of the viewport, the mouseover image moves (which I expect because it is absolutely positioned). How can I ensure that the mouseover image appears over the default_header.gif image?
    You need to create a local stacking context by adding position:relative to a suitable parent and then you can place the absolute element in relation to that parent and not the viewport.

    Code:
    #comic_nav {
      background: #000 url('http://www.masongalindo.com/eha/images/comicnav_bg.gif') no-repeat;
     width: 345px; 
     height: 187px;
     text-align: right;
     float: left;
    position:relative;
    }
    #comic_nav li a:hover img {/* not li:hover a */
    position: absolute; 
    top: 0px; 
    left:345px; 
    width: 435px; 
    height: 187px;
    z-index: 10;
    }
    That should do the trick

  18. #18
    SitePoint Zealot
    Join Date
    Aug 2004
    Location
    Michigan
    Posts
    156
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Incredible. Thanks again Paul. I don't think I've had a CSS problem that you haven't been able to solve. I appreciate it very much!

    Thanks again!

    Mason


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
  •