13 replies [Last post]
gwh
Offline
Regular
Last seen: 12 years 8 weeks ago
Timezone: GMT+10
Joined: 2005-05-14
Posts: 46
Points: 11

Hi everyone,

I have a div (div#navretail) in a page that's wrapping some nav buttons (just an unordered list). I've given this outer div a specific height and width and also given it auto left and right margins. The div and the nav inside all center correctly in all browsers - even Internet explorer 5, but for some reason in IE 5.5 it's off center quite a bit.

I've uploaded my page here:

http://www.officelinkonline.com.au/kc/

... so I wondered if anyone would be able to take a look to see what might be happening here, or if there is a workaround. The css files used are in the same directory as the page if needed.

I just can't work it out. You'd think that if it worked in IE 5 then it should at least work in 5.5 - right?

Would really appreciate any help.

DanA
DanA's picture
Offline
Elder
Last seen: 12 years 21 weeks ago
Timezone: GMT+2
Joined: 2004-08-14
Posts: 1087
Points: 2

div off center in IE 5.5

Style declarations should be in the head part, even within conditional comments.
There should be html in your comments for lt IE 6 and IE 6.
The problem with IE 5.5 is the margin:0 auto; and the fact that your navigation (not completely functional with ie 5 and 5.5) is not wrapped the same way as innerlayer is.
You may overwrite within conditional comments :

<link rel="stylesheet" type="text/css" href="index.css" media="all">
<!--[if IE 5.5]>
<style type="text/css">
div#navretail, div#navcorp { margin-left: -40px; }
</style>
<![endif]-->

gwh
Offline
Regular
Last seen: 12 years 8 weeks ago
Timezone: GMT+10
Joined: 2005-05-14
Posts: 46
Points: 11

div off center in IE 5.5

Thanks for replying. I've entered the conditional comment code you suggested but unfortunately it's still not aligning correctly. I wasn't sure why you included:

<link rel="stylesheet" type="text/css" href="index.css" media="all">

... so I left this part out. I then tried it with it in but still no luck. I'm not sure if you tested this out yourself but can you tell me what I might be doing wrong?

Also, just one other thing: the image "jumptocorporate" in the top right corner is overlapping the line below it in IE 5 and 5.5, whereas in IE6 it's fine - is there a workaround for this also?

DanA
DanA's picture
Offline
Elder
Last seen: 12 years 21 weeks ago
Timezone: GMT+2
Joined: 2004-08-14
Posts: 1087
Points: 2

div off center in IE 5.5

I had to rename your stylesheet and you were right in leaving the line out.
You still must move your conditional comments to the head part.
Are MSIE 5 and 5.5 on the same PC as MSIE 6 ?
If it is the case, you cannot test conditional comments.
Then, remove the conditional comment for IE 5.5 and add after div#navretail, div#navcorp

* html div#navretail, div#navcorp { margin-left: -40px;margin:/**/ 0 auto; }

For the image you can add after #jumpcorp
* html img#jumpcorp{top:10px;top/**/:/**/15px;}

gwh
Offline
Regular
Last seen: 12 years 8 weeks ago
Timezone: GMT+10
Joined: 2005-05-14
Posts: 46
Points: 11

div off center in IE 5.5

Sorry I'm not sure what you mean when you ask is MSIE 5 and 5.5 on the same PC as MSIE 6 - I just use the win_ie.css file to feed css to these three browsers and when I need someone different for IE 6.0, I just use the backslash method: as an example,

width: 500px; /* for ie 5 and 5.5 */
w\idth: 450 px; /* for ie 6 */

... or whatever the style may be.

So I must be testing conditional comments as you say because I've already got the win_ie.css file in a conditional comment to serve styles to these browsers successfully. eg.

<!--[if lt IE 7]>
<link href="win_ie.css" rel="stylesheet" type="text/css" />
<![endif]-->

That's why I still can't understand why it's not recognising the conditional comment that targets 5.5 only. Unless I'm misunderstanding you?

Also my conditional comments are in the head part so I'm not sure why you're saying to move them there?

Can you clarify?

DanA
DanA's picture
Offline
Elder
Last seen: 12 years 21 weeks ago
Timezone: GMT+2
Joined: 2004-08-14
Posts: 1087
Points: 2

div off center in IE 5.5

These two comments are in the body part :

Quote:
<!--[if lte IE 6]><style>#p7PMnav a{height:1em;}#p7PMnav li{height:1em;}#p7PMnav ul li{float:left;clear:both;width:100%}</style><![endif]-->
<!--[if IE 6]><style>#p7PMnav ul li{clear:none;}</style><![endif]-->

Try using the hacks for div#navretail, div#navcorp and img#jumpcorp in your win_ie stylesheet instead
you can use
img#jumpcorp{top:10px;t\op:15px;} instead of
img#jumpcorp{top:10px;top/**/:/**/15px;}

gwh
Offline
Regular
Last seen: 12 years 8 weeks ago
Timezone: GMT+10
Joined: 2005-05-14
Posts: 46
Points: 11

div off center in IE 5.5

Thanks - I'll give it a go!

Mike Cherim
Mike Cherim's picture
Offline
Enthusiast
Nottingham NH
Last seen: 15 years 33 weeks ago
Nottingham NH
Joined: 2005-08-26
Posts: 126
Points: 0

div off center in IE 5.5

Try this is you want it to center in the IEs of the world, this should do the trick for you:

body {
text-align : center; /* in IE this centers content, not just text */
}

#wrapper {
text-align : left; /* this sends the text back where it belongs */
width : 760px;  /* your width should less than 780px(!) for 800x600 */ 
margin : 0 auto 0; /* no comment ;-) */
etc-etc: etc;
etc: etc;
etc: 0;
}

