Massassi Forums Logo

This is the static archive of the Massassi Forums. The forums are closed indefinitely. Thanks for all the memories!

You can also download Super Old Archived Message Boards from when Massassi first started.

"View" counts are as of the day the forums were archived, and will no longer increase.

☖ Forums → Discussion Forum → CSS Anomaly: Any Help?
CSS Anomaly: Any Help?
2007-06-04, 2:04 PM #1
I don't know what happened to the tech-ish forum, so I guess I'll post this here...? I'm working on a website for a Model United Nations conference co-hosted by Boston University and MIT. The code from last year (I blame the MIT guy who, while brilliant in many other respects, wrote shamefully shoddy code) needed a major overhaul. We want to keep the site design & color scheme generally the same to retain brand recognition; however, I decided to work towards making the site standards-compliant and achieving the same effects we'd "accomplished" last year through tables and, to use a Massassi-ism, "hammer and nail computing" instead through CSS.

Everything's going quickly and well so far... with a few minor exceptions. What's bothering me currently is that there's this phantom white space between the legal stuff at the bottom of the page and the end of the content <DIV>. Also, the "Top of Page" link won't center, even though this is how the W3C says I should center things. Any help would be appreciated.

http://bosmun.org/new/stylemun.php

Code: 
		<div id="contentColumn">
		     
                        ... 
                               <span style="text-align: center;"><a href="#">Top of Page</a></span>
                        </div> <!--end of the div that contains the welcome letter, will add top padding soon-->
			<div id="legal">
				<p>
					Boston Model United Nations Conference<br>
					A <a href="http://www.bu.edu">Boston University</a>
					 and <a href="http://www.mit.edu">Massachusetts Institute of Technology</a> 
					  Collaborative Event<br>
					<strong>Copyright © 2007 BosMUN</strong>
				</p>
			</div>	
		</div>


(Alternatively, you could make fun of me for "leaving the community" and poking my head back in once in a while. :argh: at Brian for still having my soul.)
Cordially,
Lord Tiberius Grismath
1473 for '1337' posts.
2007-06-04, 2:47 PM #2
You have a 10px bottom and top margin on the P tag. Do

#legal P
{
margin-bottom: 0;
}


... and do yourself a favor and download CSS viewer extension for Firefox.
Dreams of a dreamer from afar to a fardreamer.
2007-06-04, 2:50 PM #3
Or the Web Developer Toolbar which is vastly superior.
2007-06-04, 2:53 PM #4
Agreed. You also have several other large no-nos that would make it very difficult to keep this site up to date and functioning properly. Divitis being one of them. Try to keep styles and markup separate. Also, there's no reason to put floats in this design at all.

First, all of the places you have style in the markup, just give those elements classes. Spans are a waste of space. The reason your top of page link won't work is because you're not styling the <a> tag. Try <a href="#" class="toplink>Top of Page</a> and in the CSS style .toplink { text-align: center; }
ᵗʰᵉᵇˢᵍ๒ᵍᵐᵃᶥᶫ∙ᶜᵒᵐ
ᴸᶥᵛᵉ ᴼᵑ ᴬᵈᵃᵐ
2007-06-04, 3:15 PM #5
Originally posted by Cool Matty:
Or the Web Developer Toolbar which is vastly superior.


Or Firebug which is even more superior.
Detty. Professional Expert.
Flickr Twitter
2007-06-04, 3:26 PM #6
PS, you're using a transitional doctype which is probably the most pointless kind of doctype ever.
Detty. Professional Expert.
Flickr Twitter
2007-06-04, 3:58 PM #7
Originally posted by Detty:
Or Firebug which is even more superior.


Web Dev toolbar has a lot of stuff that the Firebug doesn't seem to have at all. Like disabling cookies or cache, validation, window resizing, and a helluva lot more. Firebug looks neat for it's far more in-depth "live HTML/CSS" editing, but I wouldn't switch extensions just for that. :/
2007-06-04, 4:08 PM #8
Yes, Web Developer has a wider scope but I thought we were just recommending CSS/HTML debugging tools? I have a dozen other extensions that no web developer should be without but I thought i'd stick to the most relevant to the problems Lord Grismath is facing.
Detty. Professional Expert.
Flickr Twitter
2007-06-04, 4:25 PM #9
HTML:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html>
<head>
<title>BosMUN VII - Boston Model United Nations Conference 2008</title>

<link rel="stylesheet" type="text/css" href="meta_index.css" />

</head>

<body>
			
<div id="contentColumn">
		
<img id="header" src="stylemun_files/banner.jpg" alt="banner image" />
		
<ul class="menu">
	<li><a href="http://bosmun.org/new/stylemun.php?cat=info">Conference Info</a>
		<ul>
		<li><a href="http://bosmun.org/new/stylemun.php?cat=info&focus=invite" title="">Invitation</a></li>
		<li><a href="http://bosmun.org/new/stylemun.php?cat=info&focus=news" title="">News</a></li>
		<li><a href="http://bosmun.org/new/stylemun.php?cat=info&focus=timeline" title="">Timeline</a></li>
		<li><a href="http://bosmun.org/new/stylemun.php?cat=info&?focus=accommodate" title="">Accommodations</a></li>
		<li><a href="http://bosmun.org/new/stylemun.php?cat=info&focus=sponsor" title="">Sponsorship</a></li>
		</ul>
	</li>
	<li><a href="http://bosmun.org/new/stylemun.php?cat=com">Committees</a>
		<ul>
			<li><a href="http://bosmun.org/new/stylemun.php?cat=com&focus=GA" title="">General Assembly</a></li>
			<li><a href="http://bosmun.org/new/stylemun.php?cat=com&focus=ECOSOC" title="">ECOSOC</a></li>
			<li><a href="http://bosmun.org/new/stylemun.php?cat=com&focus=agencies" title="">Specialized Agencies</a></li>
			<li><a href="http://bosmun.org/new/stylemun.php?cat=com&focus=crises" title="">Crisis Committees</a></li>
		</ul>
	</li>
	<li><a href="http://bosmun.org/new/stylemun.php?cat=lib">Media Library</a>
		<ul>
			<li><a href="http://bosmun.org/new/stylemun.php?cat=lib&focus=code" title="">Code of Conduct</a></li>
			<li><a href="http://bosmun.org/new/stylemun.php?cat=lib&focus=rules" title="">Rules of Procedure</a></li>
			<li><a href="http://bosmun.org/new/stylemun.php?cat=lib&focus=guideD" title="">Delegate Prep Guide</a></li>
			<li><a href="http://bosmun.org/new/stylemun.php?cat=lib&focus=guideF" title="">Faculty Prep Guide</a></li>
			<li><a href="http://bosmun.org/new/stylemun.php?cat=lib&focus=matrix" title="">Committee Matrix</a></li>
			<li><a href="http://bosmun.org/new/stylemun.php?cat=lib&focus=map" title="">Conference Map</a></li>
		</ul>
	</li>
	<li><a href="http://bosmun.org/new/stylemun.php?cat=about">About Us</a>
		<ul>
			<li><a href="http://bosmun.org/new/stylemun.php?cat=about&focus=whatis" title="">What is BosMUN?</a></li>
			<li><a href="http://bosmun.org/new/stylemun.php?cat=about&focus=history" title="">Conference History</a></li>
			<li><a href="http://bosmun.org/new/stylemun.php?cat=about&focus=hosts" title="">Host Institutions</a></li>
			<li><a href="http://bosmun.org/new/stylemun.php?cat=about&focus=boston" title="">Explore Boston</a></li>
			<li><a href="http://bosmun.org/new/stylemun.php?cat=about&focus=sec" title="">Secretariat</a></li>
			<li><a href="http://bosmun.org/new/stylemun.php?cat=about&focus=staff" title="">Staff</a></li>
			<li><a href="http://bosmun.org/new/stylemun.php?cat=about&focus=contact" title="">Contact Us</a></li>
		</ul>
	</li>
	<li><a href="http://bosmun.org/new/stylemun.php?cat=reg">Registration</a></li>
	<li><a href="http://bosmun.org/new/stylemun.php?cat=access">Login</a></li>
</ul>

<div id="content">

<strong>Dear Delegates, Advisors and Friends,</strong>

<p>It is our distinct honor to welcome you all to the 7<sup>th</sup> Annual Boston
Invitational Model United Nations Conference hosted by Boston University
and the Massachusetts Institute of Technology! We would like to take
this opportunity to invite you to attend BosMUN VII from February 8 –
February 10 2008. This year’s conference will once again utilize state
of the art facilities at both MIT and the Cambridge Marriott.</p>

<p>BosMUN’s Secretariat and Staff is committed to a standard of excellence
and is working diligently to exceed the expectations of all who will
attend the conference in February. Our goal is to provide our delegates
with the most unique venue for exploring the complexities of
international affairs. We are committed to the delegate experience and
creating an environment that is conducive to an active and educated
debate of some of the most challenging questions facing the
international community. Through diverse committees, delegates will have
the opportunity to examine a vast array of issues.</p>

<p>There are many new and exciting opportunities available for the Seventh
Session of BosMUN. We are expanding the capacity of the conference to
accommodate 1200 delegates in order to increase the number of viewpoints
available and enrich the experience of each of our committees. BosMUN
VII will also feature a Press Corps that will not only report on the
events of the conference, but will do so from particular biases in order
to explore the complexities of reporting in international affairs.
Crisis committees, a staple at BosMUN, are being reinvigorated through
the incorporation of technology and innovative topics, to provide the
delegates with new challenges and opportunities. These developments are
intended to enrich an already stellar substantive program – the
cornerstone of the BosMUN experience.</p>

<p>This year, BosMUN will also host a substantive program for its faculty
advisers. Guest speakers from both schools will be in attendance to
discuss international relations education and many other exciting
opportunities will be provided in order to ensure that faculty advisers
an educational and enjoyable time with BosMUN.</p>

<p>Further details regarding the substantive program and logistical
preparation will be available as of June 1, 2007. Registration
officially begins <strong>July 1, 2007</strong>! Remember to check back often for
more information!</p>

<p>We are looking forward to the upcoming year and working with all of you
in preparing for BosMUN VII! We will keep you updated throughout the
year regarding our progress and inform you of any exciting new
opportunities! If you have any questions, comments, suggestions, or
concerns, please do not hesitate to contact us at <a href="mailto:bosmunvii@gmail.com">bosmunvii@gmail.com</a>.</p>

<cite>Sincerely,<br/>
Joe Gregg and Nick Stefanizzi <br />
Secretaries General <br />
BosMUN VII <br />
<a href="mailto:bosmunvii@gmail.com">bosmunvii@gmail.com</a></cite>

<div class="toplink">
	<a href="#">Top of Page</a>
</div>

</div>	

<div id="legal">
Boston Model United Nations Conference<br />
A <a href="http://www.bu.edu/">Boston University</a> and <a href="http://www.mit.edu/">Massachusetts Institute of Technology</a> Collaborative Event<br />
Copyright © 2007 BosMUN
</div>

</div>

</body>
</html>


CSS (Main):

Code: 
@import url(menu.css);

body {
	background-color: black;
	font-size:10px;
	font-family: verdana, sans-serif;
	text-align: center;
	padding: 0;
	margin: 0;
}

img#header { vertical-align: bottom; }

a:link {
	color: #CDAD00;
	text-decoration: none;
	font: 1em verdana;
}

a:visited {
	color: #000;
	background-color: #FDFF74;
	text-decoration: underline;
}

a:focus, a:hover, a:active {
	color: #000;
	background-color: #FDFF74;
	text-decoration: underline;
}

#contentColumn {
	text-align: left;
	margin: 0 auto;
	width: 750px;
	background-color: #FFF;
	color: #000;
}

.toplink
{
	margin: 10px 0;
	text-align: center;
}

