A ghost is :hovering where it shouldn't be...

I've been staring at this damn screen for almost 12 hours, so maybe that's why I can't figure it out:

http://www.minusthemasses.com/

Look at the "artists" link...

There's NOTHING in the hover code telling it to do that. I can't see why the div would make it act that way either, and I'm just frankly completely over looking into why it's doing this. Acts this way in both IE and MOZ...

Thanks for all and any attention to this, and a virtual million bucks to whoever can figure it out...

 

what is it doing that it's not supposed to do? The only thing that happens is their is an underline when you hover.

 

really??

in moz and ie both, for me, the artist gets underlined upon hover but also shifts about 20px to the right as well...

that's just even weirder if it's doing that with MY computer and not yours. i've taken a couple breaks since i observed this and still can't figure it out. (breaks usually act like great big lightbulbs for me)

 

ok. damnit. second thread today i've figured out the answer to, i'm really sorry guys, i'll try not to do this again.

but in case this helps anyone.

the original code was:

a#artists:link {text-decoration: none; color: white;position: absolute; left: 90px; top: 200px;font-size: 12px;}
a#artists:visited {text-decoration: none; color: white;position: absolute; right: 90px; top: 200px;font-size: 12px;}
a#artists:hover {text-decoration: underline; color: white;position: absolute; left: 90px; top: 200px;font-size: 12px;}
a#artists:active {text-decoration: none; color: #4f0f6f;position: absolute; left: 90px; top: 200px;font-size: 12px;}

as you can see there was nothing in the hover code to make it jiggle around like it did, as if there was some tag telling the margins or positioning to shift.

i noticed when clicking the link (during the moment of "activity") that there was a wildly WIDE box around it. so,

a#artists {width: auto;}

adding THAT above the code solved the problem. if anyone is able to provide an explanation as to how or why i could have even HAD the problem, please speculate or explain!

note: i IMed a friend and he said it was moving while hovered upon, so it wasn't just my computer that did it.

 

there is some problems with "position" in the IE 5 to above, so its better to remove it, and check again.

 

remove what, the auto width?

 

i've found another problem, now.

http://www.minusthemasses.com/free_stuff/deadcigarettes.html

here, the track list on the left is find in MOZ but has weird little clumps in IE.

 

There are some paragraph end tags </p> inside your anchors.

 

i just spend about 10 minutes searching for those. could you specify where those are? i haven't found any.

edit to add: oh, on the dead cigarettes page. cool. solved that problem. thanks a lot.

max

 

aaaand the glitchy "artists" problem is back. this time it's moving to the left.

 

Those are marked in red:

<a class="downloads" href="http://www.minusthemasses.com/free_stuff/Dead_Cigarettes/Dream Cigarettes - Flutey Looped and Dreaming.mp3">Flutey Looped and Dreaming[COLOR="Red"]</p>[/COLOR]</a><br />
<a class="downloads" href="http://www.minusthemasses.com/free_stuff/Dead_Cigarettes/Dead Cigarettes - How Do Some Trees.mp3">How Do Some Trees</a><br />
<a class="downloads" href="http://www.minusthemasses.com/free_stuff/Dead_Cigarettes/Dead Cigarettes - Max Doesn't Respect Women.mp3">Max Doesn't Respect Women[COLOR="Red"]</p>[/COLOR]</a><br />
<a class="downloads" href="http://www.minusthemasses.com/free_stuff/Dead_Cigarettes/Dead Cigarettes - Premature Raincloud.mp3">Premature Raincloud</a><br />
<a class="downloads" href="http://www.minusthemasses.com/free_stuff/Dead_Cigarettes/Dead Cigarettes - Secrets.mp3">Secrets[COLOR="Red"]</p>[/COLOR]</a>

Code (markup):

 

word, word, got it. thank you so much for pointing that out. old code from something else.

 

GOOD LORD.... Got enough pointless absolute positioning in there?!?

Add to that the excess classes, lack of the 'menu' being a linked list, multiple style declarations that are redundant because properties can be inherited on pseudoclasses from their parent element, styling the active state to be the same as non-active, etc, etc, etc.

Of course that 'condense all the properties to one line' rubbish makes it a royal pain to even separate the properties.

But the absolute positioning - that's the real nightmare in there. Being I'm seeing other containers in the CSS I'm assuming you've got all sorts of other content... welcome to 'designed to break' - there's a reason websites are designed to use flow positioning.

Try this out:

The HTML:

<!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>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<link href="screen.css" rel="stylesheet" type="text/css" media="screen, projection"/>

<title>MTM</title>

</head><body>

<div id="container">
	
	<ul id="goatnav">
		<li id="nav_about"><a href="about.html">About</a></li>
		<li id="nav_free"><a href="free.html">Free Music</a></li>
		<li id="nav_shows"><a href="shows.html">Shows</a></li>
		<li id="nav_artists"><a href="artists.html">Artists</a></li>
		<li id="nav_buy"><a href="buy.html">Buy stuff</a></li>
	</ul>

	<div id="bottom">
		<a href="http://www.minusthemasses.com">
			<img src="http://www.minusthemasses.com/jpgs/mtmtlogo.jpg" 
				width="540" height="31" 
				alt="Click to go home"
			/>
		</a>
	</div>

