float and clear oddness requires border?

[Uncle Pirate]

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

 

[Mark Parnell]

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

 

[Uncle Pirate]

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.

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.

Oops, typed the link instead of copy/paste.

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