12 replies [Last post]
bodegas411
Offline
Enthusiast
Last seen: 12 years 6 weeks ago
Timezone: GMT-7
Joined: 2007-10-13
Posts: 52
Points: 2

Hi there, I have racked my brain on this one and maybe it's just because it's getting late, or maybe it because I don't know what I am doing but I have a strange layout discrepancy between Firefox and IE (gasp!)

I am working on a small freelance project what I have can be viewed here:
http://sheckja.com/beachcondo/

Here is a link to a pic of the page in Firefox:
http://sheckja.com/beachcondo/images/firefox.jpg

And here is IE
http://sheckja.com/beachcondo/images/ie.jpg

As highlighted in the IE image the area under the nav tabs is pushed down by 39 pixels (I measured) and the footer doesn't appear to be showing up at all?

My nav images are 39 px in height but this is the only place in my code this number appears? I guess it could be coincidence but I doubt it. As for the footer - I have no idea.

Any one got an ideas, you've all helped me out of a few pinches before!

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 8 years 18 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

the difference is an error

the difference is an error on IE's part. IE is padding the #content_header from the bottom of the #main_navigation, which is floating and should be taken out of the flow. The padding should start from #content_column top padding, which it does in Firefox. An easy fix is to change the 50px top padding in #content_header to 11px and have it clear the #main_navigation.

edit// strike that. #main_nav appears to not be floating - checking into it now.

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 8 years 18 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

okay, the #main_navigation

okay, the #main_navigation has no height because it's children are floats (correctly in Firefox). So change the padding as mentioned above, but contain the floating children in #main_navigation by adding overflow: hidden;

bodegas411
Offline
Enthusiast
Last seen: 12 years 6 weeks ago
Timezone: GMT-7
Joined: 2007-10-13
Posts: 52
Points: 2

How do I have it clear the

How do I have it clear the #main_navigation ? Little confused on that.

bodegas411
Offline
Enthusiast
Last seen: 12 years 6 weeks ago
Timezone: GMT-7
Joined: 2007-10-13
Posts: 52
Points: 2

Actually I am more then a

Actually I am more then a little confused. I added the overflow: hidden; as shown:
#main_navigation ul, #main_navigation li { overflow:hidden; margin:0; padding:0; }

But there is no top padding of 50px anywhere... a few right pad's but those are in

tags.

I figured out that footer, that was just a missing

. But this 39px pad in IE is really making me nutty.

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 8 years 18 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

I guess I didn't explain it

I guess I didn't explain it well enough. But before I try to restate everything I should mention that the #main_navigation id is on the ul itself so that your selector of #main_navigation ul { } is not targeting anything. It should be ul#main_navigation or just #main_navigation

So you need to change these:

#content_header {
	padding:50px 0px 0px 0px;
	width:402px;
 
#main_navigation ul, #main_navigation li { overflow:hidden; margin:0; padding:0; }

to these:
#content_header {
	padding:11px 0px 0px 0px;
	width:402px;
 
ul#main_navigation  { overflow:hidden; margin:0; padding:0; }

bodegas411
Offline
Enthusiast
Last seen: 12 years 6 weeks ago
Timezone: GMT-7
Joined: 2007-10-13
Posts: 52
Points: 2

Okay - I created a

Okay - I created a #main_navigation { overflow:hidden; margin:0; padding:0; }

and then changed the call to:

 
<div id="main_navigation">
<ul>
<li id="nv_condo"><a href="index.php" title="The Condo" class="selected"><span>Home</span></a></li>
<li id="nv_amenities"><a href="work.php" title="Amenities"><span>Work</span></a></li>
<li id="nv_bookit"><a href="services.php" title="Book the Condo"><span>Services</span></a></li>
</ul></div>

When it was;

 
<ul id="main_navigation">
<li id="nv_condo"><a href="index.php" title="The Condo" class="selected"><span>Home</span></a></li>
<li id="nv_amenities"><a href="work.php" title="Amenities"><span>Work</span></a></li>
<li id="nv_bookit"><a href="services.php" title="Book the Condo"><span>Services</span></a></li>
</ul>

But this just made the same problem we are seeing in IE appear in FF?

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 8 years 18 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

you just reversed the

you just reversed the problem. You're not targeting the correct element. Return the html to it's previous state but leave the changes in the css (and don't forget to change the top padding in #content_header)

bodegas411
Offline
Enthusiast
Last seen: 12 years 6 weeks ago
Timezone: GMT-7
Joined: 2007-10-13
Posts: 52
Points: 2

You sir, deserve the title

You sir, deserve the title Guru - worked like a charm!

Thank you so much!

bodegas411
Offline
Enthusiast
Last seen: 12 years 6 weeks ago
Timezone: GMT-7
Joined: 2007-10-13
Posts: 52
Points: 2

Annomoly?

I have run into another issue. This one is really making me scratch my head, because it just appeared and I haven't changed anything! It was fine and now it's not, I just don't understand it.

Here is the page in Firefox
http://sheckja.com/beachcondo/images/firefox.jpg

And here in IE
http://sheckja.com/beachcondo/images/ie.jpg

It seems as if the background sand like gradient is getting cut up at a certain point - where a line appears..., also it seems like the content box image (images/content_bg.jpg) is breaking. But it is fine in IE. Normally I would rework the images to line up but since I did nothing and it was looking fine in Firefox and IE before, I hesitate. Could something have gotten corrupted? I guess I could have made a change and not noticed this until now, but all I added was some CSS for the lightbox and the condo pictures. None of my images are being called from some outside source, it's all self contained.

Very confused.

The page is viewable at;
http://sheckja.com/beachcondo/

David Laakso
David Laakso's picture
Offline
Enthusiast
US
Last seen: 13 years 45 weeks ago
US
Joined: 2008-07-18
Posts: 265
Points: 0

I am not able to reproduce

I am not able to reproduce this issue in Mac FF/3/0.1, Safari, Camino, or Mac Opera.

FWIW, on a 116.5 dpi laptop, bringing the left column mousetype up to the point it's readable shoots it out the bottom of its container. You have a couple of markup errors-- when you can get around to it...

bodegas411
Offline
Enthusiast
Last seen: 12 years 6 weeks ago
Timezone: GMT-7
Joined: 2007-10-13
Posts: 52
Points: 2

Type is not readable as

Type is not readable as is?

And I also have been having trouble reproducing this error elsewhere - I cleared my browser cache, but it persists on my Dell PC in Firefox 3, but no where else. Reinstall maybe? Very confused, because, as I said, I didn't change anything it just started showing up.

bodegas411
Offline
Enthusiast
Last seen: 12 years 6 weeks ago
Timezone: GMT-7
Joined: 2007-10-13
Posts: 52
Points: 2

I'm an idiot

Never mind, I have been starting at to many websites/CSS sheets/PS windows today - I was zoomed out one level and didn't even realize it - standard page zoom page still looks fine.

Thanks, and sorry for the bother!