SitePoint Sponsor

User Tag List

Results 1 to 22 of 22
  1. #1
    SitePoint Evangelist
    Join Date
    Feb 2005
    Posts
    530
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Styling issues with forum

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

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,203
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    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.

  3. #3
    SitePoint Evangelist
    Join Date
    Feb 2005
    Posts
    530
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  4. #4
    SitePoint Evangelist
    Join Date
    Feb 2005
    Posts
    530
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,623
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    I have those two pages up side by side and it's appearing the same. Have you cleared your cache?

    FF5 (college computers)
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  6. #6
    SitePoint Evangelist
    Join Date
    Feb 2005
    Posts
    530
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  7. #7
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,623
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  8. #8
    SitePoint Evangelist
    Join Date
    Feb 2005
    Posts
    530
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  9. #9
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,623
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  10. #10
    SitePoint Evangelist
    Join Date
    Feb 2005
    Posts
    530
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,372
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    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.

  12. #12
    SitePoint Evangelist
    Join Date
    Feb 2005
    Posts
    530
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  13. #13
    SitePoint Evangelist
    Join Date
    Feb 2005
    Posts
    530
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  14. #14
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,203
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Linda A View Post
    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.

  15. #15
    SitePoint Evangelist
    Join Date
    Feb 2005
    Posts
    530
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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&amp;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&amp;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.

  16. #16
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,372
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    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.

  17. #17
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,623
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  18. #18
    SitePoint Evangelist
    Join Date
    Feb 2005
    Posts
    530
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  19. #19
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,623
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  20. #20
    SitePoint Evangelist
    Join Date
    Feb 2005
    Posts
    530
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  21. #21
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,623
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  22. #22
    SitePoint Evangelist
    Join Date
    Feb 2005
    Posts
    530
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •