SitePoint Sponsor

User Tag List

Results 1 to 22 of 22
  1. #1
    SitePoint Wizard
    Join Date
    May 2002
    Posts
    1,370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    menu graphic, FF & IE

    Need to put an image at the top of a menu bar (and bottom), above links listed as:

    <a href="sample.htm" class="LMenu">Menu link</a>
    <a href="sample2.htm" class="LMenu">Menu link2</a>

    .LMenu:link {background: #EEEEEE; color:#666666; border: 1px solid #E5E5E5; border-top:1px solid #FFFFFF; text-decoration: none; font-size: 13px; font-family: Arial, Helvetica, sans-serif; height:15px; width: 170px; padding-left: 10px; padding-top: 5px; padding-right: 5px; padding-bottom: 3px; display:block;}

    Trying to place the gif as css:
    .LMenu {background-image: url(menu.gif); background-repeat: no-repeat; background-position: left top; background-attachment: scroll; height:5px; width: 170px; display:block;}

    But having trouble with FF & IE widths aligning with the links.
    (trying div, span, font classes)

    Question : must everything (including links) go in a table if there is a graphic? Placing the gif in its own:

    <td><img src="menu.gif" width="170" height="15"></td>

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,620
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    It's not clear what the problem is, but you certainly don't want a table for this.

  3. #3
    SitePoint Wizard
    Join Date
    May 2002
    Posts
    1,370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The problem is that I cannot seem to get the menu.gif (appearing at the top) to shift width's, along with the links -- to accomodate FF and IE -- which displays two different width's for the links.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,620
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    You could use a background image that is much larger than needed, so that it will accommodate a link of any width. But it is still unclear what visual result you are aiming for, so it's hard to help you. Could you post an image of what you are aiming for?

    EDIT: background images don't resize (not in CSS2, anyhow).

  5. #5
    SitePoint Wizard
    Join Date
    May 2002
    Posts
    1,370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ralph,

    Guess I could have mentioned that the image has curved corners, sorry.
    Here's the top and bottom.
    Attached Images Attached Images

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,620
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    So are you saying the black parts may need to expand in width if the links get longer? You could consider trying the sliding doors technique.

  7. #7
    SitePoint Wizard
    Join Date
    May 2002
    Posts
    1,370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm saying that even with the above css, the background width for the links is different for FF than for IE. Which poses a problem for the fixed width gif. It ends up being too narrow or too wide, depending on the browser.

    Either the gif must expand/contract, which in this case doesn't seem likely, or the link css must be the same for FF as for IE. But this does not force this:

    width: 170px; display:block;

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,620
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    Hmm, it should work. But looking at your code above, there's no reason to be putting this bg image on a link. Just place your links inside a div of width 170px. Leave 5px padding at the top of the div and place the image as a background image on that div. Then have an inner div with 5px padding at the bottom, and have the bottom image as a background on that.

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

    Here's live example of what I think you are trying to do.

    http://www.pmob.co.uk/temp/capmenu.htm

    Just view source as the code is all in the head. I've kept it deliberately simple and should be obvious what's going on but if you don't understand then just shout.

  10. #10
    SitePoint Wizard
    Join Date
    May 2002
    Posts
    1,370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul,

    That looks about ideal. Any ideas on browser compatibility (versions)... everything?"

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,875
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by datadriven View Post
    Paul,

    That looks about ideal. Any ideas on browser compatibility (versions)... everything?"
    Hi,

    I've just made a couple of changes and it should work on everything from ie6 upwards.

  12. #12
    SitePoint Wizard
    Join Date
    May 2002
    Posts
    1,370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I see views in FF 3.6.8 but prior to this any idea ?

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

    I'd be surprised if it doesn't work in all versions of Firefox.

    here's a browsercam view.

    http://www.browsercam.com/public.aspx?proj_id=527291

    Ignore the IE images as they are showing a black line which isn't there natively.

  14. #14
    SitePoint Wizard
    Join Date
    May 2002
    Posts
    1,370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul,

    Thanks for that!

    I'm trying to figure how you are getting the base 'cap' to reverse.

    Mine appears exactly like the top cap (no 180 degree flip)

    I assume its in the background-position? (didn't know this could be done!)

    Otherwise I'll separate the background images out.

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

    It uses one single image here:

    http://www.pmob.co.uk/temp/images/navcap.gif

    It's less than 1k and caters for any width up to 2000px which is enough for anyone.

    The single image is then manipulated via the background position to show the relevant parts as required. It saves using multiple images and saves on http requests and paints all images immediately.

    The top left corner is position 0 0 and then some padding is added to the left of that element to preserve the left corner.

    Then the top right corner is placed at background-position:100&#37; 0 in the inner element to show the right top corner. This image doesn't lay on top of the left corner because we preserved that with some left padding on the parent.

    The bottom corners are exactly the same except we use background-position 0 100% and background-position:100% 100% respectively to show the correct parts of the image.

    Just copy my image and use that and you won't need to change anything.

    http://www.pmob.co.uk/temp/images/navcap.gif
    Last edited by Paul O'B; Sep 5, 2010 at 01:23.

  16. #16
    SitePoint Wizard
    Join Date
    May 2002
    Posts
    1,370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What about if the bar is light grey?
    (lack of spacing on bottom cap topside)

    Trying to keep the same look, how can the space be added, refereincg:

    ul.menu li {
    border-top:1px solid #fff;
    }


    Also, since the li is defined altogether, can a second class be added simply from css outside of the this css (compatibility question)?

    <li class="top"><b></b></li>
    <a href="#" class="2ndclass">Sample Heading Link</a>
    <li><a href="#">Link goes here</a></li>
    Attached Images Attached Images

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

    If you want to add a bottom border to the top cap then you have to over-ride the !mportant rule that I switched the borders off with.

    eg.
    Code:
    ul.menu li.top{border-bottom:1px solid #fff!important}
    This code you posted is invalid:

    Code:
    <li class="top"><b></b></li>
    <a href="#" class="2ndclass">Sample Heading Link</a>
    <li><a href="#">Link goes here</a></li>
    It should be:

    Code:
    <li class="top"><b></b></li>
    <li class="2ndclass"><a href="#">Sample Heading Link</a></li>
    <li><a href="#">Link goes here</a></li>
    However if you want it as a heading then you should a suitable heading tag of the correct level depending where on the page it is.

    Code:
    <li class="top"><b></b></li>
     <h3><a href="#">Sample Heading Link</a></h3>
     <li><a href="#">Link goes here</a></li>
    It won't need a class because you can target it uniquely via the heading tag.

    e.g.

    Code:
    ul.menu li h3{margin:0; etc.........}
    ul.menu li h3 a{ etc.........}

  18. #18
    SitePoint Wizard
    Join Date
    May 2002
    Posts
    1,370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ul.menu li h3{margin:0; etc.........}
    ul.menu li h3 a{ etc.........}
    And what if I do need a class (no heading tag) how can I define?

    Basically for the 2ndclass, wanted larger font with less of an indent.

    ~~~~~~~~~~~~~~~~


    Didn't know the css could go .5px line height (IE 1 px seems little fat on top of bottom cap)

    ul.menu li.base{border-top: .5px solid #fff!important}

  19. #19
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,875
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by datadriven View Post
    And what if I do need a class (no heading tag) how can I define?

    Basically for the 2ndclass, wanted larger font with less of an indent.
    hmm... sounds like a heading to me

    Just use a class if you don't want to use the heading tag for some strange reason.

    Code:
    ul.menu li.newclass {margin:0; etc.........}
    ul.menu li.newclass  a{ etc.........}
    Code:
    <li class="top"><b></b></li>
    <li class="newclass"><a href="#">Sample Heading Link</a></li>
    <li><a href="#">Link goes here</a></li>
    Didn't know the css could go .5px line height (IE 1 px seems little fat on top of bottom cap)
    It can't There is o such thing as half a pixel. It probably gets rounded to zero in some browsers and maybe 1px in others.

    The menu already has a white border on the bottom of each list item so you will get 2px if you apply a 1px top border to the bottom cap as well. Just leave the bottom cap without a border.

  20. #20
    SitePoint Wizard
    Join Date
    May 2002
    Posts
    1,370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Apparantly FF aligns this with a jump to the right while IE aligns where it should, to the leftside of the <td>

    This works in IE but not FF (wrap menu):

    Code:
    <div style="position:relative; top: 0px; btm: 0px; left: 15px;">
    This doesn't want to take a position within the menu classes:

    Code:
    ul.menu {
        position:relative; top: 0px; left:15px; width:200px;
    No does adjusting the following margin affect it.
    Code:
    ul.menu {
        width:200px;
        margin:2px 0;
        list-style:none;
    }
    So how can the menus be positioned for FF -- without going to absolute?

  21. #21
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,875
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by datadriven View Post
    Apparantly FF aligns this with a jump to the right while IE aligns where it should, to the leftside of the <td>

    This works in IE but not FF (wrap menu):

    Code:
    <div style="position:relative; top: 0px; btm: 0px; left: 15px;">
    There is no such property as "btm" you mean "bottom"

    You will rarely ever use position:relative to move elements around so don't A relative element is only moved visually and not physically and is usually used for more subtle overlapping effects. The space that a relative element originally occupied is always preserved as if the element had never moved.

    Don't use inline styling either - add a class and control it from the stylesheet.

    This doesn't want to take a position within the menu classes:

    Code:
    ul.menu {
        position:relative; top: 0px; left:15px; width:200px;
    No does adjusting the following margin affect it.
    Code:
    ul.menu {
        width:200px;
        margin:2px 0;
        list-style:none;
    }
    So how can the menus be positioned?
    Again you are mis-using relative positioning and is unlikely to be what you want.

    You can move elements around using margins quite easily or if you need horizontal alignment you would need to float the element.

    I'd need to see your html to help any further as I don't know where you want the element and what structure it resides in.

    Can you post some html or do you have a link to the page in question?

  22. #22
    SitePoint Wizard
    Join Date
    May 2002
    Posts
    1,370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul,

    You seem one of those people who values helping others. A sign of true intelligence.

    I can see why you have "the most helpful thread".

    - Thank you so much.
    ~~~~~~~~~~~~~~~~~~~

    BTW - the alignment errors were caused by my adjustments to the css. Apologies for this and a few other blunders.


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
  •