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 12 of 12
  1. #1
    New Coder
    Join Date
    May 2003
    Posts
    70
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Unhappy Nifty Corners Issue

    I'm having a small issue with some CSS in a menu that I am building for a website:

    http://ultimatesalesmeetings.com/scratch47/2006/

    I'm wanting the dark grey color on the top row of the navigation area to encompass the 'Home' option ONLY (so it looks like a tab) instead of extending out across the rest.

    I have tried limiting the width of that div amongst other things, and so far no luck.

    Can anyone help me out here?

    Thanks in advance.

  • #2
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,253
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Huh?

    What do you mean--it does.
    On IE6.0/Win2000, I see "HOME" with a darkish grey background, while all the other texts next to it (they aren't links; very confusing when it's obviously meant to look like a menu) are on a lighter grey background.

    Could you be a bit more clearly about what you want it to look like?

    By the way: there are better ways to mark up a menu; check out the Listutorial for the how-to and Listamatic and -2 for some examples (although the horizontal nested list ones aren't very compelling).
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #3
    New Coder
    Join Date
    May 2003
    Posts
    70
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I thought it would have been obvious... but this should clearly show what I'm after...


  • #4
    Senior Coder NancyJ's Avatar
    Join Date
    Feb 2005
    Location
    Bradford, UK
    Posts
    3,169
    Thanks
    19
    Thanked 65 Times in 64 Posts
    The first thing I would do is streamline your markup, its excessively bloaty.

    Change your js to apply the curved corners to #primarySelected, rather than the container.
    Modifying the width wont help because you've set it to display:inline, so it wont accept width or height.
    If you modify the width of #primaryMenu to 55px you get the look that you want but that ofcourse shrinks the whole div so the other items drop below it.

  • #5
    Senior Coder NancyJ's Avatar
    Join Date
    Feb 2005
    Location
    Bradford, UK
    Posts
    3,169
    Thanks
    19
    Thanked 65 Times in 64 Posts
    Quote Originally Posted by masey
    I thought it would have been obvious... but this should clearly show what I'm after...

    The issue is that your js doesnt work in IE, so ronaldb66 doesnt see your curves at all. For him he will see a square tab around the Home link

  • #6
    New Coder
    Join Date
    May 2003
    Posts
    70
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Bleh... I just don't know enough about this kind of thing it seems. I mean I only taught myself CSS something like 3 days ago.

    Maybe I'll just go with no rounded corners...

    I just wanted some nice looking tabs for that top primary level without having to use images...

  • #7
    New Coder
    Join Date
    May 2003
    Posts
    70
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by NancyJ
    The issue is that your js doesnt work in IE, so ronaldb66 doesnt see your curves at all. For him he will see a square tab around the Home link
    But you guys see curves on all the other elements in IE right? That uses the same JS.

  • #8
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,253
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Rounded corners be gone

    NancyJ's right: I didn't see any of the things you mentioned, just a square "HOME".

    There are other, JS-free techniques for incorporating rounded corners, most notably Doug Bowman's Sliding Doors technique; for your rounded corner tabs, this seems like just the thing you're looking for.
    Warning: since you say yourself that you're relatively new to CSS, there might be a steep learning curve ahead here.

    Edit:
    By the way: there's nothing wrong with using images for this sort of stuff, as long as they are CSS background images.
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #9
    New Coder
    Join Date
    May 2003
    Posts
    70
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Steep learning curve eh? Bring it on... it's the only way to learn right?

  • #10
    Senior Coder
    Join Date
    Jul 2005
    Location
    UK
    Posts
    1,051
    Thanks
    6
    Thanked 13 Times in 13 Posts
    Yeah, why not use background images? It will result in far less code and it will work without the need for javascript.

  • #11
    New Coder
    Join Date
    May 2003
    Posts
    70
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Better still... just stick with "-moz-border-radius" so that people who know what they are doing and using Firefox or Mozilla will get the good effect... and those using IE... well... let's just say it's their fault for not waking up and smelling the cheese! LOL

    Thanks anyway everyone...

  • #12
    Regular Coder Masterslave's Avatar
    Join Date
    Dec 2005
    Posts
    287
    Thanks
    2
    Thanked 0 Times in 0 Posts
    You can use a unordered list with list-items. In those list-items you can use another unordered list for your bar below.

    This is a article on A List Apart, it's near the same menu as you have.
    http://www.alistapart.com/articles/hybrid


  •  

    Posting Permissions

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