Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS Problems: IE vs Firefox

    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

  • #2
    Senior Coder
    Join Date
    Oct 2005
    Posts
    1,340
    Thanks
    0
    Thanked 61 Times in 60 Posts
    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">

  • #3
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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>

  • #4
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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="mailtoonderosapinesgolf@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>

  • #5
    New Coder
    Join Date
    May 2009
    Posts
    74
    Thanks
    0
    Thanked 7 Times in 7 Posts
    Quote Originally Posted by richardk View Post
    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,
    Last edited by frankle; 06-01-2009 at 07:15 AM.

  • #6
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    resolved

    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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •