Netscape problem

Discussion in 'HTML' started by Jeff Bowman, Apr 9, 2005.

  1. Jeff Bowman

    Jeff Bowman Guest

    Hello

    I'm having a problem with Netscape 7.1 and Mozilla 1.7.1 not respecting
    these styles for the <SPAN> tag:

    height:
    width:
    text-align:
    margin-bottom:

    It works fine in IE6 and Opera; I haven't tried FireFox. Here's the page:

    http://intexx.com/ice/new/

    The CSS and markup are below. Does anyone know how I can get this to work?

    TIA,
    Jeff

    -------------------------------------

    /* tab placeholder */
    Span.Tabs
    {
    width:100%;
    text-align:center;
    margin-bottom:20px;
    border-bottom: solid 4px #ffee99;
    }

    /* all tabs */
    Span.SelectedTab, Span.OtherTab
    {
    width: 115px;
    font-family: Verdana;
    font-size: x-small;
    }

    /* selected tab */
    Span.SelectedTab
    {
    height: 22px;
    color: navy;
    font-weight: bold;
    background-color: #ffee99;
    border-top: solid 1px #999933;
    border-right: solid 1px #999933;
    }

    /* unselected tabs */
    Span.OtherTab
    {
    height: 20px;
    background-color: #ffffdd;
    border-top: solid 1px #cccc66;
    border-right: solid 1px #cccc66;
    }

    /* separator tab */
    Span.SeparatorTab
    {
    border-left: solid 1px #cccc66;
    }

    -----------------------------------
    <p>
    <span class="Tabs">
    <span class="SelectedTab" style="border-left: solid 1px #999933">
    What is it?
    </span>
    <span class="SeparatorTab"></span>
    <span class="OtherTab">
    <a class="Tab" href="?tab=3" target="_top">
    History of ICE
    </a>
    </span>
    <span class="SeparatorTab"></span>
    <span class="OtherTab">
    <a class="Tab" href="?tab=4" target="_top">
    Technical Info
    </a>
    </span>
    <span class="SeparatorTab"></span>
    <span class="OtherTab">
    <a class="Tab" href="?tab=5" target="_top">
    Your Account
    </a>
    </span>
    <span class="SeparatorTab"></span>
    <span class="OtherTab">
    <a class="Tab" href="?tab=6" target="_top">
    Webmasters
    </a>
    </span>
    </span>
    </p>
     
    Jeff Bowman, Apr 9, 2005
    #1
    1. Advertising

  2. Jeff Bowman

    Toby Inkster Guest

    Jeff Bowman wrote:

    > I'm having a problem with Netscape 7.1 and Mozilla 1.7.1 not respecting
    > these styles for the <SPAN> tag:
    >
    > height:
    > width:


    "height" and "width" can only be set on block elements. SPAN is an inline
    element.

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me ~ http://tobyinkster.co.uk/contact
     
    Toby Inkster, Apr 9, 2005
    #2
    1. Advertising

  3. Jeff Bowman wrote:

    > Hello
    >
    > I'm having a problem with Netscape 7.1 and Mozilla 1.7.1 not respecting
    > these styles for the <SPAN> tag:
    >
    > height:
    > width:
    > text-align:
    > margin-bottom:


    With the exception of margin-bottom, none of those properties apply to
    elements which display: inline - which <span> does by default.

    http://w3.org/TR/CSS2/ will confirm that. If it "works" in a browser then
    that is a bug.

    --
    David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
    Home is where the ~/.bashrc is
     
    David Dorward, Apr 9, 2005
    #3
  4. Hi,
    I've always understood the border property to be width type colour i.e. 1px
    solid black. Netscape might be just being picky. Can you be a bit more
    specific? What exactly do you mean by 'not respecting'
    Regards,
    Duncan

    "Jeff Bowman" <> wrote in message
    news:...
    > Hello
    >
    > I'm having a problem with Netscape 7.1 and Mozilla 1.7.1 not respecting
    > these styles for the <SPAN> tag:
    >
    > height:
    > width:
    > text-align:
    > margin-bottom:
    >
    > It works fine in IE6 and Opera; I haven't tried FireFox. Here's the page:
    >
    > http://intexx.com/ice/new/
    >
    > The CSS and markup are below. Does anyone know how I can get this to work?
    >
    > TIA,
    > Jeff
    >
    > -------------------------------------
    >
    > /* tab placeholder */
    > Span.Tabs
    > {
    > width:100%;
    > text-align:center;
    > margin-bottom:20px;
    > border-bottom: solid 4px #ffee99;
    > }
    >
    > /* all tabs */
    > Span.SelectedTab, Span.OtherTab
    > {
    > width: 115px;
    > font-family: Verdana;
    > font-size: x-small;
    > }
    >
    > /* selected tab */
    > Span.SelectedTab
    > {
    > height: 22px;
    > color: navy;
    > font-weight: bold;
    > background-color: #ffee99;
    > border-top: solid 1px #999933;
    > border-right: solid 1px #999933;
    > }
    >
    > /* unselected tabs */
    > Span.OtherTab
    > {
    > height: 20px;
    > background-color: #ffffdd;
    > border-top: solid 1px #cccc66;
    > border-right: solid 1px #cccc66;
    > }
    >
    > /* separator tab */
    > Span.SeparatorTab
    > {
    > border-left: solid 1px #cccc66;
    > }
    >
    > -----------------------------------
    > <p>
    > <span class="Tabs">
    > <span class="SelectedTab" style="border-left: solid 1px #999933">
    > What is it?
    > </span>
    > <span class="SeparatorTab"></span>
    > <span class="OtherTab">
    > <a class="Tab" href="?tab=3" target="_top">
    > History of ICE
    > </a>
    > </span>
    > <span class="SeparatorTab"></span>
    > <span class="OtherTab">
    > <a class="Tab" href="?tab=4" target="_top">
    > Technical Info
    > </a>
    > </span>
    > <span class="SeparatorTab"></span>
    > <span class="OtherTab">
    > <a class="Tab" href="?tab=5" target="_top">
    > Your Account
    > </a>
    > </span>
    > <span class="SeparatorTab"></span>
    > <span class="OtherTab">
    > <a class="Tab" href="?tab=6" target="_top">
    > Webmasters
    > </a>
    > </span>
    > </span>
    > </p>
    >
    >
     
    Duncan Greenhill, Apr 9, 2005
    #4
  5. Jeff Bowman

    Jeff Bowman Guest

    Hm, I tried tweaking the border style, but still no luck.

    Here's what I'm trying to accomplish:

    http://intexx.com/ice/new/

    By 'not respecting' I mean the style settings have no effect.

    Thanks,
    Jeff


    "Duncan Greenhill" <> wrote in message
    news:...
    > Hi,
    > I've always understood the border property to be width type colour i.e.
    > 1px
    > solid black. Netscape might be just being picky. Can you be a bit more
    > specific? What exactly do you mean by 'not respecting'
    > Regards,
    > Duncan
    >
    > "Jeff Bowman" <> wrote in message
    > news:...
    >> Hello
    >>
    >> I'm having a problem with Netscape 7.1 and Mozilla 1.7.1 not respecting
    >> these styles for the <SPAN> tag:
    >>
    >> height:
    >> width:
    >> text-align:
    >> margin-bottom:
    >>
    >> It works fine in IE6 and Opera; I haven't tried FireFox. Here's the page:
    >>
    >> http://intexx.com/ice/new/
    >>
    >> The CSS and markup are below. Does anyone know how I can get this to
    >> work?
    >>
    >> TIA,
    >> Jeff
    >>
    >> -------------------------------------
    >>
    >> /* tab placeholder */
    >> Span.Tabs
    >> {
    >> width:100%;
    >> text-align:center;
    >> margin-bottom:20px;
    >> border-bottom: solid 4px #ffee99;
    >> }
    >>
    >> /* all tabs */
    >> Span.SelectedTab, Span.OtherTab
    >> {
    >> width: 115px;
    >> font-family: Verdana;
    >> font-size: x-small;
    >> }
    >>
    >> /* selected tab */
    >> Span.SelectedTab
    >> {
    >> height: 22px;
    >> color: navy;
    >> font-weight: bold;
    >> background-color: #ffee99;
    >> border-top: solid 1px #999933;
    >> border-right: solid 1px #999933;
    >> }
    >>
    >> /* unselected tabs */
    >> Span.OtherTab
    >> {
    >> height: 20px;
    >> background-color: #ffffdd;
    >> border-top: solid 1px #cccc66;
    >> border-right: solid 1px #cccc66;
    >> }
    >>
    >> /* separator tab */
    >> Span.SeparatorTab
    >> {
    >> border-left: solid 1px #cccc66;
    >> }
    >>
    >> -----------------------------------
    >> <p>
    >> <span class="Tabs">
    >> <span class="SelectedTab" style="border-left: solid 1px #999933">
    >> What is it?
    >> </span>
    >> <span class="SeparatorTab"></span>
    >> <span class="OtherTab">
    >> <a class="Tab" href="?tab=3" target="_top">
    >> History of ICE
    >> </a>
    >> </span>
    >> <span class="SeparatorTab"></span>
    >> <span class="OtherTab">
    >> <a class="Tab" href="?tab=4" target="_top">
    >> Technical Info
    >> </a>
    >> </span>
    >> <span class="SeparatorTab"></span>
    >> <span class="OtherTab">
    >> <a class="Tab" href="?tab=5" target="_top">
    >> Your Account
    >> </a>
    >> </span>
    >> <span class="SeparatorTab"></span>
    >> <span class="OtherTab">
    >> <a class="Tab" href="?tab=6" target="_top">
    >> Webmasters
    >> </a>
    >> </span>
    >> </span>
    >> </p>
    >>
    >>

    >
    >
     
    Jeff Bowman, Apr 9, 2005
    #5
  6. On 09/04/2005 22:12, Jeff Bowman wrote:

    > I'm having a problem with Netscape 7.1 and Mozilla 1.7.1 not respecting
    > these styles for the <SPAN> tag:
    >
    > height:
    > width:
    > text-align:
    > margin-bottom:


    They shouldn't. Vertical margins and explicit dimensions are not taken
    into account when laying out inline elements. Neither is text-align as
    it only applies to block-level elements. The latter certainly makes
    sense as inline elements fit their content, so there's no excess width
    to align within.

    Read the various sections of a recent CSS specification that pertains
    to inline elements. Sections

    9.4.2 - Normal flow: Inline formatting context
    10.3.1 - Computing width and margins: Inline, non-replaced elements
    10.6.1 - Computing height and margins: Inline, non-replaced elements

    would seem good places to start.

    > It works fine in IE6 and Opera


    Only because they are rendering in quirks mode, which purposefully
    uses incorrect behaviour when rendering to act like older browsers.
    Complete your DOCTYPE by adding a URL and they should display the same
    as Firefox, too.

    Mike

    --
    Michael Winter
    Replace ".invalid" with ".uk" to reply by e-mail.
     
    Michael Winter, Apr 9, 2005
    #6
  7. Jeff Bowman

    Jeff Bowman Guest

    Yikes! I'd better fix it then--pronto.

    Any ideas how to display the tabs without using a table? (I'm trying to
    learn how to do layout without tables.) I tried <DIV> but they stack
    vertically instead of horizontally.

    Thanks,
    Jeff



    "David Dorward" <> wrote in message
    news:d39hla$5bc$1$...
    > Jeff Bowman wrote:
    >
    >> Hello
    >>
    >> I'm having a problem with Netscape 7.1 and Mozilla 1.7.1 not respecting
    >> these styles for the <SPAN> tag:
    >>
    >> height:
    >> width:
    >> text-align:
    >> margin-bottom:

    >
    > With the exception of margin-bottom, none of those properties apply to
    > elements which display: inline - which <span> does by default.
    >
    > http://w3.org/TR/CSS2/ will confirm that. If it "works" in a browser then
    > that is a bug.
    >
    > --
    > David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
    > Home is where the ~/.bashrc is
     
    Jeff Bowman, Apr 9, 2005
    #7
  8. Jeff Bowman wrote:

    > Yikes! I'd better fix it then--pronto.


    A: Putting the response before the quote
    Q: What is a confusing means of communication frowned on on Usenet?

    > Any ideas how to display the tabs without using a table?


    http://css.maxdesign.com.au/listamatic/ perhaps?

    --
    David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
    Home is where the ~/.bashrc is
     
    David Dorward, Apr 9, 2005
    #8
  9. Jeff Bowman

    Jeff Bowman Guest

    "David Dorward" <> wrote in message
    news:d39m7k$n2c$1$...
    > Jeff Bowman wrote:
    >
    >> Yikes! I'd better fix it then--pronto.

    >
    > A: Putting the response before the quote
    > Q: What is a confusing means of communication frowned on on Usenet?
    >
    >> Any ideas how to display the tabs without using a table?

    >
    > http://css.maxdesign.com.au/listamatic/ perhaps?
    >
    > --
    > David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
    > Home is where the ~/.bashrc is


    I managed to get the look I was after, by using DIVs and float:left, but
    ultimately I had to use a table to center the tab group. If you know of a
    better way I'd be pleased to hear about it.

    http://intexx.com/ice/new/

    Regarding placement of the response, what's the history behind that, do you
    know? How did it evolve as a Usenet standard?

    It's more cumbersome and time-consuming, that's for sure--you have to scroll
    all the way to the bottom in your reader to see what's going on. If the
    response is at the top you can see it as soon as you open the message. A
    quick glance at the text just below serves as a reminder of what the
    conversation is about, without having to wade all the way to the murky
    bottom.

    Thanks,
    Jeff
     
    Jeff Bowman, Apr 10, 2005
    #9
  10. Jeff Bowman wrote:

    > It's more cumbersome and time-consuming, that's for sure--you have to scroll
    > all the way to the bottom in your reader to see what's going on. If the
    > response is at the top you can see it as soon as you open the message. A
    > quick glance at the text just below serves as a reminder of what the
    > conversation is about, without having to wade all the way to the murky
    > bottom.


    Fifth through eighth links in Usenet section, here:

    http://blinkynet.net/comp/ndx_internet.html

    --
    Blinky Linux Registered User 297263
    Who has implemented Usenet Solution #45933:
    Now killing all posts originating at Google Groups
     
    Blinky the Shark, Apr 10, 2005
    #10
  11. On 10/04/2005 00:55, Jeff Bowman wrote:

    [snip]

    >> --
    >> David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
    >> Home is where the ~/.bashrc is


    Don't quote signatures when replying.

    > I managed to get the look I was after, by using DIVs


    You should be using lists. Rather than trying to retrofit your
    existing code, it would probably be better to replace the navigation
    using one of the Listamatic examples. There are both centred and
    stylised tabs that match (more or less) your current design, and
    there's no need for a nasty single-celled table.

    > It's more cumbersome and time-consuming, that's for sure--you have to scroll
    > all the way to the bottom in your reader to see what's going on.


    No you don't. The point is to intersperse your comments amongst those
    of the previous poster. Each time they make a point you want to
    respond to, you insert what you have to write. Pretty much everything
    else is removed.

    You should see that this reply is fairly simple and easy to read. You
    know exactly why I'm making a particular remark without having to
    scroll up and down repeatedly. My first few comments should be
    readable without any scrolling, and everything else follows naturally.
    If you have a decent newsreader, it becomes second nature to skip
    quoted sections if you know the order of conversation so you can move
    directly from new remark to new remark.

    > If the response is at the top you can see it as soon as you open the message. A
    > quick glance at the text just below serves as a reminder of what the
    > conversation is about,


    But what if several points have been made, just like here? What if I
    dumped my entire response at the top? You might have to move up and
    down the post just to find what I was referring to. Moreover, this
    isn't just about you or I. Others will be reading this thread and they
    might not be following it so closely. A quick glance might not be a
    sufficient reminder.

    > without having to wade all the way to the murky bottom.


    Again, only relevant material should be included. If someone has to
    "wade", too much was probably left in.

    In any case, there's no point debating the issue. The five groups I
    frequent, plus several other technical groups that I've participated
    in in the past all use this convention. Ignoring it after being asked
    to follow the rules tends to illicit a negative response, and possible
    subsequent killfiling. Getting ignored by the people you wish to help
    you is hardly the quick way to getting a solution. That might not be
    fair, but complaining isn't going to change the situation.

    Mike

    --
    Michael Winter
    Replace ".invalid" with ".uk" to reply by e-mail.
     
    Michael Winter, Apr 10, 2005
    #11
  12. Jeff Bowman

    Jeff Bowman Guest

    Michael Winter wrote:

    > Don't quote signatures when replying.


    OK



    > You should be using lists. Rather than trying to retrofit your
    > existing code, it would probably be better to replace the navigation
    > using one of the Listamatic examples. There are both centred and
    > stylised tabs that match (more or less) your current design, and
    > there's no need for a nasty single-celled table.


    Thanks, I'll poke around in there a bit more. I agree about the table. Ugh.



    > You should see that this reply is fairly simple and easy to read. You


    It is, isn't it? :)



    > dumped my entire response at the top? You might have to move up and
    > down the post just to find what I was referring to. Moreover, this
    > isn't just about you or I. Others will be reading this thread and they
    > might not be following it so closely. A quick glance might not be a
    > sufficient reminder.


    Ah, makes sense.



    > In any case, there's no point debating the issue. The five groups I
    > frequent, plus several other technical groups that I've participated
    > in in the past all use this convention. Ignoring it after being asked


    Who said I wanted to debate or ignore it? I was just asking, offering my
    rebuttals in advance. Like any diligent programmer, I want to know the
    reasons behind things, that's all :)

    Say, thanks for the good ListaMatic reference. I didn't quickly see a sample
    described as what I'm looking for, but I'll look more closely. I'm under
    heavy pressure to get this thing done asap, even if I have to cut some
    corners to get it out the door. Hate to say it, and it raises the hair on
    the back of my neck, but that's the case.

    Jeff
     
    Jeff Bowman, Apr 10, 2005
    #12
  13. Jeff Bowman

    Jeff Bowman Guest

    Jeff Bowman, Apr 10, 2005
    #13
  14. Jeff Bowman

    Jeff Bowman Guest

    Michael Winter wrote:

    > You should be using lists. Rather than trying to retrofit your
    > existing code, it would probably be better to replace the navigation
    > using one of the Listamatic examples. There are both centred and
    > stylised tabs that match (more or less) your current design, and
    > there's no need for a nasty single-celled table.


    Try as I might, I'm not able to get this exact look:

    http://intexx.com/ice/new/

    Without using a table.

    I tried the ListaMatic examples, but I'm running into two basic conflicts:

    1) If I center the TabGroup, unattractive spaces appear between the tabs
    2) If I float:left to remove the spaces, I can't center the TabGroup

    Do you have any suggestions:

    Thanks
     
    Jeff Bowman, Apr 10, 2005
    #14
  15. Jeff Bowman

    Jeff Bowman Guest

    Jeff Bowman wrote:

    > Try as I might, I'm not able to get this exact look:
    >
    > http://intexx.com/ice/new/
    >
    > Without using a table.


    I guess I tried to bite off more than I could chew with this one. On one hand,
    I'd like to learn more about table-less CSS layout--as I mentioned earlier--but
    on the other I guess I shouldn't try to do so on a rushed project like this.

    Seems there's more to it than I'd expected.

    Thanks :)
     
    Jeff Bowman, Apr 10, 2005
    #15
  16. Jeff Bowman

    Toby Inkster Guest

    Toby Inkster, Apr 10, 2005
    #16
  17. Jeff Bowman wrote:
    <snip>
    > /* separator tab */
    > Span.SeparatorTab
    > {
    > border-left: solid 1px #cccc66;
    > }
    >
    > -----------------------------------
    > <p>
    > <span class="Tabs">
    > <span class="SelectedTab" style="border-left: solid 1px #999933">
    > What is it?
    > </span>
    > <span class="SeparatorTab"></span>

    <snip>

    What is the purpose of your 'empty' SeparatorTab spans? Just remove them
    and I think you will get what you want in both sets of browsers, try it.

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Apr 10, 2005
    #17
  18. Jeff Bowman

    Jeff Bowman Guest

    Toby Inkster wrote:

    > Rewrite: http://examples.tobyinkster.co.uk/intexx-ice/new/


    Hey, WOW! That's great! How'd you do that so fast? :)

    And I learned today that there really IS a reason to include a URI at the top of
    the page ;-)

    Say, a couple of things:

    1) Is there a way to set all the tabs the same width?
    2) Is there a way to center vertically the contents of a DIV?

    For #1 I've tried the li.width: property, and for #2 I've tried the
    div.vertical-align: property, neither with any luck.

    Thanks!
     
    Jeff Bowman, Apr 10, 2005
    #18
  19. Jeff Bowman

    Jeff Bowman Guest

    Jonathan N. Little wrote:

    > What is the purpose of your 'empty' SeparatorTab spans? Just remove them
    > and I think you will get what you want in both sets of browsers, try it.


    I'm using those to get the white 1-pixel separation between tabs.

    It turns out DIVs work better than SPANs, and they support the properties I'm
    trying to assign (per Toby's advice in this thread).

    Trouble is, though, I'm not able to get the exact effects I want without using
    TABLEs. Left/right float DIVs tend to wrap when the browser is resized smaller,
    instead of initiating a horizontal scrollbar. Here's the latest version:

    http://intexx.com/ice/new/

    For the text below the tabs, I need the vertical gray separator to get taller as
    the text gets higher, and I need both the text and the image to stay vertically
    centered and horizontally aligned when the window is shrunk. The only way I can
    find that accomplishes all of this is... well...

    I know TABLEs aren't supposed to be used for layout, but doggone it they're so
    much easier and they /work/ :)
     
    Jeff Bowman, Apr 10, 2005
    #19
  20. Jeff Bowman

    Toby Inkster Guest

    Jeff Bowman wrote:
    > Toby Inkster wrote:
    >
    >> Rewrite: http://examples.tobyinkster.co.uk/intexx-ice/new/

    >
    > Hey, WOW! That's great! How'd you do that so fast? :)


    Your code was actually quite nice and clean (though I didn't like the way
    you did the bullet list at all!), so it wasn't too much work.

    > Say, a couple of things:
    > 1) Is there a way to set all the tabs the same width?


    The LI elements have been set to "display:inline". Unfortunately, inline
    elements can't be assigned a width.

    The proper solution would be to use "display:inline-block" which is much
    the same as "display:inline", but *can* be assigned a width. However,
    "inline-block" is only supported by Opera 7/8. :-(

    Another solution would be to manually adjust the padding on each list
    item, so that they are roughly the same width.

    However, there is a lot to be said in favour of variable widths for those
    tabs. As they are, they only just fit a maximised browser on a 640x480
    screen. If you had them all the same width, then they would end up
    slightly wider in total, so would wrap around on a 640x480 display.

    > 2) Is there a way to center vertically the contents of a DIV?


    Yes, but it's a bit of a hack:
    http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me ~ http://tobyinkster.co.uk/contact
     
    Toby Inkster, Apr 11, 2005
    #20
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Stephen

    Netscape Problem

    Stephen, Aug 19, 2004, in forum: ASP .Net
    Replies:
    0
    Views:
    415
    Stephen
    Aug 19, 2004
  2. Stephen

    Netscape + enter key Problem

    Stephen, Aug 20, 2004, in forum: ASP .Net
    Replies:
    0
    Views:
    393
    Stephen
    Aug 20, 2004
  3. Tom
    Replies:
    0
    Views:
    497
  4. Mickey Segal
    Replies:
    1
    Views:
    667
    Mickey Segal
    May 21, 2004
  5. yaktipper
    Replies:
    10
    Views:
    283
    Richard Cornford
    Jul 10, 2003
Loading...

Share This Page