Member Avatar for samsnov

PLease I am not finding it comfortable the way IE9 amd Firefox disaggree with my new building site,each time I view the site firefox aggree with my codes but IE9 never.

Please can you copy this CSS and past on Notepad as well as this index below to view it with these two blowsers IE9 and Firefox, and tell me what to, I plead, I would be very greatful.


Index.html

<html>
<head>
<link rel="stylesheet" href="format.css">
<title>Traveling West On Vacation.</title>
</head>
<body>


<div id="topnav">

<ul id="navbar">
<li><a class="x">Home</a></li>
<li><a href="california.html">california</a></li>
<li><a href="rockies.html">The Rockies</a></li>
<li><a href="midwest.html">The Midwest</a></li>
</ul
</div>

<div id="clear"></div>
<h1>Traveling West</h1>
<p>When you go West, be sure to visit the sights of California, the natural wonders of the Rockies, and the cities of the Midwest.</p>
<p><a href="infoform.html">Get more information about Western Travel mailed to you.</a></p>
</div>


</body>
</html>

css

body {
background: #FFFFFF;
}


h1 {
font-family: verdana,helvetica,sans serif;
font-weight: bold;
font-size: 16pt;

}


h2 {
font-family: verdana,helvetica,sans serif;
font-weight: bold;
font-size: 14pt;
}


h3 {
font-family: verdana,helvetica,sans serif;
font-weight: bold;
font-size: 12pt;
}

p {
font-family: arial,helvetica,sans serif;
font-size: 10pt;
}


li {
font-family: arial,helvetica,sans serif;
font-size: 10pt;

}


a {
color: #FF0000;
}

#links {
background: #cccccc;
float: left;
width: 200px;
margin: 20px 0 0 0;
padding: 10px;

}


#content {
background: #ffffff;
margin: 0 0 0 220px;


}

#topnav {
background: #cccccc;
width: 100%;
}


#navbar {
background: #cccccc;
float: left;
width: 100%;
padding: 0;
margin: 0;
list-style: none;
}

#navbar li {
display: inline;
}


#navbar li a {
background: #cccccc;
float: left;
padding: 5px 20px;
}


#clear {
clear: both;
}

#navbar li a.x {
background: #000000;
color: #ffffff;
font-weight: bold;
}


}

#navbar li a.x {
background: #999999;
color: #ffffff;
}


///

  • 2 Contributors
  • 1 Reply
  • 78 Views
  • 12 Hours Discussion Span
  • Latest Post Latest Post by almostbob
Member Avatar for almostbob

the html is incomplete, there is no doctype,
without a valid dtd declared as the first line the browser is free to interpret the html as anything it wishes
the default for Firefox and IE is different, appears different
code the html and css properly and the difference,still there, will be much smaller

validate your code these standard test beds may assist you http://analyze.websiteoptimization.com/ Speed http://validator.w3.org/check html check http://jigsaw.w3.org/css-validator/validator CSS check http://demo.opera-mini.net/demo.html handheld http://www.browsershots.org other browsers
many problems (if present) will show
serious code errors in the w3c validator sites will produce blankscreens in browsershots

Valid code does not ensure the site will work ...
Invalid code ensures the site will not work ...
.. in all browser OS combinations
not all layouts work in handheld devices
strictly code based,

post code between [code=language] [/code] tags in this case

and [code=html] the idea is to turn on code highlighting, just the highlight can often expose errors enough to fix questions,
also covered in the instructions you agreed to when you signed up .

fix your code, 
px are for <img> tags, 
pt are for print, 
current best practice: screen layout is done in em & % scalars that adjust to window size screen resolution and device, without creating a ridiculous looking central column on a widescreen monitor, or pushing the content offscreen in a small display, the 1980s are over

//bad[code=css]body {
background: #FFFFFF; 
} 


h1 {
font-family: verdana,helvetica,sans serif;
font-weight: bold;
font-size: 16pt;

} 


h2 {
font-family: verdana,helvetica,sans serif;
font-weight: bold;
font-size: 14pt;
} 


h3 {
font-family: verdana,helvetica,sans serif;
font-weight: bold;
font-size: 12pt;
}

//better

body { background: #FFFFFF; } 
h1 { font-family: verdana,helvetica,sans serif; font-weight: bold; font-size: 16pt; } 
h2 { font-family: verdana,helvetica,sans serif; font-weight: bold; font-size: 14pt; } 
h3 { font-family: verdana,helvetica,sans serif; font-weight: bold; font-size: 12pt;}

//better

body { background: #FFFFFF; } 
h1 { font: bold 125% verdana,helvetica,sans-serif; } 
h2 { font: bold 112% verdana,helvetica,sans-serif; }
h3 { font: bold 100% verdana,helvetica,sans-serif; }

note the font name sans-serif % scalars adjust to user preference, visually impaired will not be locked out of the site

Edited by almostbob because: n/a
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.