CSS - Good Ol' Myspace

Does anyone have any idea what could be happening to my main menu - it dissappears in Safari!

Hobo

I have some CSS code that was generated form a myspace layout site. I'm not too familiar with using CSS, and it all looks pretty good with the exception of one issue I'd like to change.

The CSS code makes the "Sections" somewhat transparent. Which I want, however, it also adds the main picture (which is my default pic of me) as transparent as well, which I don't want. I'd like to exclude just the picture from being transparent.

Does anyone know how to alter the code to exclude that? Here is the code that I am using. Any help is much appreciated.

Code:

<style>
body {
	background-color: rgb(0, 0, 0);
	background-image: url(http://img243.imageshack.us/img253/9007/jd2pv4.jpg);
	background-position: left center;
	background-repeat: no-repeat;
	background-attachment: fixed;
	}
table, tr, td {
	background-color: transparent;
	border: 0px;
	}
table table {
	border: 0px;
	}
table table table table{
	border:0px;
	}
table table table {
	border-width: 1px;
	border-color: rgb(255, 255, 255);
	border-style: dotted;
	background-color: transparent;
	}
table table table td {
	background-color: rgb(0, 0, 0);
	filter:alpha(opacity=75%);
	-moz-opacity:0.75;
	opacity:0.75;
	-khtml-opacity:0.75;
	}
table table table table td {
	filter:none;
	}</style>
<style>
body, div, span, td, p, .orangetext15, .whitetext12, .lightbluetext8, strong, b, u, .redtext, .redbtext, .btext, .text, .nametext, .blacktext10, .blacktext12 {
	font-family: Tahoma;
	font-size: 11px;
	color: rgb(255, 255, 255);
	font-weight: normal;
	font-style: normal;
	text-decoration: none;
	}
.nametext {
	padding: 5px;
	font-family: Georgia;
	font-size: 24px;
	color: rgb(255, 255, 255);
	font-weight: bold;
	font-style: italic;
	text-decoration: underline;
	display: block;
	}
.whitetext12, .orangetext15 {
	font-family: Georgia;
	font-size: 17px;
	color: rgb(255, 255, 255);
	font-weight: bold;
	font-style: normal;
	text-decoration: underline;
	}
a.navbar:link, a.navbar:active, a.navbar:visited, a.navbar:hover, a.man:link, a.man:active, a.man:visited, a.man:hover, a, a:link, a:active, a:visited, a:hover, a.navbar:link, a.navbar:active, a.navbar:visited, a.navbar:hover, a.text:link, a.text:active, a.text:visited, a.text:hover, a.searchlinksmall:link, a.searchlinksmall:active, a.searchlinksmall:visited, a.searchlinksmall:hover, a.redlink:link, a.redlink:active, a.redlink:visited, a.redlink:hover {
	color: rgb(212, 0, 0);
	font-weight: bold;
	font-style: normal;
	text-decoration: none;
	}
a.navbar:hover, a.man:hover, a:hover {
	color: rgb(212, 0, 0);
	font-weight: bold;
	font-style: normal;
	text-decoration: underline;
	}
.badge {
	position: absolute;
	left: 1px;
	top: 1px;
	}
</style>

Hopefully I'm just not stumbling on the right CSS to fix the bugs. I understand that these same bugs might be attributed to the myspade code or myspace rules limiting html/css.

Here's the mock-up: www.myspace.com/brovizion

2 bugs (1 in firefox, 1 in ie (6.0)):

1. (firefox only) There are 2 nav bars in the "innerwrapper" div (both black), one at the top, and one at the bottom. On the lower nav bar, my background image that is supposed to tile vertically throughout the whole "innerwrapper" div disapppears.

2. (ie only) The upper and lower nav bars (whose links are set to display: block) are on each of their own lines, yet still floated horizontally. This one is hard to explain except to say the nav bars should work like they do in firefox, but in ie they are on their own program. Viewing the site in both browsers will clearly demonstrate the problem. (ie 6.0, haven't tested in 7.0 yet.)

I understand that the nature of this project (a design that must reside in a div overlay on a myspace page) makes for a million different possibilities for why it's messed up, but maybe if someone can help me brainstorm some potential fixes, I'll stumble onto something that works.

I'll post my code as well.

CSS:

Code:

<style type="text/css">

.btext {display:none;}
.contacttable {display:none;}
.lightbluetext8 {display:none;}
.nametext {display:none;}
.orangetext15 {display:none;}
.redlink {display:none;}
.whitetext12 {display:none;}
.hidethem {visibility:hidden; display:none;}
.comments {visibility:hidden; display:none;}

body {
	background-color: 003366;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	margin: 0;
	padding: 0;
}

table {
	background-color: 003366;
}





p {
	font-size: 12px;
}

h1 {
	font-size: 24px;
	font-weight: bold;
}

h2 {
	font-size: 18px;
}

h3 {
	font-size: 16px;
	font-weight: bold;
}



ul {
	list-style-type: none;
}

ul li {

}





a {
	color: 003366;
	text-decoration: none;
	font-size: 12px;
	font-weight: bold;
}

a:hover {
	color: 003366;
	text-decoration: underline;
}

a:visited {
	color: 003366;
	text-decoration: none;
}

a:visited:hover {
	color: 003366;
	text-decoration: underline;
}

h1 a {
	color: 003366;
	text-decoration: none;
	font-size: 24px;
	font-weight: bold;
}

h1 a:hover {
	color: 003366;
	text-decoration: underline;
}

h1 a:visited {
	color: 003366;
	text-decoration: none;
}

h1 a:visited:hover {
	color: 003366;
	text-decoration: underline;
}




.wrapper {
	position: absolute;
	top: 132px;
	left:50%;
	margin-left:-460px;
	width: 870px;
    height: 800px;
    z-index: 1;
    text-align: center;
}

.masthead {
	width: 870px;
	background-image: url(http://www.ourcampusbookstore.com/myspace/images/mastheadbg.jpg);
	background-repeat: no-repeat;
	height: 195px;
}

.innerwrapper {
	width:870px;
	padding-left: 92px;
	padding-right: 22px;
	background-image: url(http://www.ourcampusbookstore.com/myspace/images/bodybg.jpg);
	background-repeat: repeat-y;
	text-align: left;
}

	.uppernav {
		width: 756px;
		margin: 0;
		padding: 0;
		background-color: 000000;
		font-weight: bold;
		display: inline;
	}
	
		

	.leftcol {
		clear: both;
		width: 500px;
		float: left;
		vertical-align: top;
                padding: 10px;
	}

	.rightcol {
		width: 220px;
		float: left;
		vertical-align: top;
        padding: 10px;
		text-align: center;
	}
	
		.rightcol h3 {
			text-align: center;
		}
	
	.lowernav {
		width: 756px;
		margin: 0;
		padding: 0;
		background-color: 000000;
		font-weight: bold;
		clear: both;
	}
	
		
	
.footer {
	width: 870px;
    background-image: url(http://www.ourcampusbookstore.com/myspace/images/footerbg.jpg);
	background-position: bottom;
	background-repeat:no-repeat;
	height: 30px;
	clear: both;
}





.uppernav ul {
	width: 756px;
    list-style: none;
    background-color: 000000;
	margin: 0;
	padding: 0;
    float: left;
	border-bottom: 2px solid black;
}
			
	.uppernav ul a {
		width: 151px;
		display: block;
		float: left;
		margin: 0;
		text-decoration: none;
		line-height: 20px;
		text-align: center;
		color: ffffff;
		font-weight: bold;
	}
	
.lowernav ul {
	width: 756px;
    list-style: none;
    background-color: 000000;
	margin: 0;
	padding: 0;
    float: left;
	border-bottom: 2px solid black;
	border-top: 2px solid black;
}

			
	.lowernav ul a {
		width: 151px;
		display: block;
		float: left;
		margin: 0;
		text-decoration: none;
		line-height: 20px;
		text-align: center;
		color: ffffff;
		font-weight: bold;
	}
	
.schoollist {
	text-align: center;
}

	.schoollist li {
		line-height: 16px;
		padding: 1px 1px;
		width: 150px;
		margin: 0 auto;
	}







.uppernav ul a:hover, .uppernav ul a:visited:hover {
		background-color: ffcc66;
		color: 003366;
}

.lowernav ul a:hover, .lowernav ul a:visited:hover {
		background-color: ffcc66;
		color: 003366;
}
	
.schoollist a, .schoollist a:visited {
	color: 000000;
	background-color: EEEEEE;
	width: 150px;
	line-height: 18px;
	font-size: 14px;
	font-weight: bold;
	display: block;
	padding: 1px;
}

.schoollist a:hover, .schoollist a:visited:hover {
	color: FFFFFF;
	width: 150px;
	text-decoration: none;
	background-color: 00FF33;
}

.c0000FF a, .c0000FF a:visited {
	width: 150px;
	text-decoration: none;
	font-weight: bold;
}

.c0000FF a:hover, .c0000FF a:visited:hover {
	color: FF6600;
	width: 150px;
	text-decoration: none;
	background-color: 0000FF;
}


.c990000 a, .c990000 a:visited {
	width: 150px;
	text-decoration: none;
	font-weight: bold;
}

.c990000 a:hover, .c990000 a:visited:hover {
	color: FFCC00;
	width: 150px;
	text-decoration: none;
	background-color: 990000;
}


.cCC6600 a, .cCC6600 a:visited {
	width: 150px;
	text-decoration: none;
	font-weight: bold;
}

.cCC6600 a:hover, .cCC6600 a:visited:hover {
	color: FFFFFF;
	width: 150px;
	text-decoration: none;
	background-color: CC6600;
}


.c3366CC a, .c3366CC a:visited {
	width: 150px;
	text-decoration: none;
	font-weight: bold;
}

.c3366CC a:hover, .c3366CC a:visited:hover {
	color: FFCC33;
	width: 150px;
	text-decoration: none;
	background-color: 3366CC;
}

.c993333 a, .c993333 a:visited {
	width: 150px;
	text-decoration: none;
	font-weight: bold;
}

.c993333 a:hover, .c993333 a:visited:hover {
	color: 999999;
	width: 150px;
	text-decoration: none;
	background-color: 993333;
}

</style>

XHTML:

Code:

<div class="wrapper">

	<div class="masthead"></div>
	
	<div class="innerwrapper">
	
		<div class="uppernav">
			<ul>
				<li><a href="#">View our Pics</a></li>
				<li><a href="#">Watch our Video</a></li>
				<li><a href="#">View Blog</a></li>
				<li><a href="#">Send Message</a></li>
				<li><a href="#">Add 2 Friends</a></li>
			</ul>
		</div>
		
		<div class="leftcol">
			<h1><a href="http://www.ourcampusbookstore.com">OurCampusBookstore.com</a></h1>
			<h2>About us:</h2>
			<p><strong>OurCampusBookstore.com</strong> is an online classifieds website customized just for university students. It is formatted to allow students to post anything from textbooks and furniture, to electronics, event announcements and roommates.</p>
			<h3>What can it be used for?</h3>
			<ul>
				<li><strong>1. Post events</strong> - Is your band having a concert? Throwing a huge party? Have a club event to announce? Use the site!</li>
				<li><strong>2. Furniture</strong> - Are you moving out and need to get rid of furniture? Are you moving into an apartment and need to find furniture? Post what you have or need now and make arrangements to buy/sell your furniture in the future.</li>
				<li><strong>3. Textbooks</strong>- Buy and sell your used textbooks. Avoid the middleman and the high cost of books. Trade amongst yourselves.</li>
				<li><strong>4. Jobs</strong> - We have several companies signed up to post available jobs in Pullman, as well as summer internships and post-graduate opportunities all over Washington.</li>
				<li><strong>5. Apartments</strong> - Need to sublease? Moving to a new apartment? Find information on what's available at ourcampusbookstore.com.</li>
				<li><strong>6. Electronics, Clothes, etc.</strong> - Sell your used video games, consoles, computers, monitors, TVs, movies, software, and so on.</li>
			</ul>
			<h2>Who we'd like to meet:</h2>
			<p>As many students as possible who have books, furniture and electronics to sell, or students looking for books, furniture, apartments, jobs and events to attend!</p>
		</div>
		
		<div class="rightcol">
			<h3>Current Schools</h3>
			<ul class="schoollist">
				<li class="c0000FF"><a href="http://florida.ourcampusbookstore.com">Florida</a></li>
				<li class="c990000"><a href="http://minnesota.ourcampusbookstore.com">Minnesota</a></li>
				<li class="cCC6600"><a href="http://texas.ourcampusbookstore.com">Texas</a></li>
				<li class="c3366CC"><a href="http://ucla.ourcampusbookstore.com">UCLA</a></li>
				<li class="c993333"><a href="http://washingtonstate.ourcampusbookstore.com">Washington State</a></li>
			</ul>
		</div>
		
		<div class="lowernav">
			<ul>
				<li><a href="#">Add 2 Group</a></li>
				<li><a href="#">Forward 2 Friend</a></li>
				<li><a href="#">Add 2 Favorites</a></li>
				<li><a href="#">Block Me</a></li>
				<li><a href="#">Rank Me</a></li>
			</ul>
		</div>
	
	</div>
	
	<div class="footer"></div>

</div>

Hey everyone. I have never posted here before, but I am really needing some help. I am not a newbie, and make layouts on a regular basis. Now I am not claming that I know everything about CSS cause I def don't...lol...but this one has really got me stumped. Please help.

I created a layout for a friend of mine. He was complaining about the background not showing up. Well I immediately went and checked the code and IT WORKED JUST FINE. I tried the layout code on two other user's myspace profiles and used two different computers to check it and CRAZY ENOUGH, it was still working perfectly.

However when you add the layout to his profile, the background will just NOT show up. It is not only this layout, but I tried different layouts, once that I created and ones I didn't. Whenever you put a layout code in his profile, every other element of the layout works EXCEPT for the background showing up.

So I figured it must be some other code pasted in one of his sections, screwing the layout code up. WRONG AGAIN! I took at ALL other codes in every section and the background still won't work. I even tried changes Myspace account settings and all kinds of crazy off the wall things, and I can't get it to work.

Has anyone ever heard of this? Please tell me you have, and that you know what might be causing this...and have a fix. It is driving me insane. Thanks!

Hello,

This one doesn't look good on FF

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
#layer {
position:relative;
	font-size:10px;
	top:3px;
	width:100%;
}
#layer ul {
	float:left;
	list-style-type:none;
	height:12px	
}
#layer li {
	display:inline;	
	height:12px	
}
#layer a {
	text-decoration:none;
	border:1px 1px solid #990000;
	color:#990000;	
	background-color:#CCCCCC;
	padding:20px;
	height:12px	
}
</style>
</head>

<body>
		  <div id="layer"><ul><li><a href="#">sample link</a></li></ul></div>
</body>
</html>