PDA

View Full Version : Broswer differences



gh05
Oct 24th, 2008, 02:25 PM
I've just designed a very simple page layout which looks how i want it in Internet Explorer 6. When i open it in Firefox, the different panels appear all over the place. (I used floats and margins for positioning but each browser positions them differently).

Is this a bug in the one of the browsers which is easily fixable? Do I need to create different documents for each browser (ie6, ie7, firefox, opera etc)?

Code is as below but it has also done the same with other web pages i've designed which is why i'm seriously tempted just using tables in future...

Thanks.

-----------------------------------------------------------------------




<html>
<head>
<title>Welcome to the CCLN Website</title>
<style type="text/css">
hr {color: sienna}
body {background-image: url("CCLNfiles/image002.jpg")}

#mainpanel{float:left;
width:600px;
background-color: #FFFF7E;
font-size: 20px;
text-align:center;
color: #0000EE;
border:medium double #000080;
margin: 200 10 10 140;
padding 7px 7px 7px 7px;}



#english{float:left;
width:100px;
background-color: #FFFF7E;
font-size: 20px;
text-align:center;
color: #0000EE;
border:medium double #000080;
margin: 50 10 10 160;
padding 7px 7px 7px 7px;}

#welsh{float:left;
width:100px;
background-color: #FFFF7E;
font-size: 20px;
text-align:center;
color: #0000EE;
border:medium double #000080;
margin: 50 10 10 300;
padding 7px 7px 7px 7px;}

</style>

</head>
<body>

<div id="mainpanel">

<b>
<p>WELCOME TO THE CARDIFF COMMUNITY LEARNING PORTAL</p>
<p>CROESO I CCLN<br/></br></p>

<p> Click below to enter in English or Welsh</p>
</b>

</div>

<div id="english">
English
</div>



<div id="welsh">
Welsh
</div>



</body>
</html>

Shoot2Kill
Oct 24th, 2008, 02:33 PM
please don't use tables for layout (http://hotdesign.com/seybold/)

also, for future reference, put the code in code tags, which use [ ], not < >

also, do you have a link to the on-line site ??

gh05
Oct 24th, 2008, 02:51 PM
please don't use tables for layout (http://hotdesign.com/seybold/)

also, for future reference, put the code in code tags, which use [ ], not < >

also, do you have a link to the on-line site ??


The site isn't currently on the internet as i'm just editing it in wordpad for the moment.

The only reason i'm tempted to use tables is that it's just a very simple web page which won't be edited much and i just can never figure out css positioning problems in different browsers.

abduraooft
Oct 24th, 2008, 03:16 PM
(I used floats and margins for positioning but each browser positions them differently). Don't float an element without knowing its purpose.

If you are trying to make a 2-column layout, check http://bonrouge.com/2c-hf-fixed.php , which is a good layout.

