Web browser fixes in older website

[justshandi1]

wildscienceexplorers.org

I designed this website in 2012. I was mostly self taught in html and css. I know it’s getting dated. My client asked me for some updates, which I did. I’m not sure when through the years there became problems. It looks fantastic in Firefox. In Safari and Chrome, the Contact Us button doesn’t line up. In Chrome, it looks like the whole pagetop div is bumped down an inch and shows a black background. I’m hoping for some quick fixes to make the page look good for now.

I work as a graphic designer, but am going back to school to learn more about front-end development. I’d like to redesign this website as a project when I’ve learned more about responsive design. It’s fun to be exercising my brain again. Web has changed a lot in the last 8 plus years.

Thanks for your help.

[John_Betong]

Hi @justshandi1 and a warm welcome too the forum.

Try:

1. open the page in your browser
2. right-click on “Contact Us”
3. select “Inspect element” from the drop-down list
4. highlight and modify the following:

#navbox {
    height: 39px;
    width: 630px; /* PLAY ABOUT WITH THE PIXEL WIDTH */
    margin-left: 358px;
    padding-top: 21px;
}

For a permanent solution modify the relevant CSS file that contains #navbox {width:640px;} to a suitable value.

[PaulOB]

@justshandi1

it looks like the whole pagetop div is bumped down an inch and shows a black background.

That’s because you are still using the outdated sticky footer technique which has problems in modern browsers because of the old opera fix. It stops the negative top margin on the wrap from working as you have it set to clear all floats.

Remove this rule:

/*Opera Fix*/
body:before {
	content:"";
	height:100%;
	float:left;
	width:0;
	margin-top:-32767px;
}

Remove that rule and test again in the browsers you want to support.

(There are much better ways to create sticky footers these days using flexbox, grid or even the display table properties)

@justshandi1

I’d like to redesign this website as a project when I’ve learned more about responsive design.

Yes the site needs bringing up to date as you have no real mobile support and these days most sites are initially accessed via mobile.

[justshandi1]

Thank you!

[justshandi1]

Thanks!