Hi everybody,
i am creating a website for myself, the problem i’m having is trying to keep the look consistent with other browsers i.e essentially ensure that my boxes are the same on IE. When i adjust the code the two boxes look fine on IE which is how i want them, but on FF, they are not positioned how i want them to be.
If adjust the ‘top’ and ‘left’ and ‘right’ attributes for FF, it will affect the look on IE. What exactly must i do to ensure that my 2 boxes look the same on FF to make sure that there is a visual consistency?
The code is very simple.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>
<title>Home Page V1</title>
<link rel="stylesheet" type="text/css" href="homepage_V1.css" />
</head>
<body>
<div class="container">
<div class="header" align="center">
<h1> WELCOME TO THE HOME PAGE </h1>
</div>
<div class="nav">
<ul>
<li><a href="#Home"> Home </a></li>
<li><a href="#Contact"> Contact </a></li>
<li><a href="#News"> News </a></li>
<li><a href="#About"> About </a></li>
</ul>
</div>
<div class="content">
<div class="tpleft"> <h1 align="left">TOP LEFT </h1></div>
<div class="tpright"><h1 align="right"> TOP RIGHT </h1></div>
<!-- <div class="btleftimg"> <img src="gal_car_stars1.jpg" width="557" height="259" /></div>-->
</div>
</body>
</html>
/* homepage_V1.css is used to help build my homepage*/
body
{
margin-top: 2em;
margin-left: 2em;
margin-bottom: 1em;
margin-right: 1em;
}
div.container
{
width: 80em;
border: solid #9400D3 0.1em;
height: 40em;
padding-bottom: 1em;
}
div.header
{
padding: 0.5em;
background-color: #66CDAA;
height: 5.2em;
}
div.nav
{
border: 2px solid red;
width: 10em;
height: 28.3em;
float:left;
}
div.content
{
border: solid #FF8C00 2px;
padding-bottom: 0;
margin-left: 0em; /** use this to separate nav and content **/
height: 28.4em;
}
div.tpleft
{
position: relative;
padding: 0;
border: solid #800000 2px;
margin-left: 0em;
background-color: blue;
width: 557px;
height: 228px;
}
div.tpright
{
position: relative;
padding: 0;
border: solid #800000 2px;
margin-right: 4em;
margin-top: 0em;
top: -14.5em;
right: -34.5em;
width: 557px;
height: 228px;
background-color: #737CA1;
}
Please help, thanks
Your code does not validate because of a missing container </div>.
You site is optimised for IE so FireFox has to take a guess at what you are trying to achieve.
Learn how to use
http://validator.w3.org/ and also how to vaildate your CSS files.
I would also try to be consistent with your widths, margins, etc and to use either em or px but not both.
.
hi thanks for the assit.
I managed to validate my html document, so errors there, but when validating my css file i had no errors, should i be expecting errors? I removed my 2 boxes for the time being, and have been changing my css file to only include em. I’m focusing on the div.content making sure that it looks exactly on both FF and IE. I’ve managed to make it how i want on IE but on FF there is a 167px width gap between the content div and my container div.
Obviously, it isn’t right, how do make it look consistent. Is the case of adjusting the values or what??
updated code:
/* homepage_V1.css is used to help build my homepage*/
body
{
margin-top: 2em;
margin-left: 2em;
margin-bottom: 1em;
margin-right: 1em;
}
div.container
{
width: 80em;
border: solid #9400D3 0.1em;
height: 40em;
padding-bottom: 1em;
}
div.header
{
padding: 0.5em;
background-color: #66CDAA;
height: 5.2em;
}
div.nav
{
border: 0.1em solid red;
width: 10em;
height: 28.3em;
float:left;
}
div.content
{
border: solid #FF8C00 0.1em;
padding-bottom: 0;
margin-left: 0em; /** use this to separate nav and content **/
height: 28.4em;
width: 69.5em;
}
html code, not much change
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Home Page V1</title>
<link rel="stylesheet" type="text/css" href="homepage_V1.css" />
</head>
<body>
<div class="container">
<div class="header" align="center">
<h1> WELCOME TO THE HOME PAGE </h1>
</div>
<div class="nav">
<ul>
<li><a href="#Home"> Home </a></li>
<li><a href="#Contact"> Contact </a></li>
<li><a href="#News"> News </a></li>
<li><a href="#About"> About </a></li>
</ul>
</div>
<div class="content">
<!-- <div class="tpleft"> <h1 align="left">TOP LEFT </h1></div>
<div class="tpright"><h1 align="right"> TOP RIGHT </h1></div>
-->
<!-- <div class="btleftimg"> <img src="gal_car_stars1.jpg" width="557" height="259" /></div>-->
</div>
</div>
</body>
</html>
Hi nvidia123,
I am not sure of your exact requirements but think that as far as your basic layout is concerned then it has been covered numerous times by some very experienced coders.
Try a Google search for “CSS two column layout” and you will find numerous examples that have been tried and tested in all the popular browsers.
If your layout does not do exactly what you want it to do then I would endeavour to find the problem yourself. You will learn a lot about how CSS works.
Meanwhile here is my attempt at what I think you are trying to achieve:
http://johns-jokes.com/downloads/sp/nvidia123/
.