#content {
	padding: 2em;
}

#legal {
    text-align: center;
	background-color: #E1E277;
	padding: 5px;
}

.legal a:link {
	color: #BBBC3D;
	text-decoration: none;
}

.legal a:visited {
	color: #E1E277;
	background-color: #000;
	text-decoration: underline;
}

.legal a:focus, .legal a:hover, .legal a:active {
	color: #E1E277;
	background-color: #000;
	text-decoration: underline;
}


CSS (Menu):
Code: 
ul.menu {
	padding:0; 
	margin:0;
	height: 21px;
	list-style-type: none;
}

ul.menu a:link, ul.menu a:visited {
	display:block; 
	text-decoration: none;
	border-color: #fff;
	border-style: solid;
	border-width: 1px 1px 0 0;
	text-align: center; 
	width:124px;
	height:20px;
	color:#000; 
	background:#E1E277; 
	line-height:20px; 
	font-size:10px	
}

ul.menu a:focus, ul.menu a:hover, ul.menu a:active {
	color:#fff; 
	background:#BBBC3D;
}

ul.menu li {
	padding: 0;
	margin: 0;
	float:left; 
	position:relative;
}

ul.menu ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
	display:none;
	position: absolute; 
	top:21px; 
	left:0; 
	width:106px;	
}

ul.menu li:hover ul {
	display:block;
}

ul.menu ul a:link, ul.menu ul a:visited {
	text-align:left; 
	background:#F5F6AD; 
	color:#000;
}

ul.menu ul a:focus, ul.menu ul a:hover, ul.menu ul a:active {
	text-decoration: none; 
	background:#FDFF74; 
}


There's probably lots I've missed, just did this very quickly. This is probably the easiest way to get the effect you want, not necessarily the best.
Detty. Professional Expert.
Flickr Twitter
2007-06-04, 4:33 PM #10
I hate you Detty, that's what I was just doing, but my boss interrupted me.

If you want me to finish mine, it does what detty just did but less tabs and some more consistency between browsers. (Not to compete.)
ᵗʰᵉᵇˢᵍ๒ᵍᵐᵃᶥᶫ∙ᶜᵒᵐ
ᴸᶥᵛᵉ ᴼᵑ ᴬᵈᵃᵐ
2007-06-04, 7:49 PM #11
Thanks for the help, everyone. I still can't seem to get that "Top of Page" centered. Also, I'm using PHP to include the invitation letter, so currently there's double padding on that. I'll fix it.

Detty's new stylesheet no longer positions my column of content directly at the top of the page. I really, really, REALLY want to get rid of that little gap above the logo. That's why I ended up using absolute positioning.

I used the W3C Validator today to go from 41 errors and a completely invalid page to 5 errors revolving around my hack to get the dropdown menus to display in older versions of IE. I'm going to look into another way to accomplish the same effect in a standards-compliant but browser consistent way while still being able to change the number/content of the drop down menu items through PHP.
Cordially,
Lord Tiberius Grismath
1473 for '1337' posts.
2007-06-04, 8:29 PM #12
As has been said to me on this forum in the past, strict standards compliance is overrated. It isn't worth tearing your hair out over 5 errors.
Marsz, marsz, Dąbrowski,
Z ziemi włoskiej do Polski,
Za twoim przewodem
Złączym się z narodem.
2007-06-04, 9:26 PM #13
Yes it is, don't get me started. It really depends on the kind of errors, but 9/10 you should fix the errors or your site will not work correctly when you try to do other things.

"OK, it renders well enough" is a horrible attitude. Explain to your clients that you don't believe in a timeless website, and that you expect to have them call you for another $1000 when IE8 comes out and people can't access their site because you used some dirty hack to make the site look good to the clients IE5.
ᵗʰᵉᵇˢᵍ๒ᵍᵐᵃᶥᶫ∙ᶜᵒᵐ
ᴸᶥᵛᵉ ᴼᵑ ᴬᵈᵃᵐ
2007-06-04, 9:29 PM #14
Well, at the expense of my pride and self-esteem, the page is now Standards Compliant.

