SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2003
    Location
    Poland
    Posts
    89
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Positioning an arrow in menu, problem in IE

    Hi,

    I have a problem with positioning an image inside a menu. It works in Mozilla and Opera but in IE the image is positioned in the centre of an element.
    Here is the menu: http://gosu.pl/www2/
    Anyone knows why does it happen and how to fix that ?

    Thanks

  2. #2
    SitePoint Member
    Join Date
    May 2004
    Location
    UK
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    what happens when you remove this:

    .GosuMenu img {
    position: absolute;
    left: 4px;
    top: 7px;
    }

    from the styles?

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

    Just take out the position:relative from the following style and it should work ok.

    Code:
    	.GosuMenu .item {
    		background-color: #B0A487;
    		color: #000000;
    		font-family: verdana;
    		font-size: 11px;
    		padding: 3px 8px 3px 16px;
    		text-decoration: none;
    		display: block;
    		cursor: default;
    		white-space: nowrap;
    	   /* position: relative;*/
    	}
    paul

  4. #4
    SitePoint Enthusiast
    Join Date
    May 2003
    Location
    Poland
    Posts
    89
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    matpol: the text is aligned to the right and the arrow has to be aligned to the left, I have to position the image absolutely.

    Paul O'B: then the arrow is positioned relatively to .section element and not .item element. http://gosu.pl/www2/index2.html - DHTML > mygosuMenu -> Demo . The arrow should be at Demo not at Info.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Sorry I didn't notice the sub menus.

    It seems like an ie bug in that its taking its zero positioning at the end of the right aligned text and not the element itself. It then positions itself 4px over the text.

    The problem is that ie likes widths on elements before it can work out where to place things. If you gave your sub menu a width of 100px then it will work as expected. Obviously this is not what you want.

    The only solution I can offer is a quick fix to move the arrow over a bit so that it isn't obscured by the text.

    Code:
    	.GosuMenu img {
    		position: absolute;
    		left:4px;
    		top: 7px;
    }
    * html .GosuMenu img {left:-10px}
    If I had more time I would strip down the page a bit more to see where exactly it goes wrong as I can't reproduce that error when i try a simple reconstruction. There is probably an answer in there somewhere (but then again it may be a bug).

    Paul

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I think I have a solution that may work.

    Change the positioning of the image to use right at 100% as left is giving us so much trouble and then just drag the right margin back into place like so:
    Code:
    	.GosuMenu  img {
    		position: absolute;
    		right:100%;
      margin-right:-10px;
    		top: 7px;
     }
    That seems to work in ie6 and mozilla consistently.

    Paul

  7. #7
    SitePoint Enthusiast
    Join Date
    May 2003
    Location
    Poland
    Posts
    89
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Nearly Ideal solution. But ... It doesn't work in Opera.

    Code:
        .GosuMenu img {
            position: absolute;
            top: 7px;
            left: 4px;
        }
        * html .GosuMenu img {
            position: absolute;
            top: 7px;
            right: 100%;
            left: none;
            margin-right: -8px;
        }
    Something like that could work, but how to remove "left" property ? It seems that "left" has higher priority than "right" and it is not overwritten. "left: none;" doesn't help

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Well this would work:
    Code:
      html>body .GosuMenu img {
    		position: absolute;
    		top: 7px;
    		left: 4px;
    	}
    	* html .GosuMenu img {
    		position: absolute;
    		top: 7px;
    		right: 100%;
    		margin-right: -8px;
    	}
    with any luck

    paul

  9. #9
    SitePoint Enthusiast
    Join Date
    May 2003
    Location
    Poland
    Posts
    89
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    To which browsers "html>body" trick applies ? I thought it was only Mozilla compatible, but it seems that Opera also. What about Safari, Konqueror ?
    Thank you so much for help.

    Btw. there are still 2 strange bugs.
    1) in IE when mouse is over DHTML > mygosuMenu there is a 2 px empty space on the right
    2) in Mozilla when mouse is over DHTML > Javascript Libraries there is a 1px empty space at the bottom
    I can live with them, but it would be nice if there are any easy hacks to fix that bugs.

    The newest version is here: http://gosu.pl/www2/index.html

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    The gap in ie6 can be cured by not running the page in quirks mode. If you drop the xml prologue (which is optional anyway then the page will run in standards mode and the gap disappears.

    For mozilla you could try setting the line-height as follows which should fix it.
    Code:
     .GosuMenu a  {line-height:12px;}
    The child selector is supported by safari 1.2.

    Hope that helps.

    Paul

  11. #11
    SitePoint Enthusiast
    Join Date
    May 2003
    Location
    Poland
    Posts
    89
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I would like to thank you one more. All bugs are fixed ! The finished menu is now on my site - http://gosu.pl

    Cheers!

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Looking Good


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
  •