Topic: CSS: margins

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).]

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.

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).]

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.

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).]

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".

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).]

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.

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.

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).]

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.

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).]

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.

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

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).]