Topic: CSS: Margins #2

Well, my page seems to be passing CSS Validator and HTML Validator, but still doesn't pass Browsercam's test This last link is still active when I try and view- hopefully you can see as well.

How best to proceed?

Thanks.
CRO8

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

CRO8: I'm afraid you have to logged in to see the results. You'd need to screencap the page and drop us a link to that. See:
http://development.gurusnetwork.com/discussion/thread/2151/

___________________
Emps

FAQs: Emperor

yup. Thought so. Try public page. Nope- Expl 5.2 Mac ain't a working.

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

Still not working. I can see all of them except for IE/Mac.

Here's what I'm getting:

Ok...so we can see that it's not working.

What is the question exactly?

How to get his site design to work in IE5/Mac.


...anyone have a Mac?

Problem I need help with: Try and get my page to properly load in all browsers.

Running out of emails to use. Let me register a new one and re-post. Try to get MAC to atleast show up.
another 8 hour trial http://www.browsercam.com/public.aspx?proj_id=13261

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

If browsercam gives a description about why the site doesn't work with IE5/mac that would be incredbly nice to show us.

Right know i understand:
1) CSS Validator says "your site is ok"
2) Html validator says "your site is ok"
3) Browsercam says "your site is ok, but not for IE5/Mac"

Conclusion there is something on your site that is not compatble with IE5/Mac.
So your solution should be changing that "something".


__________________________________________
"Art has to be forgotten. Beauty must be realized."
Piet Mondriaan

Browsercam is a service that simply takes a screencap of your page in a browser that you specify. It's not a validator. You look at the screencap and try to figure out what went wrong. Right now, I think CRO8's trying to show us what his site looks like in IE5/Mac.

OK, since everyone seems to be sitting around waiting for something to happen...

I got a screencap up for you guys to see:


Here's how it's supposed to look: http://www.hotfrogdesign.com/index_cover.htm

Just got home from work- been nuts. Thanks ozphactor, you got a visual for us to see. Thats whats happening. I am puzzled, my code is valid but it will not be interpreted in Mac (which is why there is no picture on Browsercam!)

I am stumped and asking for any suggestions.

Thanks.
CRO8

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

"valid" doesn't in any way mean that it will do what you want it to do. It basically just means your syntax is correct and you didn't spell any of the attributes wrong

There's no way for the validator to figure out what your intentions are, and so no way for the validator to know if it will work.

Just wanted to clarify that point. I can't really say off hand what the problem is.

Thanks DL. Yeah I figured as much. Puzzling . . .

Ok, I've taken another look at it, and it looks like IE/Mac isn't reading a few of your positioning values. Namely, "top" and "left".

If you go through the CSS and remove all instances of "top", and "left", as well as their respective values, the result is almost identical to what it looks like in IE/Mac.

The 3 main navigation buttons are still there, you just can't see them. They're being pushed off the page because the negative margins are being rendered but "top" and "left" are not.

An even more puzzling aspect to all this is that the positioning property "right" seems to be working... correctly. The contact button is sticking to the right edge of the page just like the "right: 2%" told it to do. Once again the "top: 77%", isn't being rendered.


This is all really weird because the properties "top" and "left" were implemented before "right" and "bottom". Therefore, we had some older browsers that rendered the first two, but not the latter. What we're seeing is a relatively modern, standards-compliant browser that only understands "right" and "bottom", but not "top" and "left". That's absurd.

ozphactor- thanks. What a pain. I guess one of my options is to put everything in tables . . . ?

Well, that is an option.

The way I see it, though, whenever you start putting things into tables, you sacrifice a certain amount of flexibility. Even if you opt for a hybrid table+CSS trick, you'll still be limited by having your content in a table. The great thing about CSS is that if I want something there, I can put it there. I don't need to add/remove/resize any table cells to do so.

Why resort to tables when the same thing can be accomplished so elegantly with CSS only? Judging from the fact that your pages renders more or less correctly in all browsers except IE5/Mac, I think we can safely assume, this was not of your doing.

