PDA

View Full Version : CSS IE trouble



curex
Jul 19th, 2009, 05:22 AM
in FF this snippet of code works awesome

#top {
float: right;
width: 328px;
}

#top h4 {
margin-top: -200px;
}

#bottom {
float: right;
width: 328px;
}

#bottom h4 {
margin-top: 310px;
}

but when i open in ie it goes to ****.... please help. I'm a moderate/beginner, I catch on quick so hit me with what you got.

same goes for this:

#nav {
background: url('images/nav_bar.png') no-repeat;
height: 89px;
overflow: hidden;
}

#nav li {
float: left;
margin-top: 18px;
margin-left: -11px;
}

_Aerospace_Eng_
Jul 19th, 2009, 08:23 AM
Can you post all of your HTML please?

curex
Jul 20th, 2009, 01:56 AM
<html>
<head>
<title>Sleek - Pat Migliaccio</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style rel="text/css">
body {
background-color: #fcfafb;
text-align: center;
font-family: helvetica, arial, sans-serif;
font-size: 100%;
}

a {
text-decoration: none;
color: white;
}

a:hover {
text-decoration: underline;
}

a.selected {
font-weight: bold;
}

li {
list-style: none;
}

#container {
margin: auto;
text-align: left;
width: 1195px
}

#banner {
background: url('images/banner.png') no-repeat;
height: 402px
}

#nav {
background: url('images/nav_bar.png') no-repeat;
height: 89px;
overflow: hidden;
}

#nav li {
float: left;
margin-top: 18px;
margin-left: -11px;
}

#nav li a {
padding: 0 4.75em;
color: white;
}

#nav li a.first {
padding-left: 0;
}

#main {
background: url('images/main_content.png');
height: 927px;
}

#home {
float: left;;
margin-left: 50px;
margin-top: 30px;
margin-right: 452px;
padding-bottom: 2em;
width: 685px;
}

#top {
float: right;
width: 328px;
}

#top h4 {
margin-top: -200px;
}

#bottom {
float: right;
width: 328px;
}

#bottom h4 {
margin-top: 310px;
}

#footer {
text-align: center;
font-style: italic;
}

#footer a {
color: black;
font-weight: bold;
}
</style>
</head>
<body>
<div id="container">
<div id="banner">
&nbsp;
</div><!--end banner-->
<div id="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">Forums</a></li>
<li><a href="#">Portfolio</a></li>
</ul>
</div><!--end nav-->
<div id="main">
<div id="home">
<h2>Welcome!</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</div><!--end home-->
<div id="top">
<h4>Recent Tutorials</h4>
<p>Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div><!--end top-->
<div id="bottom">
<h4>Advertisement</h4>
<p>Google AdSense is a free program that enables
website publishers of all sizes to
display relevant Google ads and earn.</p>
</div><!--end bottom-->
</div><!--end main-->
<div id="footer">
<!-- DO NOT REMOVE!!! -->
<p>Template/Design Copyright 2009 Pat Migliaccio at <a href="http://carbonjelly.com">CarbonJelly.com</a></p>
</div><!--end footer-->
</div><!--end container-->
</body>
</html>

_Aerospace_Eng_
Jul 20th, 2009, 02:22 AM
Add this before you <html> element.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Then tell us if it looks better. Also what version of IE does it "mess" up in?

drhowarddrfine
Jul 20th, 2009, 02:30 AM
If that's the complete markup, you need to change <style type="text/css">. Also, you will never get IE to attempt to perform like other more modern browsers without a proper doctype. Put this on your first line:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

curex
Jul 20th, 2009, 03:45 AM
IE 7, and i made both changes with no success.

_Aerospace_Eng_
Jul 20th, 2009, 07:28 AM
It seems like its a conjunction of negative top margins and the large right margin on #home. Because of the width already set this makes no room for other stuff. Try this for your CSS

* {
margin:0;
padding:0;
}
body {
background-color: #fcfafb;
text-align: center;
font-family: helvetica, arial, sans-serif;
font-size: 100%;
}

a {
text-decoration: none;
color: white;
}

a:hover {
text-decoration: underline;
}

a.selected {
font-weight: bold;
}

li {
list-style: none;
}

#container {
margin: auto;
text-align: left;
width: 1195px
}

#banner {
background: url('images/banner.png') no-repeat;
height: 402px
}

#nav {
background: url('images/nav_bar.png') no-repeat;
height: 89px;
overflow: hidden;
}

#nav li {
float: left;
margin-top: 18px;
margin-left: -11px;
}

#nav li a {
padding: 0 4.75em;
color: white;
}

#nav li a.first {
padding-left: 0;
}

#main {
background: url('images/main_content.png');
height: 927px;
}

#home {
float: left;
margin-left: 50px;
margin-top: 30px;
padding-bottom: 2em;
width:685px;
}

#top {
float:right;
width:328px;
margin-top:30px;
}

#top h4 {

}

#bottom {
float:right;
width:328px;
}

#bottom h4 {
margin-top: 310px;
}

#footer {
text-align: center;
font-style: italic;
clear:both;
}

#footer a {
color: black;
font-weight: bold;
}

curex
Jul 21st, 2009, 01:49 AM
yes! now it is still off but it looks the same in FF and IE so some minor tweaking is needed. tyvm

Final results: any opinions?

_Aerospace_Eng_
Jul 21st, 2009, 07:24 AM
Looks good. What is off about it still?