CSS Buttons Coding

by 21 replies
24
Hi,

I have a set of CSS-coded buttons with the "class" applied directly to the <a> tag, like this:

Code:
<a class="button" href="index.htm">Text</a>
And the button appears beautifully

Do I have to use the <ul> or <ol> or <li> tags?
These are menu buttons and as far as I can see, they're 100 % all right without <ul> <ol> <li> etc...

If I add the latter, the entire design mixes up, as it pushes the buttons lower and white space is created.

Personally it's OK the way it is and listing is not necessary. Not sure if it makes any sense to SEO to do otherwise than I did..

Opinions?
#website design #buttons #coding #css




  • ...right but my questions were: do I have to display buttons as lists, do I have to use ul/li/ol?

    Isn't this already enough?

    I have some sites with the <ul>and<li> variant, but I'm trying to minimize coding as much as possible, so it would be great if <a> with class would be enough...
    • [1] reply
  • Finally I decided to continue with the listing variant...
    I am getting a wicked "cascade" of the <li> elements only in IE. Not sure why...
    The buttons appear like this... (FF, Chrome, Safari display well) only in IE is the problem like this:
    -buttons appear in a cascade, one under another
    -but not exactly under each other like in a list, but with slight distance

    Somehow like this:

    ....button #1
    .................button #2
    ..............................button #3
    ............................................button #4

    Imagine the buttons appearing like that instead of appearing side-by-side.

    My CSS is:

    Solutions?
    • [1] reply
  • Yes, I have one <ul> with abut 7-8 <li> elements. All open and close the right way. Why the cascade?
    • [1] reply
  • By, the way, it happens to me in IE 7, an ancient browser, but I want to make it work. Still couldn't find the problem causing the "cascade"... tried various other settings.
  • To break it down into an understandable sentence(Rather then the abundance of nonsense previously posted):

    Style the LINK/S in the desired DIVISION.
    • [1] reply
  • Html section looks something like this:

    The "cascade" appears in IE 7, so far I haven't checked in newer IE. But despite the fact that IE has very low overall popularity, I am getting a enough IE 7 traffic to worry about.\
    All other major browsers display it perfectly!

    This is the code from an off-line page that I am coding right now. It's not online yet...
    • [1] reply
  • Actually the <a> tags have the class, not the <li> tags. And that's the class displaying the CSS buttons.

    For that class I have this: "display: inline-block;"

    Can't see the reason for the "cascade".
    • [1] reply
  • Of course it does. Why am I talking about it.
    I'll try to get some "test" version of it online and send you a PM when done.
  • I assume what the OP is trying to convey is that in his view, on his computer with his crappy browser the list looks like an endlessly nested list: every new list item (li) appears as if nested under the previous one...

    Other than old browser, bad settings in it - can't imagine anything causing it, unless there is more code in the stylesheet that refers to lists in general and the OP is not aware of it.
    • [2] replies
    • I am using multiple browsers and I have IE "crappy browser" installed only because I am getting plenty of visitors using this browser. Only for the sake of optimization.

      Otherwise works fine 100 % in FF, Chrome, Safari... not in IE 7.

      IE 8 and above displays correctly. I'm just annoyed by this IE 7 think.

      My CSS and HTML regarding the buttons is 100 % fine, I don't think I made a mistake, it
      s rather the wicked way IE misinterprets everything that is causing the problem.

      I have no classes for the <li>, but there is a class for the <ul>, mainly basic things, positioning issues etc... I was wondering: perhaps that's where the change needs to be made. Either a class for <li> or something modified in the <ul>'s class...

      Yes, it appears like nesting it without me asking for it...

      I am uploading a "test" version for you to see it. By the way: it's not done yet, unfinished site, so don't look at the rest... I just want to solve this button issue, the rest will come afterwards.

      I PM-ed some of you the URL of a test page. It's enough to see the IE 7 button problem. Disregard the rest of the page, it's not fully built anyway...
      • [1] reply
Join the discussion

Next Topics on Trending Feed