Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations gkittelson on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

DIVs and IMGs in IE6 and Netscape6 arrgh! 2

Status
Not open for further replies.
chotchstar

chotchstar

MIS
Oct 22, 2001
28
GB
I've been happily using SPANs and DIVs to position images on a web page viewed through IE6. I then tried to look at the same page using netscape6.2.2... and some of the images appear slightly (about 3px) further down the screen. I'm positioning each DIV 'absolute'ly over one main SPAN. I've tried everything I can think of including redoing the offending images themselves but all to no avail.

I can amend the page to make it look right in IE OR Netscape but not both, and what I'd really like to do is to make the page look right through both browsers. I hope I'm not asking the impossible and any advice would be massively appreciated as this problem is driving me mental!

I've included the code I'm using below;

.PageBackground
{
width: 750px;
height: 450px;
margin-top: 0px;
margin-right: 0px;
background-color: #FFFFEA;
position: absolute;
}

.FadeTop{margin-top: 60px; margin-left: 0px; position: absolute;}
.FadeBottom{margin-top: 90px; margin-left: 90px; position: absolute;}
.FadeShortBottom{margin-top: 420px; margin-left: 0px; position: absolute;}
.FadeSideL{margin-top: 63px; margin-left: 0px; position: absolute;}
.FadeSideR{margin-top: 103px; margin-left: 90px; position: absolute;}
.FadeSideRightShort{margin-top: 63px; margin-left: 740px; position: absolute;}

</style>
<body>
<span CLASS=&quot;PageBackground&quot;>
<div CLASS=&quot;FadeTop&quot;>
<img BORDER=&quot;0&quot; MARGINWIDTH=&quot;0&quot; MARGINHEIGHT=&quot;0&quot; SRC=&quot;/GVD_Partnership_Chief/Images/FadeTop.gif&quot;>
</div>
<div CLASS=&quot;FadeSideR&quot;>
<img BORDER=&quot;0&quot; MARGINWIDTH=&quot;0&quot; MARGINHEIGHT=&quot;0&quot; SRC=&quot;/GVD_Partnership_Chief/Images/FadeSideRightLong.gif&quot;>
</div>
<div CLASS=&quot;FadeSideRightShort&quot;>
<img BORDER=&quot;0&quot; MARGINWIDTH=&quot;0&quot; MARGINHEIGHT=&quot;0&quot; SRC=&quot;/GVD_Partnership_Chief/Images/FadeSideRightShort.gif&quot;>
</div>
<div CLASS=&quot;FadeBottom&quot;>
<img BORDER=&quot;0&quot; MARGINWIDTH=&quot;0&quot; MARGINHEIGHT=&quot;0&quot; SRC=&quot;/GVD_Partnership_Chief/Images/FadeBottomLong.gif&quot;>
</div>
<div CLASS=&quot;FadeSideL&quot;>
<img BORDER=&quot;0&quot; MARGINWIDTH=&quot;0&quot; MARGINHEIGHT=&quot;0&quot; SRC=&quot;/GVD_Partnership_Chief/Images/FadeSideLeft.gif&quot;>
</div>
<div CLASS=&quot;FadeShortBottom&quot;>
<img BORDER=&quot;0&quot; MARGINWIDTH=&quot;0&quot; MARGINHEIGHT=&quot;0&quot; SRC=&quot;/GVD_Partnership_Chief/Images/FadeShortBottom.gif&quot;>
</div>
</span>
 
Sort by date Sort by votes
I do believe the usage of MARGINHEIGHT and MARGINWIDTH in the img tags might be causeing this problem. Check to see that these are standard compliant at the w3c web site using their HTML validator.

Hope this helps. Gary Haran
 
Upvote 0 Downvote
Hi chotstar,

Xutopia is right and marginheight and marginwidth are definitly not standard attributes. You should also always add the attributes height and width to your images. This will make the page to load faster.

What I think is going on is that Internet explorer 6 is using the &quot;non-standard&quot; rendering engine. IE 6 a different rendering engine depending on your Document Type Definition. It uses a &quot;non-standards one&quot; if you use a loose dtd or a compliant one of you use a strict one. Could you please tell us what's going on if you add this dtd at the top of the page:
<!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01//EN&quot; &quot;Now, maybe IE 6 and Netscape 6 acts in the same way...

If you have time, could you please post the results? I would be interested in knowing if that solved your problem.

Thanks and cheers,

xso
 
Upvote 0 Downvote
xso

Thanks so much - adding in the DTD at the top of the page worked fantastically; the results are that the page now appears the same in both IE6 and Netscape 6.2.2. As a general rule should I be including this on all webpages?

Thanks also for the advice re: IMG WIDTH and HEIGHT, and MARGINHEIGHT and MARGINWIDTH, I've updated the pages accordingly.

Xutopia - thanks also for your advice and I've checked out the HTML validator, a valuable resource.

Once again, thanks for your help - I'll be able to sleep easier tonight!
 
Upvote 0 Downvote
I've got another quick question re: IE and Netscape...

I'm using this line of code in the body element of the CSS:

left:expression((body.clientWidth-this.offsetWidth)/2);

to centre the page. (I got this code from the forum/website) Again, this works in IE6 but not in Netscape 6.2.2. Any ideas?

Cheers and happy programming!
 
Upvote 0 Downvote
expression is not standard CSS whih is unfortunate. It looks like a great way of coding something to be in the center but you should look at standard ways of doing this.

You can get the same resulting effect but you will need to script it using DHTML.

document.getElementById(id).style.left = // calculated position

You might need the reference to gecko for the standard compliant way of doing this :


Anything you find in here will work great with DOM compliant browsers. You might have to adapt your code for Internet Explorer.

Other interesting links :

// excellent documentation
// old NS4 and IE4 DHTML reference
// a must read for any developper. Gary Haran
 
Upvote 0 Downvote
Hi again chotchstar,

Great to hear the post was helpful to you!
Regarding your second post, it's quite tricky.
Netscape 4 obeys to:
window.innerWidth
IE 5 obeys to:
document.body.offsetWidth
and IE6 (compliant mode) or NS6 obeys to: document.documentElement.offsetWidth
In addition to what proposed Xutopia, you might try something like:
//Netscape 6 and Internet Explorer 6
if (document.documentElement && document.documentElement.offsetHeight){
winW = (is.ns)? window.innerWidth : document.documentElement.offsetWidth-20
winH = (is.ns)? window.innerHeight : document.documentElement.offsetHeight-4
}
//Internet Explorer 5
else if (document.body){
winW = document.body.offsetWidth-20
winH = document.body.offsetHeight-4
}
//Others
else {
winW = (is.ns)? window.innerWidth : document.body.offsetWidth-20
winH = (is.ns)? window.innerHeight : document.body.offsetHeight-4
}
Of course, this is now JavaScript and not css anymore but it should not be too difficult to adapt.
Once again, if this work could you please let me know?
Thanks and cheers,
xso
 
Upvote 0 Downvote
Oh yes, by the way, as you said, I would advice to always put a dtd. Of course, if you have time, it's always good to validate your pages at a validator like the one from the W3C, available at: I always use the dtd for xhtml. You should give it a try, as you seem to focus on Netscape 6 and IE6 (you're lucky! I still have to deal with NS4...) I found the transition from HTML to XHTML rather easy and painless ;->
Cheers,

Xavier
 
Upvote 0 Downvote
Hi Xavier

I have tried out the code supplied above but, unfortunately, I couldn't get it working. (I'm not too familiar with using javascript and I was getting &quot;error: 'is' is undefined&quot;, I wasn't sure whether I had to substitute &quot;(is.ns)?&quot; for something else - e.g. page name or something).

Thanks for supplying for your advice anyway, and I'm sure you're having a lot of fun dealing with ns4...

I'm currently having a look at the resources recommended by Gary (Xutopia) - thanks for supplying those Gary. I think I may just have to do some serious learning about the world of DHTML and DOM!

Thanks once again for your help and advice
Cheers
Mike
 
Upvote 0 Downvote
Hi chotchstar,

Sorry, I should have explained better. The is... something is coming from a browser check JavaScript file. You don't really need it, as you are focusing on IE6 and NS6, which should behave in the same way now that you have added the dtd.

You should just try this one:
if (document.documentElement && document.documentElement.offsetHeight){
winW = (window.innerWidth)? window.innerWidth : document.documentElement.offsetWidth-20
winH = (window.innerHeight)? window.innerHeight : document.documentElement.offsetHeight-4
}

Indeed dhtml and JavaScript are worth investigating ;->

I hope this works now!

Cheers,

Xavier

By the way, thanks to Xutopia for the suggesting to replace is.ns with window.innerWidth.
 
Upvote 0 Downvote
Hi again Xavier

Sorry - I'm starting to feel like a bit of a dunce..

I still can't get your code working, I'm not even sure where I should be putting it - so I'm fairly sure the problem is down to me! I've tried putting it in SCRIPT tags between the HEAD, STYLE and BODY, and just plonking it into the STYLE. (I've only ever used simple Javascript for validation, running little scripts etc, and don't really understand how to get the script 'talking' to the stylesheet(s).)

Anyway - I fear I must have wasted far to much of your time already, I'll work it out in the end!

Cheers and best wishes
 
Upvote 0 Downvote
you will need to paste xso's code into the head of your document inside <script> tags.

then you use something close to this :

