...

View Full Version : CSS Problems: IE vs Firefox



richardk
06-01-2009, 04:54 AM
I could use a bit of help here.

I have posted a site at: www.ponderosapinesgolf.com

The problem is these sites look very different in IE vs Firefox. I can not see my header at all in Firefox, of the background color. I'm not sure what to do about the problem.

Here is the css:

<style type="text/css">
<!--

body{
font: normal small Arial, Helvetica, sans-serif;
color: #78737A;
text-align:center;
font-size:13px;
margin-top:30px;
margin-left:0px;
margin-right:0px;
margin-bottom:0px;
background-color:#D7F2FB;
background-image:url(images/top_bg.gif);
background-repeat:repeat-x;
}

#border
{width:779px;}

.name
{font-family:"Century Gothic", "Trebuchet MS", "Arial Narrow", Arial, sans-serif;
color:#ffffff;
height:84px;
font-size:32px;}

#links_bg
{width:595px;
height:35px;}

.toplinks
{width:119px;
float:left;
line-height:35px;
height:35px;
text-align:center;}

.toplinks a
{color:#2A393E;
font-weight:bold;
text-decoration:none;}

.toplinks a:hover
{color:#2A393E;
background-image:url(images/over.gif); background-repeat:no-repeat;
display:block;}

.gap
{height:10px;
font-size:1px;}

#header
{width:779px;
height:168px;
}

#quick-bg
{width:201px;
height:168px;
background-color:#2A393E;
float:left;}

#gap
{width:4px;
height:168px;
font-size:1px;
float:left;}

#image
{width:574px;
height:168px;
background-image:url(images/sports.jpg); background-repeat:no-repeat;
float:left;}

#quick_heading
{background-image:url(images/quick_bg.gif); background-repeat:no-repeat;
line-height:40px;
font-size:15px;
color:#ffffff;
padding-left:10px;
font-weight:bold;
height:40px;}

.quicklinks
{padding-left:10px;
line-height:33px;
height:33px;}

.quicklinks a
{color:#C7CCC5;
font-weight:bold;}

