[CODE] Need Help ASAP first time coding

JK666 · 07-23-2012, 01:58 AM

Hi im coding my first website for course im doing its working perfectly fine in IE but in firefox it stacks the columns and wont use the background colors specified if anyone could take a look at the code for my i will be forever greatfull my assignment is due in a few days

/*CODE*/

/*Main Page*/

<html>

<head>
<title>Home</title>
<link rel= Stylesheet TYPE= "text/css" HREF= "style2.css">

</head>

<body;>

<div id='wrapper'>

<div id='header'>
<h1>Your company name</h1>
</div>

<div id='nav'>

<a href='./'><a href='./Index.html'>Home</a></a>
<a href='.#'><a href='./Company.html'>Company</a></a>
<a href='.#'>Services</a>
<a href='.#'>Products</a>
<a href='.#'>Clients</a>
<a href='.#'>Downloads</a>
<a href='.#'>Site Map</a>
<a href='.#'>Contact Us</a>

</div>

<div id='content'>

<div id='left'>
<h2>Company News</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet justo eget nibh volutpat volutpat eu eget sapien. Phasellus neque diam, interdum in auctor ac, egestas a purus. Vivamus lobortis, est nec interdum hendrerit, nibh odio.</p>
<p> Phasellus ac leo eget nisi tempor interdum. Integer justo orci, venenatis ac cursus ut, molestie id lacus. Nullam erat nisl.</p>

</div>

<div id='right'>
<img src="images/main.png" alt="main picture" style="width:570px; height:140px;"/>
<h3>Welcome to Company Website!</h3>
<p>In lacinia, erat at vulputate dapibus, nibh lectus tempor leo, vel rutrum erat dui ut nunc. Donec malesuada, est sit amet adipiscing cursus, metus dolor ornare elit, aliquam porttitor risus eros sit amet ligula. Aenean eros ipsum, eleifend ultricies tincidunt eget, dapibus nec ligula. Maecenas purus augue, malesuada et tincidunt posuere, volutpat sit amet est. Suspendisse diam est, cursus eget vestibulum a, aliquet a libero. Phasellus a sagittis odio. Fusce vel lectus eget nibh faucibus tristique ut vitae elit. Mauris tortor erat, adipiscing quis laoreet vitae, mattis at tellus. Morbi fringilla viverra facilisis. Suspendisse velit tortor, consequat quis aliquet et, commodo fermentum diam. Praesent imperdiet, orci id mattis sodales, metus diam porta velit, at vestibulum arcu risus sed nibh. Etiam et lorem sem.</p>
<p>Nullam dolor quam, dictum sed mollis eget, ornare eu nulla. Maecenas vitae nisl sed nulla consectetur dignissim. Vivamus elementum eros eu purus venenatis id iaculis magna ornare. Etiam vel libero risus, id eleifend lacus. Fusce faucibus laoreet eros in feugiat. Fusce vitae felis sem, tempus bibendum purus. Aenean in erat nisi. Suspendisse odio dolor, aliquam eget mattis vitae, dapibus eu ante. Sed metus arcu, pulvinar ac euismod eu, hendrerit quis dolor. Vestibulum congue, augue ac pretium sollicitudin, augue massa sagittis metus, a condimentum dolor nulla non lorem. Aenean condimentum, sapien vel rutrum accumsan, justo quam sodales eros, </p>
</div>

<div class='clear'></div>

</div>

<div id='footer'><a href="mailto:havocis@live.com.au">havocis@live.com.au</a></div>

</div>

</body>

</html>

/*CSS CODE*/

*{
font-family: Verdana, Arial, Helvetica, Sans-serif;

}

body{
background-color: #999999;
width: 780px;
margin: 5px;
}

#wrapper{
width: 780px;
background-color: none;
height: 850px;
margin-left: auto;
margin-right:auto;
}
#wrapper #header{
height: 60px;
width: 780px;
padding-left: 10px;
padding-top: 12px;
background-image: url(./images/header.png);
background-repeat: no-repeat;
}
#wrapper #nav{
text-align: center;
list-style: none;
height: 15px;
width: 780px;
font-size: 10px;
background-color: #FFCC66;

}
#wrapper #content{
text-align: left;
}
#wrapper #footer {
text-align: center;
height: 50px;
width: 780px;
padding-top: 10px;
background-image: url(./images/header.png);
background-repeat: no-repeat;
}

