Hi there,

 

I have created a 2 column home page, when I save the file they save as Firefox documents... it displays perfectly on all computers in our office on Firefox except one computer which doesnt have FF, it has IE. It displays well bar the right hand column which is floated below the left column. It looks like it is overlapping by 1 pixel in IE.

 

Any tips?

 

Michael

Ahhh, good old IE never fails us.

 

It could be a difference in pixels - if you use percentages to specifiy widths etc, different browsers treat fractions of percentages differently - ie some round down and some round up. For example if you had three columns at 33.3% widths I think IE would treat that as 3 columns at 34% width.

 

Also, ensure your have the style "display:inline" in each of the elements you are trying to put in a row.

It's good with all sites to start of with a global reset. this is done like this

 

* {

margin:0;

padding:0;

}

 

 

This tells there to be no extra padding or margins unless you set them.

Cheers Diz and Aaron.

 

Its fine in FF but IE is out by 1px, just 1, the page is 860px wide too inc. border!

Hi Michael, could you link us to the page in question? It would help us diagnose your issue.

Would love to but its Im working on it offline unfortunately!

 

Can't get it online. Basically I have had to solve the problem so far by reducing the column widths to: 75% and 24.9% and for some strange reason it works out in IE, I mean what does it think 75 and 24.9 = 100, how stupid!!!

 

I was wondering if there was a way to tell my pages to view differently in IE and FF, though I think this is a bit schoolboyish, no offence to schoolies mind!!

Hey You can also attach your files or post the Codes, if its not possible to upload.

Shall I post the CSS?

 

That should help should it?

 

I have been browsing around and think it could have something to do with cross-browser compatibility....

 

If I post the CSS then assumably someone can see the discrepancy!

If you have a border and/or margins (maybe padding too I haven't used % to define widths in a long time)in these divs where you are specifying the width via a percentage your total will be the % + the pixles used.

 

So

width:50%

border: 2px solid #000000;

 

 

would be

 

50% + 4px (2px right +2px left)

 

 

 

Just thought that might be helpful information to have

Ye cheers Diz.

 

You mentioned that elsewhere which I took on board. As I say, it works perfectly in work FF, but if I reduce either column width by 0.1% which on a 860px wide page, isnt even a pixel then it works perfectly fine in IE but going back to FF messes it up.

 

Would it be better to put a seperate rule for IE, saying that the columns should be 75% and 24.9% of the page for IE and normal for FF.

 

As I say, I can post the CSS but it is fine in FF, just that IE isnt playing ball - which reading around, seems to be common.

Is there a doctype declaration? Could you post the css?

Ye mate, there is a DOCtype declaration.

 

CSS below:

 

body {

margin: 0;

font-family: Tahoma;

font-size: 12px;

background-color: gray;

}

 

h1 {

color: yellow;

}

 

h2 {

color: yellow;

font-weight: normal;

}

 

#container {

border: 5px solid black;

width: 850px;

margin: auto;

margin-top: 10px;

}

 

#header {

background-color: #000066;

color: white;

}

 

#content {

 

}

 

#footer {

}

 

#contentl {

float: left;

width: 75%;

background-color: #000066;

}

 

#contentr {

float: right;

width: 25%;

background-color: #000066;

}

 

.clearfix {

clear: both;

}

 

.logo {

}

 

img {

border: 0;

}

 

#header ul {

margin: 0;

padding: 0;

list-style-type: none;

}

 

#header ul li {

float: left;

padding: 10px 15px 30px 20px;

}

 

#header ul li a, #header ul li a:visited {

float: left;

padding: 10px 15px;

color: white;

text-decoration: none;

}

 

#header ul li a:hover {

background-color: white;

color: #000066;

}

 

.introduction {

margin: 15px 15px 25px 15px;

background-color: #000066;

color: white;

}

 

.introduction h1 {

margin: 0;

font-weight: normal;

font-family: Tahoma;

}

 

.introduction p {

line-height: 1.2em;

}

 

