position:relative why differences in browsers?

craptakular · 21 Oct 2010 at 01:07

Hi,

I cannot understand this... How come my HTML/CSS displays different things in ie, firefox, opera, chrome and safari?

I'm knackered now but will post up my mess tomorrow.

Why can't browsers display the same way? Maybe it's me who has made a total **** up here

I have created two divs with boxes in each and I want one to display on the left of the webpage and the second on the right.

As soon as I do this I cannot get the right positioned div to align with the left, consistent on this 5 browsers... it's driving me to drink.

What's the secret? Let me into the special club

otemu · 21 Oct 2010 at 07:25

Oxy said:
I cannot understand this... How come my HTML/CSS displays different things in ie, firefox, opera, chrome and safari?.......Why can't browsers display the same way? Maybe it's me who has made a total **** up here

This basically comes down to the fact that every browser renders content differently to some extent. Normally its actually better to write your page for firefox as its considered to be the most compliant. Microsoft has problems interpreting what is considered to be valid, modern-day CSS solutions. A lot of sites these day actually have different style sheets for IE,6, IE7 and IE8 which says it all really.

Oxy said:
I have created two divs with boxes in each and I want one to display on the left of the webpage and the second on the right.

As soon as I do this I cannot get the right positioned div to align with the left, consistent on this 5 browsers... it's driving me to drink.

What's the secret? Let me into the special club

Paste all code(or provide a link) we will be glad to help you out

reefoid · 21 Oct 2010 at 09:42

Paste your code here so we can take a look. TBH, I very rarely have to style for an individual browser, although I don't do IE6 anymore which helps!! If things don't look consistent across browsers, I try to look at an alternative that will work across the board. So much easier for ongoing support.

gord · 21 Oct 2010 at 09:50

Oxy said:
What's the secret? Let me into the special club

There is no secret. Just years of learning why and how CSS works in different ways. Eventually you learn the key inconsistencies and find ways around them. The best approach is to have all of the browsers open and iteratively test as you develop a site. That way you catch the differences early and can trace the bug.

That said, you shouldn't have any issues with the modern round of browsers. FF 3.5, IE8, Chrome all render nicely.

The issues really begin when you try backwards compatibility to IE7, 6, which still hold enough of a market share to have time invested.

helium · 21 Oct 2010 at 10:11

It is a horrendous pain, and IE will always be the biggest problem but you'll learn soon enough what kind of things to avoid or how to go about certain tasks.

Dj_Jestar · 21 Oct 2010 at 11:35

The biggest pain is Safari tbh. Renders differently on Windows than on Mac

IE is still a pain, but made easier with: http://www.my-debugbar.com/wiki/IETester/HomePage

FabienO · 21 Oct 2010 at 11:35

Use a 960 Grid or Blueprint. I found it helped a lot with cross-browser compatibility.

Also... welcome to the world of web building, where we all hate IE. Don't forget to validate and constantly check cross browser compatibility. I use NetRender.

p.s. I build for Chrome.

craptakular · 21 Oct 2010 at 12:01

deleted

Dj_Jestar · 21 Oct 2010 at 12:08

Where's your html/head/body tags? DOCTYPE? When someone says post all of the markup, they mean all of the markup

craptakular · 21 Oct 2010 at 12:11

Dj_Jestar said:
Where's you html/head/body tags? DOCTYPE? When someone says post all of the markup, they mean all of the markup

I don't need it because it gets inserted into wordpress where that stuff is already in there.

I'm creating custom pages in wordpress.

Maybe this is why it doesn't render right lol

FabienO · 21 Oct 2010 at 12:20

Build for Chrome or FF, then check it in IE. If it doesn't work, there are conditional statements.

Remember before I said sometimes the best thing to do is wipe the slate clean and redo it from scratch. Seems tedious but it really can help. Build the template, then import it into Wordpress. So .html first

craptakular · 21 Oct 2010 at 12:25

FabienO said:
Build for Chrome or FF, then check it in IE. If it doesn't work, there are conditional statements.

Remember before I said sometimes the best thing to do is wipe the slate clean and redo it from scratch. Seems tedious but it really can help. Build the template, then import it into Wordpress. So .html first

I've already built it from scratch once lol.

I think the problem with the page is the fact that I enclosed all the big leftside boxes in a div and all the smallboxes on the right in another div. This seems to cause all the problems.

Without the divs, like on my frontpage, using position: absolute; the objects position properly, except in IE. But I can fix that using a seperate style sheet where I can turn off all the CSS3 effects as they are a real problem in IE :rolleyes:

The downside to using absolute position is that I am going to have to create yet more div id's so I can position each small box individually.

Is this what you guys would do? or can anyone fix the issues with the wrapping divs I used for the boxes?

unwashed potato! · 21 Oct 2010 at 12:42

can you put it up online so we can see it? will probably take a few seconds to work out if we can see a working example

craptakular · 21 Oct 2010 at 13:36

Semi-fixed it.

I have removed all margins to all the boxes and got them consistently looking the same in opera, firefox and chrome.

Gonna save this version then try and workout a sensible margin system.

craptakular · 21 Oct 2010 at 14:05

Fixed it!!!!

What I had done was set the margins first, then tried to position the boxes, which was a total failure.

Lesson learnt is, position the object first then set margins.

Hell it works perfectly fine in opera, firefox, chrome and IE9!!!

gord · 21 Oct 2010 at 14:38

Those browsers are easy Oxy.. you could throw code at them all day long and they can interpret it nicely!

Get yourself the free microsoft VMs to test IE6 and 7 and then let us know how happy you are!

Dj_Jestar · 21 Oct 2010 at 14:40

*sigh*... how many times does this need posting?

http://www.my-debugbar.com/wiki/IETester/HomePage

gord · 21 Oct 2010 at 14:56

I've never used it and unfairly I already don't trust it... ever since I got burnt by emulations of the rendering engines I've used VMs.

Is that program accurate? And not just a viewer? The sites are functional to test? Does it also have something like IE Dev toolbar built in?

Dj_Jestar · 21 Oct 2010 at 15:08

They are functional, not just viewers. They use the actual engines found in the various versions of IE, not emulators. More info here: http://www.my-debugbar.com/wiki/IETester/HowDoesItWork

craptakular · 21 Oct 2010 at 15:10

gord said:
Those browsers are easy Oxy.. you could throw code at them all day long and they can interpret it nicely!

Get yourself the free microsoft VMs to test IE6 and 7 and then let us know how happy you are!

OK used that program that Jester suggested, it's very good!

My website is blank on ie7 and the absolute positioning doesn't display on ie6. It is perfectly visible and readable in ie8 but minus all the css3 effects, which doesn't matter.

Do I need to care about ie6 and 7?

How much more work is involved?