tedster
msg:4496001 | 9:19 pm on Sep 16, 2012 (gmt 0) |
Welcome to the forums, soccrates.
Since you've already validated your source code (that's exactly the right way to begin this debug) tell us what your DTD is. Then let's start by describing the specific ways that your pages don't look good in Firefox and IE. Clearly these are very important browsers with a large share of the market.
|
soccrates
msg:4496025 | 10:13 pm on Sep 16, 2012 (gmt 0) |
Thanks for getting back to me so quickly, tedster. This is from my my header:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="generator" content=
"HTML Tidy for Linux/x86 (vers 11 February 2007), see www.w3.org" />
<meta http-equiv="Content-Type" content="text/html; charset=us-ascii" />.
I noticed the problem first when I upgraded by OSX to Mountain Lion. The site looks pretty much the same in Firefox and IE. I have tried adjusting the screen size and that did not help.
The header is centered on the screen with a lot of grey around it. Underneath, the page title followed by the image that was embedded in the first paragraph. Then the text centered.
Next the horizontal nav in a column on the left, the left nav in a column in the center and then the sm buttons which were on the horizontal nav in a right column.
Next, the addthis bookmark bar centered, then the aweber sign up centered followed by google search which is centered on a white bar across the screen. The footer is where it should be but on a grey background.
I think that covers it. let me know if you need more. Thanks again.
|
soccrates
msg:4496027 | 10:16 pm on Sep 16, 2012 (gmt 0) |
I should mention that I went through the Firefox forums and followed their instructions on cache etc. and that did not resolve the problem.
|
lucy24
msg:4496031 | 10:50 pm on Sep 16, 2012 (gmt 0) |
| The header is centered on the screen with a lot of grey around it. Underneath, the page title followed by the image that was embedded in the first paragraph. Then the text centered... |
|
Do you mean that it's supposed to look like that, or that it's coming out that way although you don't want it to?
Each of the features you describe should be explicitly spelled out in the CSS. Text alignment, padding, top and bottom margins, header color, background color, et cetera. In fact, it's a good idea to make up some boilerplate that you put in every stylesheet, so you'll have your starting position.
Leaving these things out will not affect validation, because they're not errors. They simply mean that each browser will use its own defaults-- and that's what you're trying to override. Browser defaults are good for individual user choices, notibly their preferred font and size for regular text. (PLEASE don't change these, unless you have a very narrowly defined target audience and don't mind annoying the others.) Everything else is for you to personalize.
|
soccrates
msg:4496038 | 11:05 pm on Sep 16, 2012 (gmt 0) |
I was describing how it was looking which is not how it should look. The template - which uses css - is 1000px wide with a white background. At the top the header which covers the full with then the horizontal nav with social media buttons underneath also the full width of the page. It is a green color with white lettering. The left and right columns are 170 and 190 px and the center the balance. The left column has the left nav and the addthis bookmark bar. The right column has the aweber sign up and google custom search. All the text is in the center with an image to the right in the first paragraph. That is the standard format for all the pages.
|
phranque
msg:4496039 | 11:10 pm on Sep 16, 2012 (gmt 0) |
as suggested by tedster you should insert some boilerplate css that sets the default margins/spacing/padding to 0 and go from there.
|
soccrates
msg:4496044 | 11:24 pm on Sep 16, 2012 (gmt 0) |
Thanks, phranquw and tedster. I checked my css and the body, container and header all have margins and padding already at 0. Should I add something else?
|
phranque
msg:4496057 | 12:24 am on Sep 17, 2012 (gmt 0) |
I would use firebug or a similar tool to help you see what's happening with the layout in firefox.
|
soccrates
msg:4496062 | 12:33 am on Sep 17, 2012 (gmt 0) |
Thanks, phranque. I will give it a shot. BTW, since I am using XHTML, should I consider switching my site to HTML 4 strict? I have starting reading forum responses and it seems that XHTML may be a bad choice. (It was the template design when I started my site.)
|
phranque
msg:4496070 | 1:12 am on Sep 17, 2012 (gmt 0) |
before html5 these were among the somewhat foundational WebmasterWorld threads on the subject.
Why most of us should NOT use XHTML:
http://www.webmasterworld.com/forum21/12026.htm [webmasterworld.com]
and then having decided xhtml was unnecessary...
FAQ: Choosing the best doctype for your site:
http://www.webmasterworld.com/html/3061635.htm [webmasterworld.com]
|
soccrates
msg:4496074 | 1:24 am on Sep 17, 2012 (gmt 0) |
Thanks. I think that I may go ahead and change to HTML 4 strict. It's a big job but will eliminate the browser problem. I have only had a couple of online HTML classes, so I am really green. I know I am in over my head and have to learn slowly. Converting my site may help me go at my own pace. I appreciate the help.
|
tedster
msg:4496084 | 3:10 am on Sep 17, 2012 (gmt 0) |
You can just use the HTML5 DTD and not worry about it. Then all browsers will be using standards mode, not quirks mode, and both HTML and XHTML mark-up will be valid.
|
soccrates
msg:4496190 | 9:34 am on Sep 17, 2012 (gmt 0) |
I will check that out. Thanks.
|
soccrates
msg:4496995 | 6:37 pm on Sep 18, 2012 (gmt 0) |
Just wanted to let you all know that I have a site up and running in HTML5 and it works great on most of the browsers including Firefox and IE. I am very grateful for all your help. You rock!
|
|
