CSS help with inline list navigation

Collapse
This topic is closed.
X
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • mp
    #1

    CSS help with inline list navigation

    I'm trying to build my first site (learning how to code by hand) using
    XHTML and CSS. I've done a lot of reading but I can't figure out
    what's going on here. I'm trying to generate tabs for a horizontal
    navigation system using only XHTML and CSS. I put up a section of
    code at http://www.xmission.com/~mpyne/help_me/subnavonly.html. I
    also put a screen capture of the code in 4 browsers (NS6.2, Mozilla
    1.5, Opera 7.1, and IE6/Win) at
    http://www.xmission.com/~mpyne/help_me/subnavonly.jpg.

    I colored the different sections and used some borders so I can see
    what's going on. NS & Moz look the same, but I get two other
    renditions in Opera and IE6.

    Questions:
    1) What bugs in the browsers are causing the different renditions and
    how can I correct or hack around them?
    2) Why is the unordered list indented from the left? If you look at
    the source, you'll see that I figured out a way around this, but I'm
    not sure if it's the best or correct way. I want my tabs to be flush
    left with the div.
    3) Why is there space between when I remove the float from the
    anchors? Is there some default spacing?

    Any help is much appreciated. If you can point me to any links, etc.,
    I can refer to, that is also very helpful. I've not been able to find
    any for this problem.

    Mike
    Tags: None
    • Karl Smith
      #2
      Re: CSS help with inline list navigation

      googleid2003@ya hoo.com (mp) wrote:
      [color=blue]
      > http://www.xmission.com/~mpyne/help_me/subnavonly.html
      > http://www.xmission.com/~mpyne/help_me/subnavonly.jpg
      >
      > I colored the different sections and used some borders so I can see
      > what's going on. NS & Moz look the same, but I get two other
      > renditions in Opera and IE6.
      >
      > Questions:
      > 1) What bugs in the browsers are causing the different renditions and
      > how can I correct or hack around them?[/color]

      Unusually, none that I can see at a glance. The dashed border only
      appearing in bloatzilla is because "orange" is a "recent addition" /
      "non-standard crap" to the colour keywords. Use a hex number like
      #ffff00, instead of keywords.
      [color=blue]
      > 2) Why is the unordered list indented from the left? If you look at
      > the source, you'll see that I figured out a way around this, but I'm
      > not sure if it's the best or correct way. I want my tabs to be flush
      > left with the div.[/color]

      Because it's a list - browsers have been indenting lists for donkeys'
      years. If you don't want the default styling of a list, why mark it as
      a list? Are you sure this "list" actually contains listular data?

      As you've already discovered, bloatzilla implements the indentation
      with padding, Opera Explorer with margin. That's okay.

      [color=blue]
      > 3) Why is there space between when I remove the float from the
      > anchors? Is there some default spacing?[/color]

      Space between what and what when viewed with what?

        Comment

        • Johannes Koch
          #3
          Re: CSS help with inline list navigation

          Karl Smith wrote:[color=blue]
          > googleid2003@ya hoo.com (mp) wrote:
          >[color=green]
          >>2) Why is the unordered list indented from the left? If you look at
          >>the source, you'll see that I figured out a way around this, but I'm
          >>not sure if it's the best or correct way. I want my tabs to be flush
          >>left with the div.[/color]
          >
          >
          > Because it's a list - browsers have been indenting lists for donkeys'
          > years.[/color]

          Yes
          [color=blue]
          > If you don't want the default styling of a list, why mark it as
          > a list?[/color]

          Huh? The question should be "If you don't want the default styling of a
          list, why not change it with CSS?" or "If you don't think it's a list,
          why mark it as a list?"
          --
          Johannes Koch
          In te domine speravi; non confundar in aeternum.
          (Te Deum, 4th cent.)

            Comment

            • Christoph Paeper
              #4
              Re: CSS help with inline list navigation

              *Karl Smith*:[color=blue]
              >
              > The dashed border only appearing in bloatzilla is because "orange"
              > is a "recent addition" / "non-standard crap" to the colour keywords.[/color]

              That's unlikely the reason, because virtually all desktop browsers since
              Mosaic support the X11 color names and have done so for many years, i.e.
              even before there was CSS.
              To codify this ill set of color names, which was obviously assembled by some
              stoned kids, in CSS is IMHO not a good thing, but for it is in SVG already
              (with added 'gray'/'grey' variants) the CSS-WG will definitely put it into
              CSS3 Color (not to become "Colour"). 'orange' however is one of the few sane
              names therein and being officially introduced with CSS 2.1 already. It's
              also the only one I frequently use when I'm to lazy to start a colour
              picker.
              [color=blue]
              > Are you sure this "list" actually contains listular data?[/color]

              Funny word, "listular".

              --
              Reality is an illusion that occurs due to the lack of alcohol.

                Comment

                Previous template Next
                Working...