Css problems in Firefox.

Hexenhammer · 01-23-2009, 12:11 PM

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 · 01-23-2009, 04:47 PM

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.

adx · 01-23-2009, 05:27 PM

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!

totheletter · 01-29-2009, 01:43 AM

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

01-23-2009, 12:11 PM	#1
Hexenhammer New Member Join Date: Jan 2009 Location: Västervik, Sweden Posts: 1	Css problems in Firefox. 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!

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

01-23-2009, 05:27 PM	#3
adx Silver Member Join Date: Nov 2008 Location: Minnesota Posts: 224	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! __________________ http://www.htmlswag.com

01-29-2009, 01:43 AM	#4
totheletter New Member Join Date: Jan 2009 Posts: 10	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