Log in

View Full Version : CSS compatibility in FF and IE


fileserverdirect
05-13-2008, 01:44 AM
Hello all,

I was just desining a template for a site that I am developing, and I ran into a problem. I desined the code in IE and it looks perfect, but as soon as I open it in FF, Everything is messed up. Here is the code that I am using:


<html>
<head>
<title>
Start
</title>
<style>
.windowstop {width: 798px; height:0px; margin: 0px; margin-top: 100px; text-align: left;}
.bg {background: url("background.png") no-repeat top center; height: 100%; width=100%; text-align: center;}
body {background: url("bg-sides.png") repeat-x; margin: 0px 0px 0px 0px;}

.cont-position {text-align:center;}
.cont-top {background: url("cont-top.png") no-repeat top; height: 50px;}
.cont-sides {background: url("cont-sides.png") repeat-y left;}
.cont-bottom {background: url("cont-bottom.png") no-repeat bottom; height: 90px;}
.cont {margin-left: 40px;}
.cont-top-text {margin-top: 20px;margin-left: 40px;}
.cont-bottom-text {margin-top: 40px;margin-left: 40px;}
</style>
</head>
<body>
<base target="_blank">

<div class="bg">
<div class="windowstop">

<div class="cont-top">
<div class="cont-top-text">
Intro
</div>
</div>
<div class="cont-sides">
<div class="cont">
Body<br><br><br><br><br><br><br><br><br>

</div>
</div>
<div class="cont-bottom">
<div class="cont-bottom-text">
footer
</div>
</div>
</div>
</body>
</html>

Here are some screen shots:
Internet Explorer:
http://klein-onlineblog.com/ie.jpg
Firefox:
http://klein-onlineblog.com/ff.jpg
If I try to start changing it for firefox, IE goes crazy, or vica versa. How can I get this to work in both browsers?
Thanks,
Medyman
05-13-2008, 02:29 AM
It's hard to know what's exactly going on without the images. But this should give you a similar layout that's cross-browser. I added some colors so I could see what was going on. The <html> tag now equates to your old <body> tag. The <body> tag equates to your .bg div.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>
Start
</title>
<style type="text/css">
html {
margin:0;
padding:0;
background:yellow;
height:100%;
}
body {
margin:0;
padding:0;
background:pink;
margin-top:100px;
height:100%;
}
#windowstop {
width:798px;
margin:0 auto;
}

.cont-position {text-align:center;}
.cont-top {background:red url("cont-top.png") no-repeat top; height: 50px;}
.cont-sides {background:blue url("cont-sides.png") repeat-y left;}
.cont-bottom {background:green url("cont-bottom.png") no-repeat bottom; height: 90px;}
.cont {margin-left: 40px;}
.cont-top-text {margin-top: 20px;margin-left: 40px;}
.cont-bottom-text {margin-top: 40px;margin-left: 40px;}
</style>
</head>
<body>

<div id="windowstop">
<div class="cont-top">
<div class="cont-top-text">
Intro
</div>
</div>

<div class="cont-sides">
<div class="cont">
Body<br><br><br><br><br><br><br><br><br>
</div>
</div>

<div class="cont-bottom">
<div class="cont-bottom-text">
footer
</div>
</div>
</div>

</body>
</html>
fileserverdirect
05-14-2008, 01:43 AM
O.K., thats almost what I wanted, almost. I changed some things around, and it looks the same as before, in IE. In Firefox, major changes happened so I almost looked perfect.
My Code:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>
Start
</title>
<style type="text/css">
html {
margin:0;
padding:0;
background:yellow;
height:100%;
background: #0A9DFF url("background.png") no-repeat center top;
margin-top: 100px;
}
body {
margin:0;
padding:0;
background: url("bg-sides.png") repeat-x top;

height:100%;
}
#windowstop {
width:798px;
margin:0 auto;
}

.cont-position {text-align:center;}
.cont-top {background:url("cont-top.png") no-repeat top; height: 50px;}
.cont-sides {background:url("cont-sides.png") repeat-y left;}
.cont-bottom {background:url("cont-bottom.png") no-repeat bottom; height: 90px;}
.cont {margin-left: 40px;}
.cont-top-text {margin-top: 20px;margin-left: 40px;}
.cont-bottom-text {margin-bottom: 40px;margin-left: 40px;}
</style>
</head>
<body>

<div id="windowstop">
<div class="cont-top">
<div class="cont-top-text">
Intro
</div>
</div>

<div class="cont-sides">
<div class="cont">
Body<br><br><br><br><br><br><br><br><br>
</div>
</div>

<div class="cont-bottom">
<div class="cont-bottom-text">
footer
</div>
</div>
</div>

</body>
</html>


The Image:
http://www.klein-onlineblog.com/ff2.png.
-- The white bar at the top is supposed to be the top of the header image. How can I get this to show?
-- Also, there are buttons in the image (I tryed a "Home Icon") and I eventually want to make that an image map, so I don't think that your code would work.
-- The Intro text should be lower, but when I adjust .cont-top-text, the whole top moves, not just the text.
Medyman
05-14-2008, 01:53 AM
The white bar at the top is supposed to be the top of the header image. How can I get this to show?

Which div is that reffering to? If you have a link to the page, please post it. It'll save a lot of back and forth. Like I said, without access to your images, I can only offer advice in the abstract.


Also, there are buttons in the image (I tryed a "Home Icon") and I eventually want to make that an image map, so I don't think that your code would work.

As long as the image map is set up correctly, there is no reason why it shouldn't.


The Intro text should be lower, but when I adjust .cont-top-text, the whole top moves, not just the text.
How are you adjusting it?
fileserverdirect
05-16-2008, 01:50 AM
Hi,


Quote:
The white bar at the top is supposed to be the top of the header image. How can I get this to show?

Which div is that reffering to?

It is the background of html.


Quote:
Also, there are buttons in the image (I tryed a "Home Icon") and I eventually want to make that an image map, so I don't think that your code would work.

As long as the image map is set up correctly, there is no reason why it shouldn't.


If the image is a bacground, then it cant be an image map, can it????


Quote:
The Intro text should be lower, but when I adjust .cont-top-text, the whole top moves, not just the text.

How are you adjusting it?


I am ajusting this: (in bold)


.cont-top-text {margin-top: 20px;margin-left: 40px;}
fileserverdirect
05-18-2008, 09:52 PM
Did you figuer it out?
Moshambi
05-19-2008, 04:09 AM
I am ajusting this: (in bold)


.cont-top-text {margin-top: 20px;margin-left: 40px;}



If you want to move the text down, I would try using the padding CSS property.