Please help with CSS container
Last Post 07/17/2008 11:14 AM by Lee Sykes. 9 Replies.
Author Messages
Julian
Nuker
Nuker
Posts:16


--
07/09/2008 4:39 AM
    Hi,

    I have a slight problem with my css container.  I have a simple module for uploading and displaying profile pictures.  when I upload an image, the container doesn't expand to surround the image, instead the image spills over the edges of the container.

    I've added a small screen shot so that you can see what I mean.

    Some background info:  I created the skin and containers using the CSS tutorial found on this site, so that means that the left and center columns are floated, I don't know if that could be the reason?  (since the photo module is in the left column)  I moved the container to the right column, which is not foloated, but to no avail.

    Any assistance would be greatly appreciated.

    Regards

    Julian
    Julian
    Nuker
    Nuker
    Posts:16


    --
    07/10/2008 3:52 AM
    pls. anyone?
    Joseph Craig
    DNN MVP
    Posts:11667


    --
    07/10/2008 7:39 AM
    Could you perhaps attach your container file to a message and also include the CSS that styles it?

    Joe Craig, Patapsco Research Group
    Complete DNN Support
    Julian
    Nuker
    Nuker
    Posts:16


    --
    07/10/2008 8:27 AM
    Hi,

    Sure, here are the contents of my css and container files

    css:

    .cssLightcontainerHolder_transparentBox
    {
        border: solid 1px #8EB4E3;
        background-color: #CCC;
        margin-bottom:10px;
    }

    .cssLightActions_image
    {
        background-color: #8EB4E3;
        border-bottom: solid 1px #8EB4E3;
        padding: 2px 5px;
       
    }
    .cssLightContainer_image
    {
        padding: 6px 5px 0px 5px;
       
    }
       
       
    Container XML:


       
            [ACTIONBUTTON:1]
           
               
                    CommandName
                    AddContent.Action
               

               
                    DisplayIcon
                    True
               

               
                    DisplayLink
                    True
               

           

       

       
            [ACTIONBUTTON:2]
           
               
                    CommandName
                    SyndicateModule.Action
               

               
                    DisplayIcon
                    True
               

               
                    DisplayLink
                    False
               

           

       

       
            [ACTIONBUTTON:3]
           
               
                    CommandName
                    PrintModule.Action
               

               
                    DisplayIcon
                    True
               

               
                    DisplayLink
                    False
               

           

       

       
            [ACTIONBUTTON:4]
           
               
                    CommandName
                    ModuleSettings.Action
               

               
                    DisplayIcon
                    True
               

               
                    DisplayLink
                    False
               

           

       

       
            [ACTIONBUTTON:5]
           
               
                    CommandName
                    ModuleHelp.Action
               

               
                    DisplayIcon
                    True
               

               
                    DisplayLink
                    False
               

           

       

       
            [ACTIONS]
           
               
                    ProviderName
                    DNNMenuNavigationProvider
               

               
                    ExpandDepth
                    1
               

               
                    PopulateNodesFromClient
                    True
               

           

       






    I hope this helps
    Lee Sykes
    DNN Creative Staff
    Nuke Master VI
    Nuke Master VI
    Posts:4945


    --
    07/10/2008 2:03 PM
    Hello,

    You can attach zip files to your forum posts, could you attach the entire container and skin?

    I need to see the actual container html.

    There maybe a float on the image that needs clearing, you may need to add a < br class="clear" / > at the end of your container html?

    Thanks,
    Lee Sykes
    Site Administrator
    Subscribe to the website : DotNetNuke Video Tutorials : The Skinning Toolkit : DotNetNuke Podcasts

    Twitter: www.twitter.com/DNNCreative

    Lee Sykes's Facebook Profile
    Julian
    Nuker
    Nuker
    Posts:16


    --
    07/14/2008 7:22 AM
    Hi,

    Sorry for taking so long to get back, I see your forum's "alert" functionality is similar to mine, in the sence that it only works half the time, LoL

    Here are my complete skin and container zip files


    In the mean time I'll try the < br class="clear" / >  When I read it a little voice in my head went "Doh!"  I'm sure that's the problem, I will let you know if it is.

    Thanks in advance


    Julian
    Nuker
    Nuker
    Posts:16


    --
    07/15/2008 2:02 AM
    Hi,

    Well, i tried entering < br class="clear" / > to the end of my container, but I'm either not doing it right, or that isn't the problem ??  Maybe I'm placing it in the wrong place, but then again, how many places could there be? lol

    Please help,

    Regards

    Julian
    Lee Sykes
    DNN Creative Staff
    Nuke Master VI
    Nuke Master VI
    Posts:4945


    --
    07/15/2008 7:47 AM
    Hello,

    well, I have added the skin and container to a test area and added a text HTML module to the left pane with an image inside the module.

    This does not have the problem with the container  around the image, this leads me to think that it must be some sort of problem with the photo upload module.

    Are there any floats set in this module?  Is there any CSS applied to images in this module?

    I have attached a version with a clear class which you could try, I added it to the container and added the clear class into the skin.css file.
    Lee Sykes
    Site Administrator
    Subscribe to the website : DotNetNuke Video Tutorials : The Skinning Toolkit : DotNetNuke Podcasts

    Twitter: www.twitter.com/DNNCreative

    Lee Sykes's Facebook Profile
    Julian
    Nuker
    Nuker
    Posts:16


    --
    07/16/2008 6:08 AM
    Hi Lee,

    Thanks for all your efforts, it is much appreciated.

    The problem does not occur with the test skin that you supplied, so I just adapted my skin by cutting a pasting snippets of your code, all's working fine now

    I must adimt I'm still a bit stumped in the sence that I fixed the problem, but could not really find the cause in the first place.......I'm propably looking into the back of my eyelids and not spotting the obvious, as such things go lol


    Thanks again!  (I often wonder how much of DNN's success is due to this website???)

    Regards

    Julian
    Lee Sykes
    DNN Creative Staff
    Nuke Master VI
    Nuke Master VI
    Posts:4945


    --
    07/17/2008 11:14 AM
    lol - no problem, glad to help,

    Cheers,
    Lee Sykes
    Site Administrator
    Subscribe to the website : DotNetNuke Video Tutorials : The Skinning Toolkit : DotNetNuke Podcasts

    Twitter: www.twitter.com/DNNCreative

    Lee Sykes's Facebook Profile


    ---