Center content width issue in Safari and Chrome

This forum is only for questions or discussions about working with the mojoPortal source code in Visual Studio, obtaining the source code from the repository, developing custom features, etc. If your question is not along these lines this is not the right forum. Please try to post your question in the appropriate forum.

Please do not post questions about design, CSS, or skinning here. Use the Help With Skins Forum for those questions.

This forum is for discussing mojoPortal development

You can monitor commits to the repository from this page. We also recommend developers to subscribe to email notifications in the developer forum as occasionally important things are announced.

Before posting questions here you might want to review the developer documentation.

Do not post questions about design, CSS, or skinning here. Use the Help With Skins Forum for those questions.

This thread is closed to new posts. You must sign in to post in the forums.

7/5/2012 4:28:38 AM

damo

Total Posts 21

View Posts

Center content width issue in Safari and Chrome

Hi,

I am having an issue with the center content of my site. The content is being squashed over to the left so it is only the width of each word. This only happens in Safari and Google Chrome and I know that there are specifics that you have to set in safari and chrome to make sure your content spaces out correctly but I have tried several fixes and cannot get it to work.

I am using a slightly altered Artisteer31-Fullheader template and it seems when there is a left hand column that spaces correctly and the right hand column spaces correctly (although it only contains a single set of images so it may not be) it just seems to be the center content that will not keep the correct width.

My template layout for that section is as follows:

                            <div class="art-content-layout-row" style="border:0px solid;">
                                <asp:Panel ID="divLeft" runat="server" CssClass="art-layout-cell art-sidebar1 leftside"
                                    Visible="True" SkinID="pnlPlain">
                                    <portal:PageMenu ID="PageMenu1" runat="server" UseTreeView="true" IsSubMenu="true"
                                        TreeViewShowExpandCollapse="false" />
                                    <asp:ContentPlaceHolder ID="leftContent" runat="server">
                                    </asp:ContentPlaceHolder>
                                    <div class="cleared reset-box"></div>
                                </asp:Panel>
                                <asp:Panel ID="divCenter" runat="server" Visible="True" CssClass="center-rightandleftmargins"
                                    SkinID="pnlPlain">
                                    <portal:Breadcrumbs ID="Breadcrumbs" runat="server"></portal:Breadcrumbs>
                                    <portal:ChildPageMenu ID="ChildPageMenu" runat="server" CssClass="txtnormal"></portal:ChildPageMenu>
                                    <a id="startcontent"></a>
                                    <asp:ContentPlaceHolder ID="mainContent" runat="server">
                                    </asp:ContentPlaceHolder>
                                    <div class="cleared reset-box"></div>
                                </asp:Panel>
                                <asp:Panel ID="divRight" runat="server" Visible="True" CssClass="art-layout-cell art-sidebar2 rightside"
                                    SkinID="pnlPlain">
                                    <asp:ContentPlaceHolder ID="rightContent" runat="server">
                                    </asp:ContentPlaceHolder>
                                    <div class="cleared reset-box"></div>
                                </asp:Panel>
                            </div>

7/5/2012 7:49:45 AM

Joe Audette

Total Posts 18439

View Posts

Re: Center content width issue in Safari and Chrome

No-one can help you with css problems unless they can see your site and inspect it with browser tools. If you can post an url for your site then it "might" be possible that someone can help you.

Best,

Joe

7/5/2012 8:14:03 AM

damo

Total Posts 21

View Posts

Re: Center content width issue in Safari and Chrome

Hi Joe,

Sorry I thought I had put the url on my post.

Heres the link ce.itgenies.com

You'll notice it looks good in firefox and several versions of ie but I can't get the center width to work in safari or chrome.

7/5/2012 8:35:41 AM

Joe Audette

Total Posts 18439

View Posts

Re: Center content width issue in Safari and Chrome

I think it may take a better css guru than me to solve this one. Artisteer uses a lot of display:table-cell which I don't fully understand the nuances of. Using chrome dev tools I was able to get the center part to not be bunched up on the left by removing that display:table-cell from the .art-layout-cell selector. But doing that also made the right column go below the center column so some other fixes may be needed to really solve it.

Maybe some of the other css gurus like Joe Davis can take a look.

Best,

Joe

7/5/2012 8:58:55 AM

damo

Total Posts 21

View Posts

Re: Center content width issue in Safari and Chrome

