HTML and Browser Problems

Forum Moderators: open

Message Too Old, No Replies

HTML and Browser Problems

soccrates

9:13 pm on Sep 16, 2012 (gmt 0)

This is my first post so I hope I am in the right place. I have a 1 year old site.

I discovered that it looks fine in Chrome and Safari and awful in Firefox and IE. I have cleaned up the code validated all of the pages and no change. I do not know where to look to figure out my problem or a solution. I would appreciate some pointers. Thanks.

[edited by: tedster at 9:16 pm (utc) on Sep 16, 2012]
[edit reason] Sorry, no specific domains [/edit]

tedster

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

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

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

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

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

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

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

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

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

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

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

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

9:34 am on Sep 17, 2012 (gmt 0)

I will check that out. Thanks.

soccrates

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!