.quicklinks a:hover
{color:#75BD02;}

#spacer
{width:201px;
float:left;
height:4px;
font-size:1px;
background-color:#2A393E;}

#spacer2
{width:578px;
float:left;
height:4px;
font-size:1px;}

#heading-bg
{background-color:#2A393E;
height:35px;
line-height:35px;
color:#75BD02;
font-weight:bold;
clear:left;
text-align:right;
padding-right:15px;}

#main
{padding-left:10px;
padding-right:10px;
background-color:#ffffff;
padding-top:10px;
padding-bottom:10px;}
a{color:#69AB00;
text-decoration:underline;
}

a:hover{color:#000000;
text-decoration:underline;
}

#bottom
{height:40px;
line-height:40px;
width:779px;}

.sap
{width:1px;
text-align:center;
height:30px;
color:#2A393E;
text-align:center;}

.bottomlink
{width:779px;
height:30px;
text-align:center;
color:#2A393E;
text-align:center;}

.bottomlink a
{color:#000000;
text-decoration:none;}

.bottomlink a:hover
{color:#000000;
text-decoration:underline;}

P.one {
color: black;
direction: ltr;
text-align: justify;
vertical-align: top;
font-family: "Book Antiqua";
font-size: medium;
}
P.two {
color: black;
direction: ltr;
text-align: center;
vertical-align: top;
font-family: "Book Antiqua";
font-size: medium;
}

img.floatLeft {
float: left;
margin: 4px;
}

img.floatRight {
float: right;
margin: 4px;
}

pre {
color: black;
text-align: center;
font-family: "Book antiqua";
font-size: medium;
}

-->
</style>

I'm sure its something simple; going to hate myself after the fix comes.

By the way, it views the same in IE 8 as it does in Firefox. It is OK in IE 7
Thanks for any help you can give.

Richard

drhowarddrfine
06-01-2009, 05:06 AM
Never ever look at IE first. Always use a modern browser to check your markup. Then look at IE to see if/when it screws things up.

You are missing a doctype and everything is in quirks mode. Put this on your first line and see where things stand:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">

richardk
06-01-2009, 06:20 AM
I have placed the doctype at the top of the CSS doc and there was no change in the outcome. Firefox is still incorrect.

I would like to thank you for you response. Hope you can help.

Richard

Here is the CSS as of now.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">

<style type="text/css">
<!--

body{
font: normal small Arial, Helvetica, sans-serif;
color: #78737A;
text-align:center;
font-size:13px;
margin-top:30px;
margin-left:0px;
margin-right:0px;
margin-bottom:0px;
background-color:#D7F2FB;
background-image:url(images/top_bg.gif);
background-repeat:repeat-x;
}

#border
{width:779px;}

.name
{font-family:"Century Gothic", "Trebuchet MS", "Arial Narrow", Arial, sans-serif;
color:#ffffff;
height:84px;
font-size:32px;}

#links_bg
{width:595px;
height:35px;}

.toplinks
{width:119px;
float:left;
line-height:35px;
height:35px;
text-align:center;}

.toplinks a
{color:#2A393E;
font-weight:bold;
text-decoration:none;}

.toplinks a:hover
{color:#2A393E;
background-image:url(images/over.gif); background-repeat:no-repeat;
display:block;}

.gap
{height:10px;
font-size:1px;}

#header
{width:779px;
height:168px;
}

#quick-bg
{width:201px;
height:168px;
background-color:#2A393E;
float:left;}

#gap
{width:4px;
height:168px;
font-size:1px;
float:left;}

#image
{width:574px;
height:168px;
background-image:url(images/sports.jpg); background-repeat:no-repeat;
float:left;}

#quick_heading
{background-image:url(images/quick_bg.gif); background-repeat:no-repeat;
line-height:40px;
font-size:15px;
color:#ffffff;
padding-left:10px;
font-weight:bold;
height:40px;}

.quicklinks
{padding-left:10px;
line-height:33px;
height:33px;}

.quicklinks a
{color:#C7CCC5;
font-weight:bold;}

.quicklinks a:hover
{color:#75BD02;}

#spacer
{width:201px;
float:left;
height:4px;
font-size:1px;
background-color:#2A393E;}

#spacer2
{width:578px;
float:left;
height:4px;
font-size:1px;}

#heading-bg
{background-color:#2A393E;
height:35px;
line-height:35px;
color:#75BD02;
font-weight:bold;
clear:left;
text-align:right;
padding-right:15px;}

#main
{padding-left:10px;
padding-right:10px;
background-color:#ffffff;
padding-top:10px;
padding-bottom:10px;}
a{color:#69AB00;
text-decoration:underline;
}

a:hover{color:#000000;
text-decoration:underline;
}

#bottom
{height:40px;
line-height:40px;
width:779px;}

.sap
{width:1px;
text-align:center;
height:30px;
color:#2A393E;
text-align:center;}

.bottomlink
{width:779px;
height:30px;
text-align:center;
color:#2A393E;
text-align:center;}

.bottomlink a
{color:#000000;
text-decoration:none;}

.bottomlink a:hover
{color:#000000;
text-decoration:underline;}

P.one {
color: black;
direction: ltr;
text-align: justify;
vertical-align: top;
font-family: "Book Antiqua";
font-size: medium;
}
P.two {
color: black;
direction: ltr;
text-align: center;
vertical-align: top;
font-family: "Book Antiqua";
font-size: medium;
}

img.floatLeft {
float: left;
margin: 4px;
}

img.floatRight {
float: right;
margin: 4px;
}

pre {
color: black;
text-align: center;
font-family: "Book antiqua";
font-size: medium;
}

-->
</style>

richardk
06-01-2009, 06:21 AM
Thought I'd show you the html as well.

Thanks again,
Richard

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ponderosa Pines Golf Course, Cloudcroft, New Mexico</title>
<link href="golf-website.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="border">
<div class="name">Ponderosa Pines Golf Course</div>
<div id="links_bg">
<div class="toplinks"><a href="index.html">Homepage</a></div>
<div class="toplinks"><a href="contactus.html">Contact us</a></div>
</div>
<!--<div class="gap"></div>-->
<div id="header" background="images/top_br.gif" height="73" width="800">
<div id="quick-bg">
<div id="quick_heading">Area Links</div>
<div class="quicklinks"><a href="http://www.cloudcroft.com/" target="_blank">Area Information</a></div>
<div class="quicklinks"><a href="http://www.cloudcroft.net/" target="_blank">Cloudcroft Chamber</a></div>

</div><div id="gap"></div><div id="image"></div>
</div>
<div id="spacer"></div><div id="spacer2"></div>
<div id="heading-bg">Ponderosa Pines Golf Course</div>
<div id="main">
<img src="images/golf2.jpg" class="floatLeft" height="200" alt="golf2" />
<p class="one">Ponderosa Pines Golf Course is a challenging golf course located in the Sacramento Mountains just 9 miles southeast of Cloudcroft, New Mexico on State Highway 130, also known as Cox Canyon Highway. The golf course, as well as Cloudcroft, are beautiful scenic areas surrounded be the Lincoln National Forest.
</p>
<p class="one">The Golf Course seems to be the "Information Center" for Cox Canyon Highway. People stop and ask directions, where is this house located? Do you know where SunSpot is? Where is Timberon? Where do the Jones live? Do you have any lots for sale? Can I use your restroom? I would like to make a Tee Time!
</p>
<hr width="50%" size="4" color="#CCFFFF" />
<img src="images/golf4.jpg" class="floatRight" height="150" alt="golf4" />
<p class="one"> The greens are in great shape. It takes about one and one/half to two hours to play 9 holes and less than four hours to play 18 holes. Most players use a golf cart, but its ok if you prefer to walk. This course will test your short game. ONE OF THE ADVANTAGES OF THIS COURSE IS IT'S A COOL PLACE TO PLAY AT 8,000 FT. USUALLY THE TEMPERATURE IS IN THE 70'S AND RARELY DOES IT GET INTO THE 80'S. There are days when your jacket would be very comfortable, even in mid summer. This course has a friendly, relaxing atmosphere that gives the player a lot of pleasure and enjoyment. So stop by and play a round, or just to say, hello.
</p>

<hr width="50%" size="4" color="#CCFFFF" />
<p class="two">Call us for a Tee Time 575-682-2995
or email <a href="mailto:ponderosapinesgolf@tularosa.net">ponderosapinesgolf@tularosa.net</a>
</p>

</div>

<div id="bottom">
<div class="bottomlink"><a href="index.html">Home |</a>&nbsp;<a href="contactus.html">Contact Us</a></div>
</div>

<center><div class="quicklinks">Designed by <a href="mailto:richardkbss@yahoo.com">richadkbss@yahoo.com</a></div></center>
</div>
</body>
</html>

frankle
06-01-2009, 06:57 AM
I could use a bit of help here.

I have posted a site at: www.ponderosapinesgolf.com

The problem is these sites look very different in IE vs Firefox. I can not see my header at all in Firefox, of the background color. I'm not sure what to do about the problem.

Here is the css:

<style type="text/css">
<!--

body{
font: normal small Arial, Helvetica, sans-serif;
color: #78737A;
text-align:center;
font-size:13px;
margin-top:30px;
margin-left:0px;
margin-right:0px;
margin-bottom:0px;
background-color:#D7F2FB;
background-image:url(images/top_bg.gif);
background-repeat:repeat-x;
}

#border
{width:779px;}

.name
{font-family:"Century Gothic", "Trebuchet MS", "Arial Narrow", Arial, sans-serif;
color:#ffffff;
height:84px;
font-size:32px;}

#links_bg
{width:595px;
height:35px;}

.toplinks
{width:119px;
float:left;
line-height:35px;
height:35px;
text-align:center;}

.toplinks a
{color:#2A393E;
font-weight:bold;
text-decoration:none;}

.toplinks a:hover
{color:#2A393E;
background-image:url(images/over.gif); background-repeat:no-repeat;
display:block;}

.gap
{height:10px;
font-size:1px;}

#header
{width:779px;
height:168px;
}

#quick-bg
{width:201px;
height:168px;
background-color:#2A393E;
float:left;}

#gap
{width:4px;
height:168px;
font-size:1px;
float:left;}

#image
{width:574px;
height:168px;
background-image:url(images/sports.jpg); background-repeat:no-repeat;
float:left;}

#quick_heading
{background-image:url(images/quick_bg.gif); background-repeat:no-repeat;
line-height:40px;
font-size:15px;
color:#ffffff;
padding-left:10px;
font-weight:bold;
height:40px;}

.quicklinks
{padding-left:10px;
line-height:33px;
height:33px;}

.quicklinks a
{color:#C7CCC5;
font-weight:bold;}

.quicklinks a:hover
{color:#75BD02;}

#spacer
{width:201px;
float:left;
height:4px;
font-size:1px;
background-color:#2A393E;}

#spacer2
{width:578px;
float:left;
height:4px;
font-size:1px;}

#heading-bg
{background-color:#2A393E;
height:35px;
line-height:35px;
color:#75BD02;
font-weight:bold;
clear:left;
text-align:right;
padding-right:15px;}

#main
{padding-left:10px;
padding-right:10px;
background-color:#ffffff;
padding-top:10px;
padding-bottom:10px;}
a{color:#69AB00;
text-decoration:underline;
}

a:hover{color:#000000;
text-decoration:underline;
}

#bottom
{height:40px;
line-height:40px;
width:779px;}

.sap
{width:1px;
text-align:center;
height:30px;
color:#2A393E;
text-align:center;}

.bottomlink
{width:779px;
height:30px;
text-align:center;
color:#2A393E;
text-align:center;}

.bottomlink a
{color:#000000;
text-decoration:none;}

.bottomlink a:hover
{color:#000000;
text-decoration:underline;}

P.one {
color: black;
direction: ltr;
text-align: justify;
vertical-align: top;
font-family: "Book Antiqua";
font-size: medium;
}
P.two {
color: black;
direction: ltr;
text-align: center;
vertical-align: top;
font-family: "Book Antiqua";
font-size: medium;
}

img.floatLeft {
float: left;
margin: 4px;
}

img.floatRight {
float: right;
margin: 4px;
}

pre {
color: black;
text-align: center;
font-family: "Book antiqua";
font-size: medium;
}

-->
</style>

I'm sure its something simple; going to hate myself after the fix comes.

By the way, it views the same in IE 8 as it does in Firefox. It is OK in IE 7
Thanks for any help you can give.

Richard



Remove the top 4 lines from the css

<!-- Style Sheet created with the CoffeeCup StyleSheet Maker++ -->
<!-- http://www.coffeecup.com -->
<style type="text/css">
<!--

and this

-->
</style>

from below your css

Try replacing this in your html

<link href="golf-website.css" rel="stylesheet" type="text/css" >

and this in your css


#border
{width:779px;
margin: 0 auto;}


I am not sure, just try. Please let me know.


Regards,

richardk
06-01-2009, 05:32 PM
frankle, THANKS a million, it worked. Thanks to all that helped.

I will be more careful in the future to make sure things work in Firefox, and IE will follow.

thanks again



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum