Forums

Tam

Hello all,

I've been making a portfolio site over the last couple days, pretty much following through the Photoshop to CSS videos.
The site is here.

The site is working great in FF, but IE is not happy.
1) The page wrap to centre the content doesnt work
2)There is some stretching going on with the background of the nav buttons.

I have done some searching in regard to the page wrap and it seems to be the problem is Quirks mode. I must confess, i have no idea what that is. However, i tried changing my doctype to exactly what Chris had in his html file in the videos but that just caused the site to format all over the page.
As for the buttons, i have no idea what is causing that problem. I have looked over the CSS but cant see where the problem is.

I'm not sure if posting code up will help as i'm not certain where the problem is, but i will include my nav code.
HTML -


			<div id=\"left-content\">			
				<ul class=\"sidenav\">
				<li>
				<a href=\"me.htm\">Me
				<span>Information about Me. </span>
				</a>
				</li>
				<li>
				<a href=\"index.htm\">Games
				<span>Game prototypes. </span>
				</a>
				</li>
				<li>
				<a href=\"3d.htm\">3D
				<span>3D artwork. </span>
				</a>
				</li>
				<li>
				<a href=\"motion.htm\">Motion
				<span>Film and Animation work. </span>
				</a>
				</li>
				<li>
				<a href=\"web.htm\">Web
				<span>Web Design. </span>
				</a>
				</li>
				</ul> <!-- end sidenav -->
			</div> <!-- end left-content -->

CSS -


ul.sidenav {
	font-size: 1.2em;
	float: left;
	width: 180px;
	margin: 0;
	padding: 0;
	list-style: none;
	background: #a6517a;
	border-bottom: 1px solid #9b406c;
	border-top: 1px solid #b06b8c;
}
ul.sidenav li a{
	display: block;
	color: #000000;
	text-decoration: none;
	width: 155px;
	padding: 10px 0 10px 25px;
	background: url(sidenav_a.gif) no-repeat 5px 7px;
	border-bottom: 1px solid #9b406c;
	border-top: 1px solid #b06b8c;

}
ul.sidenav li a:hover {
	background: #cbd9e8 no-repeat 5px 7px;
	border-top: 1px solid #b06b8c;
}
ul.sidenav li span{	display: none; }
ul.sidenav li a:hover span {
	display: block;
	font-size: 0.8em;
	padding: 10px 0;
}

div#page-wrap{
	width: 780;
	margin: 0 auto;
}


ul#nav {
	height: 252; width: 780;
	background: url(images/header-bg.jpg) no-repeat;
	list-style: none;
	text-indent: -9999px;
	}
	ul#nav li a {
		display: block;
		width: 780px;
		height: 210;
		float: left;
		margin-top: 42px;
		text-decoration: none;
		background: none;
		}
		
	div#main-content{
		padding-bottom: 30px;
		background: url(images/content-bg.png) repeat-y;
		}
		div#main-content img{
		border: 1;
		border-color: #a8b9cc;
		}
		div#main-content div#left-content{
			float: left;
			width: 180;
		}
		div#main-content div#left-content ul#sidenav{
			float: left;
			width: 180;
		}

friendofpugs

To center stuff in IE use this ol' hack (add it to your existing CSS):

body {
text-align: center;
}

and

div#page-wrap {
text-align: left;
}

Make sure you give proper measurements, e.g., (210 px). Don't let the browser guess. :)

Also, use a full DTD:

<!DOCTYPE HTML PUBliC \"-//W3C//DTD HTML 4.01 Transitional//EN\"
\"http://www.w3.org/TR/html4/loose.dtd\">
<html lang=\"en\">

As far as that wonkiness in IE, float the li, not the a. See what that does. Good luck!

Tam

ah ha! That fixed it :)
Thanks for the help!

friendofpugs

Yer welcome. Now you can remove that "Site best viewed in FF" silliness. Have a nice weekend. :mrgreen:

treehouse : what would you like to learn today?

Forums

IE and Quirks