homepage Welcome to WebmasterWorld Guest from 54.196.62.132
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

    
HTML and Browser Problems
soccrates




msg:4495991
 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




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!

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved