Css problems in Firefox.

H

Hexenhammer

New Member
Hello everyone... So this is my first post. Nice.

Actually I have some problems in Firefox (for once... I am quite surprised, I always
thought that problems only appeared in Internet Explorer, haha). Anyway; This
is all about www.planetsalign.net/smc and the section called "Tjänster".

In Internet Explorer, Opera and Safari everything looks ok - No problem at all.
But when I open just that section in Firefox, the background wont go all the
way down to the very bottom, as it is supposed to (when scrolling).

I cant really find the problem. Because the Div-container that the "main-div"
is placed in, is set to 100% and as the main-div is placed within that div, it
should automatically resize itself to 100%, right? The value of 100% is relative,
and everything depends on how high the page is... so why wont it work?

Normally I guess that I could solve it... but when Im getting it to work
everywhere except in Firefox and in Chrome... then its hard. I cant find
anything wrong within my code.

This is a big project for me, so I am gladly accepting all suggestions about how
to solve this problem!
 
horrorshow75

horrorshow75

New Member
Doubt this has anything to do with the problem you're having just thought i would point it out, but this
Code: 
<link rel=stylesheet href="main.css" type="text/css">
and this
Code: 
<style type="text/css">
<!--
.Huvudrubrik {
font-size: 14px;
color: #3a5255;
font-weight: bold;}

.Styckrubrik {
color: #451910;
font-size: 12px;
font-weight: bold;
}

.Huvudtext {
color: #494949;
}
-->
</style>

should be inside your
Code: 
<head> </head>
tags

Actually in my opinion I would just put all of your styling into the external style sheet, makes your markup cleaner and alot easier to read.

here is what yours looks like
Code: 
<link rel=stylesheet href="main.css" type="text/css">
<!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">
<style type="text/css">
<!--
.Huvudrubrik {
font-size: 14px;
color: #3a5255;
font-weight: bold;}

.Styckrubrik {
color: #451910;
font-size: 12px;
font-weight: bold;
}

.Huvudtext {
color: #494949;
}
-->
</style>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<!--[if IE ]>

<style type="text/css">

body {text-align:center;}

</style>

<![endif]-->
</head>

I unfortunately won't be able to look into the FF issue until later as I am at work. Sadly no FF here.
 
A

adx

New Member
From what I could tell, #menycontainer is set at a fixed height at 804 pixels, so that the main content overflows. I would ditch the height value all together and change the gradient to repeat on the y-axis behind the intended container, instead of being part of the logo picture. Since that gradient also only extends to 804 pixels in height, it doesn't take into account the fact that browsers display elements with different spacing.

Am I on to something here? I see you do jingles! ;)
 
T

totheletter

New Member
this should solve your problem. I had the same issue. Your main division is set to 100% but something in your body is causing its length to go beyond 100% of the screen. Since you have your background color set in your main division, thats the only thing thats going to contain the color. So you want to just set the background of the html to a color using an internal style sheet similiar to this:

<style type='text/css'>
html, body {
margin: 0;
padding: 0;
border: 0;
height: 100%;
background: #ADAE7C;
}
</style>

that should solve your problem
 
You must log in or register to reply here.
Top