Results 1 to 7 of 7

Thread: Webpage displays differently in Firefox/IE

  1. #1
    Join Date
    Feb 2008
    Posts
    36
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Default Webpage displays differently in Firefox/IE

    There are some differences in the way my main page is displayed in Firefox compared with IE. In Firefox the main menu is pushed down and page border is taller. Can anyone tell me what’s causing these differences? I would like to get both browsers to display my site with fewer differences.

    Link to site:
    http://www.inspiredvisuals.com

    Code of index page:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xml:lang="en">
    
    <head>
    <title>Chris Schlosser's Portfolio</title>
    
    <meta http-equiv="Content-Language" content="en-gb" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    
    
    
    <style type="text/css">
    
    
    
    body {
    	font-family: arial, helvetica, serif;
    	background-color: #212630;
    	FONT-SIZE: 16px;
    	background= #212630;
            BACKGOUND: url(Images/MenuBG.jpg);
    	padding: 32px;
    	margin: 0;
    }
    
    #content {
    	width: 34em;
    	background-color: #212630;
    	padding: .5em 0;
    	Border: 6px double #276F91;
    	margin: auto;
    	voice-family: "\"}\""; 
    	voice-family:inherit;
    	width: 64.5em;
    
    }
    html>body #content {
    	width: 1033px;
    } 
    
    a {
    	text-decoration: none;
    }
    
    a:link {
    	color: #080;
    }
    
    a:visited {
    	color: #276F91;
    }
    
    a:active {
    	color: #779900;
    }
    
    a:hover {
    	text-decoration: underline;
    	
    }
    
    h1 {
    	text-align: center;
    	padding: 0 0 0.25em 0;
    	margin: 0;
    }
    
    ul {
    	list-style: none;
    	padding: 0;
    	margin: 0;
    	
    }
    
    #nav a {
    	font-weight: bold;
    	color: #B4AEAE;
    }
    
    #nav a {
    	text-decoration: none;
    }
    
    #nav li li a {
    	display: block;
    	font-weight: normal;
    	color: #B4AEAE;
    	padding: 0.2em 10px;
    	
    }
    
    #nav li li a:hover {
    	padding: 0.2em 5px;
    	border: 5px solid white;
    	border-width: 0 5px;
    	color: white;
    	text-decoration: underline;
    }
    
    li {
            
    	float: left;
    	position: relative;
    	width: 193px;
    	text-align: left;
    	cursor: default;
    	
    	BACKGROUND-COLOR: #212630;
    	BORDER-RIGHT: #276F91 5px solid;
            BORDER-TOP: #276F91 1px solid;
            BORDER-LEFT: #276F91 4px solid;
            BORDER-BOTTOM: #276F91 1px solid;
    }
    
    
    li a {
    display:block;
    text-align:center;
    }
    
    li li, li div {
    text-align:center;
    }
    
    
    li#first {
    	border-left-width: 1em;
    }
    
    li#last {
    	border-right-width: 1em;
    }
    
    li ul {
    	display: none;
    	position: absolute;
    	top: 100%;
    	left: 0;
    	font-weight: normal;
    	background: url(Images/MenuBG.jpg) center no-repeat;
    	padding: 0.5em 0 1em 0;
    	border-right: solid 2px #276F91;
    	border-left: solid 2px #276F91;
    	border-bottom: solid 2px #276F91;
    }
    
    li>ul {
    	top: auto;
    	left: auto;
    }
    
    li li {
    	display: block;
    	float: none;
    	background-color: transparent;
    	border: 0;
    }
    
    li:hover ul, li.over ul {
    	display: block;
    }
    
    hr {
    	display: none;
    }
    
    p {
    	clear: left;
    	background: url(Images/MenuBGhmm.jpg) center left no-repeat;
    	padding: 1em 1em 0 1em;
    	margin: 0;
    }
    
    p.image {
    	float: right;
    	font-size: 0.8em;
    	text-align: center;
    	color: red;
    	padding: 1.25em 1.25em 0.25em 0.25em;
    }
    
    p.image img {
    	display: block;
    	border: 1px solid #276F91;
    }
    
    
    </style>
    
    <script type="text/javascript"><!--//--><![CDATA[//><!--
    
    
    
    
    
    
    startList = function() {
    	if (document.all&&document.getElementById) {
    		navRoot = document.getElementById("nav");
    		for (i=0; i<navRoot.childNodes.length; i++) {
    			node = navRoot.childNodes[i];
    			if (node.nodeName=="LI") {
    				node.onmouseover=function() {
    					this.className+=" over";
    				}
    				node.onmouseout=function() {
    					this.className=this.className.replace(" over", "");
    				}
    			}
    		}
    	}
    }
    window.onload=startList;
    
    //--><!]]></script>
    
    </head>
    
    <body>
    
    <div id="content">
    
    <center><img src="Images/DigitalArt.jpg" alt="Chris Schlosser's Portfolio"/><img src="Images/Logo.gif" alt="Chris Schlosser's Portfolio"/><img src="Images/Photography.jpg" alt="Chris Schlosser's Portfolio"/></center>
    
    
    
    
    
    
    
    <hr />
    
    <ul id="nav">
    
    	<li id="first">
    		<div><a href="Pages/Welcome.html" target="main" style="border-right:1px #276F91 solid;">Main</a></div>
    	
    
    	<li>
    		<div><a href="" style="border-right:1px #276F91 solid;">Digital Art</a></div>
    		<ul>
    			<li><a href="Pages/2D.html" target="main"><SPAN TITLE="2D">2D</SPAN></A></li> 
    			<li><a href="Pages/3D.html" target="main"><SPAN TITLE="3D">3D</SPAN></A></li> 
    			<li><a href="Pages/Animations.html" target="main"><SPAN TITLE="Animations">Animations</SPAN></A></li> 
    			
    			<li><img src="Images/MothThumb.gif"alt="Eight-Spotted Forester Moth" /></li>
    		</ul>
    	</li>
    
    </li>
    
    	<li>
    		<div><a href=""style="border-right:1px #276F91 solid;">Photography</a></div>
    		<ul>
    			<li><a href="Pages/Flora.html" target="main"><SPAN TITLE="Plants">Flora</SPAN></A></li>
                            <li><a href="Pages/Fauna.html" target="main"><SPAN TITLE="Animals">Fauna</SPAN></A></li>
    			<li><a href="Pages/Scenics.html" target="main"><SPAN TITLE="Scenics">Scenics</SPAN></A></li>
                            <li><a href="Pages/Buildings.html" target="main"><SPAN TITLE="Buildings">Buildings</SPAN></A></li>
    			<li><a href="Pages/Abstract+Objects.html" target="main"><SPAN TITLE="Objects">Abstract / Objects</SPAN></A></li>
    			<li><a href="Pages/Store.html" target="main"><SPAN TITLE="Buy My Photos">Buy My Photos</SPAN></A></li>			
    			<li><img src="Images/BleedingHeartsThumb.jpg" border: 2  alt="Bleading Heart Flowers" /></li>
    		</ul>
    	</li>
    
    <li>
    		<div><a href="" style="border-right:1px #276F91 solid;">About</a></div>
    		<ul>
    			<li><a href="Pages/Bio.html" target="main"><SPAN TITLE="Bio">Bio</SPAN></A></li>
    			<li><a href="Pages/Resume.html" target="main"><SPAN TITLE="Resume">Resume</SPAN></A></li>
    			<li><a href="mailto:Cyclone.Chris@gmail.com"><SPAN TITLE="How to contact me">Contact</SPAN></A></li>
    			
    		</ul>
    	</li>
    
    	<li id="last">
    		<div><a href="">Links</a></div>
    		<ul>
    			<li><a href="http://www.cgtalk.com" target="_blank"><SPAN TITLE="CGTalk" litUp1>CGTalk</SPAN></A></li>
    			<li><a href="http://www.3dtotal.com" target="_blank"><SPAN TITLE="3DTotal" litUp1>3DTotal</SPAN></A></li>
    			<li><a href="http://www.3dartisan.net" target="_blank"><SPAN TITLE="3D Artisan" litUp1>3D Artisan</SPAN></A></li>
    			<li><a href="http://www.dreamstime.com" target="_blank"><SPAN TITLE="Dreamstime Stock Photo" litUp1>Dreamstime Stock Photo</SPAN></A></li>
    			<li><a href="http://www.bigstockphoto.com" target="_blank"><SPAN TITLE="Big stock Photo" litUp1>Big Stock Photo</SPAN></A></li>
    
    		</ul>
    	</li>
    
    
    
    </ul>
    
    <hr />
    
    <hr />
    
    <IFRAME SRC="Pages/Welcome.html" name="main" Width="1020" Height="555" scrolling="auto" align="middle" FRAMEBORDER="0"></IFRAME>
    
    
    <center><FONT COLOR= "#B4AEAE"><p style="font-size: 9px">Copyright 2008 All Content Created by Chris Schlosser</p></FONT></center>
    
    </div>
    
    </body>
    
    </html>
    
    </center>
    Screenshot comparisons:
    http://www.inspiredvisuals.com/IE.jpg
    http://www.inspiredvisuals.com/FF.jpg


    Thanks.

  2. #2
    Join Date
    Mar 2007
    Location
    Currently: New York/Philadelphia
    Posts
    2,735
    Thanks
    3
    Thanked 519 Times in 507 Posts

    Default

    Before you start debugging CSS, you need to make sure that your markup validates. This takes a huge variable (and usually cause) of cross-browser errors out of the mix.

    Then, if the problems still exist, they're much simpler to troubleshoot.

    So, my suggestion would be to first make sure the pages validate.

  3. #3
    Join Date
    Feb 2008
    Posts
    36
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Default

    wow theres so many errors I don't know where to start. some of the errors don't even make sense. its like every line of code is wrong?

    I'm no coding expert so this is way to confusing for me. sorry

  4. #4
    Join Date
    Mar 2007
    Location
    Currently: New York/Philadelphia
    Posts
    2,735
    Thanks
    3
    Thanked 519 Times in 507 Posts

    Default

    Quote Originally Posted by Cyclone View Post
    wow theres so many errors I don't know where to start. some of the errors don't even make sense. its like every line of code is wrong?

    I'm no coding expert so this is way to confusing for me. sorry
    Alright well we can work through it.

    First and foremost, decide which Doctype you want? For your basic website, you should be fine with HTML 4.0 Strict (or even Transitional).

    More Reading

    That'll help decide how to tackle some of the other errors.

    Next:
    1. Get rid of the <center></center> tags. These aren't valid elements anymore.
    2. Make all your element tags lower cased, so change </A> to </a> and <SPAN> to <span> etc...
    3. Change all of your TITLE="..." attributes to class="..."


    Then run the validation again, you'll have a lot less errors.

  5. #5
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    1,160
    Thanks
    17
    Thanked 277 Times in 275 Posts

    Default

    I suggest use the frameset DTD. Since you are using an iframe.

    ...Also, see this link for the deprecated tag and attributes replacement
    Learn how to code at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph!

  6. #6
    Join Date
    Feb 2008
    Posts
    36
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Default

    Thanks for the suggestions. I will try to make the changes.

    since they got rid of the center tag how am I supposed to center those 3 images at the top of my page?

    I added something like this to my page which seems to work. Is this code the proper standard?

    Code:
    div#main {
      width: 1033px;
      height: 102px;
      margin-left: 74px;
      margin-right: 0px;
      margin-bottom: 1px;
    
    <div id="main"> <img src="Images/DigitalArt.jpg" alt="Chris Schlosser's Portfolio"/><img src="Images/Logo.gif" alt="Chris Schlosser's Portfolio"/><img src="Images/Photography.jpg" alt="Chris Schlosser's Portfolio"/></div>

  7. #7
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    1,160
    Thanks
    17
    Thanked 277 Times in 275 Posts

    Default

    since they got rid of the center tag how am I supposed to center those 3 images at the top of my page
    You can use margin:auto;

    ...The code you've previewed does conform....you could simplify it to:
    Code:
    div#main {
      width: 1033px;
      height: 102px;
      margin: 1px 0px 1px 74px; 
    /*****************************************
    this is for top,right,bottom and left margin respectively
    if you want to center it you'll either use margin:auto
    ...or margin:5px auto;. The latter means you'll set a top margin of
    5px, then set the element to center
    ******************************************/
    
    }
    
    <div id="main"> <img src="Images/DigitalArt.jpg" alt="Chris Schlosser's Portfolio"/><img src="Images/Logo.gif" alt="Chris Schlosser's Portfolio"/><img src="Images/Photography.jpg" alt="Chris Schlosser's Portfolio"/></div>
    Learn how to code at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph!

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •