PDA

View Full Version : Problems getting website to display correctly in Firefox



soc_monki
Apr 19th, 2009, 10:33 PM
thanks in advance!

ive been out of the HTML game for a while, but am working on learning all the new HTML and CSS things. Making a website for a buddy who is re-starting his business. I am attempting to make it work in both Firefox and IE and when checking on my computer it works perfectly. However when I upload it to his hosting (godaddy.com) Firefox messes up. IE looks fine (just as it does on my computer when testing).
I've searched and tried to figure out why it's messing up, but I can't figure it out. I know it's probably something really simple that I'm not seeing and maybe I've been working too hard trying to get it to work right! Anyway...the website address is Rebel Networking and Repair (http://rebelnetworkingonline.com). The code is just how I wrote it on my computer, except for the Ad code that GoDaddy adds to the bottom (which will be disposed of when we later upload the site to his servers.)

anyway...I just dont know what to do. any help is appreciated! If i need to post any additional code I will just let me know! Thanks!

drhowarddrfine
Apr 19th, 2009, 10:45 PM
Apparently you've been out for 10 years or more since some of your elements haven't existed since then, such as <layer>. The web developer's mantra is "If it works in IE, but not FF, then your markup is wrong".

So, let's clean up the HTML errors (http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Frebelnetworkingonline.com%2F) and the CSS errors (http://jigsaw.w3.org/css-validator/validator?profile=css21&warning=0&uri=http%3A%2F%2Frebelnetworkingonline.com%2F) and see where we stand.

EDIT: Oops. Possibly the <layer> stuff is added by godaddy(?) and is outside the <html> element.

soc_monki
Apr 19th, 2009, 10:50 PM
well, i checked everything through the validator and the only errors i get are due to the Godaddy code that is added after i upload it. i dont even have a <layer> tag in my code! thats one thing that really bothered me. i checked it, it showed me all these errors and i looked and it was code i didnt even put in the page!

but yes, i havent made a web page in about 10 years! pretty sad, isnt it?

drhowarddrfine
Apr 19th, 2009, 10:56 PM
I've only skimmed so far. It looks like you might have created this while testing in IE? Make sure you always use any other browser cause IE will screw you up every time.

Still looking.

EDIT: You have .wrap set at 520px and the content is overflowing in FF. IE is expanding the box but not sure why yet. (It shouldn't).

soc_monki
Apr 19th, 2009, 11:00 PM
actually, i used Firefox. when checking on my computer it works perfectly in both Firefox 3.0.8 and IE 7. i even created 2 CSS files so i could make sure it would work for both since what worked for Firefox wasnt working for IE. Look the same on my computer, but when uploaded it gets all wonky in Firefox!

Maybe i should just start from scratch and re-code it all? LOL I also coded with Firefox in mind because of all the problems ive read about IE doing weird things and not being good with standards, and a lot of what i read i got from your sig!

Excavator
Apr 19th, 2009, 11:02 PM
Hello soc_monki,
A couple things you could do to make FF render what you're seeing in IE...

The gap between your header image and .links is caused by an uncolapsing margin. You can fix it by removing the margin-top:40px; in .links2 or adding a border to .links.

See uncollapsing margin here (http://nopeople.com/CSS/uncollapsing-margin/index.html)

Removing the height on your .wrap will let it enclose your footer and that will let it show the background color all the way down. At some point you may run into uncleared floats causing this same problem. For future reference, have a look at how to clear floats (http://www.quirksmode.org/css/clearing.html) even though it doesn't apply to you now.

Try making your CSS look like this -

html {
margin:0;
padding:0;
background:#2e2e2e;
color:#000066;
}
body {
margin:0;
padding:0;
background:#2e2e2e;
color:#000066;
}
body {
min-width:750px;
}
* {
margin: 0;
padding: 0;
border: none;
}
.wrap {
background:#000066;
margin:0 auto;
width:750px;
/*remove height*/
border: 3px outset #C0C0C0;
}


.header {
background-image:url('headerbar.jpg');
height:100px;
width:750px;
}
a {
color: #FFFFFF;
text-decoration: none;
}
a:visited {
color: #FFFFFF;
text-decoration: none;
}
a:hover {
color: #FFFFFF;
text-decoration: none;
}

.links {
background-image:url('linkbar.jpg');
width=750px;
height:54px;
background-color:#000066;
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
color: #FFFFFF;
border-top: 1px solid #000; /*this gets rid of uncolapsing margin*/

}

.links2 {
padding: 2px;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
color: #FFFFFF;
margin-top:40px; /*may need to adjust this*/
}

Excavator
Apr 19th, 2009, 11:04 PM
Have a look at some menu's here that you might like to use for your links - http://nopeople.com/design/CSS%20tips/index.html

drhowarddrfine
Apr 19th, 2009, 11:06 PM
Yep. IE is incorrectly expanding .wrap to contain the floated elements. Firefox, as always, is performing correctly. This is why the footer is hanging out of the box. Normally, just adding 'overflow:auto' to .wrap would fix this by imitating the IE bug but it won't work that easily here.

Excavator
Apr 19th, 2009, 11:14 PM
Yep. IE is incorrectly expanding .wrap to contain the floated elements. Firefox, as always, is performing correctly. This is why the footer is hanging out of the box. Normally, just adding 'overflow:auto' to .wrap would fix this by imitating the IE bug but it won't work that easily here.

drhowarddrfine,
The OP's .wrap has a set height of 520px. The uncollapsing margin is pushing things out past the bottom of .wrap, not uncleared floats.

soc_monki
Apr 19th, 2009, 11:15 PM
wow!! Excavator your added code worked beautifully! i have to tweak the margins for the links but thats pie compared to what i was dealing with! Thank you so much! i really feel dumb now! :)

and thank you drhowarddrfine! oh happy day, i was losing sleep over this (literally) and now i see it was that simple to fix.

thank you both! i have to leave and go play some music with some friends in a bit, but this makes my day! later on ill tweak the code a bit more to get the links correctly lined up and hope i dont mess anything else up.

arigato!

drhowarddrfine
Apr 19th, 2009, 11:15 PM
drhowarddrfine,
The OP's .wrap has a set height of 520px. The uncollapsing margin is pushing things out past the bottom of .wrap, not uncleared floats.

Yes, I pointed that out in my first or second post. I didn't delete that and only tried clearing it, which didn't work. Obviously removing it was the real key.

Excavator
Apr 19th, 2009, 11:18 PM
Yes, I pointed that out in my first or second post. I didn't delete that and only tried clearing it, which didn't work. Obviously removing it was the real key.

Oops, I didn't see your second post. Sorry - :o