Different Browser Problems

bmroyer · September 14, 2011

I am searching for an easy fix for all templates I make with different browsers. Currently my template looks good in Chrome, Fire Fox, but not in IE. Its HTML, but they are .php files because I want to add php functions later so I made the whole site in php. CSS:

html { margin:0px;height:100%;} body {background-color:#5977FF;margin:0px;height:100%;} #header {padding:0px 0px 0px 0px;width:100%;background:#425D8F;padding-bottom:1%;} #nav {float:left;width:15%;background:#60FF44;padding:10px 0;height:90%;padding-bottom:7.1%;} #content {width:100%;height:100%;text-align:left;background:#fff;padding: 0px 0px 0px 0px;margin:0;padding-bottom:0px;padding-top:20px; } #news {float:right;text-align:center;padding:10px 10px;width:15%;margin:0;background:#60FF44;height:90%;padding-bottom:7.1%;} #footer {background:#5977FF;clear:both;text-align:center;padding-top:20px;padding-bottom:10px;height:2%;} #wrapper {margin:0px auto;height:100%;width:80%;}

Index.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><meta name="description" content="Custom Web Designs | Great Customer Service | Lowest Rates Anywhere on the Web" /><meta name="keywords" content="Zuppora, web design, php, html, css, custom, cheap, free, dynamic, blogs, forums, code, professional, easy, paypal, graphics " /><meta name="robots" content="index,follow" /><link rel="stylesheet" href="styles.css" type="text/css" media="screen" /><title>Zuppora.com</title></head><html><body> <div id="wrapper"><div id="header"><?php include("header.php"); ?></div> <div id="nav"><?php include ("menu.php"); ?></div> <div id="news"><?php include ("news.php"); ?></div>  <div id="content"><?php include ("content.php"); ?></div> <div id="footer"><?php include ("footer.php"); ?></div</div></table></body></html>

Header:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><meta name="description" content="Custom Web Designs | Great Customer Service | Lowest Rates Anywhere on the Web" /><meta name="keywords" content="Zuppora, web design, php, html, css, custom, cheap, free, dynamic, blogs, forums, code, professional, easy, paypal, graphics " /><meta name="robots" content="index,follow" /><link rel="stylesheet" href="styles.css" type="text/css" media="screen" /><title>Zuppora.com</title></head><html><body><h1><br />Zuppora.com</h1><h4><em>"Custom Web Designs"</em></h4> </body></html>

Footer:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><meta name="description" content="Custom Web Designs | Great Customer Service | Lowest Rates Anywhere on the Web" /><meta name="keywords" content="Zuppora, web design, php, html, css, custom, cheap, free, dynamic, blogs, forums, code, professional, easy, paypal, graphics " /><meta name="robots" content="index,follow" /><link rel="stylesheet" href="styles.css" type="text/css" media="screen" /><title>Zuppora.com</title></head><html><body><h4><em>Copyright 2011 | Zuppora.com</em></h4></body></html>

Menu.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><meta name="description" content="Custom Web Designs | Great Customer Service | Lowest Rates Anywhere on the Web" /><meta name="keywords" content="Zuppora, web design, php, html, css, custom, cheap, free, dynamic, blogs, forums, code, professional, easy, paypal, graphics " /><meta name="robots" content="index,follow" /><link rel="stylesheet" href="styles.css" type="text/css" media="screen" /><title>Zuppora.com</title></head><html><body><table width="100%" cellpadding="3"><tr><td><h3>Menu</h3></td></tr> <tr><td><a href="index.php?content="home"<strong>Home</strong></a></td></tr><tr><td><a href="quote.php?content="free quote"<strong>Free Quote</strong></a></td></tr><tr><td><a href="support.php?content="Support Forum"<strong>Support</strong></a></td></tr><tr><td><a href="about.php?content="About Us"<strong>About Us</strong></a></td></tr></table></body></html>

News.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><meta name="description" content="Custom Web Designs | Great Customer Service | Lowest Rates Anywhere on the Web" /><meta name="keywords" content="Zuppora, web design, php, html, css, custom, cheap, free, dynamic, blogs, forums, code, professional, easy, paypal, graphics " /><meta name="robots" content="index,follow" /><link rel="stylesheet" href="styles.css" type="text/css" media="screen" /><title>Zuppora.com</title></head><html><body><p>Here is where the news will go.</p> </body></html>

Content.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><meta name="description" content="Custom Web Designs | Great Customer Service | Lowest Rates Anywhere on the Web" /><meta name="keywords" content="Zuppora, web design, php, html, css, custom, cheap, free, dynamic, blogs, forums, code, professional, easy, paypal, graphics " /><meta name="robots" content="index,follow" /><link rel="stylesheet" href="styles.css" type="text/css" media="screen" /><title>Zuppora.com</title></head><html><body><h1>Welcome to Zuppora.com,</h1><h4><p></p>We are a small web design company formed in September of 2011. We haven't been in business long, but we have alot to offer.</p></h4><h4><p>Our basic designs costs around $25. If you want us to add the content for you, it will be $10 per page. We also offer uploading services, and installing various softwares on your servers including phpBB3.</p></h4>  </body></html>

dsonesuk · September 14, 2011

all you require in the included files is the html content between <body>..</body> so header.php you would have only<h1><br />Zuppora.com</h1><h4><em>"Custom Web Designs"</em></h4>footer.php<h4><em>Copyright 2011 | Zuppora.com</em></h4>and so on...any javascript, css files that is required for these included pages should be linked to in the index.php page only

dsonesuk · September 14, 2011

you also have two html tags in index.php page <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><meta name="description" content="Custom Web Designs | Great Customer Service | Lowest Rates Anywhere on the Web" /><meta name="keywords" content="Zuppora, web design, php, html, css, custom, cheap, free, dynamic, blogs, forums, code, professional, easy, paypal, graphics " /><meta name="robots" content="index,follow" /><link rel="stylesheet" href="styles.css" type="text/css" media="screen" /><title>Zuppora.com</title></head><html> <body> Once you have fixed these errors, see what the results are if you are still having problem, post new code and explain the problem area.

bmroyer · September 14, 2011

The only problem i am having is with Internet Explorer. The to side bars are stretching passed the content towards the footer. And there is a gap between the header and the content/side bars. But in Chrome & Firefox its fine. I would just let it go, but all computers have IE installed so its a common browser. Probably just as common as Chrome and Firefox.

Ingolme · September 14, 2011

As you've been told, you have to fix mistakes in your code. Go to http://validator.w3.org and you'll see that there are a lot of problems that may will cause your page to display incorrectly in some browsers.

bmroyer · September 14, 2011

I fixed the error he caught and I also fixed the 2 errors found in the validator. Still same result.

dsonesuk · September 14, 2011

Which may be fixed once! you have corrected all the errors, and the page validates at http://validator.w3.org/check, we can't truly identify the problem until these are corrected, because these may be causing the problem in the first place. Having a quick look you have to many closing anchors, paragraph tags all of which may be behind the problem you are having.

bmroyer · September 14, 2011

index.php

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><meta name="description" content="Custom Web Designs | Great Customer Service | Lowest Rates Anywhere on the Web" /><meta name="keywords" content="Zuppora, web design, php, html, css, custom, cheap, free, dynamic, blogs, forums, code, professional, easy, paypal, graphics " /><meta name="robots" content="index,follow" /><link rel="stylesheet" href="styles.css" type="text/css" media="screen" /><title>Zuppora.com</title></head> <body> <div id="wrapper"><div id="header"><?php include("header.php"); ?></div> <div id="nav"><?php include ("menu.php"); ?></div> <div id="news"><?php include ("news.php"); ?></div>  <div id="content"><?php include ("content.php"); ?></div> <div id="footer"><?php include ("footer.php"); ?></div></div></body></html>

bmroyer · September 14, 2011

btw, I think its the .css not the html.

Ingolme · September 14, 2011

Are you copying the code from the source that the browser shows you in order to validate the page? Remember that all the <!DOCTYPE>, <head>, <body>, <meta> and <link> tags need to be removed from everywhere except the index.

dsonesuk · September 14, 2011

The problem with using percentages to achieve 100% height design to fit browser window, is that any padding, margin anywhere! including the body, html elements will affect the height of the design, its probably the worst template to use, as you will end up different areas of the layout not lining up correctly as you have already found.

bmroyer · September 14, 2011

I just did the index page. I'll do the others later on, I have to go out to work. Thanks for the help so far. Btw, I have a server set up on my computer and have been viewing it via localhost. I could upload it to a real server later on though to make it easier.

bmroyer · September 15, 2011

Are you saying not to use percentages? Aren't percentages better than fixed because it gives you a fluid layout that will adjust to user's resolutions/screens? I'm pretty sure if I made it a fixed width I wouldn't have any problems, but I want a liquid layout.

dsonesuk · September 15, 2011

percentages fine for fluid width layout, when it comes to a page being 100% browser height, and extent with content it becomes more complicated, as padding etc add to the height so you have to allow for this, it would be easy to set a minimum height with min-height: rather than use percentages for height.

bmroyer · September 15, 2011

Fixed it up a bit. Looks better in IE than it does in Chrome now. Still have the space between the header and content area. CSS:

html { margin:0px;height:100%;} body {background-color:#5977FF;margin:0px;min-height:600px;} #header {padding:0px 0px 0px 0px;width:100%;background:#425D8F;} #nav {float:left;width:15%;background:#60FF44;min-height:600px;} #content {width:100%;min-height:600px;text-align:left;background:#fff;margin:0; } #news {float:right;text-align:center;width:15%;margin:0;background:#60FF44;min-height:600px;} #footer {background:#5977FF;clear:both;text-align:center;height:2%;} #wrapper {margin:0px auto;min-height:600px;width:80%;}

index.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><meta name="description" content="Custom Web Designs | Great Customer Service | Lowest Rates Anywhere on the Web" /><meta name="keywords" content="Zuppora, web design, php, html, css, custom, cheap, free, dynamic, blogs, forums, code, professional, easy, paypal, graphics " /><meta name="robots" content="index,follow" /><link rel="stylesheet" href="styles.css" type="text/css" media="screen" /><title>Zuppora.com</title></head> <body> <div id="wrapper"><div id="header"><?php include("header.php"); ?></div> <div id="nav"><?php include ("menu.php"); ?></div> <div id="news"><?php include ("news.php"); ?></div>  <div id="content"><?php include ("content.php"); ?></div> <div id="footer"><?php include ("footer.php"); ?></div></div></body></html>

header.php

<html><body><h1><br />Zuppora.com</h1><h4><em>"Custom Web Designs"</em></h4> </body></html>

footer.php

<html><body><h4><em>Copyright 2011 | Zuppora.com</em></h4></body></html>

menu.php

<html><body><ul id="navlinks"><h3>Menu</h3> <li><a href="index.php?content="home"<strong>Home</strong></a></li> <li><a href="quote.php?content="free quote"<strong>Free Quote</strong></a></li> <li><a href="support.php?content="Support Forum"<strong>Support</strong></a></li> <li><a href="about.php?content="About Us"<strong>About Us</strong></a></li> </ul></body></html>

news.php

<body><p>Here is where the news will go.</p> </body></html>

content.php

<html><body><h1>Welcome to Zuppora.com,</h1><h4><p></p>We are a small web design company formed in September of 2011. We haven't been in business long, but we have alot to offer.</p></h4><h4><p>Our basic designs costs around $25. If you want us to add the content for you, it will be $10 per page. We also offer uploading services, and installing various softwares on your servers including phpBB3.</p></h4>  </body></html>

bmroyer · September 15, 2011

or http://battlecows.com/Zuppora/

dsonesuk · September 15, 2011

Remember what i said about the html content required in post#2 for included files... between not including <body>...</body>. Anyway the gap problem is probably caused by the margins of <h></h> headers in content and header, known as collapsing margins, which is usually fixed by using overflow:hidden for #header and #content

bmroyer · September 16, 2011

overflow:hidden; moved my content below the footer, so that didn't work. Everything looks good except that gap from the header and footer. http://battlecows.com/Zuppora

Ingolme · September 16, 2011

The page will continue to be a mess as long as your code isn't valid.

dsonesuk · September 16, 2011

overflow:hidden; moved my content below the footer, so that didn't work. Everything looks good except that gap from the header and footer. http://battlecows.com/Zuppora

It does work, but because you have width 100% in content (which is not required, as all block elements extend to total width of parent element, unless float, position: absolute or fixed is used), you end up with the problem you have, remove width:100% and reinstate overflow:hidden, and then add overflow:hidden to footer as well, FIX THE MULTIPLE <html></html><body></body> when you view source problem, and you are good to go.

bmroyer · September 17, 2011

Ok I know what your saying about fixing the multiple things. My FTP wasn't updating the new files when overwriting. I had to edit them manually. I was wondering what you were talking about because I've already done it lol. Everything works now except now I new a space above the header and below the footer. http://battlecows.com/Zuppora

dsonesuk · September 17, 2011

I cant see space above header?, the footer will have space depending on the users browser, and resolution of the users monitor, you need to validate your page and correct error misplaced <p> in header, misplaced <h> inside <ul>, no closing angled bracket for open anchor tags and

<a href="index.php?content="home"<strong>Home</strong></a>

should be

<a href="index.php?content=home"><strong>Home</strong></a>

the other links need amended also

bmroyer · September 17, 2011

No I was saying there needs to be a space. The header runs the whole way to the top of the page, and the footer runs down to the bottom of the page.

dsonesuk · September 17, 2011

just remove the margin:0; from body, which will give you a default space of 10px all around , or define your own margin space.

bmroyer · September 17, 2011

That worked! Everything looks good now. All I have to do now is validate all the code and I'm good to go! Thanks for the help!

Different Browser Problems

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Archived