4 replies to this topic

[rkonline]

http://www.rkdigital...lets/RKBITMAPS/

This is one application of the design I was writing about in my efficiency thread.  I basically decided that I wanted a more interesting-looking version of Photobucket.  The frontpage uses sprites but I'm still writing the sprite-mapping program needed to convert some of the other graphics over.  Some of the flickering I was seeing was from different browsers being stupid about positioning DIVs.  IE is smart enough to use the align/valign/text-align/vertical-align properties, but Firefox and Safari have to have margin/padding set to auto to both center properly and calculate their size.  There are still some issues to work out...some features produce a "blue screen" and the previews aren't real thumbnails.

[IBBoard]

I think you've got it backwards. From what I understand, IE is being dumb and doing it wrong, but Firefox and Safari are doing it right. Chances are, if Firefox is doing it one way and IE is doing it another then you can almost guarantee that IE is doing it right

text-align is for text alignment, it doesn't affect the block, so it won't affect layout and sub-element positioning (but the centralised text will obviously cascade down)

vertical-align is for vertically aligning inline elements (mainly images) within their parent block (e.g. a paragraph) and doesn't apply to most other elements.

With a quick search, I found this article about the behaviours and how to do it properly.

Hope that helps.

[rkonline]

Yeah, I did see that site while trying to figure out why they were ignoring the alignment properties.  Unfortunately, neither of their solutions works if you can't specify a fixed height.  Setting the margins to auto, what I ended up doing, doesn't make sense either because what the heck does that actually mean?  Both standards are a mess as far as spacing and positioning goes, even before they box you into a fixed pixel layout that breaks if the window or font size changes.  I almost wish they'd just start over and offer plugins for older browsers to translate HTML++ into HTML.

Edited by rkonline, 24 April 2012 - 02:37 PM.

[IBBoard]

Auto margins means that the browser picks them. You've not specified a fixed amount, and you've not said "do the default behaviour of no margin (or whatever is normal for that element)".

If you're in a 100ft by 200ft room and someone says "by default, sit in this corner" and then says "okay, now work out what the best distance is to be from each wall" (auto) then you'd (probably) stand in the middle.

The standards aren't a mess for spacing and positioning. There are some odd interactions once float gets involved (especially with margins) and some browsers have worse bugs than others, but if you're in a modern browser (IE8+, maybe IE9+, Firefox, Chrome, Opera) then the box model is fairly consistent and follows rules (margins merge between adjacent elements, spacing is within the box and doesn't merge, etc). The times you have problems are a) older browsers, b) newer versions of IE where you don't have a DOCTYPE tag (so they go into "compatibility" mode) or c) invalid markup (at which point all bets are off on what browsers might interpret)

If you're using fixed pixel layouts that break so readily then something is wrong and your site isn't ready for the Net. Fonts will change (Linux, Mac, or even just people who don't have Office 2010 and Calibri or some other font installed), people may scale the text for readability, and many, many other things will happen. My sites are fixed width and centre-aligned, but don't break because I'm selective about where I specify exact sizes. The web isn't a place for pixel perfection. Trust me, I worked for a company that had a design from a graphic artist who thought it could be pixel perfect, and I had the job of turning the annotated image into a template - we were in the era of IE6 and I just thought he was an idiot.

[rkonline]

That's exactly why I don't use fixed width/height panels for anything but images.  Not so long ago it was conventional wisdom to avoid fixed layouts, because it was foolish to believe that all fonts were going to be 20px high or all screens would be 1024px wide.  That's how you get a site where crap overlaps and bleeds through the edges of containers with lots of horizontal scrolling.  Open just about any site on the web with a browser older than IE8 and see how much is even readable let alone usable.  I think it's great that a certain browser last updated in December of 2008 can't even get plugins anymore because its developers broke a page that's essentially a list of links.

Anyway, I got my problem fixed, I think I'll take a vacation to the less stressful world of Win32 :P

Edited by rkonline, 26 April 2012 - 02:48 PM.