1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Problem with container alignement

Discussion in 'CSS' started by vonatah, Aug 22, 2007.

0
  1. #1
    Hi all. I've just started learning how to use CSS and am trying to piece together a site for a friend of my sister's. I have tested it in four browsers. It looks fine in Firefox and Netscape but in IE and Opera the container that holds the content is out of alignment. I think this has something to do with the top margin, but I'm not sure how to fix it so that IE will look ok and the other browsers will ignore it. When viewed in IE and Opera, the navigation bar is about 1/2 an inch higher than the container. The other thing I have a question about is, when I view the site in IE and make the browser window smaller, the content container seems to realign below the navigation bar. This doesn't happen in any other browser. Also, would someone please take a look at my code and tell me if everything else looks ok? I've attached screen shots so you can take a look. Thank you in advance for your time. I really appreciate it.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<title>The Polacek Center for Plastic Surgery</title>
	
	<style type="text/css">

/* CSS for page */
	body {
		background-color: #99b7d3;
		font: .8em/1.3em verdana,arial, helvetica, sans-serif;
	}
		
	li img {
    vertical-align: bottom;
    }
	
	#navcontainer  {
	background-color: #99B7D3;
	display:block;
	heigt:  513px;
	}
	
	#flashcontent {
		width: 750px;
		height: 513px;
		margin: 60px;
		margin-left: 180px;
		margin-top: 50px;
		background-image:url(graphics/collage.jpg);
		}

.style3 {font-size: 0.8cm}
	
	
	
	/* CSS for navigation system */
	
	#nav, #nav ul { /* all lists */
		padding: 0;
		margin-left:  50px;
		margin-top:  0px;
		list-style: none;
		float : left;
		width : 130px;
	}
	
	#nav li { /* all list items */
		position : relative;
		float : left;
		line-height : 58px;
		margin-bottom : -1px;
		width: 95px
	}
	
	#nav li ul { /* second-level lists */
		position : absolute;
		left: -999em;
		margin-left : 130px;
		margin-top : -55px;
		}
	
	#nav li a {
		width: 120px;
		w\idth : 120px;
		display : block;
		color : white;
		font-weight : bold;
		font-size: .8em;
		text-decoration : none;
		background-color : #7697b9;
		border : none;
		padding : 0 0.5em;
	}
	
	#nav li a:hover {
		color : white;
		background-color : #98b5ce;
	}
	
	#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
		left: -999em;
	}
	
	#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { /* lists nested under hovered list items */
		left: auto;
	}
	
	
</style>

<script type="text/javascript"><!--//--><![CDATA[//><!--

sfHover = function() {
	var sfEls = document.getElementById("nav").getElementsByTagName("LI");
	for (var i=0; i<sfEls.length; i++) {
		sfEls[i].onmouseover=function() {
			this.className+=" sfhover";
		}
		sfEls[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

//--><!]]></script>

</head>


<body>

	<div id="navcontainer">
		<ul id="nav">

			<li><a href="#">home</a></li>
			<li><a href="#">meet dr. polacek</a></li>
			<li><a href="#">face</a>
				<ul>
					<li><a href="#">face lift</a></li>
					<li><a href="#">eye lift</a></li>
					<li><a href="#">brow lift</a></li>
					<li><a href="#">neck lift</a></li>
					<li><a href="#">laser resurfacing</a></li>
					<li><a href="#">otoplasty</a></li>
			
				</ul>
			</li>

			<li><a href="#">body contouring</a>
				<ul>
					<li><a href="#">abdominoplasty</a></li>
					<li><a href="#">thigh lift</a></li>
					<li><a href="#">arm lift</a></li>
					<li><a href="#">liposuction</a></li>
									
				</ul>
			</li>

			<li><a href="#">breasts</a>
				<ul>
					<li><a href="#">breast implants</a></li>
					<li><a href="#">breast reductions</a></li>
					<li><a href="#">breast lift</a></li>
					<li><a href="#">gynecomastia</a></li>
			
				</ul>
			</li>
	
			<li><a href="#">non-surgical</a>
				<ul>
					<li><a href="#">botox</a></li>
					<li><a href="#">thermage</a></li>
					<li><a href="#">restylane/perlane</a></li>
					<li><a href="#">juvaderm</a></li>
					<li><a href="#">collagen</a></li>
					<li><a href="#">phototherapy</a></li>
			
				</ul>
			</li>
	
			<li><a href="#">skin care</a>
				<ul>
					<li><a href="#">micropeels</a></li>
					<li><a href="#">microdermabrasion</a></li>
					<li><a href="#">skin care products</a></li>
			
				</ul>
			</li>
			<li><a href="#">before and afters</a></li>
			<li><a href="#">contact us</a></li>
		</ul>
	</div>

<div id="flashcontent">
		
</div>
	<script type="text/javascript">
		// <![CDATA[
		
		var so = new SWFObject("polacek.swf", "polacek", "750", "513", "6", "#FFFFFF");
		so.write("flashcontent");
		
		// ]]>
	</script>

</body>
</html>
    Code (markup):

     

    Attached Files:

    vonatah, Aug 22, 2007 IP
  2. VimF

    VimF Well-Known Member

    Messages:
    307
    Likes Received:
    27
    Best Answers:
    0
    Trophy Points:
    118
    #2 
    
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>The Polacek Center for Plastic Surgery</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
* {
	margin: 0;
	padding: 0;
}
body {
	background-color: #99b7d3;
	font: .8em/1.3em verdana, arial, helvetica, sans-serif;
}
li img {
	vertical-align: bottom;
}
#wrap {
	width: 950px;
}
#navcontainer  {
	float: left;
	background-color: #99B7D3;
	height: 513px;
	padding-left: 50px;
}
#flashcontent {
	float: left;
	width: 750px;
	height: 513px;
	line-height: 250px;
	text-align: center;
	margin: 10px;
	background: #99b7d3 url(graphics/collage.jpg) center;
}
.style3 {
	font-size: 0.8cm;
}
#nav,
#nav ul { /* all lists */
	padding: 50px 0 0;
	list-style: none;
	float: left;
	width: 130px;
}
#nav li { /* all list items */
	position: relative;
	float: left;
	line-height: 58px;
	margin-bottom: -1px;
	width: 95px;
}
#nav li ul { /* second-level lists */
	position : absolute;
	display: none;
	margin: -55px 0 0 130px;
}
#nav li a {
	width: 120px;
	w\idth: 120px;
	display: block;
	color: #FFF;
	font-weight: bold;
	font-size: .8em;
	text-decoration: none;
	background-color: #7697b9;
	border: none;
	padding: 0 0.5em;
}
#nav li a:hover {
	color: white;
	background-color: #98b5ce;
}

