position:relative why differences in browsers?

Soldato
Joined
7 Jan 2007
Posts
10,607
Location
Sussex, UK
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 :(
 
Where's you html/head/body tags? DOCTYPE? When someone says post all of the markup, they mean all of the markup :p

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
 
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 :P

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?
 
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.
 
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!!!
 
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! :p


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?
 
Last edited:
is that theory one you adopted because you believe it or because you don't want to have to deal with ie6/7 problems? i don't understand when you say uk based custom so not bothered by them?

It's a gambling site, so my assumption is that most ie6 users will be those companies which haven't upgraded, in which case my site will be blocked anyway.

I will have to cater for ie6/7 if you lot tell me loads still use it on their home computers. I personally don't know anyone who uses ie6/7 outside of work.
 
Depends on you and who you're building for.

I personally like to believe I don't build for IE6, but I always check it just in case it's horrific. :P Even Google dropped support for IE6.

IE7 I do, just.

You're building it first then moving it into wordpress right? Not building straight in to wordpress..?

I'm essentially merely creating custom pages which I will merge into wordpress.

All I do is tell wordpress to overide it's default theme and use my custom page instead, with it's associated style sheet.

How would I go about supporting ie6/7? ie7 is a blank screen atm lol

Yeh, I'm building it in dreamweaver then uploading it.

EDIT: ie7 may actually work I don't know, the program Jester suggested crashes when opening an ie7 tab.

Maybe I best install my XP disk in virtualbox. How would I get seperate installs of ie6, ie7 and ie 8?
 
Last edited:
That does seem a lot. I assume these are global stats?

I would be shocked if 26% of the UK still used ie6/7...

How would I go about doing a separate style sheet for ie6/7?
 
Back
Top Bottom