Problem using Safari with CSS

HTML & CSS
1

I have a nice web site, so I thought, called Gelsana.com. It has a header, body and footer described in a css file. The problem I have is that in the Apple Safari browser, the footer clings to the bottom of the browser window in a wierd way when someone resizes the window, but then when a user opens the window up or scrolls down, the footer hangs in the middle of the window. Any suggestions?

The footer is defined in the index.html as:

<div id=footer>
...
</div>

In the CSS file, it is :

#footer {
	background: #90A2B5;
	border-top: none;
	border: 1px solid #C1C1C1;
	color: white;
	margin: 0 3.4em 0 3.4em;
	padding: 8px 0 10px 8px;
	-moz-border-radius: 0 0 8px 8px;
	font-size: 80%;
	font-weight: bold;
	letter-spacing: 0.1em;
}
#footer a {
	color: white;
}

It seems that a lot of people don’t bother with making sure that their web site is complient with multiple browsers. I think one way to solve this is to have some sort of sniffer redirect the code. Does anyone know how to do this?

A quick solution is to define a DIV such that it can not be moved with the browser window resizes. Does anyone know how to do this?

2

You’re best validating your code - once it’s valid then it might fix things

It’s a bad idea to have different code for different browsers - valid html normally works across most browsers :slight_smile:

3

it looks like I solved the problem.

I solved it by setting the minimum height of the div above the footer div tag.

4

The problem was that you set the height of your content as height:100% which means that the height can never grow and content will spill out.


#content-box {
    min-height: 900px;
    [B]height: 100%;
[/B]    width: 100%;
    background-color: #FFFFFF;
}
#c

When you set a fixed height on something then that element is restricted by that height and will not increase when content exceeds it. You can’t use 100% height in that way (see the CSS FAQ on 100% height for more info). You should use min-height instead for all (except IE6 where you can use height (in a special IE6 only rule) as it treats height the same as min-height in most respects).

It seems that a lot of people don’t bother with making sure that their web site is complient with multiple browsers. I think one way to solve this is to have some sort of sniffer redirect the code. Does anyone know how to do this?

No no-one does that these days (unless they don;t know what they are doing) so don’t even go there :slight_smile: Just do it right from the start.

Why are you using pts for padding and margins? pts are really only suitable for printed output and you are just making things harder than they need to be.

Why all the monstrous inline styling and proprietary IE code? I’ve no idea what 90% of that code is and looks like you’ve ouptput it from Microsoft Office or something similar.

That’s not the way to build a reliable webpage I’m afraid.

A quick solution is to define a DIV such that it can not be moved with the browser window resizes. Does anyone know how to do this?
See the CSS FAQ Sticky footer entry.