HTML Browser conflicts

[Landfill Elektronikz]

Any clever bastards out there know why, when I fiddle about with HTML settings for my blog, the results will often vary in different browsers? I can get something that looks just how I want it in, say, Firefox, yet will look wrong in IE. Right now it actually looks perfect in IE, but there's a white bar running across the top of the page in Firefox and I'm buggered if I can figure out how to remove it. Are there certain commands that only work with certain browsers? For the love of christ, someone explain it to me

 

[DJ PIMP]

Thats the nature of the beast, cross-browser development is a bit of a pain.

Can you post a link to the page? Helpful to see that actual HTML/CSS.

 

[seahorsegenius]

That's web standards killing you. Just make it all XHTML, then validate it.

 

[joanofarctan]

Just make it all XHTML, then validate it.

This doesn't work! Because Explorer couldn't care less if your page validates or not.

It's pretty much all down to Internet Explorer violating Web Standards. IE is single-handedly now causing a big loss of productivity in any internet venture anywhere in the World. It's a criminal in the mind of a web developer. That's not a metaphor. MS should literally be sued for this.

You'll find Mozilla (KHTML) based browsers such as Safari & Firefox render quite consistently, with only minor differences.

My advice is to design for these. Use javascript to catch ie users. Very politely tell them that their browser does not play nice with the internet and that, since the point of a browser is to browse the internet, they should probably find an alternative. One that acknowledges the internet exists around basic rules like CSS 2.0 and not just comfortable market shares.

 

[Landfill Elektronikz]

yeah, I hear what you're saying and I can't stand IE either, but the fact remains that 50% of visitors to my blog are still viewing in IE, so I feel like I have to cater for that.

I guess if I'd just stuck with a standard blogger template I'd be okay, but I've been gradually modifying this one for the past year in my own clueless way. I can't help tinkering with things!

'Cross-browser development' sucks

 

[Rambler]

Nick - Ditto all of the above, of course, but with regard to Blogspot blogs displaying crrectly I've found that Blogger's f*cking header bar that users have no control over really screws up the spacing and margins at the top of the page. Your code may well be OK for both IE and Firefox, but that Blogger search bar thing makes the display a bit unpredictable. I don't know much about HTML and CSS beyond the basics, but I found that with trial and error I managed to get my top margins to work OK on most browsers (IE5 on the Mac still looks crappy, but then it always will). Try experimenting with your margins for 'body' in the template - also, check that you've got the 'body' background set to black; that might get rid of the white line as well. Just suggesting things to play around with; someone who knows more might be able to give you a better answer.

joanofacrtan - Since I know zilch about writing Javascript, is there anywhere I might pick up a bit of code that does what you're describing that I can drop into my template?

 

[droid]

Joan's comments above regarding IE are OTM... I deal with this problem everyday..

Blogging throws up its own particular range of problems as most of the formatting n the standard blog templates are based almost entirely around CSS, and DIV based layout.

This is great for accessibility, W3C standards etc, but there are significant discrepancies between how the Mozilla Browsers (Firefox, Netscape etc..) and IE handle CSS, with IE basically fucking up and not supporting many of the standard attributes that Mozilla supports. The main problems tend to come with spacing, text flowing properly inside containers, margins and rulers.... and the solutions tend to involve a lot of horrid little CSS hacks and obscure html tricks..

Ill have a look for a list of CSS IE vs CSS Mozilla problems and pop them up... If ya think its bad trying to get something working on two browsers at the same time, you should try getting your sites working on Mac and PC in Firefox/Ie 4.5 - IE 6/Netscape 4.6 - 7/Safari and Opera...

Now thats fun!

 

[Landfill Elektronikz]

Try experimenting with your margins for 'body' in the template - also, check that you've got the 'body' background set to black

Cheers, mate - you nailed the problem. I didn't have any colour set for the body background so it was just showing white. Now it looks just right in Mozillla and IE. Me happy....till the next time I start messing with it...

 

[Rambler]

Nice. Looking good from here.