No replies
Mattoman
Mattoman's picture
Offline
newbie
Last seen: 12 years 42 weeks ago
Joined: 2009-04-26
Posts: 9
Points: 0

SOLVED

--
--

Hey guys,

Ive began coding a website but there is a slight problem with IE

The navigation and the welcome and text are pushing right into the right side of the page

so they are out of the wrapper

see image as in IE http://img40.imageshack.us/img40/184/16135005.jpg
the black lines show my wrapper or container and the welcome should be touching the left line and the contact should be about 50px from the right line

see image as in FFhttp://img32.imageshack.us/img32/3754/goodl.jpg
everything is working

see code below

Html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="stylesheet.css" type="text/css" media="all" />
<title>Lime Creations</title>
</head>
 
<body id="home">
<div id="header">
	<div id="headtop"></div>
    <div class="wrapper">
    	<div id="logo">
        	<a class="img" href="/">
            	<img alt="Lime Creations" title="Lime Creations, Web. Graphic. Code" src="logo.jpg"/>
            </a>
        </div>
    </div>
</div>
<div id="nav">
	<div class="wrapper">
    	<ul>
        	<li><a id="hometab" href="index.html">Home</a></li>
        	<li><a id="aboutab" href="about.html">About</a></li>
            <li><a id="portab" href="port.html">Portfolio</a></li>
            <li><a id="contab" href="cont.html">Contact</a></li>
        </ul>
    </div>
</div>
<div id="mid">
	<div class="wrapper">
		<div id="welcome" class="welcome">
   	  		<p>This is the online portfolio for.
			   I have been designing for the last 5 years and 
			   pride myself on creating perfect, simple and 
			   effective designs.
      		</p>
		</div>
    	   <div id="button"><a href="/"><img src="quote.gif" /></a>
           </div>
    </div>
</div>
<div id="content"></div>
</body>
 
</html>
 
 
And the Css

/* Hello, from Matt */
 
body {
	background-color:#6dbd45;
	color:#000;
	font-family:"Helvetica",Verdana,Arial,sans-serif;
	margin:0;
	padding:0;
	text-align:center;
}
 
a.img {
	border: 0;
}
 
img {
	border:0 none;
	margin:0;
	padding:0;
}
 
.wrapper {
	background-color:transparent;
	margin:0 auto;
	padding:0;
	text-align:center;
	width:825px;
}
 
#header {
	background:#FFFFFF repeat scroll right bottom;
	height:120px;
	margin:0;
	padding:0;
}
 
#headtop {
	background-color:#6dbd45;
	height:10px;
	width:100%;
}
 
#logo {
	border-style:none;
	display:block;
	float:left;
	height:75px;
	width:231px;
	margin:24px 0 0;
	padding:0;
 
}
 
#nav {
	background:url("nav1.jpg") repeat-x scroll right bottom;
	width:100%
	margin:0;
	height:49px;
 
}
 
#nav ul {
	float:left;
	height:49px;
	margin:0 0 0 490px;
	padding:0;
}
 
#nav ul li {
	color:#000000;
	display:block;
	float:left;
	margin:0;
	padding:0;
}
 
#nav ul li a {
	color:#000;
	font-size:14px;
	height:50px;
	line-height:50px;
	margin:0;
	padding:5px 15px 5px;
	text-decoration:none;
}
 
#nav ul li a:hover{
	color:#fff;
}
 
body#home a#hometab, body#about a#aboutab {
	background: url("clicked.gif") no-repeat;
	color:#6dbd45;
}
 
body#port a#portab, body#cont a#contab{
	background: url("clicked1.gif") no-repeat;
	color:#6dbd45;
}
 
#mid {
	background:url("mid.jpg") repeat-x scroll right bottom;
	height:232px;
	margin:0;;
	width:100%;
}
 
#welcome {
	background:url("welcome.jpg") no-repeat;
	height:27px;
	width:294px;
	margin-top:29px;
	position: absolute;
}
 
.welcome p {
	padding:56px 0 0 2px;
	margin:0;
	text-align:left;
	font-size:15px;
}
 
#button {
	background-color:transparent;
	position:absolute;
	margin-top:174px;
}
 
#content {
	background:url("cont.jpg") repeat-x scroll right bottom;
	height:593px;
	margin:0;;
	width:100%;
 
}

Thanks heaps