SitePoint Sponsor

User Tag List

Page 2 of 4 FirstFirst 1234 LastLast
Results 26 to 50 of 82
  1. #26
    SitePoint Addict rochow's Avatar
    Join Date
    Oct 2006
    Location
    Queensland, Australia
    Posts
    300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by pmw57 View Post
    Perhaps, use a server-side script to create the nav list, by joining an array of links with the appropriate separator?
    It'd still be outputted the same

  2. #27
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by rochow View Post
    I still don't like the empty span lol. I like what it does, but I don't like having to use it in the first place

    What would be ideal is a background-stack similar to z-index, where you can simply set the background on top of the text on the element itself (such as the a). That way it does the exact same thing except perfectly semantically!

    Does anyone actually have a good solution for:
    There must be a solution! I will play around with this tomorrow and see if I can figure something out.

  3. #28
    SitePoint Addict rochow's Avatar
    Join Date
    Oct 2006
    Location
    Queensland, Australia
    Posts
    300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by cooper.semantics View Post
    There must be a solution! I will play around with this tomorrow and see if I can figure something out.
    I figured out a classless solution; however....

    It requires them to be floated, and usually the only menu with | are centered in the footer - damn! Works great for main menus though, it's almost so obvious I felt stupid for taking this long to figure it out.

    Something such as:
    ul {list-style:none;overflow:hidden}
    li {border-left:1px solid #000;float:left;margin:0 0 0 -1px}
    This can be applied in many situations, such as sidebars where even menu item has a bottom border except the bottom one. In cases such as WP, there is no hook for the last item so it's impossible to use a class to negate the border on the last list item. Never fear - Super Matt to the rescue!

    ul {list-style:none;overflow:hidden}
    li {border-top:1px solid #000;float:left;margin:-1px 0 0;width:100%}
    All this is off the top of my head, should be right though... I've tested it in IE6, IE7, FF2, FF3, Opera 8, Opera 9 and Safari 3

  4. #29
    SitePoint Addict mason.sklut's Avatar
    Join Date
    Oct 2006
    Posts
    200
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you're feeling lazy just make it an image map (w/ Dreamweaver for ultra-lazy).

    http://alistapart.com/articles/imagemap

  5. #30
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by rochow View Post
    I still don't like the empty span lol. I like what it does, but I don't like having to use it in the first place

    What would be ideal is a background-stack similar to z-index, where you can simply set the background on top of the text on the element itself (such as the a). That way it does the exact same thing except perfectly semantically!

    Does anyone actually have a good solution for:
    I don't like it either, but it does not harm and is useful, so that's what I'll continue to use until something better becomes widely available.

    As for your problem, CSS borders.

  6. #31
    SitePoint Addict rochow's Avatar
    Join Date
    Oct 2006
    Location
    Queensland, Australia
    Posts
    300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Dan Schulz View Post
    I don't like it either, but it does not harm and is useful, so that's what I'll continue to use until something better becomes widely available.

    As for your problem, CSS borders.
    I'll use it as it's the best solution, it's frustrating that best doesn't equal perfect.

    Then you need a class on the first or the last to negate the border

    item | item | item

  7. #32
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, but it is a workable compromise for the time being. I'd rather have a class of "first" and "last" (or first-child and last-child) than have to resort to code bloat in order to support IE.

  8. #33
    SitePoint Addict rochow's Avatar
    Join Date
    Oct 2006
    Location
    Queensland, Australia
    Posts
    300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'd rather use a | as it looks better. Also, some people use it in their designs (the line is smaller than the text - so border won't work). Downside being with styles off it's still there.

  9. #34
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Then slip it in as part of the background image.

  10. #35
    SitePoint Addict rochow's Avatar
    Join Date
    Oct 2006
    Location
    Queensland, Australia
    Posts
    300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Dan Schulz View Post
    Then slip it in as part of the background image.
    Which would be around 60 bytes plus handshaking time, versus a 1 byte |

  11. #36
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    And is a tradeoff worth making when you consider that a person viewing the page sans-styles shouldn't even see the | on the list item menu to begin with.

    Besides, the | in this case is a presentational construct, not a structural one. It stands to reason therefore that it belongs in the CSS, not the HTML/content.

  12. #37
    SitePoint Addict rochow's Avatar
    Join Date
    Oct 2006
    Location
    Queensland, Australia
    Posts
    300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Dan Schulz View Post
    And is a tradeoff worth making when you consider that a person viewing the page sans-styles shouldn't even see the | on the list item menu to begin with.

    Besides, the | in this case is a presentational construct, not a structural one. It stands to reason therefore that it belongs in the CSS, not the HTML/content.
    The <span> is also for presentation (fancy font or effects that can only be done using an image) however rules are made to be broken

    *sigh* maybe one day there can actually be a perfect solution for things

  13. #38
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    True, but the SPAN isn't visible when the page is rendered without styles.

  14. #39
    SitePoint Addict rochow's Avatar
    Join Date
    Oct 2006
    Location
    Queensland, Australia
    Posts
    300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I just read a post of yours (CSS reset) and was wondering about:

    <div id="footer">
    <em>Copyright Site</em>
    </div>
    Why is it wrapped in an em? Is it unsemantic to leave it with nothing? I've thought about it for a while... I guess that's what tags are for - everything should be marked up. Is it better to wrap something in a tag that's not exactly correct for the sake of having it marked up and not left with nothing? Or are we back in the same old story where there isn't really a perfect solution, just personal preferences

  15. #40
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Easy. I'm giving the copyright statement emphasis.

  16. #41
    SitePoint Addict rochow's Avatar
    Join Date
    Oct 2006
    Location
    Queensland, Australia
    Posts
    300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Dan Schulz View Post
    Easy. I'm giving the copyright statement emphasis.
    It's removed in the CSS though so it appears like normal text not emphasised

  17. #42
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,271
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Emphasis stays for those listening, or viewing without CSS. So, the meaning's emphasised there but visual visitors cannot get that meaning.

    Just add a &nbsp; or something.
    About adding it into the span-- NO! Unless you're using HTML4, then fine.

    If you're going to play with XHTML however then why add things that are not valid XML? Even if it's pretend, go as far as you can. &nbsp is valid in HTML but not "real" XHTML (validator won't say boo about it but there are only 5 "character entities" in XML).

    So, for anchors, I've used a real space, but only in anchors.

    I had this same issue as Rochow for a site I'm still working on. I HAD to use the stupid text-indent:-999em so the best I could come up with was having a title on the anchor. So, if people see a big empty area then at least they get title text if they end up hovering (and on :focus too cause it's an anchor going "home"). Not ideal, though. Background and h1 slide around as window resizes, so faking the transparency with a real background doesn't work.

    And yes it's an h1.

  18. #43
    SitePoint Addict rochow's Avatar
    Join Date
    Oct 2006
    Location
    Queensland, Australia
    Posts
    300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Emphasis stays for those listening, or viewing without CSS. So, the meaning's emphasised there but visual visitors cannot get that meaning.

    In that case then I wouldn't say it needs emphasise. That'd be like using strong and removing the bold effect.
    I had this same issue as Rochow for a site I'm still working on. I HAD to use the stupid text-indent:-999em so the best I could come up with was having a title on the anchor. So, if people see a big empty area then at least they get title text if they end up hovering (and on :focus too cause it's an anchor going "home"). Not ideal, though. Background and h1 slide around as window resizes, so faking the transparency with a real background doesn't work.

    And yes it's an h1.
    Haha, slacker. I'm working on a project now that is using the same thing - background image (the background changes from page to page) so using a alpha transparent logo, menu overlapping, lots of spans and positioning all round (no text-indent here!).... messy and time consuming, should have quoted way more

  19. #44
    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)
    Never have empty elements-my rule of thumb.

    It causes me issues sometimes trying to find crap. Also sometimes I even forget it's there!

    Perhaps, use a server-side script to create the nav list, by joining an array of links with the appropriate separator?
    Isn't that a bit extreme?
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  20. #45
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @rochow

    If only CSS 2.1 selectors were ie friendly

    IE6 is the 'spawn' of non semantic markup

  21. #46
    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)
    Actually WE code semantic markup, it's just that IE6 doesn't support a lot of propertys.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  22. #47
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by BoltZ View Post
    Actually WE code semantic markup, it's just that IE6 doesn't support a lot of propertys.

    @BoltZ

    Sorry, didn't make my self clear enough

    first/last class and adding in extra non meaningful '|' in the example given is a ie6 downfall.

  23. #48
    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)
    Pfft, IE6 doesn't support position:fixed!. So much not supported...it's ok. In the future call me Ryan.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  24. #49
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It only supports it on the background image for the body selector. But it can be emulated.

  25. #50
    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)
    It's almost always possible to emulate properties, but just having to do that workaround just futher proves the point IE6's support on websites should be dropped.

    Facebook had the right idea (They announced they dropped IE6 support).
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work


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
  •