Helpful Information
 
 
Category: CSS
How to trick IE into using body width?

Hello,

I finally saw my site (URL below) on IE 6 and couldn't believe my eyes. Little did I know that IE 6 doesn't seem to care much about body width. I'm a little stuck trying to fix it as I don't run IE 6 and cannot see what's going on. Plus I have no clue how to work around this bug.

I'm forced to use a template provided by the webhost which makes matters complicated. Basically my body is supposed to be 750 px wide to keep the top table and the little footer with the copyright stuff 750 px wide and on the left. I don't have access to the top table and the copyright stuff. Also I cannot insert anything into the body before the first table or after the copyright notes. Right now they are 100% and ugly.

Any help solving this brain teaser is highly appreciated!

Thanks, gin

Hey gin,

I was just thinking about you. I've got two new demos of the slide show up. One with no controls for IE Mac:

http://home.comcast.net/~jscheuer1/side/files/johnslidedemo10.htm

One with simplified controls for IE Mac:

http://home.comcast.net/~jscheuer1/side/files/johnslidedemo14.htm

I also fixed the bug with the captions getting messed up. I want to know if my efforts at tailoring content to IE Mac were successful and if the other browsers still like the demos.

About your problem, it really doesn't look as bad as you might think. It is probably more that you are used to seeing it one way and got shocked seeing it the other. I am aware of most of the constraints on editing for the site and will have a detailed look now. Two questions; Would it be OK if all browsers saw all the content centered instead of left aligned? Is that something you have control over? I ask this because then it wouldn't look odd in IE and generally, centered content looks better. Also, just a note, when I reduce my IE browser window, the elements all line up centered.

