CSS: How to align a child element with no assigned class

While designing a site using the Responsive theme from TopSharePoint, I ran into a slight snag. Several of my pages consisted of a single CEWP that called a text file stored in a library for the actual content. Any of the pages that were set up this way looked fine in IE8 & IE9 but in Firefox or Chrome the actual CEWP was sitting beside the fixed width page, to the right. After a lot of F12 and a whole lot of #@!$% I finally isolated the layer that was off – it was the dynamically-generated table between the #pageContent layer and the actual CEWP code. This table is generated by SharePoint to house the web part, and it has no class associated with it. So the mystery became how to control that table without a class and without making it look off in IE. The solution, as it turns out, was a single CSS style:

cab-page-css-fix

 

 

The style on line 85 was part of the Responsive CSS, but it was the only reference I could find to the #pageContent layer. To affect the child table, I ended up adding line 86 with a left float. This caused the table to leap back over to the left where I wanted it.

Calling a child element like this may seem like basic CSS to some designers, but I’ll admit it had me banging my head on the desk for quite a while. Hopefully this will help someone else from experiencing the same frustration.

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s