CSS - Footer Vanishing In Safari

I'm having trouble with my website structure... view this page for an example...

css is here...

The Footer (which currently consists just of the validation images) is suppossed to be at the bottom of the page...

It works in IE except there is a little line between the images (it is also part of the link...), and it doesn't work at all in FF...

how do I get rid of the line in IE, and what do I need to add or change in my css to get it to be viewed properly in FF?

Thanks
Bryan

Hi there,

I used to use tables to format my websites. I want to use css now for formatting my site but I have a small problem...

When I am on my Windows XP computer with IE6 My Site looks just fine.

But when I turn on my Mac and I open the page in Safari it ****s up a little bit. And of course I want my site viewable to al users with al browsers on any platform.

This is some of the code I used:

Code:

body {
	background-color: #fff;
	margin: 100px 0px 0px 0px;
}

.leftside {
	width: 500px;
	float: left;
	border-right: 1px dashed #999;
	padding: 0px 0px 0px 100px;
}


.rightside {
	width: 150;
	padding: 10px
}

this is the url of my testpage:
www.headradio.net/template/index.php
Just take a look how it looks in safari (or firefox) and how it looks in IE6

Thanks
Daan

I have my webpage coded in HTML 4 and CSS, and everything is valid. It displays perfectly in all browsers, with one exception. In Safari 1.2, the menu background positioning is screwed up. It is supposed to display the b&w image first, then rollover to the color image. Instead, it is displaying the color image, and not repositioning the image so it displays correctly. It works fine in other browsers. any suggestions??

(PS) i'm judging the Safari support by BrowserCam.com, I don't actually have a Mac to test with. And yes, I do need it to work in Safari since this is a class website and we are provided with apple laptops to use.

I am using the <pre> tag in my application and it works for IE, Firefox, etc... except for Safari. This is what I am using in my css

Code:

<STYLE TYPE="text/css">
      #Pre tags with word wrapping for Mozilla, etc...
      pre {
      white-space: pre-wrap; 
      white-space: -moz-pre-wrap; 
      white-space: -pre-wrap; 
      white-space: -o-pre-wrap; 
      _white-space: pre;
      font-family:verdana,arial,sans-serif; font-size:11px; color:#000000;
      }
      </style>
      <!--[if gte IE 5]>
        <style type="text/css">
            pre {
             word-wrap: break-word; /* IE 5.5+ */
             white-space: normal;             font-family:verdana,arial,sans-serif; font-size:11px; color:#000000;
            }
            </style>
           <![endif]-->

This is how I am using the pre tag in my perl cgi application
Code:

  my $id = $FORM{'id'}; 
  my $query = "Select title, news_story, begin_date, author from su_archives where news_id = '$id'"; 
  $sth = $dbh->prepare($query); 
  $sth->execute(); 
  my ($title, $news_story, $begin_date, $author) =  $sth->fetchrow_array;
  @begin = split(' ',$begin_date); 
  @date = split('-',$begin[0]); 
  $startDate = $date[1].'/'.$date[2].'/'.$date[0]; 
  print "<br><b>$title</b><br><br>"; 
  print "<p><i>$startDate</i><br></p>";
  print "<PRE WIDTH=55px style=\"font-family: verdana, arial, helvetica, geneva, swiss, sans-serif;\">$news_story</pre>";

Any Suggestions on how this should be revised for Safari?

Thanks in Advance

Hi, so far I have my website look the same on IE7, (maybe IE6), FireFox, and Opera. Now there is another browser called Safari for Mac! How can I test my website on Safari if I only have a PC? also should I worry on this!? or if my website works on FireFox then it means it will work on Safari as well?

regards,
Sim085

Hi all,

I'm having troubles with my footer and I hope someone will be able to help:

test.katiefleming .ca (remove space)

User: wendy
Pass: letmein

The footer is supposed to span across the bottom forever should the user increase the browser window (this works).

