CSS/HTML Help

The Supreme Canuck · #1 (**permalink**) 29-October-2007, 06:51 PM

Does anyone here know much about CSS and HTML? I've hit a slight snag. I'm trying to centre a box (have it as a span with a div inside - a box in a box) both horizontally and vertically. I can get it to work just fine in Firefox, but IE won't let me do it. I've tried everything I can think of, I've looked for help online and tried what I found. Nothing. Does anyone know how to do it?

tofu · #2 (**permalink**) 29-October-2007, 07:59 PM

Post ye. code and I'll happily take a look!

1. I find that using the strict DTD and writing valid HTML cuts down on browser compatibility issues. I used to pull my hair out making IE and FF look the same, but since I started writing valid HTML with the strict DTD, I can't remember the last time I had a problem.

2. margin: auto (the way I normally center a div) only works when the div has an explicit width.

3. I don't think there's a standard way to center vertically that works in every browser.

Jeff Root · #3 (**permalink**) 29-October-2007, 10:18 PM

Six or eight years ago I read a web page on how to center vertically.
Whatever the method was, it was very simple. I vaguely recall trying
it in either IE or Netscape. I have not actually used it in any pages,
though.

-- Jeff, in Minneapolis

tofu · #4 (**permalink**) 29-October-2007, 10:55 PM

This sort-of works:

Code:

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

<head>
	<title>title</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<style type="text/css">
		body {
			background-color:#fcc;
		}
		div#center {
			background-color:#fff;
			width: 300px;
			height: 300px;
			margin: auto;
			position: absolute;
			top: 40%;
			right: 40%;
			bottom: 40%;
			left: 40%;
		} 
	</style>
</head>

<body>

	<div id="center">
		<p>The cake is a lie!</p>
	</div>

</body>
</html>

The Supreme Canuck · #5 (**permalink**) 30-October-2007, 03:27 AM

Right-o. Here's my sloppy, sloppy code (still trying to learn):

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <link rel="stylesheet" type="text/css" href="Style.css">
</head>
<body>
    <p>
    <span class="MainBoxSplash">
        <map name="TableWorkaround">
        <div class="SplashContent">
            <table class="SplashTitle" border="0" rules="cols" frame="vsides">
                <tr><td>Text</td></tr>
                <tr><td><img id="SplashBadge" src="badge.gif" alt=""></td></tr>
                <tr><td>Text</td></tr>
            </table>
        </div>
        <p id="SplashSlash">
            <a class="SplashLink" href="Link.htm">English</a>
             /
            <a class="SplashLink" href="Link.htm">Français</a>
        </p>
        </map>
    </span>
    </p>
</body>
</html>

It has some table junk in it - I think I was trying to jerry-rig the HTML to display like I want to in IE. No luck. Here's the relevant CSS code (since it isn't in the same document):

Code:

body { 
    background-color: #660000;
    text-align: center;
    font-size: 100%;
}

div.SplashContent {
    margin: 0px;
    margin-top: 5px;
    width: 460px;
    background-color: #ffffff;
    border-style: solid;
    border-width: 1px;
    font-size: 2em;
    padding-top: 10px;
    margin-left: 5px
}

img#SplashBadge {
    border-style: solid;
    border-color: #000000;
    border-width: 0px;
    margin: 0px;
    margin-top: 10px;
}

p#SplashSlash {
    margin-top: 7px;
    font-size: 1.125em;
}

span.MainBoxSplash {
    margin: auto;
    width: 472px;
    height: 330px;
    background-color: #dddddd;
    border-style: solid;
    border-width: 1px;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}


table.SplashTitle {
    margin: 0px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10px;
    text-align: center;
    border-width: 0px;
}

Probably a lot of useless junk in there, too. Note - the code is probably bare-bones, since I've taken anything out that might identify what it is. The site I'm trying to throw together is a bit political for BAUT.

Edit: Tofu, just looked into your code. Interesting, but it isn't centred in either browser.

Edit 2: I forgot to say that I ran both codes through the w3 validators. They passed.

The_Radiation_Specialist · #6 (**permalink**) 30-October-2007, 07:08 AM

If you're using vertical-align or valign then that's the problem since it doesn't work well for divs in IE.

try to go with a table cell, or use absolute positioning:

Code:

<html>
<body leftmargin="0px" topmargin="0px">
	Using absolute positioning
	<div style="width:300px;height:300px;border:solid 1px #000000;">
		<div style="left:100px;top:100px;width:100px;height:100px;border:solid 1px #000000;position:absolute;z-index:2">
		
		</div>
	</div>
	Using table cells
	<table cellspacing="0px">
		<tr>
			<td align="center" valign="middle" width="300px" height="300px" style="border:solid 1px #000000">
				<div style="width:100px;height:100px;border:solid 1px #000000;"></div>
			</td>
		</tr>
	</table>
</body>
</html>

tofu · #7 (**permalink**) 30-October-2007, 02:42 PM

Quote:

Originally Posted by The Supreme Canuck

Edit: Tofu, just looked into your code. Interesting, but it isn't centred in either browser.

Well, I can center horizontally in every browser, but not vertically. Maybe the problem is that I just don't know how.

In your css, the reason the box is flush-right in IE is because of the top, right, bottom, and left attributes for the span.MainBoxSplash class. If you change them to something like this:

top: 30%;
right: 30%;
bottom: 30%;
left: 30%;

Then you can move the box out of the corner. But like my previous post, that's not a perfect solution.

The Supreme Canuck · #8 (**permalink**) 30-October-2007, 06:16 PM

Thanks for your help, guys. It turns out that a clever little workaround was just figured out here. Works perfectly.

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode