HTML/CSS help

[eklass]

alright people, i've bit the bullet and am transforming a website to pretty css-ness (including doing things like making it yummy for text-based browsers and screenreaders). however, i've having a problem getting a certain somethign to align to the bottom. it's not working in IE or Firefox. I've tried vertical-align: bottom; and vertical-align: baseline; but nothing. PLEASE someone suggest something. Here's the file: http://thetasigma.org/test.html

oh yeah, and if you see anything else amiss, please let me know. this is the first time i'm going this all-out for CSS. thanks

Edit:
i've beaten it to a pulp and forced it down my simply giving it coordinates. unfortunately if i change the div with the image, i will have to adjust the coordinates for this. now my problem is that the <li> elements aren't sizing properly. in IE they go to thier proper height and width, but in FireFox it doesn't look so nice. any clues here?

 

[Insomnium]

Clicking on a link on the left, let's say "pledges", brings me to a file not found. That's expected since there's nothing there yet, but when I hit the back button, the labels on the purple buttons on the left disappear. I don't know, maybe it's just me. I'm using FireFox.

 

[eklass]

when i click on the links (which obviously don't work) i get a popup message in firefox. it doesn't "carry" me to a 404 page, so there's no need to hit "back"

 

[Insomnium]

Now when I go to your page I don't see any of the white text inside the purple boxes at all. Could be because of the way you have "a:visited" setup in your stylesheet. And when I click on the boxes, I still go to a Not Found page. Wierd.

 

[Insomnium]

Oh, nevermind, I took a look at Style1.css and you don't have an "a:visited", and all the links point to about.php.

 

[eklass]

the funny thing is i have no visited selector. here's my link stuffs:

of course non of this has to do with my bigger problem (since this is a fixable thing to jsut declare the visited portion)

 

[Insomnium]

The links at the very top of the page, to the right of your logo, also load differently for me in IE and Firefox. In IE, the spacing seems to be correct, while in FireFox, your links are somewhat squished together.

Funny thing is, I'm actually designing a site for my frat at the moment (as are a couple of other ATers), but decided to go with tables for layout and CSS for stuff like fonts and colors because I thought getting my site to work across browsers would be a royal PITA. That, and my knowledge of CSS is still pretty limited, though I just started reading through Oreilly's CSS: The Definitive Guide.

 

[screw3d]

Well.. have you checked if your CSS code validates?

 

[AFB]

You need to use CSS P

Text

Text

 

[eklass]

Insomnium: yes i'm aware about the spacing issue for the top links also, but that's for later

screw3d: my css now vilidates (had some problems with specifying an amount but no unit [such as px]_

amdfanboy: why would encompasing it in P tag change anything? I've tried throwing it in a div in cas the ul doesn't like me, but nothing thus far.




anyone?

 

[jgbishop]

I don't understand what you want to have aligned on the bottom. What exactly is being aligned, and where do you want it?

 

[eklass]

I need the top text "the benefits how to join contact info" to be aligned at the bottom.

Other problems with that UL include not ebing spaced properly in FireFox (but does appear correctly in IE6)

Edit:
might the vertical-align problem have somethign to do with where "wrapping" text aligns to a div? for example, the images in the upper left is simply a DIV with a background-image specified. attached is the HTML to the whole upper box section (so you can see what i'm talking about) topbarcontent has both vertical-align: bottom; and bottom: 0px; specified. However, when i remove the logo DIV, the UL still stays aligned to the top. grrrrrrr. also wrapping the Ulk in an extra DIV that tried to force it down doesn't work, even with the logo removed!

 

[screw3d]

In your HTML, move the top text so that it's the last div.

 

[AFB]

Aligned within a div tag

 

[eklass]

screw3d: i'm not sure exactly what you mean by top text [<ul id="topbarlinks">] is what i'm guessing, but make it the last div in what? the body? doesn't make sense. in any case, as my edit reads in the first post, i've beaten it to a pulp and forced it down my simply giving it coordinates. unfortunately if i change the div with the image, i will have to adjust the coordinates for this. now my problem is that the <li> elements aren't sizing properly. in IE they go to thier proper height and width, but in FireFox it doesn't look so nice. any clues here?

 

[screw3d]

Try to avoid absolute positioning because it almost always displays differently due to IE's box model bug.

I mean.. move the topbarlinks div to the bottom so it just follows the normal HTML layout.. it'll make it easier for you to position it at the bottom so that it'll stay at the bottom regardless of how long your content is.

 

[stndn]

i didn't read all the replies or try to come up with any suggestions..
but from what i've seen, i'm assuming this is the effect you're trying to accomplish?
text