Wed, 2007-04-18 14:24
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
Eurofox Pictures
Content
Thanks
Wed, 2007-04-18 15:21
#1
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.
Wed, 2007-04-18 15:33
#2
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.
Wed, 2007-04-18 15:51
#3
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.
Thu, 2007-04-19 14:18
#4
Thanks Trev
Thanks Trev,
That seems to have sorted it for me.
Thu, 2007-04-19 17:52
#5
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.
Thu, 2007-04-19 21:31
#6
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.