Help with browser differences please

**WebMachine** · Dec 30, 2007, 13:12

I asked for help some time ago with this website I am doing for a friend (you guys were great) and have almost completed the home page, but I am now having problems dealing with all the tweaking that I have to do to get the different browsers to display correctly. I am using Geocities right now (I know it is causing some issues) but at this moment I can't afford to transfer my domain name to another free hosting site to test it. I will include the html and css files as well as the present url.

This is what is happening:
When I view the file, it is perfect on IE7 (this is what I want), there is 1px of white space below the sidebar on Safari, Firefox and Opera, and the water lily has moved from the top right to the top left in Opera.
When I view the live webpage in Geocities, in IE7 it is not centered and the lily has totally vanished, in Opera the lily is displaced to the upper left, and there is a 1px of white space below the sidebar, and in Safari, there is a big gap between the bottom of the sidebar and the footer.

The url is www.geocities.com/mustardforbrains ... any suggestions would be greatly appreciated. Thanks

**Dan Schulz** · Dec 30, 2007, 14:36

1.) Never use Geocities for free hosting. Use a hosting provider that doesn't inject crappy ads into your Web pages. www.awardspace.com is such an example of an ethical free hosting provider.

2.) Always use a complete and proper DOCTYPE (I didn't look at your page, since I don't trust Geocities, and I don't have the ability to approve attachments yet).

3.) Zero out the margins and padding on everything save for form controls. A quick and dirty way (which does affect form controls) is to use the universal selector at the very top of your stylesheet. It looks like this:

Code:

* {
    margin: 0;
    padding: 0;
}

**WebMachine** · Dec 30, 2007, 16:27

Thanks for your quick response. I was told about awardspace.com last time I asked for help, and I tried to sign up for free hosting, but you still have to pay to have your domain name transferred (which I can't do for a few days because my credit card is maxed out right now

) so for the time being I'm stuck with geocities.

The doctype I have is <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> and both my html and css files validated last time I checked.

The first line of my stylesheet is
html, body, div, h1, h2, h3, p, ul, li, a, img, span { margin: 0; padding: 0;}
I learned that trick from reading your posts in this forum. Would the universal one be better?

Maybe there is something in the stylesheet that you will be able to see once it gets approved.

**Dan Schulz** · Dec 30, 2007, 16:33

I personally use this instead of the universal selector since it targets everything BUT form controls:

Code:

html, body, address, blockquote, div, dl, form, h1, h2, h3, h4, h5, h6, ol, p, pre, table, ul,
dd, dt, li, tbody, td, tfoot, th, thead, tr, button, del, ins, map, object,
a, abbr, acronym, b, bdo, big, br, cite, code, dfn, em, i, img, kbd, q, samp, small, span,
strong, sub, sup, tt, var {
	margin: 0;
	padding: 0;
}

Though your issue is probably a layout/rendering quirk...

**Centauri** · Dec 30, 2007, 18:05

The Geocities hosting is adding a whole heap of stuff above the doctype declaration, which will drop browsers into quirks mode. It also adds a stylesheet, and those styles may also interfere with your own.

Probably not much point trying to do anything with this until you can move the site to another host (you could still move the site for testing / development purposes without changing the domain name over yet).

**WebMachine** · Dec 30, 2007, 18:46

Okay. I will sign up for a free subdomain in awardspace.com and after I have uploaded the files I'll let you all know. Thanks

The SitePoint Forums have moved.

User Tag List

Thread: Help with browser differences please

Thread Tools

Display

Help with browser differences please

Bookmarks

Bookmarks

Posting Permissions