Topic: CSS: margins (Page 1 of 1) |
|
---|---|
Bipolar (III) Inmate From: New York City |
posted 07-12-2003 19:29
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. |
Lunatic (VI) Mad Scientist From: Massachusetts, USA |
posted 07-12-2003 21:29
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. |
Bipolar (III) Inmate From: New York City |
posted 07-13-2003 00:52
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. |
Lunatic (VI) Mad Scientist From: Massachusetts, USA |
posted 07-13-2003 06:56
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. |
Bipolar (III) Inmate From: New York City |
posted 07-13-2003 16:11
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 . . . |
Lunatic (VI) Mad Scientist From: Massachusetts, USA |
posted 07-13-2003 23:56
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? |
Bipolar (III) Inmate From: New York City |
posted 07-14-2003 01:27
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. |
Maniac (V) Inmate From: Seoul, Korea |
posted 07-14-2003 02:15
By way of explanation, the negative margins were an idea I got from the negative-margin centering trick at BlueRobot. |
Lunatic (VI) Mad Scientist From: Massachusetts, USA |
posted 07-14-2003 02:57
Oh, right, I guess margins *do* affect absolutely positioned boxes then. |
Bipolar (III) Inmate From: New York City |
posted 07-14-2003 03:45
Thanks! |
Maniac (V) Inmate From: Seoul, Korea |
posted 07-14-2003 04:41
No problem--that's what we're here for. |
Bipolar (III) Inmate From: New York City |
posted 07-15-2003 02:50
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. |
Lunatic (VI) Mad Scientist From: Massachusetts, USA |
posted 07-15-2003 03:09
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. |
Bipolar (III) Inmate From: New York City |
posted 07-15-2003 03:42
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. |
Bipolar (III) Inmate From: New York City |
posted 07-15-2003 14:47
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? |