PDA

View Full Version : margins dissapearing


ArtStudent
11-30-2014, 07:28 AM
Hello Fellow Dream Weavers!

I've been taking a class at my University on web design. All was going well, until I uploaded the files and found some very strange things.

Sadly, the professor is no longer available to help as classes are over, but the final submission is due on the 4th. Any help over the next few days will very much appreciated!

So the first problem is this:

I've added a margin class below the objects in cells, and the spacing looks great when previewed locally in a browser: http://thoreaubakker.com/3.JPG.

However, when opening in firefox, the margins become about half, and in chrome, they dissapear entirely:
http://thoreaubakker.com/2.JPG

Anyone have any tips about what might be causing this?

Thanks!
Thoreau

d a v e
11-30-2014, 10:29 AM
hard to say without code. upload the code or better still publish the site live or post to somewhere like codepen
and you should only use tables for tabular data, not for layout.

Ricky55
11-30-2014, 12:13 PM
Looks like a classic case of margin collapse to me. viewing locally shouldn't make any difference though. Read this for more info.

http://stackoverflow.com/questions/19718634/how-to-disable-margin-collapsing

Post your code for more info.

ArtStudent
11-30-2014, 02:54 PM
hey Guys,
thanks very much for the response.

Sadly, tables for layout is what we've been taught all semester, and is all I know, and it's too late to start from scratch before it's due on the 4th.

I've uploaded the code here live:
http://thoreaubakker.com/portfolio (http://thoreaubakker.com/work)

any suggestions appreciated greatly appreciated.

Thoreau

ArtStudent
11-30-2014, 03:24 PM
p.s. here is what it looks like on my local browser (ff or chrome).

I have a roll over effect on images (that's broken when live).
My menu text (arial / helvetica stack) is broken when live
AND my margins..

If anyone can give me some tips on how to fix some of my problems, I'd be grateful!

http://thoreaubakker.com/local.JPG

ArtStudent
11-30-2014, 03:25 PM
thoreaubakker (dot) com (other post is in moderation)

Ricky55
12-01-2014, 03:36 AM
I can't believe they've been teaching tables for layout in 2014. Frankly that's a disgrace IMO. In 2004 it might have been just about acceptable. Didn't realise you'd built with tables. I'll have a look tomorrow when in front of a desktop computer.

Regarding your rollover effects. If they are working locally you'll almost certainly have not uploaded the relevant JavaScript or css to the server. Either that or that paths to these said resources are incorrect. Generally when this happens the paths are pointing to a location on your local machine.

So you might have c:/user/my docs/my script.js
When you should have something like ../js/my script.js i.e a location relative to your HTML file.

I'll have a look and post back.

Ricky55
12-01-2014, 03:39 AM
By the way just watch the size of the images you are posting its broken the layout of the page on my iPad it's so large :)

Ricky55
12-01-2014, 03:45 AM
I'm not getting anything at any of these locations

thoreaubakker.com
thoreaubakker.com/work
thoreaubakker.com/portfolio

Could you check please.

ArtStudent
12-01-2014, 04:54 AM
Ricky55,

thanks for the responses and taking the time to check!

You were absolutely right.. it was my .css in the wrong directory :oops:.
Thank You!!

Can you see if this works on your iPad? Still ruff, but the functionality should be there:

http://thoreaubakker.com/test

Again, much much thanks.
Thoreau

Ricky55
12-01-2014, 10:53 AM
No problem mate happy to help you.

Yes it view fine on iOS.

One thing you could add is

<meta name="viewport" content="width=1100">

This just sets the width of the screen to be just a bit larger than your design. iOS will scale its self but its currently chopping a little off the right. This code will prevent that.

This code goes in the head of your document. Anywhere before the close of the </head> This would go on every page.

If you were making a responsive page you wouldn't use this but for your design it will work fine.

I actually think you've got the basis for a nice design here. Shame they taught you tables but hey thats not your fault. The thing is with CSS and HTML this would be so easy to create anyway. In fact easier than with tables.

If you need any more help post back.

Ps
Your margins seem fine now too, I take it that was down to the CSS file as well?

ArtStudent
12-01-2014, 08:35 PM
Hey Thanks for the kind words and the good meta-viewport tip Ricky.

I will include that for now, and then try and rebuild the site to be responsive after it's graded.

So I'll definitely be around the forum in the coming weeks as responsive will be all new to me.

Thanks again Ricky (and all!)

Thoreau

Ricky55
12-03-2014, 11:28 AM
No problem anytime.