.introduction li {

font-size: 1.1em;

}

 

#contentr h2 {

font-weight: normal;

}

 

#contentr ul li {

margin: 0;

padding: 0;

list-style-type: none;

}

 

a {

color: yellow;

text-decoration: none;

}

 

.custcomm {

margin: 15px 15px 25px 15px;

background-color: #000066;

color: white;

}

 

.custcomm h1 {

margin: 0;

font-weight: normal;

font-family: Tahoma;

font-size: 2em;

color: yellow;

}

 

.custcomm h2 {

margin: 0;

font-weight: normal;

font-family: Tahoma;

font-size: 1.2em;

color: orange;

text-align: left;

}

 

.custcomm h3 {

margin: 0;

font-weight: normal;

font-family: Tahoma;

color: white;

font-size: 1.2em;

}

 

.custcomm p {

background-color: white;

color: #000066;

padding: 1px;

}

 

.custcomm li {

font-size: 1.1em;

}

 

.contactform {

color: white;

}

Please post your HTML Code too..

Hi Michael, if you put your CSS and HTML within [_code][/code] tags (without the underscore) then it is a lot easier for us to read, and in turn a lot easier to help you.

body	{
margin: 0;
font-family: Tahoma;
font-size: 12px;
background-color: gray;
}

h1	{
color: yellow;
}

h2	{
color: yellow;
font-weight: normal;
}

#container {
border: 5px solid black;
width: 850px;
margin: auto;
margin-top: 10px;
}

#header {
background-color: #000066;
color: white;
}

#content {

}

#footer {
}

#contentl {
float: left;	
width: 75%;
background-color: #000066;
}

#contentr {
float: right;	
width: 25%;
background-color: #000066;
}

.clearfix {
clear: both;
}

.logo 	{
}

img	{
border: 0;
}

#header ul {
margin: 0;
padding: 0;
list-style-type: none;
}

#header ul li {
float: left;
padding: 10px 15px 30px 20px;
}

#header ul li a, #header ul li a:visited {
float: left;
padding: 10px 15px;	
color: white;
text-decoration: none;
}

#header ul li a:hover {
background-color: white;
color: #000066;
}

.introduction {
margin: 15px 15px 25px 15px;
background-color: #000066;
color: white;
}

.introduction h1 {
margin: 0;
font-weight: normal;
font-family: Tahoma;
}

.introduction p {
line-height: 1.2em;
}

.introduction li {
font-size: 1.1em;
}

#contentr h2 {
font-weight: normal;
}

#contentr ul li {
margin: 0;
padding: 0;
list-style-type: none;
}

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

.custcomm {
margin: 15px 15px 25px 15px;
background-color: #000066;
color: white;
}

.custcomm h1 {
margin: 0;
font-weight: normal;
font-family: Tahoma;
font-size: 2em;
color: yellow;	
}

.custcomm h2 {
margin: 0;
font-weight: normal;
font-family: Tahoma;
font-size: 1.2em;
color: orange;
text-align: left;	
}

.custcomm h3 {
margin: 0;
font-weight: normal;
font-family: Tahoma;
color: white;
font-size: 1.2em;	
}

.custcomm p {
background-color: white;
color: #000066;
padding: 1px;
}

.custcomm li {
font-size: 1.1em;
}

.contactform {
color: white;
}

No we need your HTML as well as your CSS as that way we can see how the css is being used

HTML as requested, this is for the home page

 

 

<!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 name="author" content="Michael Gainford" />
<meta name="keywords" content="Groundworks, Liverpool, flagging, drainage, extensions, Skip Hire, Plant Hire, Barratt Homes" />
<meta name="description" content="The official website of S&S Groundworks" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>S&S Groundworks - Top quality workmanship in the North West of England</title>

<link href="mg1.css" rel="stylesheet" type="text/css">	
</head>

<body>

