6 replies [Last post]
odran
Offline
newbie
Last seen: 13 years 27 weeks ago
Joined: 2006-11-04
Posts: 4
Points: 0

Hi

I am having some problems with the different ways that Mozilla, Safari and IE 5.5 render my globalnavbar div as compared with IE6 and IE7.

The problem is with the <div id="globalnavbar"> and the css used to position it. There is a 4 pixel difference in poistioning when rendered in Firefox / Safari / IE5.5 (mac) compared with IE6 or IE7.

I'd greatly appreciate any help in resolving this issue.

You can view the rendered page at http://www.bluebloc.com/eurofox/template.html

The code i've used is:

* {
margin:0;
padding:0;
}

body {
background:#1F416F url(i/body-bg.jpg) top left repeat-x;
font:76%/140% Verdana, Arial, Helvetica, sans-serif;

}
#wrap {
margin:0 auto;
width:765px;

}
/* Header
------------------------------------------------------------------*/

#header {
background:url(i/header-03.jpg) no-repeat;
width:765px;
height: 191px;
border-bottom: 1px solid #fff;
display: block;
margin:0;
padding:0;
}
#header h1 {
background: url(i/logo-01.jpg) no-repeat 0 0;
display: block;
}
#header h1 a {
width: 265px;
height: 156px;
display: block;
text-decoration: none;
}
#header a span {
visibility: hidden;
display: block;
}
/* Main navigation
------------------------------------------------------------------*/
div#globalnavbar {
background:transparent;
position: relative;
width: 500px;
height: 21px;
text-align: left;
overflow: hidden;
margin-left:265px;
margin-top:-11px;
padding:0;
}
div#globalnav {
width: 500px;
height: 21px;
margin:0;
padding:0;
}

div#globalnav ul#menu {
height: 21px;
width: 500px;
background: transparent url(i/nav-01.jpg) top left no-repeat;
position: relative;
margin:0;
padding:0;
}

div#globalnav ul#menu li {
list-style: none;
position: absolute;
top: 0;
}

ul#menu li, ul#menu a {
height: 21px;
display: block;
}
div#globalnav ul#menu li a {
text-indent: -9999px;
text-decoration: none;
}

#home {left: 0px; width: 56px;}
#media {left: 65px; width: 62px;}
#products {left: 135px; width: 160px;}
#people {left: 302px; width: 68px;}
#contact {left: 380px; width: 96px;}

#home a:hover {background: transparent url(i/nav-01.jpg) 0px -21px no-repeat;}
#media a:hover {background: transparent url(i/nav-01.jpg) -65px -21px no-repeat;}
#products a:hover {background: transparent url(i/nav-01.jpg) -135px -21px no-repeat;}
#people a:hover {background: transparent url(i/nav-01.jpg) -302px -21px no-repeat;}
#contact a:hover {background: transparent url(i/nav-01.jpg) -380px -21px no-repeat;}

/* Main navigation "active tabs"
------------------------------------------------------------------*/

body#index #home {background: transparent url(i/nav-01.jpg) 0px -42px no-repeat;}
body#media-page #about {background: transparent url(i/nav-01.jpg) -65px -42px no-repeat;}
body#products-page #operations {background: transparent url(i/nav-01.jpg) -135px -42px no-repeat;}
body#people-page #contracts {background: transparent url(i/nav-01.jpg) -302px -42px no-repeat;}
body#contact-page #contact {background: transparent url(i/nav-01.jpg) -380px -42px no-repeat;}

Eurofox Pictures | Irish Film Production | Education | Training

Content

Thanks

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 50 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

I assume you want the text

I assume you want the text centered vertcially in the bar.

If you set a height ofr th ebar (I think you have) and set the line-height to the same, then set the links to vertical-align:middle, without any margins or paddings top or bottom, it may look right.

odran
Offline
newbie
Last seen: 13 years 27 weeks ago
Joined: 2006-11-04
Posts: 4
Points: 0

using css text replacement

Actually I am using css image replacment to replace the entire globalnavbar div and then positioning the links so as to create image rollovers. The problem is that the globalnavbar div is 4px out in Mozilla/Safari and fine in IE 6&7 when margin-top:-11px; is set. If this is changed to margin-top:-7px; then it is fine in Mozilla/Safari and out by 4px in IE6/7.

You can view the example at: http://www.bluebloc.com/eurofox/template.html

div#globalnavbar { background:transparent; position: relative; width: 500px; height: 21px; text-align: left; overflow: hidden; margin-left:265px; margin-top:-11px; padding:0; } div#globalnav { width: 500px; height: 21px; margin:0; padding:0; }

div#globalnav ul#menu {
height: 21px;
width: 500px;
background: transparent url(i/nav-01.jpg) top left no-repeat;
position: relative;
margin:0;
padding:0;
}

Thanks again.

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 50 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Ah

Ah

Collapsing margins. IE is probably lying to you and FF doing what you asked.

This might explain it better:

http://www.complexspiral.com/publications/uncollapsing-margins/

I think a quick search on collapsing margins would produce numerous articles.

Anyway, FF does it to standards and IE doesn't.

odran
Offline
newbie
Last seen: 13 years 27 weeks ago
Joined: 2006-11-04
Posts: 4
Points: 0

Thanks Trev

Thanks Trev,

That seems to have sorted it for me.

odran
Offline
newbie
Last seen: 13 years 27 weeks ago
Joined: 2006-11-04
Posts: 4
Points: 0

The guilty code

Trev,
The code that caused the problem was in the body tag's css:
body {
font:76%/140 Verdana, Arial, Helvetica, sans-serif;}

The problem was solved by changing the font declaration to:
body {
font:76% Verdana, Arial, Helvetica, sans-serif;}

Something to do with setting a generic line-height.

Anyway solved now, so thanks again.

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 1 year 50 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

Hi For many reasons it

Hi

For many reasons it isn't such a good idea to set a font-size on the body below 100%. I use 100.1% to kick IE and Opera into line with Safari and Firefox.

Then I have a pagecontainer div where I set the font-size again to anything from 65% to 90% as the design dictates. You need to experiment with 1% changes until all browsers render the same.