Styling issues with forum

Linda_A · February 8, 2012, 6:46pm

I am having a bit of a struggle with a box of social media links that I’ve added to the side of a forum. The box appears correctly styled on some templates and not others and I haven’t been able to determine why.

See the “Connect With Us” section on the following pages:

http://asoiaf.westeros.org/ – here it appears unstyled
http://asoiaf.westeros.org/index.php/members/ – here the styling is applied

What could be causing this? The forum skin is … pretty messy by default, is my understanding, so I don’t expect anyone to really dig into it…but any qualified guesses as to what might be the culprit would be welcome.

The added css is this:


div.Social {
background:#000000;
border:2px solid #D89441;
margin:2px auto 5px auto;
width:180px;
}

div.SocialFacebook {
border-bottom:2px solid #D89441;
margin:0;
text-align:left;
width:180px;
}

div.SocialGoogle {
border-bottom:2px solid #D89441;
height:45px;
margin:0;
padding-left:10px;
padding-top:3px;
text-align:left;
width:170px;
}

div.SocialRSS {
height:45px;
margin:0;
padding-left:10px;
padding-top:3px;
text-align:left;
width:170px;
}

div.SocialTwitter {
border-bottom:2px solid #D89441;
height:45px;
margin:0;
padding-left:10px;
padding-top:3px;
text-align:left;
width:170px;
}

ralphm · February 8, 2012, 9:06pm

Seems like the page without the styles doesn’t link to the necessary style sheet. The CSS link on each page is different. It’s a very contorted link, so it’s hard to tell what’s what, but it’s not the same on both pages.

Linda_A · February 8, 2012, 11:41pm

I don’t think that’s precisely it, because all of the styling on the sidebar is added to the same css file and the rest is showing up without any problems.

Linda_A · February 9, 2012, 4:24pm

I’ve done a bit of additional testing, such as removing the ad entirely (since it displays on the main page but not on the member list), but that didn’t make a difference. Quite baffling.

RyanReese · February 9, 2012, 4:31pm

I have those two pages up side by side and it’s appearing the same. Have you cleared your cache?

FF5 (college computers)

Linda_A · February 9, 2012, 4:49pm

Cleared cache and checked on three different computers and three different browsers… So you’re seeing the black background for the “box” under “Connect With Us” on both pages? Or seeing it without the black background on both?

RyanReese · February 9, 2012, 4:52pm

There is no black background on both. I just see some weird characters vertically stacked, and then some buttons to like on FB/other social media.

Linda_A · February 9, 2012, 4:57pm

Alright, so for you its displaying without the styling on both pages whereas on each browser and computer I test with, I see the styling on the members page and not on the main page.

RyanReese · February 9, 2012, 5:07pm

[SIZE=7]346 ERRORS!!![/SIZE]

Linda_A · February 9, 2012, 5:45pm

The base skin from Invision has its issues, I am afraid. But its way beyond me to rework it from the ground up, so I don’t have much choice.

PaulOB · February 9, 2012, 6:07pm

Hi,

As Ralph said the CSS is missing from one page.

here is the same section from both pages:


div.Ad {
	text-align:center;
	margin-top:10px;
	margin-bottom:-30px
}
[B]div.Social {
	background-color:#000;
	border:2px solid #D89441;
	margin:2px auto 5px auto;
	width:180px
}
div.SocialFacebook {
	border-bottom:2px solid #D89441;
	margin:0;
	text-align:left;
	width:180px
}
div.SocialGoogle {
	border-bottom:2px solid #D89441;
	height:45px;
	margin:0;
	padding-left:10px;
	padding-top:3px;
	text-align:left;
	width:170px
}
div.SocialRSS {
	height:45px;
	margin:0;
	padding-left:10px;
	padding-top:3px;
	text-align:left;
	width:170px
}
div.SocialTwitter {
	border-bottom:2px solid #D89441;
	height:45px;
	margin:0;
	padding-left:10px;
	padding-top:3px;
	text-align:left;
	width:170px
}[/B]
div.StoreSidebarItem {
	background:#000;
	border:medium solid #D89441;
	height:200px;
	margin:10px auto 10px auto;
	padding:5px 5px 5px 5px;
	text-align:center;
	width:120px
}