<div id="container">

	<div id="header">

		<a href="#"><img class="logo" src="Images/ssheader.jpg" alt="S&S Groundworks Logo" title="S&S Groundworks Logo" /></a>
		<ul>
			<li><a href="file:///C:/S&S%20Groundworks/Index.html">HOME</a></li>
			<li><a href="file:///C:/S&S%20Groundworks/Services.html">SERVICES</a></li>
			<li><a href="file:///C:/S&S%20Groundworks/Gallery.html">GALLERY</a></li>
			<li><a href="file:///C:/S&S%20Groundworks/Testimonials.html">TESTIMONIALS</a></li>
			<li><a href="file:///C:/S&S%20Groundworks/Jobs.html">VACANCIES</a></li>
			<li><a href="file:///C:/S&S%20Groundworks/Form.html">CONTACT US</a></li>
		</ul>
		<div class="clearfix"></div>
	</div>

	<div id="content">

		<div id="contentl">

			<div class="introduction">
				<h1>Groundworks in Liverpool</h1>
				<p>S&S Groundworks are a Liverpool-based Groundworks company, who were formed in 1997 by xxxxxxxx.</p>

				<p>Since its inception over 10 years ago, S&S Groundworks have gone from a simple supply only company specialising 
				   in the Groundworks sector but their growth is evident from the number of trades currently under employment by S&S.
				   At present Groundworkers, Labourers, Bricklayers, Joiners, Electricans and Plumbers are employed displaying the 
				   diversifying areas of work at present. This means S&S can undertake not only groundworks projects but also all 
				   types of interior works. S&S not only focus on major Groundworks projects, they also undertake smaller residential
				   properties such as extensions, driveway and even bigger jobs such as barn conversions, of which they recently 
				   finished work in the Widnes area, with a major overhaul of a dilapidated barn to convert it to state of the art 
				   offices, pictures of which can be found here <link to Water Farm portfolio>.</p>

				<p>Top workmanship is guaranteed when thinking of S&S, obvious from an ever increasing relationship with major house
				   builder Barratt Homes <link> of whom they have traded with for a decade now. The majority of workers employed by 
				   S&S have served with them long-term and skilled workmanship is guaranteed. Not only are the workers top class but 
				   the product knowledge of S&S is unrivalled too as they utilise the most cutting edge building products infact in 
				   2005, Barratt Homes integrated S&S' choice of flooring, the Polyfloor system into all their future projects, a 
				   sign S&S are in the know!!<p/>

			</div>					

			<div class="introduction">
				<h1>More than just Groundworks!</h1>
				<p>As well as the run-of-the-mill groundworks jobs, S&S also undertake other types of projects such as:</p>	

				<p>If you are in need of any of the below services you make your enquiry <a href="file:///C:/S&S%20Groundworks/Contact_Us.html">here</a>.

				<ul>
					<li>Domestic House Extensions</li>
					<li>Commercial and Residential Flagging and Kerbing</li>
					<li>Waste Disposal</li>
					<li>Roll on - Roll of Skip Hire</li>
					<li>Plant Hire</li>
					<li>Drainage</li>
					<li>Driveways</li>
					<li>Car Parks</li>
					<li>Site Clearance</li>
					<li>Asbestos Removal</li>
				</ul>


			</div>					





		</div>

		<div id="contentr">

			<h2></h2>

				<ul>
				<li><img src="Images/14Tonner.jpg" alt"14-Ton Machine width="160" height="160"/></li>
				<li><img src="Images/Dumper.jpg" alt"14-Ton Machine width="160" height="130"/></li>
				<li><img src="Images/Roller.jpg" alt"14-Ton Machine width="160" height="132"/></li>
				<li><img src="Images/Tipper.jpg" alt"14-Ton Machine width="160" height="143"/></li>
				</ul>


		</div>

		<div class="clearfix"></div>

	</div>

	<div id="footer">

			<a href="#"><img class="logo" src="Images/ssfooter.jpg" alt="S&S Groundworks" title="S&S Groundworks" /></a>
	</div>
	</div>

</body>

</html>