Topic: CSS: margins (Page 1 of 1) Pages that link to <a href="http://ozoneasylum.com/backlink?for=11007" title="Pages that link to Topic: CSS:  margins (Page 1 of 1)" rel="nofollow" >Topic: CSS:  margins <span class="small">(Page 1 of 1)</span>\

 
CRO8
Bipolar (III) Inmate

From: New York City
Insane since: Jul 2000

IP logged posted posted 07-12-2003 19:29 Edit Quote

Few months ago Suho, CPrompt, Hiroki, and a few others helped me with this page. I learned that CSS allowed me to position my images, and more importantly, that margins helped keep images in proportion as the screen resolution changed.

Now I am finding time to return to this project- and tested the page on my Mac at work. Page was all screwy- it was not interpreting margins command properly. This leads me to this question:

How do Macs interpret margins in the following code?

#interactive_big
{
position: absolute;
left: 5%;
top: 77%;
margin-top: -157px;
}

#print_big
{
position: absolute;
left: 5%;
top: 77%;
margin-top: -157px;
margin-left: 170
}

#photo_big
{
position: absolute;
left: 5%;
top: 77%;
margin-top: -157px;
margin-left: 254
}

Thanks.
CRO8

[This message has been edited by CRO8 (edited 07-12-2003).]

[This message has been edited by CRO8 (edited 07-13-2003).]

Slime
Lunatic (VI) Mad Scientist

From: Massachusetts, USA
Insane since: Mar 2000

IP logged posted posted 07-12-2003 21:29 Edit Quote

The page doesn't have a doctype. Don't even bother trying to work out CSS problems unless your page has a doctype; without it, browsers render your page the way they did years ago, assuming that you don't know anything about web standards. A list of valid doctypes is available at http://www.w3.org/QA/2002/04/valid-dtd-list.html . Use the one that corresponds to the version of HTML that you used, make sure the page still works in the browsers you've already tested it on, and then we can move on to looking at problems in mac browsers.

CRO8
Bipolar (III) Inmate

From: New York City
Insane since: Jul 2000

IP logged posted posted 07-13-2003 00:52 Edit Quote

Alrighty Slime- thanks for your help. Bare in mind I am using Dreamweaver to do quick layout and will go back and hand tweak. After trying several DOCTYPE combinations- "HTML 3.0" works.

OK- I am now curious how this puppy looks on Mac platform.

Thanks.
CRO8

ps- I fixed the page link in my original post. Correct link now . . .

[This message has been edited by CRO8 (edited 07-13-2003).]

Slime
Lunatic (VI) Mad Scientist

From: Massachusetts, USA
Insane since: Mar 2000

IP logged posted posted 07-13-2003 06:56 Edit Quote

Actually, despite the fact that the HTML 3.0 doctype works, I would strongly suggest using the HTML 4.1 doctype instead (or at least the HTML 4.0 doctype), since HTML 3.0 is incredibly old. That may cause a couple of problems, but it's probably better to work out the problems than to stick with an HTML 3.0 doctype.

I believe the most recent version of Dreamweaver has a built-in option to output a doctype, by the way.

CRO8
Bipolar (III) Inmate

From: New York City
Insane since: Jul 2000

IP logged posted posted 07-13-2003 16:11 Edit Quote

OK Slime. DOCTYPE 4.1 it is. Browser is interpreting everything except margins. hmmmmm. . . . BTW I hand coded everything- just dropped it into DW- which I guess doesnt make too much sense . . . anyway I tested the page in WordPad- same problems. Let me do some digging . . .

[This message has been edited by CRO8 (edited 07-13-2003).]

Slime
Lunatic (VI) Mad Scientist

From: Massachusetts, USA
Insane since: Mar 2000

IP logged posted posted 07-13-2003 23:56 Edit Quote

Oh, hmm, maybe I should have said this earlier: I don't think margins even do anything to an element when you're using absolute positioning on it. Perhaps you meant to use padding?

I also notice that you have lines like "margin-left: 170" which should really be "margin-left: 170px".

CRO8
Bipolar (III) Inmate

From: New York City
Insane since: Jul 2000

IP logged posted posted 07-14-2003 01:27 Edit Quote