Hope this helps.
Mike

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 50 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

div off center in IE 5.5

Mike Cherim wrote:
margin : 0 auto 0; /* zero left pulls, zero right pulls, auto keeps the peace */


That's actually 0 top & bottom margins. auto is left & right.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Mike Cherim
Mike Cherim's picture
Offline
Enthusiast
Nottingham NH
Last seen: 15 years 33 weeks ago
Nottingham NH
Joined: 2005-08-26
Posts: 126
Points: 0

div off center in IE 5.5

Is it? Oh well, sorry, it'll work though.

Mike

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 50 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

div off center in IE 5.5

The values go clockwise from top - top, right, bottom, left - with bottom mirroring top and left mirroring right unless otherwise specified, so in the above example, margin: 0 auto is the same as margin: 0 auto 0 is the same as margin: 0 auto 0 auto.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Mike Cherim
Mike Cherim's picture
Offline
Enthusiast
Nottingham NH
Last seen: 15 years 33 weeks ago
Nottingham NH
Joined: 2005-08-26
Posts: 126
Points: 0

div off center in IE 5.5

Tyssen wrote:
The values go clockwise from top - top, right, bottom, left - with bottom mirroring top and left mirroring right unless otherwise specified, so in the above example, margin: 0 auto is the same as margin: 0 auto 0 is the same as margin: 0 auto 0 auto.

Yeah, I knew that actually. Lately I've been using the star selector with margin : 0; then just margin: auto; on the wrapper.

Mike

PS. I edited my other post reply.

Red Matrix
Red Matrix's picture
Offline
Regular
RGV
Last seen: 13 years 22 weeks ago
RGV
Timezone: GMT-5
Joined: 2005-09-17
Posts: 24
Points: 0

div off center in IE 5.5

How are you testing the different browsers? (to know they are being served correctly)

Wink » DanA

Dave

DanA
DanA's picture
Offline
Elder
Last seen: 12 years 21 weeks ago
Timezone: GMT+2
Joined: 2004-08-14
Posts: 1087
Points: 2

div off center in IE 5.5

Standalone versions of ie 5.01 and 5.5 :
http://www.skyzyx.com/downloads/
ie7 beta
http://www.webmasterworld.com/forum21/10726.htm
other browsers :
http://browsers.evolt.org/
Then Linux