Looks different in IE and Firefox

Hi

I am working on website at aweekofdnile.com and it looks like I expect it to in IE, but changes completely in Firefox. You can see what is going on at the site and I've copied the CSS so that you can see it.
#footer {
position: relative;
top: -180px;
margin-right: auto;
margin-left: auto;
padding-top: 10px;
padding-bottom: 15px;
background-color: #008080;
width: 800px;
}

Does any one have ideas how I can fix it.

Suze

 

try taking off position: relative; top: -180px; and put in clear:both;

 

I've tried that already. It does move the block down, but the shape is still distorted and even worse, you can see that the bottom border on the images is about 5px lower than it should be so that you can see the background below it.

 

Validate your html and css for those lists of errors. Do not use IE as your reference for how things should work. It is old, buggy and non-standard. Always, always, use a modern browser, such as Firefox, Opera or Safari as your test browser. Then check in IE to see if it screws it up. But the quirks and bugs are known and the hacks to fix it are listed on hundreds of sites.

 

There were a couple of errors crept into my html which I fixed and validated. My Css also validates. Nothing that fixes the problems in Firefox.

 

I am not on my dev computer so I can't check but the problem will not be with Firefox. The problem will be with the fact that you used IE as your test bed. Anyone who uses IE as their initial test is designing to a bug. As I said earlier, never, ever use IE as a reference for how things should work. It will screw you up more than anything and does not work like the modern browsers: FF, Opera, Safari and Chrome (or any others for that matter).

Just a glance at the markup shows me that the problem may lie in IEs float bug. IE expands parent elements to contain floated elements and this is NOT how things should work. Firefox, as always, is performing correctly. It is showing what you wrote. IE, as always, is wrong but I need to look at this in the morning to test it for the fix.

 

Christ, I wish that were so. The number of FF bugs I run across (that I can't easily hack for like I can for IE's bugz) increases monthly and is driving me up the WALL!

I also wouldn't say, build in x browser and then happen to go glance in IE, it's easier to fix IE errors if you see them right away and not when you're several paragraphs of code deep. Just test in everyone, and keep in mind that IE will usually be the one to render wrong.

 

To the contrary, if you are hacking a lot for FF then there is something else wrong. I'm not saying there aren't bugs in FF, too, but if you feel the number of bugs is increasing then it's not FF. A link where you are having such issues would be good to see.

Yes, you should glance at IE as you go along, and that is what I meant.

 

I haven't had a bug for a longtime in IE or FF or Opera, or any other browser for that matter that people still use. Mostly it's because of the way I code, and knowing which bugs to expect when I code. I haven't used a hack since June.

Suze, if you want to post up a zipped file of your images, I'll fix it for you. I'll probably just recode your stuff though since you have an extreme amount of extra code in there that really isn't needed.

Regards,
Nick

 

Hi

Thank you for offering to fix this for me. Here are the html and css. I'm going to attach the pictures in separate messages as they exceed the file size allowed.

Suze

View attachment dnile.zip

View attachment index.zip

 

Here are the buttons for the site.

View attachment buttons.zip

 

It'd be easier if you just email it to me.



Regards,
Nick

 

Here is the Banner.

View attachment recreational-property.zip

 

Here are the pictures for the site.

View attachment pictures1.zip

View attachment pictures2.zip

View attachment pictures3.zip

Thank you again for having a look at this.

Suze

 

Doc:
FF driving me up the wall:
-Inability to place or position form legends without hacks (this one really pisses me off, though I've always gotten through it)
-Lack of soft hyphen in FF2. FF3 lacks soft-hyphen inside anything set to display: table-cell or even display: table. No other compliant browser has this issue (and has destroyed a beautiful menu, IF I care about 600x800 which, I do)
-Inability to position absolutely positioned tooltips or anything else relative to any parent who is a table tag. Sometimes a non-table tag element can be placed inside the table and used as a reference, but not always. The specs don't say you have to, so technically it's not a bug, yet every other browser continues tables like every other relatively positioned parent, so this will hopefully become fixed

There are two others but I'd have to go through my code to find them, they also bothered me, and usually if there's not good solution, I say to myself, people using FF simply get the shittier web page. Which I should be saying for IE users (and do occasionally, but for all the sh*t IE throws at us, we can very very easily add a hack for, so I almost never worry about it).

There's also an issue with FF on any Linux system I've seen so far making all things like inputs and some other inlines way wider than on Windows. I haven't figured out what this is, but I've seen it on Ubuntu and Fedora. I'd like to check on Suse. It's not a font issue and it's not apparent on Opera or Konqueror. When Chrome works for Linux, I'll bet it'll be okay there too. This is rather minor, though, I just let stuff wrap and look ugly for those few on Linux systems (like myself).

 

Not sure what you mean. I haven't had to do much, if anything, with such positioning so can't say I'm aware of the problem.

Again, never tried it and I'm not on a computer I can try it with. At least, with FF, you can use those attributes which don't work at all in IE which should be more annoying.

Again, never tried this. I use CSS on an element to expose such things so I can place them anywhere. Seems I read an article about doing this somewhere recently, though.

Well, if it's not a bug, why fix it? But if every other browser does this, I see your point.

That's the first time I've heard someone say that.

The fact that you need a hack for so many things in IE is a huge time waster and I know you know that.

Right now, I'm doing all my dev work for two customers on Ubuntu. I have not seen that problem at all. Since they are both online ordering systems, I use a lot of <input>. I'm using Opera on Linux, too.

I'd just need to see example markup to really understand what you're talking about (and I reeaallly am not in the mood ).

When you scan through all the major issues with with every day code in IE and CSS plus the many things IE can't do at all, what you are talking about is some minor things with lesser used code except for one or two which I can't say I've ever seen.

 

Refer to the other post I made on this and see if that helps:

http://forums.digitalpoint.com/showthread.php?t=1111739

 

I think I went too far in derailing poor Suze's thread, so I'll prolly PM doc... however the first two problems have bug reports at bugzilla and the last one, like I said, Mozilla likely won't fix because the specs say tables and relative positioning is just "undefined".

fadetoblack2:
Your post is very good, however I've always validated and that's not the issue here (with me, I don't mean with Suze).

Suze, since i kinda derailed your thread, and no I never looked at the site before, looked now, here's what I see (though I dunno what's wrong with the footer in FF, looks ok):

<div id="footer" [color="red"]<---- no closing bracket[/color]
 	<p class="center2">
	<span class="small">Copyright &copy;SJM Design 2008</span><br/>
	<span class="small">Contact Us: <a href="mailto:susan@sjmdesign.ca?subject=Request for Information">susan@sjmdesign.ca</a></span><br/>
	</p>
	</div>

Now what does look nasty is the background colour of mainbody isn't behind the images (dunno if that's supposed to be?) and the images don't stay in a line-- they are floated and there's not enough room apparently for them to all fit side-by -side so their total width (which includes padding and margins) needs to be reduced.
Hint: if every box is inside the main #container, who is 800px wide and margin: 0 auto'd to the center, then you don't need to state that for any other boxes who are children of #container-- they cannot normally go wider than 800 and will remain in the center.

Code (markup):