A Couple CSS Problems - Help!

jarryd09

New Member
Alright so I've managed to fix most of the html / css problems, there's still a couple issues:

• The internal html jumps in safari / chrome are off, but in firefox they're fine.

• The "details" thumbs (twitter, linkedin, mail) in safari / chrome are shifted way to the left in safari and chrome. The "details" title and text below it are also pushed up.

• Still trying to fix the footer at the bottom - you'll notice that it's not attached to the bottom of the browser, nor is it stretched all the way across horizontally. There's about 20px of gap on either side. What's causing this?

Link:http://jarrydfillmore.ca/JFD_LASTUPDATE_V2/
 

CaldwellYSR

Member
in the css file go to your #footer_container and add:

clear: both;
width: 100%;

I'm a firefox guy so I don't see the other issues and I probably wouldn't know how to fix them anyways...
 

CaldwellYSR

Member
It looks like it worked? The gap is gone. It didn't attach it to the browser though, I forgot that part I was just trying to get it stretched across like you wanted. Gimme a few minutes and I'll figure out how to attach it to the browser and get back to you.

Okay so try:

#footer_container {
position: absolute;
bottom: 0px;
}

also add the clear: both; and width: 100% if you want it to stretch all the way across.
 
Last edited:

ronaldroe

Super Moderator
Staff member
To attach the footer to the bottom of the viewport, you'll need to use position:fixed;

Be sure to use a conditional comment for IE6 and below, because they don't support fixed positioning.
 

ronaldroe

Super Moderator
Staff member
Wrap the form in its own div, and float it left. Then, wrap the Details section in its own div and float it right.

I'd recommend also getting rid of the tables in the form and laying it out using just the form elements and spans for the labels.
 

ronaldroe

Super Moderator
Staff member
What's the difference in fixed and absolute?

Absolute is positioned according to its parent element, generally the body tag. Absolutely positioned elements scroll with the page. Fixed will position the element using the viewport as a reference. The element will not scroll with the page.

Reference
 
Last edited:

CaldwellYSR

Member
Absolute is positioned according to its parent element, generally the body tag. Absolutely positioned elements scroll with the page. Fixed will position the element using the viewport as a reference. The element will not scroll with the page.

Reference

Ah that explains why it didn't work. Thanks!
 
Top