Netscape 7 text-align center issue...

[WartookMan]

I have tried to code my site according to XHTML 1.1, and CSS2 standards. However, under Netscape 7 the layout of the following page, doesn't quite work properly. It seems fine in IE 5.x/6.01, but Netscape just doesn't tow the line. The url is:

http://www.lwwcm.com/contact/contactus.php

Any suggestions?

Pete.


Web Developer & Aptrix / IBM Lotus Workplace Web Content Management (LWWCM) Specialist
w:

http://www.lwwcm.com/

e: Pete.Raleigh(at)lclimited.co.uk

 

[Vragabond]

What exactly is the difference. Testing with Mozilla and IE I have noticed different behaviour in displaying the pictures and the text, it looks good on IE but not good in Mozilla. You are assigning text-align to span, which is an inline element and as such should not even support the text-align property. What is inline cannot be left, right or center, it is where it is. Try solving the problem with the floats. If it is something else, let us know.

 

[WartookMan]

Yes, it is the different behaviour in IE and Mozilla (Netscape 7) with respect to the images/text in the contact details. I might try to create a DIV containing two other DIV's (rather than two SPANs) with a property of "float:left".

Perhaps I shouldn't code against such a relaxed browser as IE.

Pete.


Web Developer & Aptrix / IBM Lotus Workplace Web Content Management (LWWCM) Specialist
w:

http://www.lwwcm.com/

e: Pete.Raleigh(at)lclimited.co.uk

 

[WartookMan]

I seem to have fixed it by modifying the SPANs within the DIVs, but is there an easier way to layout it out, rather than having to make certain items BLOCK elements, etc.

The style sheet I used was as follows:

div.details {
	clear: both;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}
div.row {
	text-align: middle;
	clear: both;
	display: block;
}
span.iteml {
	display: block;
	padding: 5px;
	float: left;
	text-align: right;
	width: 30%;
}
span.itemr {
	display: block;
	padding: 5px;
	float: left;
	text-align: left;
	width: 60%;
}

I also had to add a dummy DIV at the end of the details block, for Netscape (so that it sorted out the footer details properly).

Pete.


Web Developer & Aptrix / IBM Lotus Workplace Web Content Management (LWWCM) Specialist
w:

http://www.lwwcm.com/

e: Pete.Raleigh(at)lclimited.co.uk