- This topic is empty.
-
AuthorPosts
-
May 1, 2009 at 5:59 am #24748TamMember
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: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;
}May 1, 2009 at 9:38 am #57003friendofpugsMemberTo 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!
May 1, 2009 at 11:41 am #57005TamMemberah ha! That fixed it :)
Thanks for the help!May 1, 2009 at 3:50 pm #57019friendofpugsMemberYer welcome. Now you can remove that "Site best viewed in FF" silliness. Have a nice weekend. :mrgreen:
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.