View Full Version : A couple of CSS questions.

03-04-2004, 11:39 PM
Before I start, here is the site that I will be referring to:hBB (http://home.graffiti.net/spl1nter:graffiti.net/css_attempt/)

In CSS, I cannot seem to vertically align any text. This is the code I'm using for the header part on my page:

#header {
background-color: #FFFFFF;
color: #000000;
border: 2px solid #CCCCCC;
width: auto;
height: 100px;
text-align: center;
margin-bottom: 10px;
vertical-align: auto;

Also, to center align the page, I have used the following:

margin-right: auto;
margin-left: auto;

This works for Netscape 6, Opera 6 and Opera 7. It does not have any effect in IE6. Is there anything else I could use.

Thanks in advance.

03-04-2004, 11:52 PM
as far as I know, there isnt any vertical align formatting in CSS, I may be wrong though.

To center content, I use


body {
margin: 0px auto 0px auto;
text-align: center;

.wrapper {
margin: 0px auto 0px auto;



<div class="wrapper">

.... content in here



Hope this helps.

03-05-2004, 12:04 AM
There's vertical-align:top/middle/bottom Don't think there's an auto though

03-05-2004, 12:07 AM
Thanks a lot :D

Woops, I meant to edit the auto bit. I had tried middle, top and bottom but it had no effect at all on the text. I thought I'd just try auto out of hope, but it didn't work.

03-05-2004, 12:16 AM
Ive seen the vertical align used but it never actually seems to do anything? does anyone know anything about this?

03-05-2004, 12:19 AM
Not sure how it works really. Better wait for the experts :D. It seemed to work for me though on my smilies for my site. I got them aligned to the bottom and they're staying inline with the text now.

03-05-2004, 12:19 AM
When I set it to 500px (just to see if anything happened), it made the area with "This is where the logo will go." really tall (500 pixels I'm guessing :P). The text stayed at the top though?

03-05-2004, 02:15 AM
Just to clear a couple of points up:

vertical-align (http://www.w3.org/TR/CSS2/visudet.html#propdef-vertical-align)
lots of stull on "auto" (http://www.w3.org/TR/CSS2/visudet.html#Computing_widths_and_margins)

03-05-2004, 03:46 AM
center align:

margin: 0 auto;

03-05-2004, 08:45 AM
IE (5.x, 6?) doesn't understand the margin: auto bit; as a hack, to center a block element, its parent should have a text-align: center property, which IE will incorrectly apply to the block element as well. Inside the centered block, text alignment may have to be corrected again. Do specify margin-left / -right: auto as well for compliant browsers.

The vertical-align property only applies to inline elements / content and table cells; check the specs for more detail: CSS 2.1: vertical-align (http://www.w3.org/TR/2004/CR-CSS21-20040225/visudet.html#propdef-vertical-align).

03-05-2004, 12:30 PM
Yea, you wanna do pretty much anything with IE you have to hack something or other...
Remember trying to get max width working in it. :P

03-05-2004, 02:24 PM
I've decided that (just this once) I'll use a table. It will hopefully get removed when I get a logo as it should take up the full space.

03-05-2004, 05:57 PM
Originally posted by ronaldb66
IE (5.x, 6?) doesn't understand the margin: auto bit;IE 6 does.

Originally posted by jdan
Yea, you wanna do pretty much anything with IE you have to hack something or otherNot true, I make a point never to use hacks and I've created (what I consider to be) a pretty decent layout (http://www.webdevforums.com/showthread.php?t=2890#post18287).

Originally posted by spl1nter
I've decided that (just this once) I'll use a table.NOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO :(

The key is not to rely on fixed width content areas, but to determine the width of the content area via the left and right margins.
For example, the layout code that I posted a link to above has a content area with left and right margin widths of 170px.
Since then I have re-done the styles to have a left and right margin of 28% at the sides, this makes the page look fine on 640x480 and on higher resolutions such as 1024x768. You can see the layout in action here (http://www.fsg-uk.com/) and here (http://www.hackus.tk).

Your current layout could quite easily be converted into CSS while at the same time making it more fluid. If you still insist on centring a fixed width block of content then do this:


And then have a margin-left: set to minus half of the content width, so for instance if the content block is 200px wide you would do this:


Unfortunately if the content is very wide (like on yours) then on a smaller resolution the left hand side of the content will be cut off, but the user will still be able to scroll to the right and see the content over there.

Fluid layouts are the furture!!! :D

03-06-2004, 12:51 AM
I needed to vertically align the text, not horizontally.

It's OK, I managed to do it with

position: relative;
top: 50%;

But then I decided that I probably wouldn't need it and got rid of it :P

I have now got the design ready and you can see it here (http://home.graffiti.net/spl1nter:graffiti.net/).

If you go to the updates page you'll see how much CSS has helped the site.

03-06-2004, 02:10 PM
I'm still seeing tables...

03-06-2004, 03:10 PM
Originally posted by lavalamp
I'm still seeing tables... Where? In the calendar? That's good, semantic usage.

03-06-2004, 04:06 PM
Check out the footer as well. There's two tables in there.

03-06-2004, 06:25 PM
I really, really did not want to put those two tables there.

I tried using CSS with position: relative; and it worked fine in Opera 6 + 7 and Netscap 6 but infortunately not in IE6.

The text appeared in the right place, but there was a massive gap where the text would have been (I was using DIV's) without the displacement.

Is there anyway of fixing this? Or is there another way of spacing the text out (as that is what they are used for).

03-06-2004, 06:39 PM
you may want to change the doctype to XHTML, as this should support the box model properly, and it may help fix problems with the box model in IE 6.

03-06-2004, 06:49 PM
So how would I change this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

03-06-2004, 06:55 PM
I use this doctype:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Which is XHTML 1.0 Strict. This will make sure IE6 interprets layers (div) the same as mozilla ect. Please note however that your page will follow XHTML 1.0 Strict definitions so some code may need to be we-written. Its good if you can code your page in XHTML, as it means that no matter what device is accessing it, providing your page validates, its readable and useful.

03-06-2004, 06:57 PM

I'll go and validate it to see what code needs changed and then write the CSS :D

03-06-2004, 06:59 PM
if ya need any help, were here :D

03-06-2004, 07:09 PM
I managed to fix the problems (mainly not closing tags like </meta> and </img>

There are two that I don't understand.

Line 2, column 11: an attribute value specification must be an attribute value literal unless SHORTTAG YES is specified

<html lang=en>

How do I set the default language?

Line 25, column 82: there is no attribute "border".

...alt='Click to skip this menu' border='0' width="0" height="0"></img></a>

What can I use then to make sure there is no border around my linked image?

03-06-2004, 07:12 PM
As for the first part, im not sure, but you may just wish to try:

<html lang="en">

for the second question, border is not supported by img tags, so simply add (inline or in a style file)

border: 0px;

If you are doing this inline it will be:

<img style="border: 0px" .... />

03-06-2004, 07:13 PM
Also, to let you know, for single tags, you dont have to do this:

<img ..></img>

XHTML allows them to be presented like this:

<img ... />
<meta />
<br />

EDIT: yay! post 700

03-06-2004, 07:28 PM
Thanks a lot :D

It passed. I'll now go and apply it to all the pages and get rid of those tables :D

03-06-2004, 07:48 PM
Um....it hasn't worked :(

This is the HTML code:

<div class="t1">latest news: <a href="index.htm" title="Click to go to this news article.">None</a></div>
<div class="t2">latest topic: <a href="index.htm" title="Click to go to this topic.">Hattrick</a></div>
<div class="t3">latest post: <a href="index.htm" title="Click to go to this post.">Hattrick</a></div>

<div class="m1">users online: <a href="index.htm?profile=spl1nter" title="Click to go to spl1nter's profile.">spl1nter</a></div>

<div class="b1">most users online: 12</div>
<div class="b2">total number of members: 725</div>
<div class="b3">total number of topics: 58</div>
<div class="b4">total number of posts: 321</div>

And this is the CSS:

#footer .t1 {
position: relative;
#footer .t2 {
position: relative;
left: 33%;
top: -14px;
#footer .t3 {
position: relative;
left: 66%;
top: -28px;
#footer .m1 {
position: relative;
top: -28px;
#footer .b1 {
position: relative;
top: -28px;
#footer .b2 {
position: relative;
left: 25%;
top: -42px;
#footer .b3 {
position: relative;
left: 50%;
top: -56px;
#footer .b4 {
position: relative;
left: 75%;
top: -70px;

Please don't bawl at me for crap programming :P I'm new to CSS.

03-06-2004, 07:58 PM
Ok, there are 3 properties that will help no end here, they are:


Im busy right now so I dont have time to re-write your code for you, but have a play around with this and expiriment using float.

.container {
width: 700px;

.box {
width: 100px;
float: left;
border: 1px solid #999;
background: #DDD;

.rightbox {
float: right;
border: 1px solid #999;
background: #CCC;

<div class="container">

<div class="box">Div 1</div>
<div class="box">Div 2</div>
<div class="box">Div 3</div>

<div class="rightbox">Div 4</div>


03-06-2004, 09:06 PM
Thanks a lot :D

It works perfectly. My site now has fully compliant CSS and XHTML at a strict level thanks to you.

Check the site in a couple of hours to see something :P

Now I can go and complete the site in CSS and HTML before the real fun begins in PHP and MySQL.