/*FONTS*/

H1 {font: bold 26pt Verdana, Arial, Helvetica, Sans-serif; color: #AEC3E5}
H2 {font: bold 9pt Verdana, Arial, Helvetica, Sans-serif; color: black}
H3 {font: bold 18pt Verdana, Arial, Helvetica, Sans-serif; color: #5678BB}
H4 {font: bold 16pt Verdana, Arial, Helvetica, Sans-serif; color: #333333}

P {font: 11pt Verdana, Arial, Helvetica, Sans-serif; color: #333333}

/*COLUMS*/

#wrapper#content#left{
background-color: #CCCCCC;
width: 190px;
height: 650px;
float: left;
padding: 10px;
}

#wrapper#content#right{
background-color: white;
width: 590px;
height: 650px;
float: right;
padding: 10px;
}

.clear{
clear: both;
}

/*NAV*/

#wrapper #nav a{
padding: 3px;
}

a:link{color:#333333;text-decoration:underline;}
a:visited{color:#333333;text-decoration:underline;}
a:hover{color:#333333;text-decoration:none;}
a:active{color:#0000CC;text-decoration:underline;}

SB65 · 07-23-2012, 09:48 AM

You need some spaces:

Code:

#wrapper #content #left{
background-color: #CCCCCC;
width: 190px;
height: 650px;
float: left;
padding: 10px;
}

and similarly for#wrapper #content #right. You could just use #left and #right as your selectors however.

You'll find this still doesn't quite work, as #wrapper is 780px wide, #left is 190px wide plus 10px padding, total 210px and #right is 590px wide plus 10px padding, total 610px, giving a total width of 210+610 = 820px - so there is insufficient room for both columns. Adjust the widths and all is fine.

Three more things : you have a semi-colon in your <body> tag; you have some nested <a> tags in #nav; make sure you use a doctype at the start of your document.

JK666 · 07-23-2012, 10:33 AM

Thanks for reply i fixed everything you sugested changing the right column width to 550px fixed it in FF but now there is a 40px gap when run in IE is there some padding somwhere i should remove

SB65 · 07-23-2012, 01:37 PM

It's OK in IE7/8/9 for me.

lmorales · 07-23-2012, 04:17 PM

You dont need the ";" in body, take that out and it should fix the color problem

JK666 · 07-23-2012, 11:29 PM

there is still a gap in IE when width is set to 550 here is some screen shots and updated code

/*CODE*/

<html>

<head>
<title>Home</title>
<link rel= Stylesheet TYPE= "text/css" HREF= "style2.css">

</head>

<body>

<div id='wrapper'>

<div id='header'>
<h1>Your company name</h1>
</div>

<div id='nav'>

<a href='./'><a href='./Index.html'>Home</a></a>
<a href='.#'><a href='./Company.html'>Company</a></a>
<a href='.#'>Services</a>
<a href='.#'>Products</a>
<a href='.#'>Clients</a>
<a href='.#'>Downloads</a>
<a href='.#'>Site Map</a>
<a href='.#'>Contact Us</a>

</div>

<div id='content'>

<div id='left'>
<h2>Company News</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet justo eget nibh volutpat volutpat eu eget sapien. Phasellus neque diam, interdum in auctor ac, egestas a purus. Vivamus lobortis, est nec interdum hendrerit, nibh odio.</p>
<p> Phasellus ac leo eget nisi tempor interdum. Integer justo orci, venenatis ac cursus ut, molestie id lacus. Nullam erat nisl.</p>

</div>

<div id='right'>
<img src="images/main.png" alt="main picture" style="width:550px; height:140px;"/>
<h3>Welcome to Company Website!</h3>
<p>In lacinia, erat at vulputate dapibus, nibh lectus tempor leo, vel rutrum erat dui ut nunc. Donec malesuada, est sit amet adipiscing cursus, metus dolor ornare elit, aliquam porttitor risus eros sit amet ligula. Aenean eros ipsum, eleifend ultricies tincidunt eget, dapibus nec ligula. Maecenas purus augue, malesuada et tincidunt posuere, volutpat sit amet est. Suspendisse diam est, cursus eget vestibulum a, aliquet a libero. Phasellus a sagittis odio. Fusce vel lectus eget nibh faucibus tristique ut vitae elit. Mauris tortor erat, adipiscing quis laoreet vitae, mattis at tellus. Morbi fringilla viverra facilisis. Suspendisse velit tortor, consequat quis aliquet et, commodo fermentum diam. Praesent imperdiet, orci id mattis sodales, metus diam porta velit, at vestibulum arcu risus sed nibh. Etiam et lorem sem.</p>
<p>Nullam dolor quam, dictum sed mollis eget, ornare eu nulla. Maecenas vitae nisl sed nulla consectetur dignissim. Vivamus elementum eros eu purus venenatis id iaculis magna ornare. Etiam vel libero risus, id eleifend lacus. Fusce faucibus laoreet eros in feugiat. Fusce vitae felis sem, tempus bibendum purus. Aenean in erat nisi. Suspendisse odio dolor, aliquam eget mattis vitae, dapibus eu ante. Sed metus arcu, pulvinar ac euismod eu, hendrerit quis dolor. Vestibulum congue, augue ac pretium sollicitudin, augue massa sagittis metus, a condimentum dolor nulla non lorem. Aenean condimentum, sapien vel rutrum accumsan, justo quam sodales eros, </p>
</div>

<div class='clear'></div>

</div>

<div id='footer'><a href="mailto:havocis@live.com.au">havocis@live.com.au</a></div>

</div>

</body>

</html>

/*...................CSS Style Sheet*........................../

*{
font-family: Verdana, Arial, Helvetica, Sans-serif;

}

body{
background-color: #999999;
width: 780px;
}

#wrapper{
width: 780px;
background-color: none;
height: 850px;
margin-left: auto;
margin-right:auto;
}

#wrapper #header{
height: 60px;
width: 780px;
padding-left: 10px;
padding-top: 12px;
background-image: url(./images/header.png);
background-repeat: no-repeat;
}

#wrapper #nav{
text-align: center;
list-style: none;
height: 15px;
width: 780px;
font-size: 10px;
background-color: #FFCC66;
}

#wrapper #content{
text-align: left;
}

#wrapper #footer {
text-align: center;
height: 50px;
width: 780px;
padding-top: 10px;
background-image: url(./images/header.png);
background-repeat: no-repeat;
}

/*FONTS*/

H1 {font: bold 26pt Verdana, Arial, Helvetica, Sans-serif; color: #AEC3E5}
H2 {font: bold 9pt Verdana, Arial, Helvetica, Sans-serif; color: black}
H3 {font: bold 18pt Verdana, Arial, Helvetica, Sans-serif; color: #5678BB}
H4 {font: bold 16pt Verdana, Arial, Helvetica, Sans-serif; color: #333333}

P {font: 11pt Verdana, Arial, Helvetica, Sans-serif; color: #333333}

/*COLUMS*/

#wrapper #content #left{
background-color: #CCCCCC;
width: 190px;
height: 700px;
float: left;
padding: 10px;
}

#wrapper #content #right{
background-color: white;
width: 550px;
height: 700px;
float: right;
padding: 10px;
}

.clear{
clear: both;
}

/*NAV*/

#wrapper #nav a{
padding: 3px;
}

a:link{color:#333333;text-decoration:underline;}
a:visited{color:#333333;text-decoration:underline;}
a:hover{color:#333333;text-decoration:none;}
a:active{color:#0000CC;text-decoration:underline;}

SB65 · 07-24-2012, 07:45 AM

It's because you don't have a doctype in your document, as my previous post. The absence of a doctype will cause IE to render the document in 'quirks mode' - you can see this from the IE developer tools (F12 in IE8/9) which shows the Document Mode.

JK666 · 07-25-2012, 01:12 AM

Thanks for everyones help im never doing another website just in code ever again