hyperlink - Tricky CSS Tangle: Link styles from separate divs all seeming to pull style from elsewhere -

problem: page header laid out this(sorry, don't have enough rep yet post images directly, or post more 2 links. why have []ed http:// in second 2 links past in case of see problem through imgur without visiting web page in question):

http://i.stack.imgur.com/bn0fj.png

but when link in header area (and these links separated in different classes , divs) being clicked on, (i believe it's called "active"), whole section of links goes cray. login/register links fly off of page, , nav links lose float:right attribute. i've looked through of ".class a:link, a:visited a:hover, a:active"'s , can't find style should affecting them! i'll try describe method in way may able flag error in css syntax, although think issue may not simple.

the effects of clicking link anywhere in header (notice "header, header isn't styled single header div, it's series of stacked, separate divs floating left or right):

http://i.stack.imgur.com/7oytg.png

or:

[http://]i.stack.imgur.com/w87fc.png

or flying off of page:

[http://]i.stack.imgur.com/mb0zh.png

see www.gamemode.org live example of this.

my style sheet huge, think can describe in way can achieve answer simple css fundamental tips rather "paste in" fix.

i have been styling links in header of gamemode.org have top bar who's login/ register links float left, , lower nav section navigation links float right. way i've been styling follows:

html:

 <div class="class_name"><a>link</a></div>  <div class="another_class_name"><a>link</a></div> 

css:

 .class_name a:link, a:visited, a:active  {  margin:0em 0em 0em 0em;  float:left;  color:somecolor;  (etc)  }   .class_name a:hover  {  (simple hover effect)  }   .another_class_name a:link, a:visited, a:active  {  margin:0em 0em 0em 0em;  float:right;  color:somecolor;  (etc)  }        .another_class_name a:hover  {  (simple hover effect)  } 

is there wrong these styles? there here generous enough webpage , styles @ www.gamemode.org , try , find problem? i've looked many hours using google chrome web tools , cannot seem find source of links going crazy when active (while being clicked), although have noticed not act way when local styling removed.

[edit: add in of css, haven't been able pinpoint issue, can't so- want's can view , tamper css do, google chrome's inspect element]

[edit ii: above code not style links within div? example: | .this_class a:link, a:active { color:red; } | same "style inactive links , active links in class="this_class" red color." incorrect?

your problem have tons of a:active styles overwriting , contradicting default ones. instance, ones bothering width , margin set @ 671 , 223 lines of styles.css rid of , work fine.

here's screenshot, problematic items:

http://prntscr.com/14ttsx

change this:

.top a:link, a:visited, a:active { float:left; margin:0% 1% 0% 2%; font-size:19pt; color:white; text-decoration:none; } 

to this:

.top a:link, a:visited, a:active { float:left; margin:0; width: auto; font-size:19pt; color:white; text-decoration:none; }   

this way won't wreck other styled links.

the problem other styles affecting ones @ top following:

.server_slot a:link, a:active, a:visited { ... } 

that part of code targeting active link in server_slot class active , visited links. should change to:

.server_slot a:link, .server_slot a:active, .server_slot a:visited { ... } 

additional random advice:

• don't mix units, in 1 rule using font-size in em , in in pt. use 1 , stick it
• but don't use pt, unless it's print, here's why: http://css-tricks.com/css-font-size/