The great thing about your page right now is that it's in what I like to call "optimal debugging mode". That is to say, the page is stripped down to it's bare essentials, and anything that doesn't relate to the problem at hand is removed. All you have is four images, each contained within it's own div. The only other thing is a background image which we can use as a reference point. It *should* be a piece of cake. We *should* have our work cut out for us.

To be honest, I really like the way your page flows. It's great that everything is so liquid and rescalable. I'm almost certain this can be solved one way or another.


My advice: Don't give up just yet.

Fiddle. Take things out and put things in, and try to come up with something that works as you expect it to, even if it's not what you're going for. Then modify it until you notice something specific that's not working as it should. When you've narrowed down a specific issue like that, look for an alternate way of doing the same thing which works around the problem.

I suspect that the absolute positioning + negative margins might be confusing IE 5/mac.

This is one of those things that you won't likely figure out without being able to sit at a computer with the problematic browser and fiddle with the page.

Good advice, Slime... unfortunately, though, not many of us have access to a mac...

Okay - sorry. I do, but I've been out of the loop for a while. I can confirm that Safari look they way you want it to, and IE 5 looks the way oz showed you, and I can't help with why it is so. Sorry.

I've got a really busy day today, but if you post changes I'll try to keep an eye on this thread, at least in the evening, and try it again periodically.

sorry to have overlooked this!

Steve


[This message has been edited by Steve (edited 07-22-2003).]

hey thanks for the support! OK, then. Actually my day job is so busy- and tonight I am going to a NYPHP meeting. So it may have to be put off until tomorrow evening. I will keep you posted.

Thanks!

I'm sorry for giving this such a cursory look, but ... why the huge negative margins? "margin-top: -157px;". Is it possible IE 5 Mac is honoring these and rendering the image ABOVE the viewport, thus making them effectively invisible?

Just a thought...

Yeah, that seems to be what's happening. Read through the entire thread... I already noted that.

Oh - right. Sorry - I did miss that. Was paying too much attention to your discussion of right, top, left, bottom.

I'm thinking that it's not that IE Mac doesn't understand "top" and "left", but rather that it honors the negative margins MORE.

CRO8 - did you try removing the negative margins? What are they there for anyway?



[This message has been edited by Steve (edited 07-23-2003).]

Unfortunately, the negative margins are what CRO8 uses to position the elements correctly.

For example if the background image is 77% from the top, then the rollovers are 77% from the top, and the negative margin-top is used to push the rollover a certain number of pixels up.

Negative margins can be extremely useful in this way, allowing you to replicate positioning that was previously only possible with tables.

And frankly, I'm hoping we won't have to resort to the latter.

Steve

Yeah- Oz is correct. In order for me to make it so my page proportionately resizes in different screen resolution settings- I needed to use negative margins (Suho?s suggestion). I think that is the problem. The only difference between the contact button and the other images is that contact does not have a negative margin, so the browser is only interpreting the 77% top.

I took out all negative margins for the orange images and positioned them in absolute pixels. http://www.browsercam.com/public.aspx?proj_id=13721


what suppsed to look like: http://www.hotfrogdesign.com/index_cover2.htm

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

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

Getting closer - at least IE5 and Safari look the same. Unfortunately, "contact" is in the "water", the background graphic. and 'interactive photography" isn't sitting on the white bar, but looks like progress


[This message has been edited by Steve (edited 07-23-2003).]

K, I gave this a shot, with none of the negative margins or all that unnecesary positioning either. Also converted to an xhtml strict doctype.

Any one wanna see how this looks on ie5 mac? http://in-dented.com/temp/index_cover.htm

DL- how did you postion the elements without usual CSS <div> tags? xhtml?

They are in a <div>.