However, my text moves as the window is expanded/contracted. I want it to be fixed.

No idea how to do this. Any help would be great!

Hey All,

I'm stumped on a problem I'm having with css. Here's the website I'm working on: johnraymondonline.com/mjbfoundation/

It's wordpress and I was working to modify a template. The problem I'm having is with the div for the footer. I've made the width 100% and it's not expanding the full width of the page. I've checked to see if it was encased in a div and it appears as if it isn't. I'm not sure what to do at this point...use absolute positioning? Any help would be appreciated.

Thanks in advance!!!

Code:

http://xbox-free.co.uk/

Can anyone advise as to why my footer is overlapping/floating to the right?

Cheers,
Neil

Hello All,

My question regards footers using CSS.

How would you have a footer like they do on Linkworth(dot)com so that it fluctuates depending on how long the page is?

So if you have a really long scrolling page, the footer is at the bottom and likewise if the page is really short, the footer is also at the bottom, but so there is never any white space below it.

I have a similar design I am working on, but when there is too much type, it runs behind the footer image and the footer never moves down accordingly.

Thank you for your help - appreciated.

Hi,

Im trying to make my footer on my page be a certain height of around 150px.

BUT I want it to fill to the bottom of the page even when there is less content or the window is made larger or smaller.

So basically a sticky footer which fills to the bottom of the page.

An example would be the footer he yoast.com

My current CSS is he

#fwrap
{
background-color:#BAAE9F;
border-top: 1px solid white;
border-top-width: 1px;
border-top-style: solid;
border-top-color: white;
width:100%;
height:100%;
height:145px;
}

Any help would be appreciated!

Thanks

Hello. Maybe this would be a better post on CSS. Here is my code. Right now I'm trying to add a set of links at the bottom of the web page. Any thoughts? This has been driving me nuts!


Thanks again everyone

HTML

Code:

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "(URL address blocked: See forum rules)">
<html>
<head>

 

	<title> Attorneys at Law, New York Lawyer</title>
	<meta name="" content="">
	<META NAME="Generator" CONTENT="Microsoft FrontPage 5.0">
	<meta name="KeyWords" content="HTML">


	<link rel="stylesheet" type="text/css" href="index.css" />

	<script src="index.js">	
		</script>


	</head>
	<body>

<div id="mainContainer">


<div id="topBar"><img src="webbanner.jpg" width="760" height="100">


<!--#include file="left_bar.shtml" -->

	
	<!-- Main Content-->


<div id="mainContent">

	<!-- Google Search-->

	<form action=""  id="cse-search-box">
<div align="right">
    <input type="hidden" name="cx" value="013298611985327428493:xedrvpp2ns4" />
    <input type="hidden" name="ie" value="UTF-8" />
    <input type="text" name="q" size="31" />
    <input type="submit" name="sa" value="Search" />
</div>
	</form>
<script type="text/javascript" src="(URL address blocked: See forum rules)=cse-search-box&lang=en"></script>
 
<!-- BreadCrumb Nav-->
  

<div id="navBreadCrumb">
	<a href="(URL address blocked: See forum rules)">Home</a> 
	<img src="breadcrumb_arrow.png" width="8" height="5" /> 
	<a href="">Areas of Practice</a> 
	<img src="breadcrumb_arrow.png" width="8" height="5" /> 
	<a href=""> Real Estate</a>
	<img src="breadcrumb_arrow.png" width="8" height="5" />  
	<strong>Foreclosure</strong>
