Styling issues with forum

**Linda A** · Feb 8, 2012 12:46

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:

Code:

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;
}

**ralph.m** · Feb 8, 2012 15:06

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** · Feb 8, 2012 17:41

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** · Feb 9, 2012 10:24

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** · Feb 9, 2012 10:31

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** · Feb 9, 2012 10:49

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** · Feb 9, 2012 10:52

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** · Feb 9, 2012 10:57

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** · Feb 9, 2012 11:07

346 ERRORS!!!!!!!!!!!

**Linda A** · Feb 9, 2012 11:45

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.

**Paul O'B** · Feb 9, 2012 12:07

Hi,

As Ralph said the CSS is missing from one page.

here is the same section from both pages:

Code:

div.Ad {
	text-align:center;
	margin-top:10px;
	margin-bottom:-30px
}
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
}
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
}

Code:

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** · Feb 9, 2012 12:30

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** · Feb 9, 2012 16:50

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.

**ralph.m** · Feb 9, 2012 17:01

Originally Posted by Linda A

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.

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** · Feb 9, 2012 17:13

On the first page, the CSS link is:

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

On the second, it is:

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

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/st...ipb_styles.css, the styling appears to be there.

**Paul O'B** · Feb 9, 2012 19:49

Hi,

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

Code:

<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,public/style_css/css_12/ipb_styles.css" />

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** · Feb 9, 2012 21:03

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** · Feb 10, 2012 04:00

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** · Feb 10, 2012 10:29

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** · Feb 10, 2012 10:55

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.

**RyanReese** · Feb 10, 2012 11:16

Start at the top and work your way down. The errors given and the descriptions given should be enough.

If you are stuck on a particular error, post it here and we will sort it out.

**Linda A** · Feb 10, 2012 16:34

Got some help at an Invision help forum and once the added styles had been broken out into a separate style sheet, everything worked.

Well, mostly. The +1 button displays correctly aligned in Firefox and Seamonkey, but all out of place on Chrome.

User Tag List

Thread: Styling issues with forum

Thread Tools

Display

Styling issues with forum

Bookmarks

Bookmarks

Posting Permissions