OK, I've got something. I assume you can alter the css and I know you can alter the script we worked on before. Here's what to add to the css (I'm including the current .body class as a reference, addition highlighted red, use exactly as written):
.body{
margin-top:0px;
margin-right:0px;
margin-bottom:0px;
margin-left:0px;
width:750px;
}

* html .body {
text-align:center;
}Then in 'our' script, add to the onload function, so it looks like this (addition highlighted red, use exactly as written):
function onloadfunction(){
if (document.all&&document.getElementById&&!window.opera)
document.getElementsByTagName('table')[0].width='750'
if (persistmenu=="yes" && location.href!=='http://www.cafepress.com/schnickschnack'){
var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname
var cookievalue=get_cookie(cookiename)
if (cookievalue!="")
document.getElementById(cookievalue).style.display="block"
}
}What this will do is center the page in IE. All of your content will still be 750px wide. The table at the top will also become 750px wide and centered, the stuff at the bottom, over which I see no way to gain control will be centered too and is already less than 750px wide so, it will all look good. Other browsers will ignore all of this.

Good to know a new script is out! I've been meaning to asked you but didn't want to rush you. I've got to leave for an appointment with no mac access in a second but will check it tonight. I'm excited to see the new changes! Do you want me to post in the old thread?

Now, first question, is it okay to run another script on that page without messing things up? Also I've stumbled over a fix by somebody for the top table - I'll post it tonight. It only fixes the top not the bottom. The bottom is a real pain. I've tried to make the font white and just insert the bottom myself but couldn't get the links to also go white.

Centered is not a problem. Good thing you've suggested it especially if the stuff centers itself anyway - I didn't know! Well, I haven't seen it centered yet but it might be great. I was shooting for centered at the beginning but couldn't influence the top table behavior without left aligning it. Plus if centered there would be no worry about the bottom.

Here's one more question: Is the "Where's My Stuff?" etc table 750 now? And is the www.SchnickSchnack.biz centered within the 750 px at the bottom. I can't see! You know how that feels ;-)

OK. Got to run. Thanks for your help!!!

*gin

Now, first question, is it okay to run another script on that pageUm, you want to run another script? If you are just referring to my suggestion, it is not another script, it is adding to an existing script and shouldn't mess things up.

'Where's my stuff?" was already 750px wide in IE6 here, with my modifications it still is and is centered along with all below it.

How did you left align the top table?

About my demos, here is as good a place as any to post about the demos, it actually fits the forum better here. Once we get IE Mac squared away, I'll probably start a thread on the slideshow in JavaScript forum which is where it really belongs.

OK I'm off to start script testing in a sec. As to the center/left aligning I've tried to center it and on the mac the top bar wouldn't stop sticking to the left. I could not see where I've ever defined it to stay left. I think that was just what it started doing when I made it 750px wide and I left it get away with it. That must be the reason why it's jumping over to center on your system, it's not realy defined to be left I think.

I'm not too crazy about the center look. Some way of keeping it left - even when you resize your window - might be nicer. I've put in the little fix I've just stumbled upon. I don't know if it works though. It's a new script and just one line of code and one line of CSS so out of lack of time I tried that first. Maybe it can be added to the script also?! Your version might be better though. And now I get it I rushed over your post - sorry - it's basically an add on to what's there already. Very neat!

Let me concentrate on testing your stuff for right now. Though maybe you could look at my page real quick and see if something changed. The code is right after the start of the h comment. Thanks!

*gin

Just looked at your page,

IE6 - Top table 750px and all is left except the two things at the bottom after 'where's my stuff', they are still centered.

FF - Still looks just as I imagine you intend, all 750px left.

Safari OK
Firefix OK
Netscape OK
IE OK no buttons as you said

Looking really good right now! Congratulations! Anything you want me to double check on this script?

Sorry. I'll test the other one tommorrow. I had a very long day. I just really want to test it properly and not miss something.

*gin

Thanks gin,

Just wanted to mention that I checked out your script thing addition in the source code, very similar to part of what I was thinking of. If we include it in the menu script, it will apply to all pages. Also, I figured out a way to get everything left and 750px, if that is still the way you want to go. Just replace the onloadfunction in menu.js with this one:


function onloadfunction(){
if (document.all&&document.getElementById&&!window.opera){
document.getElementsByTagName('table')[0].width='750'
var cells=document.getElementsByTagName('td')
for (i = 0; i < cells.length; i++){
if (cells[i].className=='footer'){
cells[i].parentElement.parentElement.parentElement.align='left'
cells[i].parentElement.parentElement.parentElement.width='750'
}
}
var pics=document.getElementsByTagName('img')
for (i = 0; i < pics.length; i++){
if (pics[i].src=='http://schnickschnack.biz/e/u.png')
pics[i].parentElement.parentElement.style.width='750px'
}
}
if (persistmenu=="yes" && location.href!=='http://www.cafepress.com/schnickschnack'){
var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname
var cookievalue=get_cookie(cookiename)
if (cookievalue!="")
document.getElementById(cookievalue).style.display="block"
}
}You can remove your current 'hack' and its style.

John,

sorry, I'm super busy again. I've just looked at the slide show and here are the results:

SAFARI NETSCAPE FIREFOX
-reverse button is working but stays on >> instead of going <<

IE
-sometimes when I click through rather fast with the step button I have to click twice to make it react

Looking good! Let me know if you want me to check out anything in detail. I'll check the other thread to see what triggered the caption problem. I did reload etc but so far so good - everything is running smooth!

I got to go - another appointment. I plan on inserting your script addition tonight. I'm really excited about it! Thanks!

*gin

SAFARI NETSCAPE FIREFOX
-reverse button is working but stays on >> instead of going <<Good catch! I hadn't noticed that. The routine that changes the >> to << would make IE Mac cough so I set a conditional to exclude it. Only problem was it excluded virtually all browsers. I've fixed that. Please check to see if that's truly fixed and still no problem in IE Mac for ol' demo 14:

http://home.comcast.net/~jscheuer1/side/files/johnslidedemo14.htm

It must be this weather, I've been very busy too. Let me know when you have my script installed so I can double check the result. It shouldn't change the pages' behavior in any of your browsers. If it does, should be simple to fix.

I put the script add on in! Right now I happen to have access to a PC with IE running and saw that it does center but it has to think about it quite a bit.

*gin

I put the other script back in for now. I don't know why but it makes the bar be in the right width right away without the bar going huge and then becoming small. The menu script just loads slow. Do you think there is a way of copying the other script for the footer? Maybe it wouldn't help though keeping the page left when you make the IE window smaller.
I'm a little confused.

*gin

That's the difference between 'onload' and 'as the page draws'. I see you've come up with a workable mixture of the two techniques. Unfortunately, we cannot do 'as the page draws' for the bottom part - it 's the last thing drawn! You can eliminate this line:
document.getElementsByTagName('table')[0].width='750'from menu.js as, it is redundant. You should (meaning I'm not 100% sure) be able to simplify a little by changing the on page script to:

<script type="text/javascript">
if (document.all&&document.getElementById&&!window.opera)
document.getElementsByTagName('table')[0].width='750'
</script>Thus eliminating the need for:
.cafepressbar, .cafepressbar td, .cafepressbar td table, .cafepressbar td table td {width:742px;}in the style section. But, it's all fine as is.

John,

sorry the ISP here had huge difficulties and the entire neighborhood has been offline for over 2 weeks. It's been terrible!!! After a lot of phone calls and visits from technichans we now seem to be back online but service is still intermittened.
I couldn't do any testing on your script or my page. I'll have a look tonight and post tommorrow. I hope the service doesn't break down again. Sorry for the long wait. Tell me if there's a new version to test. Otherwise I'll test 14. I hope it's still there!

So long, gin

Welcome back to 'the land of the living geeks'. :)

Demo 14 is still there and now we have:

http://home.comcast.net/~jscheuer1/side/files/johnslidedemo10random.htm

With random display of the images (courtesy of mwinter) and status bar tracking of the displayed images, take it through its paces too please. I am nearing completion on this project but, as with many things, the last 10% of the effort seems to be taking about 90% of the time. I've got a 'new' project that will be ready for testing soon, it is a three column select demo based on the widget browser on this page:

http://www.apple.com/downloads/dashboard/

I stole the idea and the look but not a scrap of code. Let me know if you are up for another project.


- J

John,

the come back took longer than anticipated. An hour after I posted everything was offline again. It turned out the ISP had a virus in the server that stores IP addresses.

Here I am back online. The old ISP got dumped and it took a while till the new guys got their stuff going but service seems to be smooth now and the mac is back online. Jippeeehhh!!!

*gin

Safari OK
Firefox OK
Netscape OK
IE no buttons no underlined links

Good job!!! Can't spot anything weird so far!

*gin

PS: I've just upgraded to Tiger.

Now that you are an old hand at cafepress, perhaps you would have a look at this post and see if you can enlighten the OP. I was going to give it a shot but, I am sure you are much more versed in the particulars than I. It seems to me there must be more leeway than suspected by the OP:

http://www.dynamicdrive.com/forums/showthread.php?t=3992&highlight=cafepress

Back to the demos Oh, and welcome back again! I take it you just tested the link from my most recent post? The demo #14 (http://home.comcast.net/~jscheuer1/side/files/johnslidedemo14.htm) has more features for IE Mac. If they work there I will combine them into the one you just tested.

What's Tiger? Yet another browser to contend with? :rolleyes:


- J










privacy (GDPR)