MemeCode - Blog

Site Update Mockup

Date: 24/6/2005

I'm working on a site update mockup and it's working fine in Firefox and IE but the title is broken in Opera. 2.2% of the people coming to this site use Opera, so I'd like to get the title looking correct for them too. No I'm not going to use an image instead, if it comes to that then the Opera users will just have to live with it.

Basically the problem is that Opera doesn't render position: absolute; elements the same way as Firefox and IE. It doesn't take into account the text-align mode of the container element for some unknown reason. This is probably just a bug in Opera but if there is some way to work around it then great, let me know. The style in particular is .title2 in the css.

Update: I've got things sorted out for the 3 main browsers that people use: Firefox, IE and Opera. I had to put 5 different hacks in the CSS to get it to work just right.

IE: to stop IE expanding some div's to the height of the default font I had to use 'font-size: 1pt;' on some css classes.
IE: to work around the lack of proper 'border: 1px dotted;' support I used an underscore on the front of a second border definition (with a solid line) which IE will parse and use but other browsers ignore.
IE: I had to add a id to the copywrite link to make it turn the correct colour. Other browsers let you do it by class or a child selector.
Opera: doesn't correctly support 'position: absolute;' on tags with centered or right aligned containers. So instead, because I had a fixed width layout anyway I hardcoded a padding on the container div to shift the text into roughly the correct place. (Ugly I know)
All: I thought I'd be clever and create the 3d button look on the menu bar by adding a 1px border-left with the highlight and a 1px border-right with the shadow. But browsers somtimes overlap the elements by a pixel seemingly randomly destroying the effect, so I gave up on that idea, made the 3d highlight into a 2px wide image and applied it to the left edge of all the anchors. Not as neat, and causes an extra HTTP get for the image but more robust.

I'm not entirely convinced this new layout is the best way to go. I need some sort of full width version for long pages. And I don't have it setup for google ads yet either. But other than that I'm pretty happy with the look of it.

Comments:

Bardo
25/06/2005 8:37am

It is probably me who is that 2.2%, although I wouldn't mind to share this 2.2%
Anyway, I've sent a bug report to Opera about it - it is said that they actually read those reports :-)

Bardo
25/06/2005 8:56am

I noticed another difference in the display: the lines underneath the words 'Commercial' and 'Freeware' are straight (_________) in Firefox and Opera, but are dotted in IE (------).
But that may also be a bug in my computer.
Nevertheless, since it is said, it might be of use. Who knows?

Bardo
25/06/2005 9:21am

And more good news: Safari also has no problems. (Did you already buy that Mac? :-)

fret
25/06/2005 10:32am

I think the dots appear in all the browsers but they are more course, and thus easier to see, in IE.

I'm watching some Mac mini's on ebay waiting for the right combination of cpu, price and feedback rating. I lost the offline auction last week, and I'm not sure by how much.

Carlos Rocha
25/06/2005 4:06pm

Sorry Bardo...but you can only be 1.1% :)
I use Opera for years and I love it, and can confirm the issues. Memecode centered with a beautiful shadow in Firefox and IE, and left aligned with the shadow centered in Opera. But I can live with it, and the page design is nice

tozz
26/06/2005 11:08am

There's rarely any use for position: absolute, and it often results in more conflict than use. Also, text-aligning should only be used with text, nohing else :) Also, negative elements are not allowed, and I really don't see the use for them here. Just some comments from a damaged coder :) I don't have the time to go trought the code right now so I can't really give you any specific hints :/
Btw, the dots are dots in Firefox. IE doesn't support dotted lines, only dashed.

fret
27/06/2005 4:23am

I've decided to ditch the "text-align: center" and use a fixed padding to get Opera to render the title in the right position. It works but it's a ugly hack, if the text size changes it won't be centered accurately.

Oh well, it still looks alright even if it's not "pixel perfect".

fret
28/06/2005 5:16am

I'm concerned with the fixed width of the layout. It's not very flexible for small screen systems. Is there any way of making the left and right shadows dynamic? I couldn't get them to work with a dynamic layout. Although maybe I wasn't trying hard enough.

I don't suppose anyone reading this can get the width of the content area to be flexible?

From:

Email (optional):

(Will be HTML encoded to evade harvesting)

Message:

Remember username and/or email in a cookie. Notify me of new posts in this thread via email.	BBcode: [q]text[/q] [url=link]description[/url] [img]url_to_image[/img] [pre]some_code[/pre] [b]bold_text[/b]

Sitemap