Playing with CSS

Discussion in 'HTML' started by UKuser, Sep 28, 2006.

  1. UKuser

    UKuser Guest

    Hi Folks,

    Below is some test text which I've been working on, to try and get my
    head around CSS more.

    However I've observed 3 issues, mainly with Firefox which dont seem to
    like some bits.

    1) Although "centered" is centered, in Firefox the background colour
    doesnt display
    2) The borders in firefox appear to be much wider than IE
    3) The bottom bar doesnt fit to the DIV its in on either IE or Firefox

    Not quite sure why its not working, but can I recommend
    http://www.yourhtmlsource.com/stylesheets/csslayout.html
    for newbies explaining about layout - its not my own site, but its
    good.

    Thanks

    Sp

    <HTML>
    <style>
    body {
    text-align:center;
    }

    #top{
    width:100%;
    height:50px;
    background-color:cyan;
    }

    #overall{
    width:100%;
    height:100%;
    background-color:lightgray;
    }

    #main {
    margin:auto;
    float:left;
    width:500px;
    height:100px;
    border: 1px 1px 1px 1px;
    border-style:solid;
    background-color:lightblue;
    }

    #second{
    float:left;
    width:500px;
    height:100px;
    border: 1px 1px 1px 1px;
    border-style:solid;
    background-color:lightgreen;
    }

    #third{
    position:relative;
    left:5px;
    top:10px;
    float:left;
    width:500px;
    height:100px;
    border: 1px 1px 1px 1px;
    border-style:solid;
    background-color:yellow;
    }

    #right{
    float:left;
    width:300px;
    height:100px;
    background-color:red;
    border: 1px 1px 1px 1px;
    border-style:solid;
    }

    #bottom{
    float:left;
    width:100%;
    height:50px;
    background-color:cyan;
    }

    #containedbottom{
    right:0%;
    left:0%;
    position:absolute;
    width:100%;
    bottom:8px;
    height:50px;
    background-color:cyan;
    }

    #centered{
    width:300px;
    height:100px;
    background-color:red;
    border: 1px 1px 1px 1px;
    border-style:solid;
    margin: 0 auto; text-align: left;
    }

    </style>
    <body><div id="overall">

    <div id="top">
    this is top text
    </div>
    <div id="main">
    this is test text
    <div id="second">
    second text
    <div id="third">
    third text
    </div>
    </div>
    </div>

    <div id="right">
    this text should appear to the right of first box
    </div>
    <div id="bottom">
    this is bottom text
    </div>
    <div id="centered">
    this text should be centered
    </div>
    <div id="containedbottom">
    this is bottom text v2
    </div>

    </div></body>
     
    UKuser, Sep 28, 2006
    #1
    1. Advertising

  2. UKuser

    mbstevens Guest

    On Thu, 28 Sep 2006 03:37:59 -0700, UKuser wrote:

    > Hi Folks,
    >
    > Below is some test text which I've been working on, to try and get my head
    > around CSS more..................


    > body {
    > text-align:center;
    > }
    > }
    > #top{
    > width:100%;
    > height:50px;
    > background-color:cyan;
    > }
    > }



    Your parens are so imbalanced that I'm surprised anything works at all.
    Remove extras:
    > body {
    > text-align:center;
    > }
    >
    > #top{
    > width:100%;
    > height:50px;
    > background-color:cyan;
    > }

    ....and so on through the rest of your CSS markup.

    ....then recheck your CSS at:
    http://jigsaw.w3.org/css-validator/
    before even trying to run it.
    --
    mbstevens
    http://www.mbstevens.com/
     
    mbstevens, Sep 28, 2006
    #2
    1. Advertising

  3. UKuser

    mbstevens Guest

    On Thu, 28 Sep 2006 10:52:34 +0000, mbstevens wrote:

    Oops, my corrections were returned to the original by my mailer
    because I left the quotation-carets in. Lets try...

    body {
    text-align:center;
    }


    #top{
    width:100%;
    height:50px;
    background-color:cyan;
    }
     
    mbstevens, Sep 28, 2006
    #3
  4. UKuser

    mbstevens Guest

    On Thu, 28 Sep 2006 10:58:49 +0000, mbstevens wrote:

    > On Thu, 28 Sep 2006 10:52:34 +0000, mbstevens wrote:
    >
    > Oops, my corrections were returned to the original by my mailer because I
    > left the quotation-carets in. Lets try...


    Did it again!
    Let's try rewriting it by hand...

    body {text-align:center}

    #top {
    width:100%;
    height:50px;
    background-color:cyan}
     
    mbstevens, Sep 28, 2006
    #4
  5. UKuser

    Els Guest

    mbstevens wrote:

    > On Thu, 28 Sep 2006 03:37:59 -0700, UKuser wrote:
    >
    >> Hi Folks,
    >>
    >> Below is some test text which I've been working on, to try and get my head
    >> around CSS more..................

    >
    >> body {
    >> text-align:center;
    >> }
    >> }
    >> #top{
    >> width:100%;
    >> height:50px;
    >> background-color:cyan;
    >> }
    >> }

    >
    > Your parens are so imbalanced that I'm surprised anything works at all.
    > Remove extras:


    I don't see those extra parenteses in the OP's post.

    --
    Els http://locusmeus.com/
    accessible web design: http://locusoptimus.com/
     
    Els, Sep 28, 2006
    #5
  6. UKuser

    Els Guest

    mbstevens wrote:

    > On Thu, 28 Sep 2006 10:58:49 +0000, mbstevens wrote:
    >
    >> On Thu, 28 Sep 2006 10:52:34 +0000, mbstevens wrote:
    >>
    >> Oops, my corrections were returned to the original by my mailer because I
    >> left the quotation-carets in. Lets try...

    >
    > Did it again!
    > Let's try rewriting it by hand...
    >
    > body {text-align:center}
    >
    > #top {
    > width:100%;
    > height:50px;
    > background-color:cyan}
    >


    You really are seeing things we (or at least I) don't...
    Your second post did not show the quotation marks, and showed the same
    code as you wrote above here, except for the omission of the last
    semi-colon, which is dangerous to leave out when working on
    stylesheets. (easily forgotten when adding more rules)

    --
    Els http://locusmeus.com/
    accessible web design: http://locusoptimus.com/
     
    Els, Sep 28, 2006
    #6
  7. UKuser

    Dylan Parry Guest

    Els wrote:

    > I don't see those extra parenteses in the OP's post.


    Neither did I; mbs's reply to his own post correcting his "mistake" also
    looked fine - so there was no need for the second correction message! I
    think your (mbs) newsreader might be a bit b0rked ;)

    --
    Dylan Parry
    http://electricfreedom.org | http://webpageworkshop.co.uk

    Programming, n: A pastime similar to banging one's head
    against a wall, but with fewer opportunities for reward.
     
    Dylan Parry, Sep 28, 2006
    #7
  8. UKuser

    mbstevens Guest

    On Thu, 28 Sep 2006 12:11:20 +0100, Dylan Parry wrote:

    > Els wrote:
    >
    >> I don't see those extra parenteses in the OP's post.

    >
    > Neither did I; mbs's reply to his own post correcting his "mistake" also
    > looked fine - so there was no need for the second correction message! I
    > think your (mbs) newsreader might be a bit b0rked ;)


    It must be. Thanks for letting me know.
     
    mbstevens, Sep 28, 2006
    #8
  9. UKuser

    mbstevens Guest

    On Thu, 28 Sep 2006 13:09:46 +0200, Els wrote:

    > mbstevens wrote:
    >
    >> On Thu, 28 Sep 2006 10:58:49 +0000, mbstevens wrote:
    >>
    >>> On Thu, 28 Sep 2006 10:52:34 +0000, mbstevens wrote:
    >>>
    >>> Oops, my corrections were returned to the original by my mailer because
    >>> I left the quotation-carets in. Lets try...

    >>
    >> Did it again!
    >> Let's try rewriting it by hand...
    >>
    >> body {text-align:center}
    >>
    >> #top {
    >> width:100%;
    >> height:50px;
    >> background-color:cyan}
    >>
    >>

    > You really are seeing things we (or at least I) don't...


    Yes, you and Dylan are right -- my newsreader must be borked.

    > Your second post
    > did not show the quotation marks, and showed the same code as you wrote
    > above here, except for the omission of the last semi-colon, which is
    > dangerous to leave out when working on stylesheets. (easily forgotten when
    > adding more rules)


    You must be an old C programmer? C actually requires an simi-colon
    after each statement. When I was writing a lot of C I certainly had the
    habit.
     
    mbstevens, Sep 28, 2006
    #9
  10. UKuser

    Els Guest

    mbstevens wrote:

    > You must be an old C programmer? C actually requires an simi-colon
    > after each statement. When I was writing a lot of C I certainly had the
    > habit.


    I don't call myself old, nor am I a C programmer ;-)
    I'm just using a lot of CSS, and find it's easier to always include
    the semi-colon, as well as having the closing parenthesis on a new
    line. Makes it easier to spot omissions, and it just looks better :)

    --
    Els http://locusmeus.com/
    accessible web design: http://locusoptimus.com/
     
    Els, Sep 28, 2006
    #10
  11. UKuser wrote:
    <SNIP>

    You have such an incoherent hodge-podge of code here, who knows! Maybe
    you should look at the spec and look at the syntax and go though the
    properties.

    http://www.w3.org/TR/CSS21/cover.html

    So let's just take one example of your code, 'border' here:

    > #centered{
    > width:300px;
    > height:100px;
    > background-color:red;
    > border: 1px 1px 1px 1px;
    > border-style:solid;


    "The 'border' property is a shorthand property for setting the same
    width, color, and style for all four borders of a box. Unlike the
    shorthand 'margin' and 'padding' properties, the 'border' property
    cannot set different values on the four borders. To do so, one or more
    of the other border properties must be used."

    use:

    border-width: 1px;
    border-style: solid;
    border-color: black;

    or:

    border: 1px solid black;

    if your want to set the individual sides of the border differently you
    cannot use the shorthand 'border' but separate side or properties

    border-top: 1px solid black;
    border-left: 2px solid blue;
    border-top: 10px dotted red;
    border-left: 5px solid cyan; /* insanely ugly */

    or:

    border-width: 1px 2px 10px 5px;
    border-style: solid solid dotted solid;
    border-color: black blue red cyan;

    but not:

    > border: 1px 1px 1px 1px;



    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Sep 28, 2006
    #11
  12. UKuser

    UKuser Guest

    Hi,

    As the original posted, I'm still not sure of what the best solution
    is. Any thoughts?

    Thanks

    Sp


    Els wrote:

    > mbstevens wrote:
    >
    > > You must be an old C programmer? C actually requires an simi-colon
    > > after each statement. When I was writing a lot of C I certainly had the
    > > habit.

    >
    > I don't call myself old, nor am I a C programmer ;-)
    > I'm just using a lot of CSS, and find it's easier to always include
    > the semi-colon, as well as having the closing parenthesis on a new
    > line. Makes it easier to spot omissions, and it just looks better :)
    >
    > --
    > Els http://locusmeus.com/
    > accessible web design: http://locusoptimus.com/
     
    UKuser, Sep 28, 2006
    #12
  13. UKuser

    Els Guest

    UKuser wrote:

    > Hi,
    >
    > As the original posted, I'm still not sure of what the best solution
    > is. Any thoughts?


    Thought: the position:fixed is working in IE7, but for some reason it
    isn't in the right horizontal position.
    Thought nr. 2: perhaps you could make a smaller example to show this
    behaviour, but without all the other stuff. It's called a minimal
    testcase, and it works two ways. First there is the benefit for the
    people you want help from - less code to examine, quicker finding of
    problems. Second there is the possibility that you will find that your
    minimal testcase indeed does work, so you can start adding back all
    the other stuff, to see which of those causes the problem :)

    --
    Els http://locusmeus.com/
    accessible web design: http://locusoptimus.com/
     
    Els, Sep 28, 2006
    #13
  14. UKuser

    dorayme Guest

    In article <1k4kgve85z213$.6qzrxdwklfcm$>,
    Els <> wrote:

    > > You must be an old C programmer? C actually requires an simi-colon
    > > after each statement. When I was writing a lot of C I certainly had the
    > > habit.

    >
    > I don't call myself old, nor am I a C programmer ;-)


    "old C programmer" does not imply being an old person any more
    than "black chimney house" entails the house is black. If you
    started programming C when you were 5 and had been programming
    till now, and you are over 18, that's pleanty long enough to be
    an old C programmer. :)

    --
    dorayme
     
    dorayme, Sep 28, 2006
    #14
  15. UKuser

    Els Guest

    dorayme wrote:

    > In article <1k4kgve85z213$.6qzrxdwklfcm$>,
    > Els <> wrote:
    >
    >>> You must be an old C programmer? C actually requires an simi-colon
    >>> after each statement. When I was writing a lot of C I certainly had the
    >>> habit.

    >>
    >> I don't call myself old, nor am I a C programmer ;-)

    >
    > "old C programmer" does not imply being an old person any more
    > than "black chimney house" entails the house is black. If you
    > started programming C when you were 5 and had been programming
    > till now, and you are over 18, that's pleanty long enough to be
    > an old C programmer. :)


    I know that :)

    --
    Els http://locusmeus.com/
    accessible web design: http://locusoptimus.com/
     
    Els, Sep 29, 2006
    #15
  16. UKuser

    dorayme Guest

    In article <3zvirfnj7yhe$.15q8pt01npwkl$>,
    Els <> wrote:

    > dorayme wrote:
    >
    > > In article <1k4kgve85z213$.6qzrxdwklfcm$>,
    > > Els <> wrote:
    > >
    > >>> You must be an old C programmer? C actually requires an simi-colon
    > >>> after each statement. When I was writing a lot of C I certainly had the
    > >>> habit.
    > >>
    > >> I don't call myself old, nor am I a C programmer ;-)

    > >
    > > "old C programmer" does not imply being an old person any more
    > > than "black chimney house" entails the house is black. If you
    > > started programming C when you were 5 and had been programming
    > > till now, and you are over 18, that's pleanty long enough to be
    > > an old C programmer. :)

    >
    > I know that :)


    I know you know that. I was just exercising my fingers and
    showing off my pedantry as usual... I thought to say something
    true that had no possibility of being actually wrong. It's my
    birthday, I am 783 today. That's old.

    --
    dorayme
     
    dorayme, Sep 29, 2006
    #16
  17. dorayme wrote:

    > I was just exercising my fingers and showing off my pedantry as usual


    You would show your pedanties in public? <wow!> Oh wait. Pedantries.

    --
    -bts
    -Motorcycles defy gravity; cars just suck.
     
    Beauregard T. Shagnasty, Sep 29, 2006
    #17
  18. "Beauregard T. Shagnasty" <> skrev i meddelandet
    news:eek:lZSg.142454$...
    > dorayme wrote:
    >
    > > I was just exercising my fingers and showing off my pedantry as usual

    >
    > You would show your pedanties in public? <wow!> Oh wait. Pedantries.


    Sometimes I am under the impression that many of you who often take part on
    these NGs work for Google.....

    --
    Luigi Donatello Asero
    https://www.scaiecat-spa-gigi.com/it/svezia.html
    我居ä½åœ¨ç‘žå…¸
     
    Luigi Donatello Asero, Sep 29, 2006
    #18
  19. UKuser

    dorayme Guest

    In article
    <olZSg.142454$>,
    "Beauregard T. Shagnasty" <> wrote:

    > dorayme wrote:
    >
    > > I was just exercising my fingers and showing off my pedantry as usual

    >
    > You would show your pedanties in public? <wow!> Oh wait. Pedantries.


    I would NEVER show my pedanties in public.

    pedantry
    noun
    the pedantry in her argument has upset the flow of our discussion
    dogmatism, purism, literalism, formalism; overscrupulousness,
    scrupulousness, perfectionism, fastidiousness, punctiliousness,
    meticulousness; captiousness, quibbling, hair-splitting,
    casuistry, sophistry; informal nitpicking. See note at knowledge .


    (Don't see anything about knowledge)

    --
    dorayme
     
    dorayme, Sep 29, 2006
    #19
  20. UKuser

    dorayme Guest

    In article <_DZSg.17977$>,
    "Luigi Donatello Asero" <> wrote:

    > "Beauregard T. Shagnasty" <> skrev i meddelandet
    > news:eek:lZSg.142454$...
    > > dorayme wrote:
    > >
    > > > I was just exercising my fingers and showing off my pedantry as usual

    > >
    > > You would show your pedanties in public? <wow!> Oh wait. Pedantries.

    >
    > Sometimes I am under the impression that many of you who often take part on
    > these NGs work for Google.....
    >


    Finally! The penny has dropped! You have realised what is going
    on. We are all Google employees. And we are watching you Luigi.

    --
    dorayme
     
    dorayme, Sep 29, 2006
    #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. Ron Clarke

    Sound lost when playing AVI files

    Ron Clarke, Feb 24, 2004, in forum: ASP .Net
    Replies:
    0
    Views:
    351
    Ron Clarke
    Feb 24, 2004
  2. Trint Smith
    Replies:
    0
    Views:
    511
    Trint Smith
    Feb 27, 2004
  3. serkan ulucan
    Replies:
    3
    Views:
    570
    Smirnoff
    Apr 7, 2004
  4. Kevin
    Replies:
    8
    Views:
    348
    VBCodr
    Apr 26, 2004
  5. Hugh G. Johnson

    ASP.NET and SQL 2000 not playing nice?

    Hugh G. Johnson, Sep 6, 2004, in forum: ASP .Net
    Replies:
    3
    Views:
    515
    Hans Kesting
    Sep 7, 2004
Loading...

Share This Page