#nav li:hover ul ul,
#nav li:hover ul ul ul,
#nav li.sfhover ul ul,
#nav li.sfhover ul ul ul {
	display: none;
}

#nav li:hover ul,
#nav li li:hover ul,
#nav li li li:hover ul,
#nav li.sfhover ul,
#nav li li.sfhover ul,
#nav li li li.sfhover ul { /* lists nested under hovered list items */
	display: block;
}
</style>

<script type="text/javascript">
<!--
sfHover = function() {
	var sfEls = document.getElementById("nav").getElementsByTagName("LI");
	for (var i=0; i<sfEls.length; i++) {
		sfEls[i].onmouseover=function() {
			this.className+=" sfhover";
		}
		sfEls[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

//-->
</script>
</head>
<body>
<div id="wrap">
	<div id="navcontainer">
		<ul id="nav">

			<li><a href="#">home</a></li>
			<li><a href="#">meet dr. polacek</a></li>
			<li><a href="#">face</a>
				<ul>
					<li><a href="#">face lift</a></li>
					<li><a href="#">eye lift</a></li>
					<li><a href="#">brow lift</a></li>
					<li><a href="#">neck lift</a></li>
					<li><a href="#">laser resurfacing</a></li>
					<li><a href="#">otoplasty</a></li>
			
				</ul>
			</li>

			<li><a href="#">body contouring</a>
				<ul>
					<li><a href="#">abdominoplasty</a></li>
					<li><a href="#">thigh lift</a></li>
					<li><a href="#">arm lift</a></li>
					<li><a href="#">liposuction</a></li>
			
				</ul>
			</li>

			<li><a href="#">breasts</a>
				<ul>
					<li><a href="#">breast implants</a></li>
					<li><a href="#">breast reductions</a></li>
					<li><a href="#">breast lift</a></li>
					<li><a href="#">gynecomastia</a></li>
			
				</ul>
			</li>
	
			<li><a href="#">non-surgical</a>
				<ul>
					<li><a href="#">botox</a></li>
					<li><a href="#">thermage</a></li>
					<li><a href="#">restylane/perlane</a></li>
					<li><a href="#">juvaderm</a></li>
					<li><a href="#">collagen</a></li>
					<li><a href="#">phototherapy</a></li>
			
				</ul>
			</li>
	
			<li><a href="#">skin care</a>
				<ul>
					<li><a href="#">micropeels</a></li>
					<li><a href="#">microdermabrasion</a></li>
					<li><a href="#">skin care products</a></li>
			
				</ul>
			</li>
			<li><a href="#">before and afters</a></li>
			<li><a href="#">contact us</a></li>
		</ul>
	</div>

	<div id="flashcontent">
		Hello, you either have JavaScript turned off or an old version of Macromedia's Flash Player.
	</div>
</div>
<script type="text/javascript"><!--		
var so = new SWFObject("polacek.swf", "polacek", "750", "513", "6", "#FFFFFF");
so.write("flashcontent");
--></script>
</body>
</html>
    Code (markup):
     
    VimF, Aug 22, 2007 IP
  3. vonatah

    vonatah Peon

    Messages:
    4
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Thank you so much! I have made the changes and it looks great! I see now that it was the padding that I needed to change, not the margins. Is that right? And I'm not sure, but was it the "wrap" that made ie not bump my container down? You've really helped a lot. I'll have to study the code more closely to truly understand the changes. Thanks again!
     
    vonatah, Aug 22, 2007 IP