</div>


	
	<h1><font face="times new roman, times, serif" size="5">About Our&nbsp;Firm</font> <hr size="2" width="100%" />
	<!-- end content --></h1>

	<p align="justify"><strong>Lawyer</strong> is a full-service law firm with conveniently located offices in ... 	and ... Counties. As the largest suburban general&nbsp;practice in ..., we have a skilled team of&nbsp;31 	attorneys, including a physician-attorney, as well as&nbsp;two on-staff&nbsp;Registered Nurses and an extensive support staff to serve our clients.</p>

	<p align="justify">Test Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test Testv</p>

	<h5>Why should you choose .... at your New York Attorney?</h5>

	<p align="justify">Test Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test Testv  </p>

	<p align="justify">individual circumstances.</p>

	<p align="justify">Test Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test Testv</p>

	<p align="justify">Test Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestvTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test Testv</p>

	<p align="justify">Test Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestvTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestvTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test Testv</p>

	<h5>Affiliations</h5>

	<p align="justify">Test Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestvvTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test Testv</p>

	<p align="justify">Please visit our <a class="con" href="practice_areas.php">
    areas of practice</a> for further information on our legal services or <a class="con" href="email.php">
    contact us </a>directly for an initial consultation.</p>

	
 	



</div>
</div>
</div>

	 




	

	
</body>
</html>

CSS

Code:

	html{
		height:100%;
	}
	body{
		font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
		font-size:0.8em;
		margin:0px;
		padding:0px;
 		background-color:#001b4f;

		text-align:center;
	}
    
    
	.clear{
		clear:both;
	}
	
    
    #mainContent{
		
		padding-right:10px;	
		padding-left:210px;
        padding-bottom:10px;
        background-color:#fff;
       
	}
    
    
    
	#mainContainer{
		width:760px;
		text-align:left;
		margin:0 auto;
        background-color: #fff;
       	border-left:1px solid #272727;
		border-right:1px solid #272727;
        padding-bottom:10px;
		
}


	
	#topBar{
		width:760px;
		height:100px;
	padding-bottom:0px;
    padding-top:0px;
    border-bottom:2px solid #272727
   
	}
    
    #searchbox{
		
        position:absolute:0,0;
    }
    
	#leftMenu{
		width:200px;
		padding-left:10px;
		padding-right:1px;
		float:left;
        background-color: #fff;
        padd
padding-top:25px;

		
	}
	
	
	#botTable{
	display: table-footer-group;
    float: top;
    bottom: 100%
    
    
    

So I have this site and I'm not great with css, but this one has to be done all in css I think. And I've got everything working except for the footer. The footer needs to display below the background image which is aligned center top. So if there is plenty of text, the footer should display below all of the text, and if there isn't much text then it should display under the background image.

This is how its currently set up:

container div
header div
wrapper div
wrapper div
left div
middle div
right div
footer div
wrapper div

the footer has
position: absolute;
bottom: 0;

the container with position: relative puts the footer up the top over the top of the header. With position: absolute it does something else weird, and with neither it puts the footer at the bottom of the screen over the top of the content.

the wrapper has relative position, which seems to be why the left, middle and right divs are positioning correctly with their positions as absolute. I think the header just positions correctly since its up top. So it would seem I'd need the footer to be inside another div that is position relatively. I just tried that, but it also positions the footer at the bottom of the screen with more content under it..

I guess what I want really is to have the site split into three horizontal divs, header, main and footer. Then within each of those to center all of the content to only 975px wide. And really its only the main div that needs the background image at all.

Can anyone help?

I want my footer to have no whitespace under it (like 1px ).

I have it set like this:

#footer
{
border-top:1px solid;
text-align:right;
margin:0px;
font-size:smaller;
padding-bottom:0px;
}

and it doesn't work so I'm guessing it is somewhere else in the file but I've tried messing around with most (all?) of the padding / margins and it still doesn't work. How could I do this? What I want is like the footer at http://www.oswd.org .

I've read through a few CSS documents and I can't find any references to this, so excuse me if I've missed something (which I hope I have!).

I want to be able to place a footer on my pages and always have it stuck to the bottom of the browser window, regardless of the amount of content in the page. So even if the page were nothing but the header and footer, the footer would be right at the bottom of the page.

Can I do this in CSS?