Forum Moderators: not2easy
body {
background-color: #FFFFFF;
background-image: url('http://example.com/images/site/h_bg_repeat.jpg');
background-repeat: repeat-y;
margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
font-family: Tahoma, Verdana, Arial, sans-serif;
font-size: 11px;
color: #000000;
text-align: justify; }
p, table, tr, td {
font-family: Tahoma, Verdana, Arial, sans-serif;
font-size: 11px;
color: #000000; }
#topimage {
position: absolute;
padding: 0px;
left: 0px;
top: 0px;}
#navigation {
position: absolute;
padding: 5px;
left: 585px;
top: 330px;
width: 270px;
font-family: Tahoma, Verdana, Arial, sans-serif;
font-size: 11px;
color: #000000;
text-align: justify;}
#content {
position: absolute;
padding: 5px;
left: 115px;
top: 370px;
width: 469px;
font-family: Tahoma, Verdana, Arial, sans-serif;
font-size: 11px;
color: #000000;
text-align: justify;}
[edited by: SuzyUK at 7:04 am (utc) on Sep. 15, 2005]
[edit reason] examplified URLs : per TOS #13 [/edit]
If it's not working correctly in Firefox but it is in IE you're yet another countless victim of the false profit, Microsoft.
Since IE does not correctly render it you're in luck! First modify your code so it is rendered the way you want in Firefox. Now you'll use IE conditional comments to hack IE to bend it's own retarded inability to correctly render the page.
Here is the full XHTML example of what I'm talking about. Follow the directions of the two first paragraphs and the rest is for overflow purposes. You should understand no prob. Hope this helps!
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>IE Conditionals Example</title>
<meta http-equiv="imagetoolbar" content="no" />
<style type="text/css">
a.div:link {
background-color: #c9f;
cursor: pointer;
text-decoration: none;
}
a.div:visited {
background-color: #c9f;
cursor: pointer;
text-decoration: none;
}
a.div:hover {
background-color: #fff;
cursor: pointer;
text-decoration: none;
}
a.div:active {
background-color: #fff;
cursor: pointer;
text-decoration: none;
}
a.image:link {
background-color: #c9f;
color: #fff;
text-decoration: none;
}
a.image:visited {
background-color: #c9f;
color: #fff;
text-decoration: none;
}
a.image:hover {
background-color: #fff;
color: #000;
text-decoration: none;
}
a.image:active {
background-color: #fff;
color: #f00;
text-decoration: none;
}
a.gallery:link {
color: #fff;
display: block;
font-size: 14px;
letter-spacing: 4px;
padding: 0px 0px 0px 4px;
text-decoration: none;
}
a.gallery:visited {
color: #fff;
display: block;
font-size: 14px;
letter-spacing: 4px;
padding: 0px 0px 0px 4px;
text-decoration: none;
}
a.gallery:hover {
background-color: #fff;
color: #c9f;
display: block;
font-size: 14px;
letter-spacing: 4px;
padding: 0px 0px 0px 10px;
text-decoration: none;
}
a.gallery:active {
color: #f00;
display: block;
font-size: 14px;
letter-spacing: 4px;
padding: 0px 0px 0px 4px;
text-decoration: none;
}
a.galleryc:link {
border: #fff solid;
border-width: 1px 0px 1px 4px;
color: #fff;
display: block;
font-size: 14px;
letter-spacing: 4px;
padding: 0px 0px 0px 4px;
text-decoration: none;
}
a.galleryc:visited {
border: #fff solid;
border-width: 1px 0px 1px 4px;
color: #fff;
display: block;
font-size: 14px;
letter-spacing: 4px;
padding: 0px 0px 0px 4px;
text-decoration: none;
}
a.galleryc:hover {
border: #fff solid;
border-width: 1px 0px 1px 4px;
background-color: #fff;
color: #c9f;
display: block;
font-size: 14px;
letter-spacing: 4px;
padding: 0px 0px 0px 10px;
text-decoration: none;
}
a.galleryc:active {
border: #fff solid;
border-width: 1px 0px 1px 4px;
color: #f00;
display: block;
font-size: 14px;
letter-spacing: 4px;
padding: 0px 0px 0px 4px;
text-decoration: none;
}
a.menu:link {
color: #fff;
display: block;
font-size: 14px;
letter-spacing: 4px;
padding: 0px 0px 0px 4px;
text-decoration: none;
}
a.menu:visited {
color: #fff;
display: block;
font-size: 14px;
letter-spacing: 4px;
padding: 0px 0px 0px 4px;
text-decoration: none;
}
a.menu:hover {
background-color: #fff;
color: #c9f;
display: block;
font-size: 14px;
letter-spacing: 4px;
padding: 0px 0px 0px 10px;
text-decoration: none;
}
a.menu:active {
color: #f00;
display: block;
font-size: 14px;
letter-spacing: 4px;
padding: 0px 0px 0px 4px;
text-decoration: none;
}
a.menuc:link {
border: #fff solid;
border-width: 1px 0px 1px 4px;
color: #fff;
display: block;
font-size: 14px;
letter-spacing: 4px;
padding: 0px 0px 0px 4px;
text-decoration: none;
}
a.menuc:visited {
border: #fff solid;
border-width: 1px 0px 1px 4px;
color: #fff;
display: block;
font-size: 14px;
letter-spacing: 4px;
padding: 0px 0px 0px 4px;
text-decoration: none;
}
a.menuc:hover {
border: #fff solid;
border-width: 1px 0px 1px 4px;
background-color: #fff;
color: #c9f;
display: block;
font-size: 14px;
letter-spacing: 4px;
padding: 0px 0px 0px 10px;
text-decoration: none;
}
a.menuc:active {
border: #fff solid;
border-width: 1px 0px 1px 4px;
color: #f00;
display: block;
font-size: 14px;
letter-spacing: 4px;
padding: 0px 0px 0px 4px;
text-decoration: none;
}
a.thumb {
margin: 10px;
}
body {
background-color: #ccf;
color: #000;
overflow: auto;
}
div.body {
border: #fff solid 1px;
height: 400px;
left: 50%;
margin-top: -200px;
margin-left: -400px;
position: absolute;
top: 50%;
width: 800px;
}
div.center {
margin-left: auto;
margin-right: auto;
text-align: center;
}
div.content {
background-color: #c3f;
border: #f00 0px solid;
float: left;
height: 400px;
overflow: auto;
width: 649px;
}
div.contenthide {
display: none;
}
div.feature {
border: #f00 solid 1px;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
width: 400px;
}
div.feature:hover {
background-color: #fff;
border: #f00 solid 1px;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
width: 400px;
}
div.gallery {
background-color: #c9c;
color: #000;
display: block;
float: left;
text-align: center;
width: 126px;
}
div.image {
display: none;
}
div.imageshow {
background-color: #c3f;
border: #f00 0px solid;
float: left;
height: 400px;
overflow: auto;
text-align: center;
width: 649px;
}
div.menu {
color: #000;
display: block;
float: left;
width: 150px;
}
div.menus {
background-color: #c9c;
border: #fff solid;
border-width: 0px 1px 0px 0px;
float: left;
height: 400px;
width: 150px;
}
h1 {
border: #fff solid;
border-width: 0px 4px 1px 0px;
color: #fff;
display: inline;
font-size: 14px;
letter-spacing: 4px;
padding: 0px 2px 0px 2px;
}
img {
border: 0px;
}
img.gallery {
margin: 10px 0px 10px 0px;
}
img.thumb {
border: #fff solid 2px;
}
img.thumb:hover {
border: #fff dotted 2px;
}
p {
color: #fff;
margin: 8px 8px 16px 8px;
text-align: justify;
text-indent: 1.5em;
}
</style><!--[if IE]>
<style type="text/css">
div.content {
background-color: #c3f;
border: #f00 0px solid;
float: left;
height: 400px;
overflow: auto;
scrollbar-3dlight-color: #ccf;
scrollbar-arrow-color: #00;
scrollbar-base-color: #ccf;
scrollbar-darkshadow-color: #ccf;
scrollbar-face-color: #ccf;
scrollbar-highlight-color: #c9c;
scrollbar-shadow-color: #c9c;
scrollbar-track-color: #ccf;
width: 647px;
}
</style>
<![endif]-->
</head><body>
<div class="body">
<div class="menus"><div class="menu"><a href="index.html" class="menuc">Home</a></div>
<div class="menu"><a href="gallery.html" class="menu">Gallery</a></div>
<div class="menu"><a href="#" class="menu">Who am I</a></div>
<div class="menu"><a href="contact.html" class="menu">Contact</a></div>
<div class="menu"><a href="#" class="menu">Guest Room</a></div>
<div class="menu"><a href="send_to_friend.html" class="menu">Send to Friend</a></div><div class="menu"><a href="#" class="menu">Sign Up</a></div>
<div class="menu"><a href="#" class="menu">Stats</a></div>
<div class="menu"><a href="#" class="menu">Wallpapers</a></div>
</div>
<div class="content">
<h1>Home</h1><p>This is an example of how a page is correctly built and rendered in Firefox.
Since Internet Explorer isn't W3C compliant we have to HACK it to make it work correctly.
Keep in mind Opera (at the time even as late as version 8) does not comply to the box model.
I personally disagree with the box model but whatever...</p><p>Make another copy of this file in case you mess up.
Now cut out the IE conditions that take up the LAST part of the HEAD of this XHTML document.
Reload it in both Firefox and IE and you'll see how IE is unable to correctly render the page without having to be hacked!
Do a search for IE conditional comments to learn more but you can use them anywhere you wish to fix the countless bugs we are damed to deal with in association with IE.</p><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Phasellus volutpat blandit felis.
Nullam vulputate.
Pellentesque mattis orci ut arcu.
Quisque risus arcu, tristique gravida, auctor ac, dictum ac, odio.
Fusce vel nulla nec arcu auctor cursus.
Aliquam erat volutpat.
Nulla facilisi.
Praesent suscipit elit id purus.
Fusce nibh mi, sodales a, dictum nec, rutrum ut, turpis.
Pellentesque mauris pede, sollicitudin sit amet, suscipit nec, semper vitae, lacus.
Praesent tristique iaculis leo.
Ut nonummy.
Phasellus purus quam, condimentum nec, ullamcorper ut, imperdiet dapibus, tortor.
Curabitur quis diam.
Mauris eget lorem.
Phasellus ac ante egestas massa congue adipiscing.
Ut volutpat tristique mauris.
Aliquam velit dolor, fermentum et, tempor at, tempor sit amet, elit.
Cras elit.</p><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Phasellus volutpat blandit felis.
Nullam vulputate.
Pellentesque mattis orci ut arcu.
Quisque risus arcu, tristique gravida, auctor ac, dictum ac, odio.
Fusce vel nulla nec arcu auctor cursus.
Aliquam erat volutpat.
Nulla facilisi.
Praesent suscipit elit id purus.
Fusce nibh mi, sodales a, dictum nec, rutrum ut, turpis.
Pellentesque mauris pede, sollicitudin sit amet, suscipit nec, semper vitae, lacus.
Praesent tristique iaculis leo.
Ut nonummy.
Phasellus purus quam, condimentum nec, ullamcorper ut, imperdiet dapibus, tortor.
Curabitur quis diam.
Mauris eget lorem.
Phasellus ac ante egestas massa congue adipiscing.
Ut volutpat tristique mauris.
Aliquam velit dolor, fermentum et, tempor at, tempor sit amet, elit.
Cras elit.</p>
</div>
</div></body>
</html>
Welcome, this may answer your question. Has your page got a DOCTYPE above the head tag - I would suggest you put one in and see how your site renders in the browser after doing this.
In short DOCTYPE was introduced so that standards could be set across all browsers - Fire Fox is renowed for being a good browser to test in as it has been built with as many of these standards in mind as possible.
Here is some information about using DOCTYPE and also explains more what it is
W3C Link:
[w3.org...]
ZA
that's very nice detailed reply from JAB, but a small correction if I may ..
IE and Opera do not currently correctly handle the W3C's box model specs.
Yes they do! ~ (Opera always has done and IE since IE6 ) ~ If you are using a correct and valid Doctype.
Opera and IE both use the a Doctype Switch [msdn.microsoft.com] to allow you to go follow IE's Model if you like. While this can work quite well if you then use moz-box-sizing properties, the Doctype switch can then bring with it other problems (font-size keyword differences for one..)
cenamaria, read this recent thread about the different box models [webmasterworld.com] and some solutions if necessary, depending on which model you choose to work with.
In that great post, you will also find details of valid Doctypes which you can then choose from which will affect which Model is triggered.
Suzy
<added>can't type as fast as zackattack ;)</added>
