Welcome to WebmasterWorld Guest from 54.167.229.178

Forum Moderators: incrediBILL

Message Too Old, No Replies

HTML and Browser Problems

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

New User

joined:Sept 16, 2012
posts: 36
votes: 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]

9:19 pm on Sept 16, 2012 (gmt 0)

Senior Member

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:May 26, 2000
posts:37301
votes: 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.
10:13 pm on Sept 16, 2012 (gmt 0)

New User

joined:Sept 16, 2012
posts: 36
votes: 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.
10:16 pm on Sept 16, 2012 (gmt 0)

New User

joined:Sept 16, 2012
posts: 36
votes: 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.
10:50 pm on Sept 16, 2012 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:13058
votes: 301


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.
11:05 pm on Sept 16, 2012 (gmt 0)

New User

joined:Sept 16, 2012
posts: 36
votes: 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.
11:10 pm on Sept 16, 2012 (gmt 0)

Administrator

WebmasterWorld Administrator phranque is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Aug 10, 2004
posts:10551
votes: 10


as suggested by tedster you should insert some boilerplate css that sets the default margins/spacing/padding to 0 and go from there.
11:24 pm on Sept 16, 2012 (gmt 0)

New User

joined:Sept 16, 2012
posts: 36
votes: 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?
12:24 am on Sept 17, 2012 (gmt 0)

Administrator

WebmasterWorld Administrator phranque is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Aug 10, 2004
posts:10551
votes: 10


I would use firebug or a similar tool to help you see what's happening with the layout in firefox.
12:33 am on Sept 17, 2012 (gmt 0)

New User

joined:Sept 16, 2012
posts: 36
votes: 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.)
1:12 am on Sept 17, 2012 (gmt 0)

Administrator

WebmasterWorld Administrator phranque is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Aug 10, 2004
posts:10551
votes: 10


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]
1:24 am on Sept 17, 2012 (gmt 0)

New User

joined:Sept 16, 2012
posts: 36
votes: 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.
3:10 am on Sept 17, 2012 (gmt 0)

Senior Member

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:May 26, 2000
posts:37301
votes: 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.
9:34 am on Sept 17, 2012 (gmt 0)

New User

joined:Sept 16, 2012
posts: 36
votes: 0


I will check that out. Thanks.
6:37 pm on Sept 18, 2012 (gmt 0)

New User

joined:Sept 16, 2012
posts: 36
votes: 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!