PDA

View Full Version : ~50px extra height appearing in FF



canadianjameson
Aug 20th, 2007, 10:41 PM
Hey all

I can't figure out why, but there seems to be a marked height difference in the display between FF and IE... and oddly enough IE is the one displaying properly

you can see the error by

going to www.enviromark.ca/head/index.htm
clicking the 2nd vertical button (turns purple)
and clicking "Hours and Information"


in IE it displays fine, but in FF the right one is a lot lower than the left one.

the html & css is

...
#whenWhereYPP {
display: none
}
#locationYPP {
position: absolute;
float: left;
}
#hoursYPP {
position: relative;
float: right;
}

and


<div id="whenWhereYPP">
<div id="locationYPP">
The Young Parents Program Center<br>
5775 St. Jacques Corner of Melrose<br>
M&eacute;tro Vend&ocirc;me / Bus # 90 west or 104
</div>
<div id="hoursYPP">
Opening Hours:<br>
Wednesday 1:00 p.m. to 4:30 p.m.<br>
Friday 1:00 p.m. to 4:30 p.m.<br>
Tel/T&eacute;l : 514.482.7910
</div>
</div>

Any ideas? I know it's a small semantical error :(

Ender's {Game}
Aug 20th, 2007, 11:51 PM
I may not be a genius but why do you have two positioning declarations in there?

Position: relative or absolute AND floats?

Just use floats.

Not to mention you may need to specify some width contraints on your location and hours DIVs, that way the location div doesn't think it can be a jerk and hog up the whole width of it's containing div and make poor little hours go all the way down to the bottom.

canadianjameson
Aug 20th, 2007, 11:56 PM
good call, i had forgotten to fix that before i posted.

problem is still there though :o

Ender's {Game}
Aug 21st, 2007, 12:02 AM
yup, you're right... still working on it.

Ender's {Game}
Aug 21st, 2007, 12:05 AM
it's that nav on the right that's causing the problems.

give that right nav these properties:



position: absolute;
right: 0;

canadianjameson
Aug 22nd, 2007, 06:06 PM
Thanks, that seems to have worked :)

Well, it did cause another problem. The element which was right below it is now displaying on top of it... any ideas on how to rectify that? EDIT I had to have it 'visibly presentable" so i added a huge top margin (in red) to get it to look okay... but i'd like to find out how to do this without the huge margin

www.enviromark.ca/head/index.htm



#emailSection {
clear:both;
display:inline;
margin-top: 230px;
position: absolute;
right: 0;
margin-right:40px;
margin-top:10px;
text-align:center;
width: 150px;
}
#emailSection span {
display: block
}
#emailSection a {
text-decoration: none;
color: black;
}
#navcontainer {
position: absolute;
right: 0;
clear:both;
display:inline;
margin-right:40px;
margin-top:10px;
text-align:center;
width: 150px;
}


as well, now in FF the stuff in the main body (click any link) is displaying a few px higher than in IE