ID:64965
 
BYOND Version:N/A (Website Bug)
Operating System:Windows XP Home
Web Browser:Firefox 3.0.8
Status: Deferred

This issue may be low priority or very difficult to fix, and has been put on the back burner for the time being.
I thought this was supposed to be untouchable, but playing with the CSS, I was able to alter whatever I wished in the menu bar for my members page. I even edited the atom28_members.png image to match the colors and was able to replace the normal atom with my own. Check my CSS for how to accomplish, or block, this.

http://www.byond.com/members/Xooxer


[edit]

I've removed it before anyone else catches on before you can fix it. Here's what I did, though. Basically, I over-rided your CSS styles by declaring my style more explicitly.

If you used #menu, I used div#menu.
If you used div#menu, I used body div#menu.

Also, I employed the !important tag, to make sure my declarations were taken as being more important than yours. The only way I can see to correct this is to declare each and every style absolutely, from the html tag down to each individual class and div, naming each in order. That way, nobody can use a more absolute declaration to over-ride your styles.


/***********************************
* Xooxer's menu over-ride exploit *
***********************************/

body div#headbar {
background: #610 !important;
background-color: #610 !important;
color: #FFF !important;
border-bottom: 1px solid #310 !important;
}

body div#menu, ul a.mainmenu, div#menu a, div#menu a:link, div#helpbyondcenter a, div#helpbyondcenter a:link {
color: #FC3 !important;
}

div#menu a.mainmenu:hover, div#menu a.menu_link:hover {
color: #FC3 !important;
background: #910 !important;
}

div#menu a.menu_link, div#menu a, a.membership_info {
color: #FC3 !important;
background: #610 !important;
}
div#menu a.menu_link {
color: #FC3 !important;
}

li.menu_separator {
border-top: 1px solid #310 !important;
}

/* Menu colors */
div#menu a, div#menu span {
background: #610 !important;
}
div#menu ul ul {
border: 1px solid #310 !important;
background: #610 !important;
}
div#menu .live_info, div#menu .live_info:hover, div#menu span, div#menu span:hover {
color: #F93 !important;
background: #910 !important;
}
div#menu a.name, div#menu a.name:hover {
color: #C10 !important;
}
div#menu .membership_info {
color: #F93 !important;
}

/* Atom logo keeps its transparent background, override above anchor styles. */
div#menu ul#atom a#atom_link img {
display: none !important;
}

div#menu ul#atom a#atom_link:after{
content: url('http://www.byond.com/members/Xooxer/files/ atom28_members.png') !important;
}

div#menu ul#atom {
padding: 2px !important;
}


div#search_box {
color:#F93 !important;
}


/******************************
* End menu over-ride exploit *
******************************/
The only way I can see to correct this is to declare each and every style absolutely, from the html tag down to each individual class and div, naming each in order. That way, nobody can use a more absolute declaration to over-ride your styles.

I'm fairly sure browsers read things in the order they recieve them. Presently the standard BYOND stylesheet is employed above the user supplied CSS. An easy way to fix this would be to remove all the menu stuff from the standard stylesheet, put it in it's own stylesheet and call it after user supplied CSS completely nullifying it's effects.
I don't know to what extent this is fixable. All I can think of for a real solution is to yank any menu-related stuff out of the user's stylesheet. It'd take some pretty intense parsing to strip that out however, and it would not be foolproof as newer browser capabilities make it possible to do some fairly advanced stuff with CSS (provided you're not using IE of course).
Lummox JR wrote:
I don't know to what extent this is fixable. All I can think of for a real solution is to yank any menu-related stuff out of the user's stylesheet. It'd take some pretty intense parsing to strip that out however, and it would not be foolproof as newer browser capabilities make it possible to do some fairly advanced stuff with CSS (provided you're not using IE of course).

I still think you should put all the menu style data in it's own stylesheet (if not already) and include that after the user stylesheet.

It's worth a shot at the very least. I'm betting it'll work.
Tiberath wrote:
I still think you should put all the menu style data in it's own stylesheet (if not already) and include that after the user stylesheet.
It's worth a shot at the very least. I'm betting it'll work.

It will improve matters, but not fix them entirely. CSS's rules of precedence mean that while later rules are ranked higher, more specific rules are ranked higher still. In essence getting the menus to be unmodifiable requires styles with selectors that span every part of the DOM tree leading up to and including the menu itself. While fortunately the menu isn't buried in too deep a mess of divs and tables, it's deep enough that this would not be a pleasant prospect.

The root of the problem is that CSS was never designed for user-generated content, so it has no rules for sandboxing.