IE and Quirks

[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 –

Code:

• Me
  Information about Me.
  
• Games
  Game prototypes.
  
• 3D
  3D artwork.
  
• Motion
  Film and Animation work.
  
• Web
  Web Design.
  

CSS –

Code:

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):

Code:

body {
text-align: center;
}

and

Code:

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:

Code:

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:

[Author]

Posts