Log in

View Full Version : Webpage displays differently in Firefox/IE


Cyclone
04-07-2008, 09:50 PM
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:


<!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.
Medyman
04-07-2008, 10:27 PM
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 (http://validator.w3.org/check?uri=http%3A%2F%2Fwww.inspiredvisuals.com%2F&charset=%28detect+automatically%29&doctype=Inline&group=0).
Cyclone
04-08-2008, 02:09 AM
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 :(
Medyman
04-08-2008, 03:22 AM
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 (http://www.alistapart.com/articles/doctype/)

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.
rangana
04-08-2008, 04:07 AM
I suggest use the frameset DTD. Since you are using an iframe.

...Also, see this link (http://www.codehelp.co.uk/html/deprecated.html) for the deprecated tag and attributes replacement ;)
Cyclone
04-08-2008, 08:54 PM
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?



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>
rangana
04-09-2008, 04:45 AM
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:


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>