I'm the same, I don't know enough about the way display:table-cell works. I tried the removal of the setting uner the art-layout-cell selector but it didnt pad the text out for me in chrome so I might have a caching issue but it did mess up the layout in firefox.

Thanks for looking Joe, lets hope one of the css gurus come to my rescue!

7/5/2012 4:52:55 PM

damo

Total Posts 21

View Posts

Re: Center content width issue in Safari and Chrome

Hi Joe,

I kind of fixed this issue but it was more of a botch than a knowledgeable fix. I pulled out the center-rightandleftmargins class call on the divCenter panel as I could not locate where this style existed in any of the stylesheets therefore I could not tell what it was doing to the final layout. I replaced this css call with a simple width="100%" in the panel header although I had to hardcode it in the layout.Master as I was not recognising it when I put it in a custom style through to the stylesheet for some reason?

So my resulting code in the layout.Master looked like this:

                            <div class="art-content-layout-row" style="border:0px solid;">
                                <asp:Panel ID="divLeft" runat="server" CssClass="art-layout-cell art-sidebar1 leftside"
                                    Visible="True" SkinID="pnlPlain">
                                    <portal:PageMenu ID="PageMenu1" runat="server" UseTreeView="true" IsSubMenu="true"
                                        TreeViewShowExpandCollapse="false" />
                                    <asp:ContentPlaceHolder ID="leftContent" runat="server">
                                    </asp:ContentPlaceHolder>
                                    <div class="cleared reset-box"></div>
                                </asp:Panel>
                                <asp:Panel ID="divCenter" runat="server" Visible="True" width="100%"
                                    SkinID="pnlPlain">
                                    <portal:Breadcrumbs ID="Breadcrumbs" runat="server"></portal:Breadcrumbs>
                                    <portal:ChildPageMenu ID="ChildPageMenu" runat="server" CssClass="txtnormal"></portal:ChildPageMenu>
                                    <a id="startcontent"></a>
                                    <asp:ContentPlaceHolder ID="mainContent" runat="server">
                                    </asp:ContentPlaceHolder>
                                    <div class="cleared reset-box"></div>
                                </asp:Panel>
                                <asp:Panel ID="divRight" runat="server" Visible="True" CssClass="art-layout-cell art-sidebar2 rightside"
                                    SkinID="pnlPlain">
                                    <asp:ContentPlaceHolder ID="rightContent" runat="server">
                                    </asp:ContentPlaceHolder>
                                    <div class="cleared reset-box"></div>
                                </asp:Panel>
                            </div>

I wish I could tell you this is the correct way to fix this issue but I feel sure it isnt although if it helps someone else get out of a hole then it was worth posting I guess!

Thanks

Damian

7/5/2012 10:10:52 PM

Joe Davis

Total Posts 2239

View Posts

Re: Center content width issue in Safari and Chrome

Hi all,

Sorry I couldn't respond sooner. The important part of what you changed was the width: 100%. The classes you removed get added automatically by mojo so removing them really didn't do anything because mojo just put them back before the page was rendered.

Usually, the 100% would mess things up and make the whole div the whole width of it's container but because it's display is set to table-cell, it acts like a table cell and those are pretty smart. Because their is another div right next to this one with a specific PX width, the 100% is really "all the space that's available in the container after subtracting the width of the other div."

You could set the width in your stylesheet with this:

.art-content { width: 100%; }

The only advantage here is that you wouldn't be setting it with inline style which is generally not desirable.

All in all, what you did worked and there's nothing wrong with it.

Later,
Joe D.

7/7/2012 5:16:29 PM

damo

Total Posts 21

View Posts

Re: Center content width issue in Safari and Chrome

Hi Joe,

Thanks for your reply. I'm glad you clarified the point regarding the classes I removed as I presumed they were being auto generated by mojo but wasnt 100% sure.

I did try to set the width in my stylesheet but it didnt seem to have any bearing on what was being displayed but then I have been having a few issues with caching so i'll give it another go.

Thanks once again for your input its been very helpful.

Best Regards

Damian

7/8/2012 12:50:59 PM

Joe Audette

Total Posts 18439

View Posts

Re: Center content width issue in Safari and Chrome

You can make the browser load the latest css whenever you want as long as its using our csshandler to combine the css.

Whenever you make a change in css go to Administration > Advanced Tools > Design Tools > Cache Tool and click the button to reset the skin guid, that will make all web browsers reload the latest css.

Hope that helps,

Joe

You must sign in to post in the forums. This thread is closed to new posts.