Problem solved. Jesus, I am embarrassed . . . missing px;. Ugh. Thanks man. I will now always use DOCTYPE in my pages. And regarding using margins- its the advice I received from Suho- which makes the page resize proportionately in different browser resolution settings. If you disagree- by all means say something.

Thanks again Slime.

[This message has been edited by CRO8 (edited 07-14-2003).]

Suho1004
Maniac (V) Inmate

From: Seoul, Korea
Insane since: Apr 2002

IP logged posted posted 07-14-2003 02:15 Edit Quote

By way of explanation, the negative margins were an idea I got from the negative-margin centering trick at BlueRobot.

And of course margins affect an element with absolute positioning. Why wouldn't they? Just because margins are outside of the border doesn't mean they aren't part of the box model.

CR08: Yeah, you forgot the units.

Slime
Lunatic (VI) Mad Scientist

From: Massachusetts, USA
Insane since: Mar 2000

IP logged posted posted 07-14-2003 02:57 Edit Quote

Oh, right, I guess margins *do* affect absolutely positioned boxes then.

Anyway, glad that was all that was wrong. In the future, try using the validator ( validator.w3.org ) and the CSS validator (linked to from that page) to check your code for problems like that which might be causing the problem.

CRO8
Bipolar (III) Inmate

From: New York City
Insane since: Jul 2000

IP logged posted posted 07-14-2003 03:45 Edit Quote

Thanks!

Suho- thanks again for your help months ago. Whew- got me out of a jam. My client wants me to re-desing his site and guess what? . . . CSS and margins will play a big part!


CRO8

[This message has been edited by CRO8 (edited 07-14-2003).]

Suho1004
Maniac (V) Inmate

From: Seoul, Korea
Insane since: Apr 2002

IP logged posted posted 07-14-2003 04:41 Edit Quote

No problem--that's what we're here for.

And don't forget to use the validator, like Slime suggested--it may save you some headaches.

CRO8
Bipolar (III) Inmate

From: New York City
Insane since: Jul 2000

IP logged posted posted 07-15-2003 02:50 Edit Quote

Sorry for my inexperience using the CSS Validator. This is what the Validator said about my page. I think its the negative margins thats causing the errors because it did not flag #contact, which does not use negative margins.

Can someone assist me in analyzing the results?

Thanks.
CRO8



[This message has been edited by CRO8 (edited 07-15-2003).]

Slime
Lunatic (VI) Mad Scientist

From: Massachusetts, USA
Insane since: Mar 2000

IP logged posted posted 07-15-2003 03:09 Edit Quote

I'm not sure if underscores are allowed in class names. However, I'm pretty sure that hyphens (-) are allowed, so you might try using those. The negative margins should be fine.

I find it strange that it's dying on :hover. I'm also not really sure why it doesn't like the "top" and "right" values. Try fixing the class names and then we'll see what errors remain.

Oooh - the reason it's choking on the last two things is because you specified CSS1, but those are CSS2 things. If you validate it with "CSS version 2" selected as the profile ( http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.hotfrogdesign.com%2Findex_cover.htm&warning=1&profile=css2 ), the only errors that appear are the ones related to the underscores.

CRO8
Bipolar (III) Inmate

From: New York City
Insane since: Jul 2000

IP logged posted posted 07-15-2003 03:42 Edit Quote

Ha! I get it. If it flags a particular line of code, get creative and play around with it. OK cool. I will check it on my Mac tomorrow at work.

Thanks again Slime.

CRO8

CRO8
Bipolar (III) Inmate

From: New York City
Insane since: Jul 2000

IP logged posted posted 07-15-2003 14:47 Edit Quote

Well I just checked this page at work on my Mac and the three orange menu options do not even appear. The contact button is way up in the upper right hand of the screen. It passed the CSS Validator with flying colors- I guess now I have to figure out how to get IE Mac to interpret is correctly. Maybe play with it some more. Even then- how can I garauntee it will pass NS Mac? Mozilla Mac?

Posted in Site Reviews . .

[This message has been edited by CRO8 (edited 07-16-2003).]



Post Reply
 
Your User Name:
Your Password:
Login Options: Remember Me On This Computer
 
Your Text:
Loading...
Options: Show Signature
Enable Slimies
Enable Linkwords

« BackwardsOnwards »

Show Forum Drop Down Menu