function whenPageResizes()
{
element = document.getElementById('left')
element.style.left = (winW - element.style.width) / 2
}

and in the body :

<body onresize=&quot;whenPageResizes()&quot;>

You might want to adapt the function to support the document object models you plan to use (document.all[id] for Internet Explorer, document.layers[id] for Netscape 4).

As is it should work with Internet Explorer 5+ and Netscape 6. Maybe even Opera as well as standar compliant browsers.

Hope this helps. Gary Haran
 
Upvote 0 Downvote
Hi chotchstar,

Sorry for being late answering you but I sometimes have long commuting time;->

Please don't say you are wasting our times. Just keep on posting until we get your problem fixed. It should just be a matter of time. ;->

Gary, I don't know what you think but I would not add anything for IE5 as chotchstar said that it just needed to be working in IE6 and NS6 (so let's be DOM compliant ;->). Of course, chotchstar, correct me if I'm wrong and we'll find a way to make it work in other browsers too, as Gary proposed with its fix.

I have approximately what Gary wrote (function to check the resize in an onload attribute of the body tag). I don't have the full code here, as I'm at home, but I would be glad to send it to you tomorrow. By the way, I'm talking about Central European time.

Chotchstar, what would help would be a description of the error. So that we know in which direction to search.

Cheers,

Xavier
 
Upvote 0 Downvote
Upvote 0 Downvote
Hi Wullie,

You are right but as far as I know, these are attributes of the <body> tag, not of the <img> tag. I checked the W3 specs and could not find any marginheight or marginwidth for the img tag (My HomeSite is complaining too ;->).

Cheers,

Xavier
 
Upvote 0 Downvote
Upvote 0 Downvote
Hi Xavier, hope you are well today

Thanks for your comments above, what a great forum this is - with extremely helpful people!

Sorry for my delay in posting, I have been trying to sort my coding out but am still not having much luck.

The code I've got is:

element = document.getElementById('left')
element.style.left = (winW - element.style.width) / 2

contained between the SCRIPT tags in the page HEAD and activated by the onresize function contained in the BODY tag as advised by Gary. The error message I'm getting is the rather unhelpful (to me):

Error: Object required.

I'm not sure if the 'left' part of the above script is supposed to be defined in the style sheet, (e.g. .left{position: absolute; etc.} making it the &quot;object required&quot; or whether I'm just completely confused! I have been trying all the variations I can think of but am having no luck :(

Any more advice you may have would be very much apprecaited...

Thanks in advance
Mike
 
Upvote 0 Downvote
Hi chotchstar,

Yes, thanks, I'm having a nice day and I hope that it's the same for you ;->

Let me just make sure I understand what you want exactly. You want to be able to have a box or something like an image always centered in the middle of the page, right? If the user resizes its window, the page should change accordingly.

If this is the case, you should have a look at:
This is exactely what the script does. If you want to give it a try on your machine, copy the source code and don't forge to also download the .js files.

However, in order to make it working for IE6 with a strict rendering engine, you will need to modify slightly the code and to replace the content of the liquid.js file with this one:
function findWH() {
//DOM1 compliant browsers
if (document.documentElement && document.documentElement.offsetHeight){
winW = (window.innerWidth)? window.innerWidth : document.documentElement.offsetWidth-20
winH = (window.innerHeight)? window.innerHeight : document.documentElement.offsetHeight-4
}
//Internet Explorer in non-compliant mode
else if (document.body){
winW = document.body.offsetWidth-20
winH = document.body.offsetHeight-4
}
//Others
else {
winW = (is.ns)? window.innerWidth : document.body.offsetWidth-20
winH = (is.ns)? window.innerHeight : document.body.offsetHeight-4
}
}

function makeLiquid() {
if ((is.ns && (winW!=window.innerWidth || winH!=window.innerHeight)) || is.ie)
history.go(0)
}

Now, if I misunderstood what you are trying to do, please post again so that we found a solution.

Thanks and cheers,

Xavier
 
Upvote 0 Downvote
Hi Xavier

Just a quick note to say thanks, the code and link(s) above are just the ticket - they've given me a much better understanding of what's going on should help me sort out my webpage problems.

Thanks once again and happy programming!
Mike
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
710
spamjim
spamjim
lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
172
lmcate
lmcate
tyutghf
  • Locked
  • Question
Slanted divs
Replies
0
Views
565
tyutghf
tyutghf
soni21
  • Locked
  • Question
JavaScript String to Number Conversion in HTML: Seeking Clarification
Replies
4
Views
1K
Chris Miller
Chris Miller
PeDa
  • Locked
  • Question
Horizontal rule and CSS problem 2
Replies
2
Views
590
PeDa
PeDa

Part and Inventory Search

Sponsor

Back
Top