float and clear oddness requires border?

Discussion in 'HTML' started by Uncle Pirate, Aug 11, 2004.

  1. Uncle Pirate

    Uncle Pirate Guest

    I've been reading this group now for some time and posted a few times
    but this is my first call for help from the group. I know it is an HTML
    group and not a CSS group; unfortunately for me, my news server does not
    seem to carry a CSS group, thus my off topic question.

    I am attempting to update a website (http://alamo.nmsu.edu) from HTML
    3.2 using table layout to HTML 4.01 and CSS without the table layout. I
    am starting slowly so ignore all the horrid old code you see if you go
    there. The page that I am having difficulty with is
    http://alamo.nmsu.edu/computer/index2.html and it's associated css at
    http//:alamo.nmsu.edu/computer/styles.css. The links in the center
    column will only line up if I include a solid border on the divs,
    otherwise, the button on the next line is apparantly floated to the
    right of the button above. I discovered this oddness when I placed a
    border around the divs I was working with to see what was going on. I
    don't want a border but things don't line up without it. I tried
    setting the color of the border to transparant which works in Mozilla
    but does not validate. I wound up making the page background color to
    hide it. Any ideas as to why a border should be necessary to vertically
    align the buttons? Or am I doing something else wrong on this?

    --
    Stan McCann "Uncle Pirate"
    Webmaster/Computer Center Manager, NMSU at Alamogordo
    Cooordinator, Tularosa Basin Chapter, ABATE of NM AMA#758681
    '94 1500 Vulcan (now wrecked) :( http://motorcyclefun.org/Dcp_2068c.jpg
    A zest for living must include a willingness to die. - R.A. Heinlein
     
    Uncle Pirate, Aug 11, 2004
    #1
    1. Advertising

  2. Uncle Pirate

    Mark Parnell Guest

    On Wed, 11 Aug 2004 12:07:00 -0600, Uncle Pirate <>
    declared in alt.html:

    > I know it is an HTML
    > group and not a CSS group; unfortunately for me, my news server does not
    > seem to carry a CSS group, thus my off topic question.


    Did you try news://comp.infosystems.www.authoring.stylesheets ?

    Doesn't matter anyway - we like CSS here too. :)

    > I am attempting to update a website (http://alamo.nmsu.edu) from HTML
    > 3.2 using table layout to HTML 4.01 and CSS without the table layout.


    Woohoo! :-D

    > http://alamo.nmsu.edu/computer/index2.html and it's associated css at
    > http//:alamo.nmsu.edu/computer/styles.css. The links in the center
    > column will only line up if I include a solid border on the divs,
    > otherwise, the button on the next line is apparantly floated to the
    > right of the button above.


    I don't see the problem you describe in IE6 or Moz1.7. IE does however
    wrap the 3rd column underneath the first unless my font size is set to
    smaller or smallest.

    It seems you are trying too hard to recreate tables with your divs. Try
    something along these lines:

    <div class="navbar">
    <a href=""><img ...></a>
    <a href=""><img ...></a>
    <a href=""><img ...></a>
    <a href="" class="newline"><img ...></a>
    <a href=""><img ...></a>
    <a href=""><img ...></a>
    <a href="" class="newline"><img ...></a>
    <a href=""><img ...></a>
    <a href=""><img ...></a>
    </div>

    And add to the CSS:

    div.navbar {margin: 0 auto;}

    div.navbar a {float: left;}

    div.navbar a.newline {clear: left;}

    Obviously it will require some tweaking, but that should get you started
    (note: not actually tested).

    Of course, those links really should be text not images anyway. They are
    far too small for me to read comfortably.

    HTH

    --
    Mark Parnell
    http://www.clarkecomputers.com.au
    "Never drink rum&coke whilst reading usenet" - rf 2004
     
    Mark Parnell, Aug 11, 2004
    #2
    1. Advertising

  3. Uncle Pirate

    Uncle Pirate Guest

    Mark Parnell wrote:

    > On Wed, 11 Aug 2004 12:07:00 -0600, Uncle Pirate <>
    > declared in alt.html:
    >
    >
    >>I know it is an HTML
    >>group and not a CSS group; unfortunately for me, my news server does not
    >>seem to carry a CSS group, thus my off topic question.

    >
    >
    > Did you try news://comp.infosystems.www.authoring.stylesheets ?


    Duh! I didn't even think to search for stylesheet, I was searching for
    CSS. I'll look for that group, bet I'll find it and others too. Thanks.

    >
    > Doesn't matter anyway - we like CSS here too. :)


    I know; that's why I wasn't too bothered by making an "off topic" post.

    >
    >
    >>I am attempting to update a website (http://alamo.nmsu.edu) from HTML
    >>3.2 using table layout to HTML 4.01 and CSS without the table layout.

    >
    >
    > Woohoo! :-D


    Temporarily. We are working on a total revision of structure, layout,
    and design. When our site was created initially, we looked at the
    different areas of campus and asked what they had to offer. For the
    revision, we are changing POV and asking who are you and what are you
    looking for? If at all possible, we want users to find the information
    they want/need within 3-4 clicks.

    >
    >
    >>http://alamo.nmsu.edu/computer/index2.html and it's associated css at
    >>http//:alamo.nmsu.edu/computer/styles.css. The links in the center


    Oops, typed the link instead of copy/paste.

    >>column will only line up if I include a solid border on the divs,
    >>otherwise, the button on the next line is apparantly floated to the
    >>right of the button above.

    >
    >
    > I don't see the problem you describe in IE6 or Moz1.7. IE does however
    > wrap the 3rd column underneath the first unless my font size is set to
    > smaller or smallest.


    I see that I was not specific enough. The problem is in the centered
    columns of links near the bottom of the page. I'll throw a copy named
    index3 up tomorrow demonstrating the problem without the borders which
    I've set to white as a cludge. But it validates. :)

    I hadn't yet tested other browsers. I usually wait until after I can
    validate. I've seen the problem you describe when the window is made
    very narrow (less than the graphic horizontal bars width). That's odd
    about the font size because my fonts are set rather large I thought (16px).

    >
    > It seems you are trying too hard to recreate tables with your divs. Try
    > something along these lines:


    I'll try the following but I'm thinking of going back to a table for
    just that navbar. Until we decide on a new layout, I need to keep it
    looking much the same even if it means staying with the outdated code.

    >
    > <div class="navbar">
    > <a href=""><img ...></a>
    > <a href=""><img ...></a>
    > <a href=""><img ...></a>
    > <a href="" class="newline"><img ...></a>
    > <a href=""><img ...></a>
    > <a href=""><img ...></a>
    > <a href="" class="newline"><img ...></a>
    > <a href=""><img ...></a>
    > <a href=""><img ...></a>
    > </div>
    >
    > And add to the CSS:
    >
    > div.navbar {margin: 0 auto;}
    >
    > div.navbar a {float: left;}
    >
    > div.navbar a.newline {clear: left;}
    >
    > Obviously it will require some tweaking, but that should get you started
    > (note: not actually tested).
    >
    > Of course, those links really should be text not images anyway. They are
    > far too small for me to read comfortably.
    >
    > HTH


    Thanks Mark, yes it does help. And in the revision, I'll get rid of
    that whole navbar thing. I don't know exactly what our committee will
    come up with as far as layout and design but I think we've got a good
    talented group together. I can't wait to start seeing some ideas. So
    far, I've played with some ideas at http://alamo.nmsu.edu/newsite/.
    Mostly, those are "how can I" pages, though. And nowhere near complete
    in that there are missing image dimensions and title attributes and
    probably a lot more (content?) once I get to coming up with a "finished"
    page.

    --
    Stan McCann "Uncle Pirate"
    Webmaster/Computer Center Manager, NMSU at Alamogordo
    Cooordinator, Tularosa Basin Chapter, ABATE of NM AMA#758681
    '94 1500 Vulcan (now wrecked) :( http://motorcyclefun.org/Dcp_2068c.jpg
    A zest for living must include a willingness to die. - R.A. Heinlein
     
    Uncle Pirate, Aug 12, 2004
    #3
    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. tshad
    Replies:
    0
    Views:
    2,307
    tshad
    Jan 31, 2005
  2. phl
    Replies:
    1
    Views:
    4,438
    Martin Jay
    Jun 8, 2006
  3. Coder
    Replies:
    1
    Views:
    731
    Cowboy \(Gregory A. Beamer\)
    Jun 24, 2006
  4. bd
    Replies:
    0
    Views:
    671
  5. Carsten Fuchs
    Replies:
    45
    Views:
    1,660
    James Kanze
    Oct 8, 2009
Loading...

Share This Page