Solved

block level css property not behaving properly when asp.net object is inside a div container

Posted on 2010-08-25
4
314 Views
Last Modified: 2012-05-10
Hello There,

My question is in regards to using CSS styles like margin-top and margin-bottom to style the skin objects.

In my situation I have a footer with a copyright notice to the far right in the footer area.  

The way I have structured this is to use div tags that float to the left inside a larger div tag container which gives me full flexibility using such css attributes as margin-top since a div tag is a block level elemnt.

My problem is I am able to move the top margin or padding of all my footer content except the copyright info which is generated dynamically via the copyright skin object and populated via admin>sitesettings in dotnetnuke.

What I am guessing is the problem is that the dynamically driven copyright info executed at runtime of the dnn application generates a span tag (an inline object) however this span tag is still encapsulated within a div tag that floats to the left which surrounds it.

I can float this copyright info, style it in regards to color, font-weight, even adjust the right and left padding or margin of the text but for some reason even though I am adjusting the div tag id that encapsulates this skin object I still have no success adjusting the top margin even using a positive integar to bring the words down a little bit.

This is needed because on this same footer my client wants a logo that is larger than the text that proceeds it and the text proceeding it must be flush with the middle of this logo not the top of it so I figured I could use a margin-top or padding-top css property.

This worked great with the rest of the footer including the logo which was a hard coded img tag encapsulated in a div tag but this dnn copyright skin object no matter what I do does not want to allow me to invoke the margin-top property of css.

I don't know if it is do to the fact that there is a runat="server" attribute in this tag and if that causes the top and bottom part of a block elment box model to go bonkers when a runat property is encapsulated within a div tag or if it is something else but if you have any ideas of what could be causing the full spectrum of block element css properties not to work on a block element of html like the div tag in which a skin object with the special runat="server is part of the objects attribute I would greatly appreciate it.

Oh and by the way when asp.net parses this skin object it spits out a span tag but that span tag is still encapsulated with in the block level container which is floated within it's larger container so still seems like the blocked element div would be the element that took precedense over the inline elment span which by the way I even tried to turn this into a block level elment within the context of its class name attribute by creating a span.copyright

{
display:block;

}

and still no luck.

Thanks again in advance,

Bo
0
Comment
Question by:cyborama
  • 2
  • 2
4 Comments
 
LVL 13

Accepted Solution

by:
myderrick earned 500 total points
Comment Utility
Can you take a look at the code that is generated by asp when you run it and create a css code to work on it?

MD
0
 

Author Comment

by:cyborama
Comment Utility
I found the problem but I will give you the credit for your reply.

I added a display type of block to the span tag that was being generated from the asp.net code but neglected to also add a width attribute to it so a marging-top wasn't seeming to function because the default width was the whole length of the div tag instead of a piece of it.

Thanks again,

Bo
0
 
LVL 13

Expert Comment

by:myderrick
Comment Utility
Great you sorted it out. Thanks.

MD
0
 

Author Closing Comment

by:cyborama
Comment Utility
thanks for weighing in to this question
0

Featured Post

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

Suggested Solutions

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
Use Wufoo, an online form creation tool, to make powerful forms. Learn how to selectively show certain fields based on user input using rules to gather relevant information and data from your forms. The rules feature provides you with an opportunity…

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

6 Experts available now in Live!

Get 1:1 Help Now