SitePoint Sponsor |
|
User Tag List
Results 1 to 6 of 6
-
Dec 30, 2007, 13:12 #1
- Join Date
- Jun 2007
- Location
- Ontario, Canada
- Posts
- 430
- Mentioned
- 2 Post(s)
- Tagged
- 0 Thread(s)
Help with browser differences please
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. ThanksLast edited by WebMachine; Dec 30, 2007 at 13:18. Reason: attachments didn't attach.
-
Dec 30, 2007, 14:36 #2
- Join Date
- May 2006
- Location
- Aurora, Illinois
- Posts
- 15,476
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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; }
Save the Internet - Use Opera | May my mother rest in peace: 1943-2009
Dan Schulz - Design Team Advisor | Follow me on Twitter
SitePoint References: HTML CSS JavaScript | Become A Guru
WordPress SEO Checklist | What WordPress Plugins Do You Use?
Web Standards Curriculum | Image Free Equal Height Columns
-
Dec 30, 2007, 16:27 #3
- Join Date
- Jun 2007
- Location
- Ontario, Canada
- Posts
- 430
- Mentioned
- 2 Post(s)
- Tagged
- 0 Thread(s)
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.
-
Dec 30, 2007, 16:33 #4
- Join Date
- May 2006
- Location
- Aurora, Illinois
- Posts
- 15,476
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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; }
Save the Internet - Use Opera | May my mother rest in peace: 1943-2009
Dan Schulz - Design Team Advisor | Follow me on Twitter
SitePoint References: HTML CSS JavaScript | Become A Guru
WordPress SEO Checklist | What WordPress Plugins Do You Use?
Web Standards Curriculum | Image Free Equal Height Columns
-
Dec 30, 2007, 18:05 #5
- Join Date
- May 2007
- Location
- Newcastle, Australia
- Posts
- 3,718
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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).
-
Dec 30, 2007, 18:46 #6
- Join Date
- Jun 2007
- Location
- Ontario, Canada
- Posts
- 430
- Mentioned
- 2 Post(s)
- Tagged
- 0 Thread(s)
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
Bookmarks