div.Ad {
	text-align:center;
	margin-top:10px;
	margin-bottom:-30px
}
div.StoreSidebarItem {
	background:#000;
	border:medium solid #D89441;
	height:200px;
	margin:10px auto 10px auto;
	padding:5px 5px 5px 5px;
	text-align:center;
	width:120px
}

As you can see the social icon code is missing between those two other elements. The issue must be at the stage that you amalgamate those files.

Linda_A · February 9, 2012, 6:30pm

This makes no sense… The CSS that fails to render (div.Social, etc) is added into exactly the same file (ipb_styles.css) as “div.StoreSidebarItem” and that part shows up.

I guess it must be an Invision issue then, will have to contact them.

Thanks.

Linda_A · February 9, 2012, 10:50pm

I guess there’s one other thing to ask: is there anything at all odd about these CSS rules? Any reason that they’d get stripped out by the Invision back-end? I’ve moved them around in the file, I’ve renamed them, and nothing works. They just get stripped out.

ralphm · February 9, 2012, 11:01pm

The first thing I noticed was that the CSS link (with all those style sheets joined together) is different on each page. If you copy the CSS link from both pages, you’'ll see that one is longer than the other. So the critical style sheet is getting left out. I don’t understand this method of style sheet linking, but I’d say that’s where you problem is. You could try an experiment of just pasting in the link for the style sheet in the head on its own and see if that makes a difference.

Linda_A · February 9, 2012, 11:13pm

On the first page, the CSS link is:

On the second, it is:

So, yes, there is a difference … but the file with the specific inserted styling in is public/style_css/css_12/ipb_styles.css … and that does appear in both cases. And if I look at http://asoiaf.westeros.org/public/style_css/css_12/ipb_styles.css, the styling appears to be there.

PaulOB · February 10, 2012, 1:49am

Hi,

I don’t know if this helps but if you move the file to the end of the list it works.


<link rel="stylesheet" type="text/css" media='screen,print' href="http://asoiaf.westeros.org/public/min/index.php?ipbv=32006&amp;f=public/style_css/css_12/avatars.css,public/style_css/css_12/ipb_help.css,public/style_css/css_12/calendar_select.css,public/style_css/css_12/ipb_common.css,[B]public/style_css/css_12/ipb_styles.css[/B]" />

Which would seem to indicate than an error (possibly in the sheet before) is tripping up the css from loading.

You could try removimg most of the styles from that specific file and see if anything loads and you may be able to narrow down the cause.

RyanReese · February 10, 2012, 3:03am

It would be nearly impossible to identify the culprit without fixing all the validation errors…I bet it would be fixed if you took the time to fix them.

Linda_A · February 10, 2012, 10:00am

Paul,

Unfortunately, I have no control over how that list of stylesheets is put together, its all automated. But that gives me something to point out to Invision, thank you.

Ryan,

Its possible, but I can’t make such radical changes to the skins, it makes upgrading the forum too difficult since the changes won’t always be auto-imported. Virtually all the errors are probably from the default forum skin, all I’ve done with it is recolour and add the sidebar.

RyanReese · February 10, 2012, 4:29pm

It’s probably not even radical changes. If you have an error early on in the stylesheet, there’s a pretty good chance that it c ould escalate down the page and cause ALL the other styles to be wrong…to a point.

I’d at least go there and weed some stuff out. Not anything major, but just check for semi colons, brackets, etc.

Linda_A · February 10, 2012, 4:55pm

Fair enough, I should make sure my add-ons are fine at least. But taking a look at that report, I don’t quite follow most of the errors and wouldn’t have a clue what the appropriate fix would be. It seems the majority are about such and such a property not existing.