</div>

</body></html>

Code (markup):

and the CSS:

* {
	margin:0;
	padding:0;
}

body {
	color:#FF0;
	background:#4F0F6F;
	font:normal 100%/140% helvetica,arial,sans-serif;
}

img {
	border:0;
}

#container {
	width:800px;
}

#goatnav {
	margin-top:200px; 
	width:270px;
	height:245px; 
	padding-top:105px;
	background:url(http://www.minusthemasses.com/jpgs/vgoat.jpg) no-repeat;
	position:relative;
	list-style:none;
	font:normal 12px/14px helvetica,sans-serif;
}

#goatnav li {
	display:block;
	position:relative;
}

#goatnav a {
	color:#FFF;
	text-decoration:none;
}

#goatnav a:active,
#goatnav a:focus,
#goatnav a:hover {
	text-decoration:underline;
}

#nav_about {
	margin-left:85px;
}

#nav_free {
	margin:-15px 0 0 200px;
	text-align:right;
}

#nav_shows {
	margin:139px 0 0 137px;
}

#nav_artists {
	margin:-71px 0 0 90px; 
}

#nav_buy {
	margin:104px 0 0 100px;
}

#bottom {
	margin-top:19px;
	text-align:right;
}

Code (markup):

Which goes from over 5k of CSS to less than 1k. (and I'd say about 4k of your original was being used for the example)

Mind you, this code is only to the example - the margin-top on the UL would probably be yanked to allow the header to push it down instead, but I'd have to see the whole layout to be sure.

You do NOT need to keep repeating all those properties on each and every line... The anchors for example - you declare the stuff that's the same on just A, then only declare the properties that are going to be different on the psuedoclasses. (usually active and hover can 'share')

Hope this helps - if you have any questions or need a hand, I'm willing to instruct.

 

wow, thanks so much for looking at it.

in my defense, i've been doing this for only about a year and only through web tutorials, have never taken any classes or asked others for help, until yesterday when i signed in to used this website. i'm sure a lot of you are self taught as well, but i had no idea my coding was such a "nightmare," for my standards it's very organized.

i've been working on this site from scratch for roughly 23 hours minus the sleep i had last night, i'll check on your feedback tomorrow.

thanks again so much for checking my code out,
max

 

deathshadow has done what I'd just come back to do, nice one.

 

ok, i've plugged your code into a temp page and it's looking really good. i'm going to study it today and see where i went wrong.

first question: what's this * { } attribution? never seen this before...

 

i'll just list the code i've never seen before and see if someone wants to explain it to me:

* {
margin:0;
padding:0;

the asterisk there...

font:normal 100%/140% helvetica,arial,sans-serif;
font:normal 12px/14px helvetica,sans-serif;

what's the / thing about?

deathshadow: why'd you make the goatnav relative positioned? what difference did that make?

also, why display the list as block?

"a:focus"

in all the css tutorials i've looked at i've never seen this, what's focus?

 

The asterisk is called the universal selector - it means 'all'. By simply saying * {} we are saying apply that rule to EVERYTHING. Some care needs to be taken when using it in relationship to form elements, but usually it's not a big deal (despite some people's claims to the contrary) especially if you learn the difference in behavior between IE and RoW.

The number after the slash in the font declarations is your line-height. For things like headers I like to keep it the 'standard' 120% (1.2em) give or take (usually when declaring fonts in px I just add two), while for anything that's going to span multiple lines like content I prefer to up it to 140%. DESPITE many folks claims to the contrary (hmm, I say that a lot) you cannot trust the default line-height since firefox will often use a good deal more than the so called '1.2em' default.

You can see this line height problem (among other font sizing issues) in action at:
http://battletech.hopto.org/for_others/font_test.html

The releative positioning on the UL avoids a depth sorting issue on mouse-over in Opera 8.5 - that could probably be removed since it was fixed in 9.0, but I like to hedge my bets.

If you display the line items as their normal behavior, you get an extra carriage return after the anchors - I've never quite figured out why. Setting them to display:block seems to clear up that problem. These I set to relative positioning out of habit - it often prevents 'depth sorting' errors in all browsers when using negative margins to slide content around.

As to :focus, the W3C spec explains it best:
http://www.w3.org/TR/REC-CSS2/selector.html#dynamic-pseudo-classes

If you've only been at this a year - you aren't doing TOO badly then. You've got decent separation of presentation from content (excepting the occasional align property) and seem to at least grasp what CSS is and how to use it - you just need some time learning the 'tricks' used to simplify things down and some time working with flow order and the box model instead of against it.

 

awesome, thank you so much.

could you provide a link describing proper flow order?

 

also, why use negative margins? isn't it possible to achieve the same positioning without?