The CSS validates too. Thanks, DeTriTiC.

I spent at least the past hour styling the "Top of Page" link with Kirby. While his help has been invaluable in my better understanding how to build this page, I do not much enjoy being talked at like a dumb child and suggest that the aforementioned Kirbs consider less abrasive pedagogy.

Mysteriously, the black "whitespace" above the logo still appears in the latest IE. Also, if anyone has access to the older IE, please try the dropdown menus and let me know if they work. I'm really considering going back to absolute positioning the wrapper div (thanks for the term, Kirby) to the top of the browser window.
Cordially,
Lord Tiberius Grismath
1473 for '1337' posts.
2007-06-04, 9:45 PM #15
CSSViewer is just an easy way to hover over an element and see the applied (i.e. active) styling rules. It doesn't replace the Web developer toolbar by any means.

Originally posted by Detty:
I have a dozen other extensions that no web developer should be without
List 'em? I'm always on the lookout for new extensions to make my life easier. Here are my developer tools:

ColorZilla
CSSViewer
Html Validator
IE Tab
Javascript Debugger
MeasureIt
Web Developer toolbar

I used to have a lot more but with all the memory leaks and the firefox.exe process bloating up to 150 mb in no time I decided to stick to the bare minimum.
Dreams of a dreamer from afar to a fardreamer.
2007-06-04, 9:58 PM #16
I didn't mean to be so belittling, Grismath, but I'm already in a bad mood, and your basic knowledge is spotted, so helping you understand some of the things you want to do requires relearning the basic understandings of html tags and their use and scope. Tomorrow I will assist you in much greater detail, and with far less belittlement.
ᵗʰᵉᵇˢᵍ๒ᵍᵐᵃᶥᶫ∙ᶜᵒᵐ
ᴸᶥᵛᵉ ᴼᵑ ᴬᵈᵃᵐ
2007-06-04, 10:09 PM #17
Thank you.
Cordially,
Lord Tiberius Grismath
1473 for '1337' posts.
2007-06-05, 12:25 AM #18
Just want to say that what I posted works perfectly, don't know what this is about:
Quote:
Detty's new stylesheet no longer positions my column of content directly at the top of the page. I really, really, REALLY want to get rid of that little gap above the logo. That's why I ended up using absolute positioning.


I can test that the site works in IE6 when I get to work, I have a proper isolated build of it there.

You did use both the markup AND the css I posted, right? I did change both quite extensively...
Detty. Professional Expert.
Flickr Twitter
2007-06-05, 6:14 AM #19
Ignore all of what he's said, I fixed it. His conditional comment was causing a gap.
ᵗʰᵉᵇˢᵍ๒ᵍᵐᵃᶥᶫ∙ᶜᵒᵐ
ᴸᶥᵛᵉ ᴼᵑ ᴬᵈᵃᵐ
2007-06-05, 6:31 AM #20
If "he" refers to me, do not ignore what I said. Kirby failed to remember that I mentioned that the gap still appears in even the latest IE, which I've tested on two machines. Kirby's "conditional fix" eliminated the gap in Firefox, but not IE. Please do try the menus in IE6, though DeT.
Cordially,
Lord Tiberius Grismath
1473 for '1337' posts.
2007-06-05, 12:35 PM #21
Menus work in IE6
Detty. Professional Expert.
Flickr Twitter
2007-06-05, 3:03 PM #22
The IE issue is the way you did the conditional, we'll fix it.
ᵗʰᵉᵇˢᵍ๒ᵍᵐᵃᶥᶫ∙ᶜᵒᵐ
ᴸᶥᵛᵉ ᴼᵑ ᴬᵈᵃᵐ
2007-06-05, 3:30 PM #23
le sigh
Detty. Professional Expert.
Flickr Twitter
2007-06-05, 4:06 PM #24
Hey, cool! I'll have to study this.
Cordially,
Lord Tiberius Grismath
1473 for '1337' posts.

↑ Up to the top!