#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2003
    Posts
    53
    Rep Power
    16

    2 CSS bugs in a div overlay design on ... myspace


    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>
    Last edited by brobuddah; March 5th, 2007 at 03:15 PM.
    Bro
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2005
    Posts
    91
    Rep Power
    15

    possible fix


    Hey,

    I'm no css guru, so the suggested fix below might not be the be-all-and-end-all, but it seems to work (in IE7 anyway).

    The styles you currently have for ".uppernav ul a" should also be applied to ".uppernav ul li". Just include this with a comma in the same block, like below:
    Code:
    .uppernav ul a, .uppernav ul li { 
    width: 151px;
    display: block;
    float: left;
    margin: 0;
    text-decoration: none;
    line-height: 20px;
    text-align: center;
    color: ffffff;
    font-weight: bold;
    }
    The same would apply to the lower nav bar.

    Don't know whether it is a special MySpace rule or not, but none of your colours specify themselves as HEX values - you should have the "#" character in front of the six digits.

    For the background image - I think it is because of the "clear: both" in the lowernav div. A solution (again, maybe someone has something more elegant) is to remove the property from the lowernav style, and add a new clearing div below the navigation. i.e. the code would be:

    HTML:
    Code:
    <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 class="lowernavClear"></div>
    and the CSS:
    Code:
    .lowernav {
    		width: 756px;
    		margin: 0;
    		padding: 0;
    		background-color: 000000;
    		font-weight: bold;
    	}
    .lowernavClear { clear: both; height: 1px; }
    By the way - you can combine a lot of your style rules, or simply use the same class name again. The uppernav and lowernav, and all the lists and elements within them, use the same properties except for the border on the top of the lower ul. You could use the same class name for both, then maybe add one class name to target the lower ul to add the border. Just a thought.

    Good luck.
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2003
    Posts
    53
    Rep Power
    16
    Thanks much for your reply prioritypie. I played around with the code some more, adding your suggestion, and I'm almost there. I've got the navbars working correctly in ie now, but they're now broken in firefox and netscape (go figure!). It's easiest for you to just take a look. I've tried applying height and line-height in every conceivable variation to the div, ul, ul li, and ul li a rules, to no avail. Every time I think I'm onto something, the fix expands the navbar to a larger height than it's supposed to be in ie. Any ideas?

    Also, for some reason, in ie, the color of the h1 link (top of content) is displaying in the wrong color, yet it corrects itself in the hover state. The color values are the same in my code for both a and a:hover. Anyone know why it's behaving like that?

    (Myspace does not allow the use of the # sign. That is why none of the color values in the css have a pound sign in front of them.)
    Last edited by brobuddah; March 6th, 2007 at 02:42 PM.
    Bro
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2003
    Posts
    53
    Rep Power
    16
    Issues resolved. Problems ceased when I removed the containing divs around each of the lists, and instead applied rules to the ul itself. Less markup too!
    Bro

IMN logo majestic logo threadwatch logo seochat tools logo