PDA

View Full Version : Site breaks with FireFox 3



HVGrunt
Dec 9th, 2008, 12:00 AM
Hello all, I am very new to XHTML-CSS so I need some help with my website.

My website that I have almost completed looks good in IE 7 but gets distorted in FireFox 3. Can any of you experts please tell my what I can change in my code or CSS file to fix the problem.

The temp web page is located at: www.hostveteran.com/index.html

Please view with FireFox 3 to see the problem.

Thank You! :)

drhowarddrfine
Dec 9th, 2008, 02:46 AM
First rule of web developing. Never, ever use IE as a reference for how things work. Use Firefox as your reference, then fix IE. Now, onto looking at the page.

Also, specify what is exactly wrong. It looks like the only thing wrong is the order button.

HVGrunt
Dec 9th, 2008, 02:57 AM
First rule of web developing. Never, ever use IE as a reference for how things work. Use Firefox as your reference, then fix IE. Now, onto looking at the page.

Also, specify what is exactly wrong. It looks like the only thing wrong is the order button.

Thanks for the advice. I will start coding for Firefox first then IE. ;)

As for the broken parts of the website they are:

1. The order button in the header moves up in firefox.

2. Firefox shows a empty space in between the top navbar and the picture below it.

3. The logos picture at the bottom of the page near the footer only appears in IE and not Firefox.

Those are the three main things I cant figure out how to fix.

Thanks Again! :thumbsup:

drhowarddrfine
Dec 9th, 2008, 02:59 AM
Well, it's obvious you used IE to create this page because you ran into IEs bug of not collapsing margins properly. Also, no one in the world ever has a reason for a 'clearing div' no matter what you may have read somewhere. Get rid of all of them and let's see what it looks like. Use Firefox when you make corrections. Ignore IE till you get it working right in FF while working on one section at a time.

HVGrunt
Dec 9th, 2008, 03:42 AM
This design is a template that had most code already done. The only things I changed or added is the big picture thats below the top navbar and the starter package text and button that sits on it.

I deleted all the "clearing div's" and that caused the header to collapse with all text and header logo ontop of each other.

I fixed the logos picture in the footer. It now shows in FF3. :)

Now the only 2 problems are the space in the navbar and the top "order now" button.

drhowarddrfine
Dec 9th, 2008, 06:00 AM
What's happening with the space under the navbar is known as collapsing margins. At first it seems strange it does what it does but it does make sense. The h1 is expanding its margin and actually pushing out of its container up against the navbar while its containing div has margin from somewhere.

In any case, Firefox, as always, is performing correctly and IE is not. The fix involves touching up the divs but I'm not at my dev computer so I can't play with this right now. Let's see what tomorrow brings if no one else gets to it. You can google for "margin collapsing", too.

EDIT: One thing you can do to make sure my guess is correct is add 'padding:1em 0' to #topographic and see if that fixes everything.

HVGrunt
Dec 9th, 2008, 06:52 AM
EDIT: One thing you can do to make sure my guess is correct is add 'padding:1em 0' to #topographic and see if that fixes everything.

Thanks you very much! :thumbsup:

I added padding:.1em 0; to the #topgraphic. I just had to use a .1em instead of the 1em and it worked.

jhaycutexp
Dec 9th, 2008, 07:03 AM
okay here's your problem on the navigation that has a space..



.blue_topnav {
font-family:Verdana, Arial, Helvetica, sans-serif;
background:url(../images/blue_topnav_bg.gif) repeat-x bottom;
width:897px;
margin:13px 4px 0 4px;
padding:9px 33px 9px 0; <---this is your problem...
color:#FFF;
font-size:12px;
text-align:right;
height:13px;<---this is your problem...



the space in your nav is caused by this.. which the height of the text plus the padding is greater than the height of your div...

so 12px+9px = 21px and your divs height is only 13px;. the padding pushes down the element down creating the spaces underneath your navigation bar..

you might want to change the height, or remove the padding..

and i suggest you use lists on that.. navigation...

and as for the button,



#starter_button{
width:55px;
height:20px;
position: absolute; <--- this is your problem...
padding:0px 0px 0 0px;
left:252px; <--- this is your problem...
top:125px; <--- this is your problem...
margin:0 0 0px 0;



never ever use absolute position, unless there's a need to... or theres no way of fixing or work around the layout..

the button overlaps the text because of the absolute position.. therefore it's not positioned correctly... you might want to change the top position if you want to make it not overlap the text..

but i suggest using float there.. and put some margins to position your button...


hope this help

j