1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

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

Discussion in 'CSS' started by mlg5454, Sep 24, 2007.

  1. #1
    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...
    SEMrush
    Thanks for all and any attention to this, and a virtual million bucks to whoever can figure it out...
     
    mlg5454, Sep 24, 2007 IP
    SEMrush
  2. Crimsonc

    Crimsonc Peon

    Messages:
    616
    Likes Received:
    15
    Best Answers:
    0
    Trophy Points:
    0
    #2
    what is it doing that it's not supposed to do? The only thing that happens is their is an underline when you hover.
     
    Crimsonc, Sep 24, 2007 IP
  3. mlg5454

    mlg5454 Peon

    Messages:
    51
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    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)
     
    mlg5454, Sep 24, 2007 IP
  4. mlg5454

    mlg5454 Peon

    Messages:
    51
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    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.
     
    mlg5454, Sep 24, 2007 IP
  5. client3

    client3 Banned

    Messages:
    169
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    0
    #5
    there is some problems with "position" in the IE 5 to above, so its better to remove it, and check again.
     
    client3, Sep 24, 2007 IP
  6. mlg5454

    mlg5454 Peon

    Messages:
    51
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    remove what, the auto width?
     
    mlg5454, Sep 24, 2007 IP
  7. mlg5454

    mlg5454 Peon

    Messages:
    51
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #7
    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.
     
    mlg5454, Sep 24, 2007 IP
  8. VimF

    VimF Well-Known Member

    Messages:
    307
    Likes Received:
    27
    Best Answers:
    0
    Trophy Points:
    118
    #8
    There are some paragraph end tags </p> inside your anchors.
     
    VimF, Sep 24, 2007 IP
  9. mlg5454

    mlg5454 Peon

    Messages:
    51
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #9
    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
     
    mlg5454, Sep 24, 2007 IP
  10. mlg5454

    mlg5454 Peon

    Messages:
    51
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #10
    aaaand the glitchy "artists" problem is back. this time it's moving to the left.
     
    mlg5454, Sep 24, 2007 IP
  11. VimF

    VimF Well-Known Member

    Messages:
    307
    Likes Received:
    27
    Best Answers:
    0
    Trophy Points:
    118
    #11
    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):
     
    VimF, Sep 24, 2007 IP
  12. mlg5454

    mlg5454 Peon

    Messages:
    51
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #12
    word, word, got it. thank you so much for pointing that out. old code from something else.
     
    mlg5454, Sep 24, 2007 IP
  13. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,146
    Likes Received:
    1,700
    Best Answers:
    239
    Trophy Points:
    515
    #13
    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.
     
    deathshadow, Sep 24, 2007 IP
  14. mlg5454

    mlg5454 Peon

    Messages:
    51
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #14
    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
     
    mlg5454, Sep 24, 2007 IP
  15. Crimsonc

    Crimsonc Peon

    Messages:
    616
    Likes Received:
    15
    Best Answers:
    0
    Trophy Points:
    0
    #15
    deathshadow has done what I'd just come back to do, nice one.
     
    Crimsonc, Sep 25, 2007 IP
  16. mlg5454

    mlg5454 Peon

    Messages:
    51
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #16
    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...
     
    mlg5454, Sep 25, 2007 IP
  17. mlg5454

    mlg5454 Peon

    Messages:
    51
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #17
    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?
     
    mlg5454, Sep 25, 2007 IP
  18. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,146
    Likes Received:
    1,700
    Best Answers:
    239
    Trophy Points:
    515
    #18
    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.
     
    deathshadow, Sep 25, 2007 IP
  19. mlg5454

    mlg5454 Peon

    Messages:
    51
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #19
    awesome, thank you so much.

    could you provide a link describing proper flow order?
     
    mlg5454, Sep 25, 2007 IP
  20. mlg5454

    mlg5454 Peon

    Messages:
    51
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #20
    also, why use negative margins? isn't it possible to achieve the same positioning without?
     
    mlg5454, Sep 25, 2007 IP