Hi,
In Firefox the text is verticly aligned differently to IE when it is inside a <p> How come
CSS: -
#footer {
/* Height of the footer */
height:25px;
margin:0;
padding:0;
/* Height of the footer */
margin-top:-25px;
/* Size of the right drop image */
margin-right:150px;
/* Size of the left drop image */
margin-left:136px;
text-align:center;
}
HTML: -
<div id="footer">
<p>Page Footer</p>
</div>
Thanks
AdamHow do you have your paragraph tags set?font-family, line-height, font-size, etc...i dont
What should i do so it is universal?Add:
* {font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;font-size:1em;line-height:1em;}Hi, i still got the problems unfortunatly, i set p tag with
{font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;font-size:1em;line-height:1em;}
My entire code is : -
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Template 1</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
<style>
/************************************/
/* Tag Layout */
/************************************/
html, body {
margin:0;
padding:0;
height:100%;
/* Right side drop ** Must Be An Image ** */
background-image:url(../images/right.png);
background-position:top right;
background-repeat:repeat-y;
/* Background for the main page */
background-color:#FFFFFF;
}
div {
border: 0;
}
p {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size:1em;
line-height:1em;
}
/************************************/
/* Div Layout */
/************************************/
#container {
/* Left side drop ** Must Be An Image */
background-image:url(../images/left.png);
background-position:top left;
background-repeat:repeat-y;
min-height:100%;
}
/* IE Hack */
* html #container {height:100%}
/* Container for Logo */
#header {
margin:0;
padding:0;
height:150px;
}
#logo {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 150px;
background-color: #BFBFBD;
text-align:center;
}
#main {
position: relative;
/* Size of the left drop image image */
margin-left:22px;
}
#clearfooter {
clear: both;
/* Height of the footer */
height: 50px;
}
#footer {
/* Height of the footer */
height: 50px;
margin:0;
padding:0;
/* Height of the footer */
margin-top: -50px;
/* Size of the right drop image */
margin-right: 22px;
/* Size of the left drop image */
margin-left: 22px;
text-align:center;
background-color:#CCFFFF;
}
/************************************/
/* Class Layout */
/************************************/
</style>
</head>
<body>
<!-- this sets up the page -->
<div id="container">
<!-- page header, contains logo and the top margin -->
<div id="header">
<div id="logo"><p>Page Header</p></div>
</div>
<div id="main">
<p>Main Content</p>
</div>
<!-- so the content dont overlap the footer -->
<div id="clearfooter"></div>
</div>
<!-- Page Footer -->
<div id="footer">
<p>Page Footer</p>
</div>
</div>
</body>
</html>
Thanks
k0r54The margin also needs to be set to zero.
I tend to use the following:
* {
margin:0;
padding:0;
border: 0;
background:#fff;
color:#000;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size:1em;
}
which sets all elements to the same value.
It does mean that you will have to explicitly set the margins and padding of some elements.
The advantage is that all browsers render the same, particularly with h* and lists which vary in each browser.<sidebar>
It's amazing how many people, even professional developers on big sites, ASSUME the background color of their site is white. To see just how rampant a problem it is, set the default background of your browser to something really recognizable like dark blue and discover how many black on dark blue pages you come across. In FF you can add a user defined style sheet to the page you're viewing so I keep one called whiteback.css handy to make those pages readable. What's in the file?
body {background:#fff;}
</sidebar>
In Firefox the text is verticly aligned differently to IE when it is inside a <p> How come
CSS: -
#footer {
/* Height of the footer */
height:25px;
margin:0;
padding:0;
/* Height of the footer */
margin-top:-25px;
/* Size of the right drop image */
margin-right:150px;
/* Size of the left drop image */
margin-left:136px;
text-align:center;
}
HTML: -
<div id="footer">
<p>Page Footer</p>
</div>
Thanks
AdamHow do you have your paragraph tags set?font-family, line-height, font-size, etc...i dont
What should i do so it is universal?Add:
* {font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;font-size:1em;line-height:1em;}Hi, i still got the problems unfortunatly, i set p tag with
{font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;font-size:1em;line-height:1em;}
My entire code is : -
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Template 1</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
<style>
/************************************/
/* Tag Layout */
/************************************/
html, body {
margin:0;
padding:0;
height:100%;
/* Right side drop ** Must Be An Image ** */
background-image:url(../images/right.png);
background-position:top right;
background-repeat:repeat-y;
/* Background for the main page */
background-color:#FFFFFF;
}
div {
border: 0;
}
p {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size:1em;
line-height:1em;
}
/************************************/
/* Div Layout */
/************************************/
#container {
/* Left side drop ** Must Be An Image */
background-image:url(../images/left.png);
background-position:top left;
background-repeat:repeat-y;
min-height:100%;
}
/* IE Hack */
* html #container {height:100%}
/* Container for Logo */
#header {
margin:0;
padding:0;
height:150px;
}
#logo {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 150px;
background-color: #BFBFBD;
text-align:center;
}
#main {
position: relative;
/* Size of the left drop image image */
margin-left:22px;
}
#clearfooter {
clear: both;
/* Height of the footer */
height: 50px;
}
#footer {
/* Height of the footer */
height: 50px;
margin:0;
padding:0;
/* Height of the footer */
margin-top: -50px;
/* Size of the right drop image */
margin-right: 22px;
/* Size of the left drop image */
margin-left: 22px;
text-align:center;
background-color:#CCFFFF;
}
/************************************/
/* Class Layout */
/************************************/
</style>
</head>
<body>
<!-- this sets up the page -->
<div id="container">
<!-- page header, contains logo and the top margin -->
<div id="header">
<div id="logo"><p>Page Header</p></div>
</div>
<div id="main">
<p>Main Content</p>
</div>
<!-- so the content dont overlap the footer -->
<div id="clearfooter"></div>
</div>
<!-- Page Footer -->
<div id="footer">
<p>Page Footer</p>
</div>
</div>
</body>
</html>
Thanks
k0r54The margin also needs to be set to zero.
I tend to use the following:
* {
margin:0;
padding:0;
border: 0;
background:#fff;
color:#000;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size:1em;
}
which sets all elements to the same value.
It does mean that you will have to explicitly set the margins and padding of some elements.
The advantage is that all browsers render the same, particularly with h* and lists which vary in each browser.<sidebar>
It's amazing how many people, even professional developers on big sites, ASSUME the background color of their site is white. To see just how rampant a problem it is, set the default background of your browser to something really recognizable like dark blue and discover how many black on dark blue pages you come across. In FF you can add a user defined style sheet to the page you're viewing so I keep one called whiteback.css handy to make those pages readable. What's in the file?
body {background:#fff;}
</sidebar>