7 replies [Last post]
pnguine
Offline
newbie
vancouver, canada
Last seen: 18 years 13 weeks ago
vancouver, canada
Timezone: GMT-8
Joined: 2003-07-29
Posts: 5
Points: 0

Hi. I have been trying to set up a small, simple site for my son's soccer team using it as an exercise in learning 'dhtml'. As it comprises elements of html, css, and javascript I'm not sure if this is the right forum for this but the trouble I am having does seem to be centered around the css.

This is the 'main' site - http://www3.telus.net/bikim/lightning/

and this is the 'test' area - http://www3.telus.net/bikim/lightning/test/

The main text area is a single div into which the content is inserted through the innerHTML property (I know some people don't like it but it works for me and it's supported by the 'big' browsers).

The three different contents are javascript String variables found in the text.js file. The 'main' text uses four divs controlled by css rules in an external stylesheet. They have borders around them (in the test version) so they are more visible. My problem is that I can't get it to work in ie6 and nn7 at the same time. The test version works best in ie6 and the main version works best in nn7.

I'm stuck. I'm spending ten times more time trying to find the answer on the internet than actual coding. Almost all the 'cross-browser bug' sites seem to stop at ie5/5.5 or nn4/6. I think a lot of things have changed with nn7 and ie6 (again). I've tried text-align:center, margin-left: auto, margin-right: auto, wrapping divs in centered divs - if something works in one browser it breaks in the other.

I would greatly appreciate any help. Even a pointer to some place where this has already been covered would be good.

dJomp
dJomp's picture
Offline
Enthusiast
Last seen: 5 years 38 weeks ago
Joined: 2003-03-23
Posts: 422
Points: 0

divs, centering, ie6 and nn7

Try http://www.csscreator.com/css-node/308 - note the container DIV...

You know you're a geek when you try to shoo a fly away from the monitor with your cursor.

pnguine
Offline
newbie
vancouver, canada
Last seen: 18 years 13 weeks ago
vancouver, canada
Timezone: GMT-8
Joined: 2003-07-29
Posts: 5
Points: 0

divs, centering, ie6 and nn7

Thanks - I'll try that shortly.

pnguine
Offline
newbie
vancouver, canada
Last seen: 18 years 13 weeks ago
vancouver, canada
Timezone: GMT-8
Joined: 2003-07-29
Posts: 5
Points: 0

divs, centering, ie6 and nn7

Now it looks fine in IE6 but in NS7 it loses all vertical box positioning and the last div doesn't center, and the little soccer players won't center in the div unless I use the <center> tag in the html.

I've posted the changes to the 'test'url from above.

dJomp
dJomp's picture
Offline
Enthusiast
Last seen: 5 years 38 weeks ago
Joined: 2003-03-23
Posts: 422
Points: 0

divs, centering, ie6 and nn7

I can't get at the source - the main body seems to be written with a javascript command. Any chance of looking at the HTML source for the main body?

You know you're a geek when you try to shoo a fly away from the monitor with your cursor.

pnguine
Offline
newbie
vancouver, canada
Last seen: 18 years 13 weeks ago
vancouver, canada
Timezone: GMT-8
Joined: 2003-07-29
Posts: 5
Points: 0

divs, centering, ie6 and nn7

Thanks for looking. This works for me in ns

http://www3.telus.net/bikim/lightning/test/text.js

dJomp
dJomp's picture
Offline
Enthusiast
Last seen: 5 years 38 weeks ago
Joined: 2003-03-23
Posts: 422
Points: 0

divs, centering, ie6 and nn7

Well yeah, that's one way of doing it I suppose... guess I was feeling lazy Wink

Ooh it's all changed since I last looked, I've got a scrollbar for the main DIV, but it looks like those little keepie-uppy dudes are centered now, well in IE6 at least.

But you told us that already. #sigh# Not awake today...

Call for someone with NS7!

You know you're a geek when you try to shoo a fly away from the monitor with your cursor.

Anonymous
Anonymous's picture
Guru

divs, centering, ie6 and nn7

Thanks all. I got it sorted out, sort of. It seems like it was something to do with the different box positioning interpretations in the browsers.

I started almost from scratch and used %age positioning and margining to get the centering I wanted and fiddled about with the absolute/relative thing until both browsers were doing roughly the same thing.