newbie very frustrated with simple CSS

Discussion in 'HTML' started by Slick50, Dec 13, 2006.

  1. Slick50

    Slick50 Guest

    http://messiah.scojul.homedns.org

    Two problems:
    1) UL does not display below header DIV in FF, looks OK in IE6
    2) UL list items will not center in FF or IE.

    I had a hard enough time getting the stupid gif and text to display on the
    same line, and now this...I'm going to go nuts... It shouldn't be this hard,
    should it?

    Grrrrrr...

    Thanks.
     
    Slick50, Dec 13, 2006
    #1
    1. Advertising

  2. Slick50 wrote:
    > http://messiah.scojul.homedns.org
    >
    > Two problems:
    > 1) UL does not display below header DIV in FF, looks OK in IE6
    > 2) UL list items will not center in FF or IE.
    >
    > I had a hard enough time getting the stupid gif and text to display on the
    > same line, and now this...I'm going to go nuts... It shouldn't be this hard,
    > should it?
    >
    > Grrrrrr...
    >
    > Thanks.
    >
    >


    Don't see a list at URL, but if you want a list "UL" centered you must
    1) give it a width and 2) set margins left and right to auto.


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <titleCentered List</title>

    <style type="text/css">
    UL { width: 5em; margin-left: auto; margin-right: auto; }
    </style>
    </head>

    <body>

    <ul>
    <li>List 1</li>
    <li>List 2</li>
    <li>List 3</li>
    </ul>
    </body>
    </html>



    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Dec 13, 2006
    #2
    1. Advertising

  3. Slick50

    Slick50 Guest

    I actually think I resolved both my problems by using the CSS Validator and
    another post. From the post, I tried clear: both, which put the UL (the
    horizontal text) below the header - just as I wanted. The CSS Validator
    indicated an invalid value for text-align (I was using "middle" instead of
    "center". So both of those problems have been fixed.

    However...

    I seem to have introduced another problem. The header background color won't
    display in FF. ????


    I don't know how anyone can get good at this. I've spent three weeks trying
    to get this stupid simple header to display properly and am getting
    absolutely nowhere...


    "Jonathan N. Little" <> wrote in message
    news:8722e$457f9732$40cba7b0$...
    > Slick50 wrote:
    >> http://messiah.scojul.homedns.org
    >>
    >> Two problems:
    >> 1) UL does not display below header DIV in FF, looks OK in IE6
    >> 2) UL list items will not center in FF or IE.
    >>
    >> I had a hard enough time getting the stupid gif and text to display on
    >> the same line, and now this...I'm going to go nuts... It shouldn't be
    >> this hard, should it?
    >>
    >> Grrrrrr...
    >>
    >> Thanks.

    >
    > Don't see a list at URL, but if you want a list "UL" centered you must 1)
    > give it a width and 2) set margins left and right to auto.
    >
    >
    > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    > "http://www.w3.org/TR/html4/strict.dtd">
    > <html>
    > <head>
    > <titleCentered List</title>
    >
    > <style type="text/css">
    > UL { width: 5em; margin-left: auto; margin-right: auto; }
    > </style>
    > </head>
    >
    > <body>
    >
    > <ul>
    > <li>List 1</li>
    > <li>List 2</li>
    > <li>List 3</li>
    > </ul>
    > </body>
    > </html>
    >
    >
    >
    > --
    > Take care,
    >
    > Jonathan
    > -------------------
    > LITTLE WORKS STUDIO
    > http://www.LittleWorksStudio.com
     
    Slick50, Dec 13, 2006
    #3
  4. Slick50

    Vince Morgan Guest

    "Slick50" <> wrote in message
    news:JfMfh.7402$...
    > http://messiah.scojul.homedns.org
    >
    > Two problems:
    > 1) UL does not display below header DIV in FF, looks OK in IE6
    > 2) UL list items will not center in FF or IE.
    >
    > I had a hard enough time getting the stupid gif and text to display on the
    > same line, and now this...I'm going to go nuts... It shouldn't be this

    hard,
    > should it?
    >
    > Grrrrrr...
    >
    > Thanks.
    >
    >


    Inheritence can cause some trouble if you don't account for it at the very
    beginning ..
    You should set base properties for the parent object, which would be <body>
    here, and overide those as necessary.
    Ie;
    <style type="text/css">
    body {
    width:100%;
    height:100%;
    font-family:Georgia, Arial, sans-serif;
    font-size:1em; /*best to size fonts in either em or px*/
    background:#FFF;
    color:#000;
    }
    #header {
    background:#333;
    }
    </style

    It's also worth asking for help for a particular problem as it arrises. If
    you don't, you may end up fixing (apparently) it by trial and error, and
    that is almost always a bad thing IMHO. Reason being that you then don't
    know why it works, nor why it didn't. Not to mention the fact that it may
    well break in another browser, or environment. You need also to account for
    some irregular behaviour in non standards complient browsers. Need, is the
    keyword here, as there are more of them than there are not.
    Unfortunately, some would say, web pages are no longer the extremely simple
    things they used to be back in the early days. You now "need" some
    technical understanding of the hows, and certainly the whys. How much
    understanding depends on the level of expertise you wish to attain.
    HTH
    Vince Morgan
     
    Vince Morgan, Dec 13, 2006
    #4
  5. Slick50

    John Hosking Guest

    Hello, Slick (great name for a self-described newbie ;-) )

    Please don't top-post. It's confusing. I've fixed it for you this time.

    Slick50 wrote:
    > "Jonathan N. Little" <> wrote in message
    > news:8722e$457f9732$40cba7b0$...
    >
    >>Slick50 wrote:
    >>
    >>>http://messiah.scojul.homedns.org
    >>>
    >>>Two problems:
    >>>1) UL does not display below header DIV in FF, looks OK in IE6
    >>>2) UL list items will not center in FF or IE.


    >>
    >>Don't see a list at URL, but if you want a list "UL" centered you must 1)
    >>give it a width and 2) set margins left and right to auto.
    >>
    >><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    >> "http://www.w3.org/TR/html4/strict.dtd">
    >><html>
    >><head>
    >> <titleCentered List</title>


    Should be <title>Centered List</title>

    [other helpfulness snipped]

    > I actually think I resolved both my problems by using the CSS Validator and
    > another post. From the post, I tried clear: both, which put the UL (the
    > horizontal text) below the header - just as I wanted. The CSS Validator
    > indicated an invalid value for text-align (I was using "middle" instead of
    > "center". So both of those problems have been fixed.
    >
    > However...
    >
    > I seem to have introduced another problem. The header background color won't
    > display in FF. ????
    >
    >
    > I don't know how anyone can get good at this. I've spent three weeks trying
    > to get this stupid simple header to display properly and am getting
    > absolutely nowhere...
    >

    Newbie questions should be easy to help solve. But you don't seem to
    have any lists at the URL you provided, and you don't have any
    clear:both at the URL you provided, and I don't see any attempt to
    specify a background at the URL you provided. (And what other post might
    you be talking about?) So, do you have another URL? (Or should we stop
    trying to help? You don't sound happy yet.)

    BTW, what *is* at the URL you provided contains this rule:
    font-family: "Comic Sans MS" "Veranda" sans-serif;

    1) font alternatives are supposed to be comma-separated; and
    2) By "Veranda", do you mean "Verdana"?
    3) The use of Verdana isn't always your best choice, but for now, it's
    not your biggest problem. (But pay attention over time to discussions
    about font choices, so you can decide for yourself).

    HTH
    --
    John
     
    John Hosking, Dec 13, 2006
    #5
  6. "Slick50" <> wrote in message
    news:XLMfh.7469$...
    >I actually think I resolved both my problems by using the CSS Validator and
    >another post. From the post, I tried clear: both, which put the UL (the
    >horizontal text) below the header - just as I wanted. The CSS Validator
    >indicated an invalid value for text-align (I was using "middle" instead of
    >"center". So both of those problems have been fixed.
    >
    > However...
    >
    > I seem to have introduced another problem. The header background color
    > won't display in FF. ????
    >
    >
    > I don't know how anyone can get good at this. I've spent three weeks
    > trying to get this stupid simple header to display properly and am getting
    > absolutely nowhere...
    >


    It's worth perservering with. It's great fun once you get the hang of it,
    though it will be frustrating for a while longer yet. It's probably worth
    finding a site that you think looks nice and then interpret their CSS.

    As for your site, I can't see any background properties for any of your
    divs. Also, there is no font called Veranda. ;-) and I think you need
    commas between your fonts.

    Good luck

    +e
     
    The Eclectic Electric, Dec 13, 2006
    #6
  7. Slick50

    Toby Inkster Guest

    John Hosking wrote:

    > font-family: "Comic Sans MS" "Veranda" sans-serif;
    >
    > 1) font alternatives are supposed to be comma-separated; and
    > 2) By "Veranda", do you mean "Verdana"?
    > 3) The use of Verdana isn't always your best choice, but for now, it's
    > not your biggest problem. (But pay attention over time to discussions
    > about font choices, so you can decide for yourself).


    4) "Comic Sans MS" is one of the most horrible fonts on the planet.
    5) The two specified fonts look absolutely nothing like each other, so
    using one as a fall back for the other doesn't really make sense.

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me ~ http://tobyinkster.co.uk/contact
     
    Toby Inkster, Dec 13, 2006
    #7
  8. Vince Morgan wrote:

    > font-size:1em; /*best to size fonts in either em or px*/


    Best to size fonts in either em or percent. 100%, actually.

    Using em causes problems with Internet Explorer which has a terrible
    'resizing' bug, whereas if the visitor changes from, say, Smaller to
    Medium, the size will double!

    http://k75s.home.att.net/fontsize.html

    --
    -bts
    -Motorcycles defy gravity; cars just suck
     
    Beauregard T. Shagnasty, Dec 13, 2006
    #8
  9. Slick50

    Slick50 Guest

    First, let me start by thanking you for your responses and constructive
    criticism.

    Second, I am an idiot. The code I was working on was not uploaded to my
    webserver. I've fixed that dumb problem.

    Though as John stated it is not my biggest problem at this point, I will
    carefully consider the comments regarding Comic Sans MS. The look and feel
    fits into the way I want my site to appear, I will search for alternatives.
    To be honest, I simply looked at the font styles in my Control Panel as I
    haven't found a resource for font styles yet (admittedly, I haven't searched
    much yet either).

    Regarding Electric's post, I have heard that comment several times and it
    does make sense in general. However I've tried that several times and get
    lost in the details. I have a hard time finding a site (and believe me after
    three weeks, I've done plenty of looking) that addresses content layout
    AFTER the basic layout is in place. That is the key for me. I think
    understand how to layout the pages, but I'm struggling with element
    alignment within a basic layout. I certainly would welcome your suggestions
    for other resources.

    Regarding Vince - I would be very intested in your comments now that I have
    the right code available. Is inheritance preventing the background color
    from displaying? And I understand exactly what you are getting at by your
    final comments. I initially considered taking this one step at a time as you
    suggest, however I thought I could at least get close before asking a
    question. Turns out I was horribly wrong, and that I find myself in the
    trial-and-error situation you describe. I do feel though now that I am
    starting to make a little progress. This was my first post after getting to
    that point. Great comments, thanks.

    Finally BTS (what a great handle), your comments are also well received.
    Thanks for your input too.
     
    Slick50, Dec 13, 2006
    #9
  10. Slick50

    dorayme Guest

    In article <5n.co.uk>,
    Toby Inkster <> wrote:

    > John Hosking wrote:
    >
    > > font-family: "Comic Sans MS" "Veranda" sans-serif;
    > >
    > > 1) font alternatives are supposed to be comma-separated; and
    > > 2) By "Veranda", do you mean "Verdana"?
    > > 3) The use of Verdana isn't always your best choice, but for now, it's
    > > not your biggest problem. (But pay attention over time to discussions
    > > about font choices, so you can decide for yourself).

    >
    > 4) "Comic Sans MS" is one of the most horrible fonts on the planet.
    > 5) The two specified fonts look absolutely nothing like each other, so
    > using one as a fall back for the other doesn't really make sense.


    Not my favourite font either but it was a dear wish of a client
    for her organization's site (to match their publications) so I
    went into battle and won great swathes of territory with stuff
    like that it is harder to read in general on a screen, it takes
    up too much line height, I forget if i mentioned it looks too
    cute, no, I think I piked out on that one. But the arguments
    hardly counted for headings. So it was agreed that main headings
    only should be CS. And this looked a tiny odd so I threw in all
    <h2>s as well.

    I used a fallback of Arial to make this sense: if a user had no
    CS, the headings would head in a direction I wanted. But that I
    should be so lucky, everyone seems to have CS. Does not seem to
    me too horrible in small doses anyway...

    --
    dorayme
     
    dorayme, Dec 13, 2006
    #10
  11. Slick50

    dorayme Guest

    In article <JfMfh.7402$>,
    "Slick50" <> wrote:

    > I had a hard enough time getting the stupid gif and text to display on the
    > same line, and now this...I'm going to go nuts... It shouldn't be this hard,
    > should it?


    In the early days of many technologies, things are hard. In about
    50 years (maybe sooner) there will be a dramatic improvement.

    --
    dorayme
     
    dorayme, Dec 13, 2006
    #11
  12. Slick50

    Vince Morgan Guest

    "Beauregard T. Shagnasty" <> wrote in message
    news:42Ufh.484181$...
    > Vince Morgan wrote:
    >
    > > font-size:1em; /*best to size fonts in either em or px*/

    >
    > Best to size fonts in either em or percent. 100%, actually.
    >
    > Using em causes problems with Internet Explorer which has a terrible
    > 'resizing' bug, whereas if the visitor changes from, say, Smaller to
    > Medium, the size will double!
    >
    > http://k75s.home.att.net/fontsize.html
    >
    > --
    > -bts
    > -Motorcycles defy gravity; cars just suck


    My bad. I don't know where my head was when I wrote that..
    And thank you for the info on IE bug, I wasn't aware of that one at all.
    Vince Morgan
     
    Vince Morgan, Dec 13, 2006
    #12
  13. Slick50

    Vince Morgan Guest

    "Slick50" <> wrote in message
    news:JfMfh.7402$...
    > http://messiah.scojul.homedns.org
    >
    > Two problems:
    > 1) UL does not display below header DIV in FF, looks OK in IE6
    > 2) UL list items will not center in FF or IE.
    >
    > I had a hard enough time getting the stupid gif and text to display on the


    I took the liberty of downloading your css file and modifying it slightly.
    I've added a <div> and made a few small changes to the css. I removed
    'display:block' from #square as it is an inline element in an inline
    context, that is inline by default.
    The change in case is simply my editor setup.


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/HTML4/strict.dtd">
    <HTML>
    <HEAD>
    <TITLE></TITLE>
    <META http-equiv="Content-Type" content="text/HTML; charset=utf-8">
    <!--<LINK rel="stylesheet" href="css/style.css" type="text/css">-->
    <style type="text/css">
    body
    {
    padding-right: 0px;
    padding-left: 0px;
    background: #fff;
    padding-bottom: 0px;
    margin: 0px;
    width: 100%;
    color: #000;
    padding-top: 0px;
    font-family: "georgia", "arial", sans-serif;
    height: 100%;
    }
    #wrapper
    {
    background-color: #f6ec2a;
    }

    #header
    {
    font-weight:bold;
    font-size:1.5em;
    color: red;
    }
    #square
    {
    margin-top: 1em;
    float: left;
    margin-left: 1em;
    width: 75px;
    height: 75px;
    }
    #logo
    {
    float: right;
    margin-right: 2em;
    list-style-type: none;
    }
    #navbar
    {
    clear: both;
    text-align: center
    }
    #navlist
    {
    padding-right: 0px;
    display: inline;
    padding-left: 0px;
    padding-bottom: 0px;
    margin: 0px;
    padding-top: 0px;
    list-style-type: none
    }
    #navlist li
    {
    display: inline;
    margin: 1em
    }
    </style>
    </HEAD>
    <BODY>
    <DIV id="wrapper">
    <DIV id="header">
    <IMG id="square" src="imges/square.gif">
    <UL id="logo">
    <LI>Messiah
    <LI>Lutheran
    <LI>Preschool
    </UL>
    </DIV>

    <DIV id="navbar">
    <UL id="navlist">
    <LI>Newsletter
    <LI>For Parents
    <LI>Daily Schedule
    <LI>Monthly Planner
    <LI>School Calendar
    <LI>Policies
    <LI>About Us
    </UL>
    </DIV>
    </DIV><!--wrapper
    </BODY>
    </HTML>

    The background should now be the desired color. I haven't had the time to
    check it very thoroughly so......
    All the best,
    Vince Morgan
     
    Vince Morgan, Dec 14, 2006
    #13
  14. Slick50

    Slick50 Guest

    Thanks again Vince, very helpful. I studied your example, and I found that
    instead of adding an additional DIV, moving the closing DIV tag below the
    navigation UL got me pretty much where I wanted. There are differences in
    the way IE and FF display the right-hand UL. FF seems to vertically align
    the list, but IE aligns at the top. And the spacing between the bottom list
    and the elements above have nice spacing in FF, but IE seems to collapse the
    margin. Not sure which one is *right*, but I'm closer. Thanks for your
    effort.

    http://messiah.scojul.homedns.org/vince.html



    "Vince Morgan" <> wrote in message
    news:45809d4d$0$19406$...
    >
    > "Slick50" <> wrote in message
    > news:JfMfh.7402$...
    >> http://messiah.scojul.homedns.org
    >>
    >> Two problems:
    >> 1) UL does not display below header DIV in FF, looks OK in IE6
    >> 2) UL list items will not center in FF or IE.
    >>
    >> I had a hard enough time getting the stupid gif and text to display on
    >> the

    >
    > I took the liberty of downloading your css file and modifying it slightly.
    > I've added a <div> and made a few small changes to the css. I removed
    > 'display:block' from #square as it is an inline element in an inline
    > context, that is inline by default.
    > The change in case is simply my editor setup.
    >
    >
    > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    > "http://www.w3.org/TR/HTML4/strict.dtd">
    > <HTML>
    > <HEAD>
    > <TITLE></TITLE>
    > <META http-equiv="Content-Type" content="text/HTML; charset=utf-8">
    > <!--<LINK rel="stylesheet" href="css/style.css" type="text/css">-->
    > <style type="text/css">
    > body
    > {
    > padding-right: 0px;
    > padding-left: 0px;
    > background: #fff;
    > padding-bottom: 0px;
    > margin: 0px;
    > width: 100%;
    > color: #000;
    > padding-top: 0px;
    > font-family: "georgia", "arial", sans-serif;
    > height: 100%;
    > }
    > #wrapper
    > {
    > background-color: #f6ec2a;
    > }
    >
    > #header
    > {
    > font-weight:bold;
    > font-size:1.5em;
    > color: red;
    > }
    > #square
    > {
    > margin-top: 1em;
    > float: left;
    > margin-left: 1em;
    > width: 75px;
    > height: 75px;
    > }
    > #logo
    > {
    > float: right;
    > margin-right: 2em;
    > list-style-type: none;
    > }
    > #navbar
    > {
    > clear: both;
    > text-align: center
    > }
    > #navlist
    > {
    > padding-right: 0px;
    > display: inline;
    > padding-left: 0px;
    > padding-bottom: 0px;
    > margin: 0px;
    > padding-top: 0px;
    > list-style-type: none
    > }
    > #navlist li
    > {
    > display: inline;
    > margin: 1em
    > }
    > </style>
    > </HEAD>
    > <BODY>
    > <DIV id="wrapper">
    > <DIV id="header">
    > <IMG id="square" src="imges/square.gif">
    > <UL id="logo">
    > <LI>Messiah
    > <LI>Lutheran
    > <LI>Preschool
    > </UL>
    > </DIV>
    >
    > <DIV id="navbar">
    > <UL id="navlist">
    > <LI>Newsletter
    > <LI>For Parents
    > <LI>Daily Schedule
    > <LI>Monthly Planner
    > <LI>School Calendar
    > <LI>Policies
    > <LI>About Us
    > </UL>
    > </DIV>
    > </DIV><!--wrapper
    > </BODY>
    > </HTML>
    >
    > The background should now be the desired color. I haven't had the time to
    > check it very thoroughly so......
    > All the best,
    > Vince Morgan
    >
    >
     
    Slick50, Dec 14, 2006
    #14
    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. Randy O'Bright

    very frustrated Java programmer

    Randy O'Bright, Jan 4, 2004, in forum: Java
    Replies:
    21
    Views:
    1,404
    Tor Iver Wilhelmsen
    Jan 7, 2004
  2. Manuel Perdigão

    very frustrated java programmer

    Manuel Perdigão, Jan 5, 2004, in forum: Java
    Replies:
    3
    Views:
    392
    kaeli
    Jan 6, 2004
  3. Raymond Arthur St. Marie II of III

    very Very VERY dumb Question About The new Set( ) 's

    Raymond Arthur St. Marie II of III, Jul 23, 2003, in forum: Python
    Replies:
    4
    Views:
    499
    Raymond Hettinger
    Jul 27, 2003
  4. olivier.melcher

    Help running a very very very simple code

    olivier.melcher, May 12, 2008, in forum: Java
    Replies:
    8
    Views:
    2,328
  5. Jim
    Replies:
    5
    Views:
    157
    Ray at
    Jun 5, 2004
Loading...

Share This Page