could someone help me with this site please <!-- w --><a class="postlink" href="http://www.sarahrealestateagency.com">www.sarahrealestateagency.com</a><!-- w -->
it looks sort of how i want it to in IE6 but two of the div's are wrong in firefox ( the yellow and blue are meant to be distinctly right and left respectively ) - if i float the yellow one right then it messes up the bottom grey div in firerox - if i give it a relative posn then it breaks in IE - it's driving me nuts
if anyone could help i'd be grateful
thanks
i'm probably breaking a lot of rules so please be kind - the way ie handles div's really confuses me
here's my stylesheet
body {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
font-family: verdana, tahoma;
color: #000000;
background-color: #ffffff;
text-align: center;
}
#content {
width: 750px;
height: 100%;
padding: 0px;
background: #EDF0C5;
text-align:left;
}
.contentborder {
margin-top: 15px;
margin-bottom: 10px;
margin-right: auto;
margin-left: auto;
width: 750px;
height: 100%;
padding: 0px;
border: 1px solid #408cbf;
}
img{
border:0px solid #999999;
margin:0px;
padding:0px;
}
.banner {
width: 100%;
padding: 0px;
margin-top: 0px;
margin-bottom: 0px;
margin-right: 0px;
margin-left: 0px;
background: #EDF0C5;
border: 1px solid #aaffcc;
text-align:left;
}
.mainholder {
left:175px;
width: 575px;
height: 100%;
padding:12px;
background: #EDF0C5;
border: 0px solid #ff0000;
text-align:left;
font-family: verdana;
font-size: 13;
voice-family: "\"}\"";
voice-family:inherit;
width:551px;
}
html>body #mainholder {
width:551px;
}
.leftbar {
position:relative;
width: 175px;
height: 100%;
top: 0px;
height: 100%;
padding:0px;
margin:0px;
background: #88CAEE;
border: 0px solid #ff0000;
text-align:center;
float:left;
}
.leftcontent {
position:relative;
width: 175px;
top: -3px;
padding:5px;
background: #E4E2D2;
border: 1px solid #408cbf;
text-align:left;
font-family: Verdana;
font-size: 12px;
color: #003399;
}
html>body .leftcontent {
width:163px;
}
.leftcontenttitle {
width: 175px;
height: 20px;
background: #b0d0e5;
border: 1px solid #408cbf;
text-align:center;
font-family: Verdana;
font-size: 12px;
color: #3366CC;
}
html>body .leftcontenttitle {
width:173px;
}
.timebar {
position: relative;
top: 0px;
left: 1px;
width: 750px;
height: 21px;
padding: 2px;
margin-top: 0px;
margin-bottom: 0px;
margin-right: 0px;
margin-left: 0px;
background: #1fd02b;
border-left: 0px solid #999999;
border-right: 0px solid #999999;
border-top: 0px solid #ffffff;
border-bottom: 0px solid #ffffff;
font-family: verdana;
font-size: 11px;
text-align:right;
}
html>body .timebar {
width:745px;
}
.emailbox {
width: 68%;
height: 20px;
padding: 3px;
background: #ffffff;
border: 1px solid #000000;
text-align:center;
font-family: Verdana;
font-size: 12px;
color: #ff0000;
}
.mapholder {
width: 100%;
height: auto;
padding:0px;
padding-bottom:45px;
background: #88CAEE;
border: 0px ridge #88CAEE;
text-align:left;
font-family: verdana;
font-size: 13;
}
.rightpic {
padding: 0px;
margin: 3px;
margin-left: 10px;
border: 1px solid #000000;
float:right;
}
.leftpic {
padding: 0px;
margin: 3px;
margin-right: 10px;
border: 1px solid #000000;
float:left;
}
.centerpic {
width:100%;
text-align:center;
padding: 0px;
margin: 10px;
border: 0px solid #000000;
}
.centerpicborder {
border: 1px solid #000000;
}
.copyrightbox {
width: 752px;
height: 20px;
padding: 3px;
margin:0px;
background: #cccccc;
text-align:left;
font-family: Verdana;
font-size: 10px;
color: #000000;
border: 1px solid green;
}
html>body .copyrightbox {
width:742px;
height: 14px;
}
hr {
color:#4A6BA9;
}
a:link,a:visited,a:active
{
color: #000000;
text-decoration: none;
}
a:hover
{
color: #ff0000;
text-decoration: none;
}Either you have fixed it, or you have a browser cache problem. I'm using Firefox 1.0 and it looks as you described it should.
I have many times gone through many hoops in Firefox only to find the browser did not refresh properly (Even after MANY refreshes, even with the SHIFT key held down!)Just a hint, pressing and holding Ctrl and F5 will force Firefox to reload everything and not use the cache.
You can pretty safely say the site was interpreted correctly in Firefox but IE being what it is was more forgiving.... Its generally a good idea to develop in Firefox and Opera first then fix the IE problems later...
well i refreshed the page using ctrl f5 but the prob is still there - do you notice the blue bar on the left only goes down half way - i have given it 100% height but i dont want to give it a height in px because i use the same div for other pages in the site and it would mess those up - actually on this page <!-- m --><a class="postlink" href="http://www.sarahrealestateagency.com/mf.php">http://www.sarahrealestateagency.com/mf.php</a><!-- m --> the problem is more pronounced and you can see it clearer
i could probably work out a hack myself but im really trying to discover a more correct way of doing it
<!-- m --><a class="postlink" href="thankshttp://validator.w3.org/check?verbose=1&uri=http%3A//www.sarahrealestateagency.com/mf.phpOriginally">thankshttp://validator.w3.org/check?ver ... Originally</a><!-- m --> posted by ray326
<!-- m --><a class="postlink" href="http://validator.w3.org/check?verbose=1&uri=http%3A//www.sarahrealestateagency.com/mf.php">http://validator.w3.org/check?verbose=1 ... com/mf.php</a><!-- m -->
fixed now but it ended up having nothing to do with the problem actually - was going to validate it eventually
it looks sort of how i want it to in IE6 but two of the div's are wrong in firefox ( the yellow and blue are meant to be distinctly right and left respectively ) - if i float the yellow one right then it messes up the bottom grey div in firerox - if i give it a relative posn then it breaks in IE - it's driving me nuts
if anyone could help i'd be grateful
thanks
i'm probably breaking a lot of rules so please be kind - the way ie handles div's really confuses me
here's my stylesheet
body {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
font-family: verdana, tahoma;
color: #000000;
background-color: #ffffff;
text-align: center;
}
#content {
width: 750px;
height: 100%;
padding: 0px;
background: #EDF0C5;
text-align:left;
}
.contentborder {
margin-top: 15px;
margin-bottom: 10px;
margin-right: auto;
margin-left: auto;
width: 750px;
height: 100%;
padding: 0px;
border: 1px solid #408cbf;
}
img{
border:0px solid #999999;
margin:0px;
padding:0px;
}
.banner {
width: 100%;
padding: 0px;
margin-top: 0px;
margin-bottom: 0px;
margin-right: 0px;
margin-left: 0px;
background: #EDF0C5;
border: 1px solid #aaffcc;
text-align:left;
}
.mainholder {
left:175px;
width: 575px;
height: 100%;
padding:12px;
background: #EDF0C5;
border: 0px solid #ff0000;
text-align:left;
font-family: verdana;
font-size: 13;
voice-family: "\"}\"";
voice-family:inherit;
width:551px;
}
html>body #mainholder {
width:551px;
}
.leftbar {
position:relative;
width: 175px;
height: 100%;
top: 0px;
height: 100%;
padding:0px;
margin:0px;
background: #88CAEE;
border: 0px solid #ff0000;
text-align:center;
float:left;
}
.leftcontent {
position:relative;
width: 175px;
top: -3px;
padding:5px;
background: #E4E2D2;
border: 1px solid #408cbf;
text-align:left;
font-family: Verdana;
font-size: 12px;
color: #003399;
}
html>body .leftcontent {
width:163px;
}
.leftcontenttitle {
width: 175px;
height: 20px;
background: #b0d0e5;
border: 1px solid #408cbf;
text-align:center;
font-family: Verdana;
font-size: 12px;
color: #3366CC;
}
html>body .leftcontenttitle {
width:173px;
}
.timebar {
position: relative;
top: 0px;
left: 1px;
width: 750px;
height: 21px;
padding: 2px;
margin-top: 0px;
margin-bottom: 0px;
margin-right: 0px;
margin-left: 0px;
background: #1fd02b;
border-left: 0px solid #999999;
border-right: 0px solid #999999;
border-top: 0px solid #ffffff;
border-bottom: 0px solid #ffffff;
font-family: verdana;
font-size: 11px;
text-align:right;
}
html>body .timebar {
width:745px;
}
.emailbox {
width: 68%;
height: 20px;
padding: 3px;
background: #ffffff;
border: 1px solid #000000;
text-align:center;
font-family: Verdana;
font-size: 12px;
color: #ff0000;
}
.mapholder {
width: 100%;
height: auto;
padding:0px;
padding-bottom:45px;
background: #88CAEE;
border: 0px ridge #88CAEE;
text-align:left;
font-family: verdana;
font-size: 13;
}
.rightpic {
padding: 0px;
margin: 3px;
margin-left: 10px;
border: 1px solid #000000;
float:right;
}
.leftpic {
padding: 0px;
margin: 3px;
margin-right: 10px;
border: 1px solid #000000;
float:left;
}
.centerpic {
width:100%;
text-align:center;
padding: 0px;
margin: 10px;
border: 0px solid #000000;
}
.centerpicborder {
border: 1px solid #000000;
}
.copyrightbox {
width: 752px;
height: 20px;
padding: 3px;
margin:0px;
background: #cccccc;
text-align:left;
font-family: Verdana;
font-size: 10px;
color: #000000;
border: 1px solid green;
}
html>body .copyrightbox {
width:742px;
height: 14px;
}
hr {
color:#4A6BA9;
}
a:link,a:visited,a:active
{
color: #000000;
text-decoration: none;
}
a:hover
{
color: #ff0000;
text-decoration: none;
}Either you have fixed it, or you have a browser cache problem. I'm using Firefox 1.0 and it looks as you described it should.
I have many times gone through many hoops in Firefox only to find the browser did not refresh properly (Even after MANY refreshes, even with the SHIFT key held down!)Just a hint, pressing and holding Ctrl and F5 will force Firefox to reload everything and not use the cache.
You can pretty safely say the site was interpreted correctly in Firefox but IE being what it is was more forgiving.... Its generally a good idea to develop in Firefox and Opera first then fix the IE problems later...well i refreshed the page using ctrl f5 but the prob is still there - do you notice the blue bar on the left only goes down half way - i have given it 100% height but i dont want to give it a height in px because i use the same div for other pages in the site and it would mess those up - actually on this page <!-- m --><a class="postlink" href="http://www.sarahrealestateagency.com/mf.php">http://www.sarahrealestateagency.com/mf.php</a><!-- m --> the problem is more pronounced and you can see it cleareri could probably work out a hack myself but im really trying to discover a more correct way of doing it
<!-- m --><a class="postlink" href="thankshttp://validator.w3.org/check?verbose=1&uri=http%3A//www.sarahrealestateagency.com/mf.phpOriginally">thankshttp://validator.w3.org/check?ver ... Originally</a><!-- m --> posted by ray326
<!-- m --><a class="postlink" href="http://validator.w3.org/check?verbose=1&uri=http%3A//www.sarahrealestateagency.com/mf.php">http://validator.w3.org/check?verbose=1 ... com/mf.php</a><!-- m -->
fixed now but it ended up having nothing to do with the problem actually - was going to validate it eventually