- This topic is empty.
-
AuthorPosts
-
May 18, 2009 at 2:27 am #24872damostkidMember
Hi! I am new to designing websites and watched your converting photoshop into css (great by the way!!). I tweaked the code a little to make a different layout. However, it looks great in firefox and safari but breaks in ie. I am at a lost to what code I am missing. Any help would be much appreciated!! Thanks!
The link is:
and the external code I am using is:
(its from the tutorial but tweaked)Code:/* RESETS & BASIC PAGE SETUP */
* { margin: 0; padding: 0; }
html { overflow-y: scroll; }
body {
background: url(‘images/body-bg.jpg’) top left;; font-style:normal; font-variant:normal; font-weight:normal; font-size:62.5%; font-family:Lucida Grande, sans-serif
}ul { list-style: none inside; }
p { font-size: 1.2em; line-height: 1.2em; margin-bottom: 1.2em; }
p.metadata { background: #fff9a7; padding: 3px;}
a { outline: none; }
a img { border: none; }h1 {
font-family: Georgia, serif;
font-size: 2.4em;
font-weight: normal;
color: #80728a;
}
h1#logo {
width: 654px;
height: 112px;
background: url(‘images/header.jpg’) no-repeat center;
text-indent: -9999px
}/* END RESET */
/* TOOLBOX */
.floatleft { float: left; }
.floatright { float: right; }
.clear { clear: both; }
/* END TOOLBOX *//* STRUCTURE AND STUFF */
#wrapper {
margin: 0 auto;
width: 750px;
background: url(‘images/content-bg.jpg’) repeat-y;}
#main-content {
padding: 80px 110px 80px 100px;
}
#article-area {
width: 400px;
float: left;
display: inline;
}
#sidebar {
width: 92px;
float: right;
display: inline;
}ul#nav {
}
ul#nav li {
display: inline;
}
ul#nav li a {
display: block;
height: 125px;
text-indent: -9999px;
float: left;}
ul#nav li.donate a {
width: 125px;
background: url(‘images/donate-nav.jpg’) no-repeat bottom center;}
ul#nav li.about a {
width: 90px;
background: url(‘images/about-nav.jpg’) no-repeat bottom center;
}
ul#nav li.services a {
width: 129px;
background: url(‘images/services-nav.jpg’) no-repeat bottom center;
}ul#nav li.involved a {
width: 123px;
background: url(‘images/involved-nav.jpg’) no-repeat bottom center;
}ul#nav li.events a {
width: 123px;
background: url(‘images/events-nav.jpg’) no-repeat bottom center;
}ul#nav li.recources a {
width: 123px;
background: url(‘images/resources-nav.jpg’) no-repeat bottom center;
}
ul#nav li a:hover {
background-position: center;
}ul#nav2 {
}
ul#nav2 li {
display: inline;
}
ul#nav2 li a {
display: block;
height: 80px;
text-indent: -9999px;
float: left;}
ul#nav2 li.corner a {
width: 175px;
background: url(‘images/clients-nav.jpg’) no-repeat bottom center;
margin-right: 91px
}
ul#nav2 li.hope a {
width: 175px;
background: url(‘images/hope-nav.jpg’) no-repeat bottom center;
}ul#nav2 li.enews a {
width: 175px;
background: url(‘images/enews-nav.jpg’) no-repeat bottom center;
}ul#nav2 li.supporters a {
width: 175px;
background: url(‘images/supporters-nav.jpg’) no-repeat bottom center;
}ul#nav2 li.boutique a {
width: 175px;
background: url(‘images/boutique-nav.jpg’) no-repeat bottom center;
}ul#nav2 li a:hover {
background-position: center;
}#footer {
min-height: 127px;
background: url(‘images/footer-bg.jpg’) no-repeat;
}/* END STRUCTURE */
May 18, 2009 at 3:55 am #57648AshtonSandersParticipant"damostkid" wrote:…it looks great in firefox and safari but breaks in ie.Welcome to the Internet.
Well, you didn’t say what was wrong with it, so I’ll guess:
White space below the logo:
Get rid of the space between the IMG and UL, so it looks like this:Code:Let me know if that helps
May 18, 2009 at 9:21 pm #57755damostkidMemberHi! Yep, it was that white line on the banner that was messing up. I couldn’t get the images to connect. I tried your suggestion and it didnt work. After doing some research, I found something on image containers and tried that and that seemed to do the trick to connect the images together. Thanks again for your response!
May 19, 2009 at 1:37 am #57762AshtonSandersParticipantSweet. Glad you got it working. Looks good.
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.