{{edit for clarification: <div>'s have *nothing* to do with CSS. They are an HTML element. Like any other HTML element, you can specify style attributes for them via CSS, including 'position'.}}

But you don't need a <div> for each image. They simply line up naturally at the top of the <div> as they should. You also don't need to specify their left position. The background image runs 30px down from the top of the <div>, as the CSS tells it to.

If you were to need to position each actual image, for some other purpose, you still don't need a <div>. All a <div> is is a 'blank' block level element. You give the img the id instead, and it will work the same.

The 'contact' graphic is in it's own <div> nested inside the main <div>, but it actually doesn't have to be - you could just give the <img> the id of "contact" and remove the <div> tags and the styles would be applied to it the same as they are now.

XHTML is simply more structured HTML. More "proper" you might say.



[This message has been edited by DL-44 (edited 07-23-2003).]

Someone check that thing in IE5/Mac. Browsercam's still being a bitch...

Here's where we stand: http://www.browsercam.com/public.aspx?proj_id=13729

Looks like we're making progress. Still, there's little things here and there that need fixing.

Thanks DL- the page looks great- I will look into XHTML. I checked the one I did (w/o neg margins) on my Mac at work and yes- we are making progress. All images are present and located in proper position (of course, needs tweaking). Just need to go back and make minor edits. I think I will forget about negative margins- and size it in absolute pixels and not worry about it resizing in browser resolutions. I will design it with 1240 screen res in mind and put the contact image right aligned in a table set to 90%, so that way when the browser screen res changes, that little itty bitty contact image remains under the water image and all the way to the right of the screen. I am kind of sad that I cannot develop this page so it resizes in different res settings- but all well.

Feedback?

Thanks!
CRO8

quote:

---

I am kind of sad that I cannot develop this page so it resizes in different res settings

---

Has anyone been able to check my version on a Mac? It looks great on IE6, Mozilla 1.4, NN 7.0 and is fully liquid as you wanted.

Why, if this works, why would you resort to a table?

Is it the xhtml? If so, don't be put off. xhtml is html. It's just a little stricter in that you have to close all of your tags, you have to be certain that any nested elements are properly nested, etc. You can read up on it here - http://www.gurusnetwork.com/tutorials/html/xhtml/xhtml1.html
I recommend to anyone coding html that they bump it up to xhtml.



[This message has been edited by DL-44 (edited 07-23-2003).]

Oh DL beat me to it . . . I will reply later this afternoon when I have more time! In the meantime . . .

Hey- I really appreciate everyone's support with this project. 30 replie. Great.

Check this out guys. My photography page where I also used negative margins. I am looking at it on my Mac at work- his is exactly the way I intended it to be viewed. Weird!

http://www.hotfrogdesign.com/photography.htm

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

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

Yep, I got a hold of an iMac at this, er, university place. The photography page looks fine.

Anything you want tested in IE 5.1 in OS 9.2, lemme know in the next, oh... 2 hours?

Thanks DL + Oz. Oz- just got back from work 11pm, whew. Thanks for the 2 hour offer. I am going to go with what DL suggested and look into xhtml . . . unless someone can exlplain why my photography page looks fine using negative margins, but main page looks screwy.

The XHMTL is not the issue. As I said, it's just HTML with a couple extra rules. I mainly went to XHTML for the sake of using a 'strict' rather than 'transitional' doctype. I happened to have an xhtml1.0 strict doctype handy to copy and paste, so that's what I used. A 'transitional' doctype will make new browsers handle things a little differently than it should, so a strict doctype is always preferable (IMO).

Look at the code - it is plain old HTML. you just have to be more careful about structure and closing tags when you move up to xhtml.

Please get the idea that xhtml is something 'different' out of your mind. The method of setting up the layout, and the CSS that I used are what made this layout work - not xhtml.

Apparently, the combination of absolute positioning and negative margins causes IE5/Mac to fail. It's a known bug.

This is a >little article I found<, and while it doesn't relate exactly to what you're trying to do, it does contain a CSS hack for IE5/Mac specific rules that could come in handy.

[EDIT: You might also find this page off the Apple Developer Network helpful: >straight from the source<]



[This message has been edited by ozphactor (edited 07-24-2003).]

OK DL got it. OZ, thanks for the articles. Finally got hom from work at a decent hour. I am going to dive into this and re-post my progress.

Thanks again guys.

Well, I didn't get home from work at a decent hour, and when I did http://in-dented.com/temp/index_cover.htm
gave me a "server not found" error.

Sorry. I'd give you feedback, but can't find a page to point a browser at. shold have more time tomorrow. Give me a good link and I'll tell you what i see.

dammit.

having problems with my domain at the moment.

I'll get back to you...

Status
I messed around with it last night and tried to get rid of all negative margins- like in my photography page (see below), and just use positive margins. This is what I got. On Mac, images are present but located 1/4 up the page. http://www.hotfrogdesign.com/index_cover3.htm

Hey Steve- DL's is the simplest version I may try and implement. You can test this: http://in-dented.com/temp/index_cover.htm

Also check out my photography page. Uses negative margins and looks fine on my Mac at work. This is the only thing that keeps me from proceeding to use DL's version. Keep thinking this can be done! http://www.hotfrogdesign.com/photography.htm

Oh yeah and DL- The reason why I said I had to use a table (width=90%) on my contact button is so it remains in the bottom right corner and resizes horizontally, but stays below the image. Unless I can give top = pixel measurement so it does not move up for down, and left = about 90% so it can slide horizontally. This sounds like the old fashioned way of doing things- I know

One last thing- I want to design this page in 1024, but I also want people with 800x600 to see everything on the screen. I may be asking for too much- what what the hell. I am very happy with the progress we've made and learning lots of good stuff. I trust you guys and will use whatever we decide together is best solution.

Thanks!
CRO8

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

Again, my version doesn't seem to have been Mac tested yet, and my site is currently down so it can't be tested at the moment.

Assuming it does work, however, the contact button will move just as you said you wanted it to. No need for a table - tables won't do anything in this case that the image on its own can't be made to do with the proper styling.

When I get home, if my site is still down I'll post the code here so someone can test it on a Mac.

I think you are still overcomplicating this, and possibly missing the simplicity in the code I posted. You don't need to position each graphic! That's a big part of what is causing the problems. You seem to be trying to exert control over somthing that will do what you want all on its own.

Thanks, looking forward to the code DL. I will be away from my computer this weekend attending a BBQ. I will most likely check back Sunday evening. Been so busy these past few weeks- with work and weekend plans- leaving little time for anything else, but I am determined to make this work!

Thanks.

DL's serv is still down, so I've uploaded the code ^above^ and set it up here:

http://ozphactor.home.comcast.net/asylum/hotfrog/

Well, I spent as much time screwing with it as I could afford this weekend, and couldn't get it all worked out. I will tell you one thing that helped: adding a height to the #background. Mac IE doesn't seem to take the background image into account when it draws the box, so it was collapsing to the height of the only content it was aware of: the "interactive print photography" graphics.

top: 50% seemed to put it in a good place but not dynamic (odd), and I never did get the contact button below the water.

Sorry

Thanks DL, Oz, and Steve for your assistance with this project. Been exposed to xhtml- good thing!

I will tell you how it works out.

Thanks again.

I'm a tad mystified as to why you have the water graphic as the background to a div instead of the background to the page itself. For instance (ignoring the navigation elements for the moment), adding this code to the body rule works just fine in IE 5:

background-image: 

url("images/water1280.jpg");

background-repeat: 

repeat-x;

background-position: 

0 50%;

}

The water graphic stays fluid (heh) with respect to the page height as the page is resized. With that moved to the body css rule, all you have to worry about is positioning the navigational elements.

Justa thought...

Steve - he did have it to the body. I just found it easier to control if it was in one <div> together.

Who this is good reading i do learn a looot from this.
If one off the MS' would be so kind to save this thread some day....

<edit>spelling</edit>
__________________________________________
"Art has to be forgotten. Beauty must be realized."
Piet Mondriaan
bookmarks

[This message has been edited by Rinswind 2th (edited 07-28-2003).]

I only poped in here bacause I though, 40+ posts about margins... what's up with that?

If anyone here ever wants me to test something on a Mac, just shoot me an email and I'll see what I can do. I know how annoying it can be to have someone tell you something breaks in a browser you can't test on.

Anyways, I've got a gruling 5 and a half hour break between classes tommorow so I'll have some time to play with this a little in the Mac labs and I'll see what I can do.

Just wanted to drop a note and say how thankful how helpful you cool cats were! and yes . . . you wear hats.

Thanks!
CRO8

My family members discourage me from wearing hats. They say I look foolish (not an exact quote exactly), but thanks anyway