CSS issues with asp.net forms

Question

I'm currently updating my website which was done with nearly all emphasis on the back-end with .NET. I have login control, with asp roles /role group controls. I am in the process of converting my old HTML/CSS with current standards. I have completed my html/ css for my site. When I run it as a html document from notepad++. It shows up just the way it should. When I converted it over to asp.net and .aspx pages its a jumbled mess. The footer is showing up in the content section with my wrappers and containers. The content is pushed down to where the footer should start. I'll attach some images so its easier to follow. I'm thinking its being cause by the form tag, because the css was fine before.

http://i61.tinypic.com/2mx2yax.jpg http://i57.tinypic.com/rjib76.jpg

/*  CSS Document */

/* Elements */
html, body {
	height: 100%;
}

body {
	margin: 0px;
	padding: 0px;
	font-family: 'Chivo', sans-serif;
	font-size: 12pt;
	font-weight: 300;
}

/*#frmMain
{
 width:100%;
 margin:0;
 padding:0;   
}*/

h1, h2, h3 {
	margin: 0;
	padding: 0;
}

p, ol, ul {
	margin-top: 0px;
}

p {
	line-height: 190%;
}

strong {
}


a:hover {
	text-decoration: none;
}


/* Classes */

.container {
	width: 1200px;
	margin: 0px auto;
}

.clearfix {
	clear: both;
}
.img{

}


/* ID's by type */



/* List Styles */

	
	


/** Wrapper */

#wrapper {
	background: #FFFFFF url(images/bg01.png) repeat;
}


/* Header */

#header-wrapper
{
	overflow: hidden;
	background-size: 100%;
	padding: 6em 0em 2em 0em;
	background: #333333;
}



	#header 
	{
		position: relative;
		overflow: hidden;
		text-align: center;
	}

/*Title */

	#title 
	{
		width: 500px;
		height: 100px;
		margin: 0 auto;
		padding: 2em 0em;
		text-transform: uppercase;
	}
	
	#title h1
	{
		letter-spacing: 0.10em;
		font-size: 3em;
	}
	
	#title p 
	{
		letter-spacing: 0.10em;
		color: #FFF;
	}
	
	#title a 
	{
		text-decoration: none;
		color: #FFF;
	}


/* Menu */

#menu-wrapper
{
	background: some color
}

#menu {
	overflow: hidden;
	height: 100px;
}

#menu ul {
	margin: 0;
	padding: 0px 0px 0px 0px;
	list-style: none;
	line-height: normal;
	text-align: center;
}

#menu li {
	display: inline-block;
}

#menu a {
	display: block;
	letter-spacing: 1px;
	padding: 0px 40px;
	text-decoration: none;
	text-align: center;
	text-transform: uppercase;
	font-size: 0.80em;
	line-height: 100px;
	border: none;
	color: #FFF;
}
/* replacing with cs code to highlight tab selection*/
#menu a:hover, #menu .current_page_item a {
	text-decoration: none;
}
/* replacing with cs code to highlight tab selection*/
#menu .current_page_item a {
	background: #C0005F;
}

/* page */

#page
{
	position: relative;
	overflow: hidden;
	padding: 6em 0em 5em 0em;
}

/** content */

#content
{
	float: right;
	width: 790px;
}

/* Side bar */

#sidebar
	{
		float: left;
		width: 345px;
	}
	
#sidebar .title h2
	{
		font-size: 1.6em;
	}
	
#sidebar .box1
	{
		margin-bottom: 3em;
	}

	/* Footer */
#footer
	{
	
	}

/*-Portfolio-*/
#portfolio-wrapper{


}

#column1,
#column2,
#column3,
#column4
	{
		width: 252px;
	}
	
#column1,
#column2
	{
		float: left;
		margin-right: 24px;
	}
	
#column3
	{
		float: left;
	}

#column4
	{
		float: right;
	}

You should post your ASPX content too - it would make it a lot easier to figure out. — Tim
– Tim, Commented Mar 23, 2015 at 17:04
I attached some images. I hope that can help. I am trying to figure out how to get my masterpage& default.aspx page configured correctly with the css, before I add any content to the aspx pages. — Richard Bretton
– Richard Bretton, Commented Mar 23, 2015 at 17:09
OK, I'd try taking the quotes off the Chivo font definition and verify any image paths are valid. I still think you need to post some markup, because invalid CSS paths or broken tags could cause problems too. — Tim
– Tim, Commented Mar 23, 2015 at 17:15
ok, ill go through and verify some information. Once I have completed a content page, I will update on progress. thanks for your help. — Richard Bretton
– Richard Bretton, Commented Mar 23, 2015 at 18:31
I went through added some content and added some placeholder images, it still looks the same as whats attached in the images. I think the best idea would be to just start my css from the beginning, and slowly rebuild it, to find the issue(s). Thanks for your help. — Richard Bretton
– Richard Bretton, Commented Mar 25, 2015 at 21:16

Tim · Accepted Answer · 2015-03-26 12:04:38Z

1

I've occasionally seen weird things when I try using percentages for height and width, and floats can be a pain in the neck.

I wouldn't throw the whole stylesheet out - comment out all but one section, get that to work, and then move on. That way you're not back to square one.

I'd also (for yuks) try position:absolute instead of position:relative for the misbehaving content.

answered Mar 26, 2015 at 12:04

Tim

4,10910 gold badges39 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

CSS issues with asp.net forms

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related