PS: Validate your code (http://validator.w3.org) and fix all errors. And for a valid document, a valid DOCTYPE (http://www.alistapart.com/articles/doctype/) is a must

gh05
Oct 24th, 2008, 03:42 PM
Don't float an element without knowing its purpose.

If you are trying to make a 2-column layout, check http://bonrouge.com/2c-hf-fixed.php , which is a good layout.

PS: Validate your code (http://validator.w3.org) and fix all errors. And for a valid document, a valid DOCTYPE (http://www.alistapart.com/articles/doctype/) is a must

What do you mean by 'knowing it's purpose'? I know exactly what i want the page to look like but i just can't get the positioning right.

A two column layout is not what I'm after. All i want is a central panel containing a basic introduction to the site with two entrance buttons to view the site in either english or welsh.

Is there a way to validate the CSS without uploading it to the internet. My site is only going to be available to an internal network.

abduraooft
Oct 24th, 2008, 03:47 PM
OK, you may get something from http://blog.html.it/layoutgala/
perhaps http://blog.html.it/layoutgala/LayoutGala10.html

gh05
Oct 24th, 2008, 04:06 PM
OK, you may get something from http://blog.html.it/layoutgala/
perhaps http://blog.html.it/layoutgala/LayoutGala10.html


None of those layouts really help me. As i said it's just a basic layout with a center panel and two buttons.

If you view the html it should display as i want it in IE6 but in firefox the positioning goes wrong.

Shoot2Kill
Oct 24th, 2008, 04:10 PM
try this...



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Welcome to the CCLN Website</title>
<style type="text/css">

body
{
background-image: url("CCLNfiles/image002.jpg");
margin: 0 auto;
text-align: center;
}

#mainpanel
{
font-weight: bold;
width: 600px;
background-color: #FFFF7E;
font-size: 20px;
text-align:center;
color: #0000EE;
border:medium double #000080;
margin: 100px auto;
padding: 7px 7px 7px 7px;
}

#buttons
{
margin: 0 auto;
width: 400px;
}

#english
{
float:left;
width:100px;
background-color: #FFFF7E;
font-size: 20px;
text-align:center;
color: #0000EE;
border:medium double #000080;
padding: 7px 7px 7px 7px;
}

#welsh
{
float:right;
width:100px;
background-color: #FFFF7E;
font-size: 20px;
text-align:center;
color: #0000EE;
border:medium double #000080;
padding: 7px 7px 7px 7px;
}

</style>

</head>
<body>
<div id="mainpanel">
<p>WELCOME TO THE CARDIFF COMMUNITY LEARNING PORTAL</p>
<p>CROESO I CCLN</p><br />
<p>Click below to enter in English or Welsh</p>
</div>
<div id="buttons">
<div id="english">
English
</div>
<div id="welsh">
Welsh
</div>
</div>
</body>
</html>


works correctly in FF and IE7, dont have IE6 to test

abduraooft
Oct 24th, 2008, 04:14 PM
Is there a way to validate the CSS without uploading it to the internet. My site is only going to be available to an internal network. Let me answer easily.
http://validator.w3.org/#validate_by_input
http://jigsaw.w3.org/css-validator/#validate_by_input
(You may post your code after fixing them)

Shoot2Kill
Oct 24th, 2008, 04:34 PM
Edited above code, for valid HTML Strict & CSS...

is this how you wanted it to look though ???

gh05
Oct 24th, 2008, 04:41 PM
try this...



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Welcome to the CCLN Website</title>
<style type="text/css">

body
{
background-image: url("CCLNfiles/image002.jpg");
margin: 0 auto;
text-align: center;
}

#mainpanel
{
font-weight: bold;
width: 600px;
background-color: #FFFF7E;
font-size: 20px;
text-align:center;
color: #0000EE;
border:medium double #000080;
margin: 100px auto;
padding: 7px 7px 7px 7px;
}

#buttons
{
margin: 0 auto;
width: 400px;
}

#english
{
float:left;
width:100px;
background-color: #FFFF7E;
font-size: 20px;
text-align:center;
color: #0000EE;
border:medium double #000080;
padding: 7px 7px 7px 7px;
}

#welsh
{
float:right;
width:100px;
background-color: #FFFF7E;
font-size: 20px;
text-align:center;
color: #0000EE;
border:medium double #000080;
padding: 7px 7px 7px 7px;
}

</style>

</head>
<body>
<div id="mainpanel">
<p>WELCOME TO THE CARDIFF COMMUNITY LEARNING PORTAL</p>
<p>CROESO I CCLN</p><br />
<p>Click below to enter in English or Welsh</p>
</div>
<div id="buttons">
<div id="english">
English
</div>
<div id="welsh">
Welsh
</div>
</div>
</body>
</html>


works correctly in FF and IE7, dont have IE6 to test

The positioning on that is exactly how I want it? Only problem now is that for some reason the background image won't load...


One thing i don't understand is how you have managed to position those buttons exactly where I want them without using any numbers (i.e. just using margin:auto on two ocassions). How does the browser know where to put the buttons? Also why is marhin auto used in both the body and the buttons div? Sorry! I'm just trying to understand how it works so i don't have these problems in future.

Thanks for your help.

Shoot2Kill
Oct 24th, 2008, 04:46 PM
margin: 0 auto;
will set the div or the element in question to the centre of the page, (it like saying, i want 0 margin top, and i want the left and right margin to be equal, so the element is centred)

i then made a button div which will also be centred and was 400px wide, then within this div, i added 2 smaller divs for the country's, and set one of them to float right, and one to float left. this means that it will go as far left/right as possible, within the button div..

hope this explains things a little..

background image..
try changing the css to:
background-image: url(./CCLNfiles/image002.jpg);

gh05
Oct 24th, 2008, 04:49 PM
Excellent. Thank You.

Scriptet
Oct 25th, 2008, 12:48 AM
Also when designing test across all browsers as you are designing and updating to avoid problems.

If your site looks good in FF and crap in IE you are probably doing things right, if it looks crap in FF and good in IE you are doing something wrong.