This is extremely bizarre

[Stinky666]

This is seriously bizarre.
exdat.freeforums.net/

See the nav menu.. All images have a separator after them (on the button itself), yet I don't see one on: Home, Search, Members, or UserCP

The other buttons, I do :S
Here's what i see:


Here's what it actually is


(the above are the EXACT ones I am using, link included, as you can see they are hosted on PB because I uploaded them for this purpose).


Any suggestions?

[RedBassett]

Greetings,

The links display fine as a guest, however I am able to replicate the issue by adding more items to the navbar. The image is 61px wide, but adding elements, I can make it collapse down to ~60px, enough to cut off the line in the image.

[Stinky666]

Apr 14, 2013 18:14:13 GMT -8 RedBassett said:

Greetings,

The links display fine as a guest, however I am able to replicate the issue by adding more items to the navbar. The image is 61px wide, but adding elements, I can make it collapse down to ~60px, enough to cut off the line in the image.

Unfortunately, they appear the same for me as a guest (firefox).
Not sure if you meant height, not width for the size, since the images are 61px in height. Obviously they vary in width.

It needs to be set at 61px because the images are 61px, and that also includes the menu bar itself.

Ok so, I just set it to 62px, which now shows the buttons fine, but now they are not aligned with the menu/nav bar (it's too far down, or the buttons are too far up :/ )

[RedBassett]

You're right, I was mis-reading the dimensions

How does it render in other browsers? Private session?

[Stinky666]

In opera, they show fine.
Also my nav tree arrows show the proper colour in Opera (in firefox they are a thick text colour, and not the border colour, as they should be).
How strange is it FF messing up and not Opera for once

I've noticed that setting the image height to 61px it reduces the size, or appears to, making the images blurry. Setting it to 62px looks correct, and sharp, as they should. 60px and less is also blurry (gets blurry obviously the smaller you do it).

Chrome shows fine too (also the nav tree arrows)


Edit:
Logged in with Opera, even though it's set to 62px, the menu bar isn't unaligned like it is in chrome + firefox


Edit 2:
Did a private browsing session with Firefox, and they display correctly a 62px also, but the menu is unaligned.

Edit 3:
Set it back to 61px. In all browsers they are blurry.
Opera at 61px it's blurry and unaligned with the nav menu/grad, but you can see the separators.
Firefox private browsing it goes back to the original problem, although they are not blurry

[RedBassett]

Any plugins or the like active? Any custom user stylesheets? Greasemonkey scripts?

[Stinky666]

Apr 14, 2013 19:14:24 GMT -8 RedBassett said:

Any plugins or the like active? Any custom user stylesheets? Greasemonkey scripts?

The only plugin I have, is the classic proboards menu, which is enabling me to make this happen (the images).
The only greasemonkey scripts are for games on facebook.
And the style sheets that are custom, I don't think should affect, but here is all the custom:
(head and base css, thread hover, user legend,

/* Head And Base */

@container_head_image_url: url("http://exdat.net/v2/edv2stuff/tophead.jpg");
@container_side_image_url: url("http://i49./f284/prophetfx/tryagain.jpg");
@container_base_image_url: url("http://i49./f284/prophetfx/edv2menu/bottomfoot.jpg");
@container_head_image_height: 43px;
@container_base_image_height: 29px;
@container_side_image_margin: 13px;

/* Do not edit past here if you aren't sure how. */
html.multiplebgs .container.boards, html.multiplebgs .container.threads, html.multiplebgs .container.shoutbox, html.multiplebgs .container.quick-reply, html.multiplebgs .container.gravity-related-topics, html.multiplebgs .container.legend {
background-image: @container_head_image_url, @container_base_image_url, @container_side_image_url;
padding: @container_head_image_height 0 @container_base_image_height;
background-position: left top, left bottom, left @container_head_image_height;
background-repeat: repeat-x, repeat-x, repeat-y;
}

html.multiplebgs .container.boards > div, html.multiplebgs .container.threads > div, html.multiplebgs .container.shoutbox > div, html.multiplebgs .container.quick-reply > div, html.multiplebgs .container.gravity-related-topics > div, html.multiplebgs .container.legend > div {margin: 0 @container_side_image_margin;}
/* End of head/base/side image code. */

/* Head And Base - POSTS */

@container_head_image_url: url("http://exdat.net/v2/images/topheadpost.png");
@container_side_image_url: url("http://i49./f284/prophetfx/tryagain.jpg");
@container_base_image_url: url("http://i49./f284/prophetfx/edv2menu/bottomfoot.jpg");
@container_head_image_height: 43px;
@container_base_image_height: 29px;
@container_side_image_margin: 13px;

/* Do not edit past here if you aren't sure how. */
html.multiplebgs .container.posts, html.multiplebgs .container.quick-reply {
background-image: @container_head_image_url, @container_base_image_url, @container_side_image_url;
padding: @container_head_image_height 0 @container_base_image_height;
background-position: left top, left bottom, left @container_head_image_height;
background-repeat: repeat-x, repeat-x, repeat-y;
}

html.multiplebgs .container.posts > div, html.multiplebgs .container.quick-reply > div {margin: 0 @container_side_image_margin;}
/* End of head/base/side image code. */

/* Head And Base - INFO CENTER */

@container_head_image_url: url("http://exdat.net/v2/images/topheadicentervi1.png");
@container_side_image_url: url("http://i49./f284/prophetfx/tryagain.jpg");
@container_base_image_url: url("http://i49./f284/prophetfx/edv2menu/bottomfoot.jpg");
@container_head_image_height: 43px;
@container_base_image_height: 29px;
@container_side_image_margin: 13px;

/* Do not edit past here if you aren't sure how. */
html.multiplebgs .container.stats {
background-image: @container_head_image_url, @container_base_image_url, @container_side_image_url;
padding: @container_head_image_height 0 @container_base_image_height;
background-position: left top, left bottom, left @container_head_image_height;
background-repeat: repeat-x, repeat-x, repeat-y;
}

html.multiplebgs .container.stats > div {margin: 0 @container_side_image_margin;}
/* End of head/base/side image code. */
/**************************************************************************
*                 Member Legend - Info Center                             *
**************************************************************************/
/* Coloured Squares */
#squareAdm { width: 10px; height: 10px; background: #1979e6; margin-right: 3px; display: inline-block; }
#squareGMod { width: 10px; height: 10px; background: #e68819; margin-right: 3px; display: inline-block; }
#squareMod { width: 10px; height: 10px; background: #e219e6; margin-right: 3px; display: inline-block; }
#squareMem { width: 10px; height: 10px; background: #8ccf55; display: inline-block; }


/* Administrator */
a.admlegend {
 position: relative;
 text-decoration: none;
}
a.admlegend:hover:before {
 display: inline-block;
 position: absolute;
 padding: .5em;
 content: attr(title);
 min-width: auto;
 text-align: center;
 width: auto;
 height: auto;
 white-space: nowrap;
 top: -32px;
 right: -15px;
 background: rgba(39, 39, 39,.8);
 -moz-border-radius: 2px;
 -webkit-border-radius: 2px;
 border-radius: 2px;    
 color: #fff;
 font-size: .86em;
}
a.admlegend:hover:after {
 position: absolute;
 display: inline-block;
 content: "";  
 border-color: rgba(39, 39, 39,.8) transparent transparent transparent;
 border-style: solid;
 border-width: 6px;
 height:0;
 width:0;
 position:absolute;
 top: -8px;
 left: -2px;
}

/* Global Moderator */
a.gmodlegend {
 position: relative;
 text-decoration: none;
}
a.gmodlegend:hover:before {
 display: inline-block;
 position: absolute;
 padding: .5em;
 content: attr(title);
 min-width: auto;
 text-align: center;
 width: auto;
 height: auto;
 white-space: nowrap;
 top: -32px;
 right: -42px;
 background: rgba(39, 39, 39,.8);
 -moz-border-radius: 2px;
 -webkit-border-radius: 2px;
 border-radius: 2px;    
 color: #fff;
 font-size: .86em;
}
a.gmodlegend:hover:after {
 position: absolute;
 display: inline-block;
 content: "";  
 border-color: rgba(39, 39, 39,.8) transparent transparent transparent;
 border-style: solid;
 border-width: 6px;
 height:0;
 width:0;
 position:absolute;
 top: -8px;
 left:-2px;
}

/* Moderator */
a.modlegend {
 position: relative;
 text-decoration: none;
}
a.modlegend:hover:before {
 display: inline-block;
 position: absolute;
 padding: .5em;
 content: attr(title);
 min-width: auto;
 text-align: center;
 width: auto;
 height: auto;
 white-space: nowrap;
 top: -32px;
   right: -30px;
 background: rgba(39, 39, 39,.8);
 -moz-border-radius: 2px;
 -webkit-border-radius: 2px;
 border-radius: 2px;    
 color: #fff;
 font-size: .86em;
}
a.modlegend:hover:after {
 position: absolute;
 display: inline-block;
 content: "";  
 border-color: rgba(39, 39, 39,.8) transparent transparent transparent;
 border-style: solid;
 border-width: 6px;
 height:0;
 width:0;
 position:absolute;
 top: -8px;
 left: -2px;
}

/* Member */
a.memlegend {
 position: relative;
 text-decoration: none;
}
a.memlegend:hover:before {
 display: inline-block;
 position: absolute;
 padding: .5em;
 content: attr(title);
 min-width: auto;
 text-align: center;
 width: auto;
 height: auto;
 white-space: nowrap;
 top: -32px;
   right: -30px;
 background: rgba(39, 39, 39,.8);
 -moz-border-radius: 2px;
 -webkit-border-radius: 2px;
 border-radius: 2px;    
 color: #fff;
 font-size: .86em;
}
a.memlegend:hover:after {
 position: absolute;
 display: inline-block;
 content: "";  
 border-color: rgba(39, 39, 39,.8) transparent transparent transparent;
 border-style: solid;
 border-width: 6px;
 height:0;
 width:0;
 position:absolute;
 top: -8px;
 left: -2px;
}

/* Threads Link Hover Colour */
@threads_hover_link_color: #df0909;
@threads_hover_names_font: normal 100% Verdana,Arial;
.threads .item:hover .main .link a { color: @threads_hover_link_color; font: @threads_hover_names_font; }


Edit:
Also, I have the different widths for header and content.

[RedBassett]

Sorry, I meant browser plugins and css, not forum plugins/css My guess is some CSS property rendering differently for some reason, but honestly, my skill with debugging CSS isn't that good

[Stinky666]

Apr 14, 2013 19:18:41 GMT -8 RedBassett said:

Sorry, I meant browser plugins and css, not forum plugins/css My guess is some CSS property rendering differently for some reason, but honestly, my skill with debugging CSS isn't that good

Ah right ok @ plugins/css
I will reply to Brian's topic for the plugin, pointing him here to see if he can help since it's his plugin.

Thanks anyway though.
I think it may be due to the firefox update that was recent.