SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Jan 2008
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Heading comes out wrong in English version

    Hi all

    I designed a site with two parts one part in English one in Hebrew.The site is
    http://drmirarosenthal.com . If you look at an English page (any page) and a Hebrew page (also any page), you will notice that the headings are different (being able to read the Hebrew is not relevant here I think). As far as I understand the headings should look the same (acounting for difference in direction ofcourse). However thay are not. The Hebrew version of the heading comes out correct but the English is wrong--it is missing the gray background and the green borders and the picture is cut off at the top.

    So my question is how can I fix this, in ther words: where is the problem in the code?

    Below is the relevant html and css codes for both the Hebrew and the English versions:
    English version:

    HTML
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Therapist</title>
    <link rel="stylesheet" href="styles11.css" type="text/css"/>
    <style type="text/css">
    </head>
    
    <body>
    <div id="top"><a href="Hebrewindex2.html" shape="rect">HEBREW</a>/<a href="index.html" shape="rect">ENGLISH</a> 
    </div>
    
    <div id="header">
      <img src="scan15d5.jpg" />
      <h1>
    Dr. Mira Rosenthal - Psychotherapy Center<br>
    Welcome to my Website
    </h1>
    <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="mirasite3.html">Resume</a></li>
    <li><a href="mirasite8.html">Contact me</a></li>
    <li><a href="testimonials.html">Testimonials</a></li>
    <li><a class="longer" href="mirasite18.html">Therapy Treatment Approach</a></li>
    </ul>
    </div>
    and the CSS for English version
    Code:
    body    {
        margin: 0;
        padding: 0;
        background-color: #050845;
        color: white;
        font: 100&#37;, Arial, Helvetica, Verdana, sans-serif;
        
        }    
    
    #top    {
         
                         width:100px;
         
         position: absolute;
    top: 0px;     
    right: 40px;
                         
        background-color: #050845;
        color: white;
        font: 100%, Arial, Helvetica, Verdana, sans-serif;   }
    
    #top a:link    {color:#FF0000}      /* unvisited link */
    #top  a:visited {color:#00FF00}  /* visited link */
    #top a:hover {color:#FF00FF}  /* mouse over link */
    #top a:active {color:#0000FF}  /* selected link */
    
        }    
    
    
    
    #header {
    
        margin: 50px 0px 10px 0px;
        padding: 5px 0px 15px 0px;
        height: 80px; 
        border-style: solid;
        border-color: green;
        border-width: 10px 0px; 
        
        background-color: #839FAB;
        color: black;
        }
    
    #header h1
        {
        text-align: center;
        color: red;
        margin-bottom: 0px;
        }
    
    #header img
         {
         margin-top: -65px;
         float: left;
         }
    
    #header ul
    {
    float:left;
    width:100%;
    padding:0;
    margin:0;
    list-style-type:none;
    }
    
    
    #header a
    {
    float:left;
    width:6em;
    text-decoration:none;
    color:white;
    background-color: #d03c3c;
    padding:0.2em 0.6em;
    border-right:1px solid white;
    }
    #header a.longer
    {
    float:left;
    width:12em;
    text-decoration:none;
    color:white;
    background-color: #d03c3c;
    padding:0.2em 0.6em;
    border-right:1px solid white;
    }
    
    #header a:hover
    {background-color:#ff3300}
    
    #header li
    {display:inline}
    ___________________________________________________________--

    Here is the HTML for the Hebrew version (the version that works correctly)
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html dir="rtl" xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Therapist</title>
    <link rel="stylesheet" href="styles12.css" type="text/css"/>
    </head>
    
    <div id="top2" dir="ltr">
    <a href="Hebrewindex2.html">HEBREW</a>/<a href="index.html">ENGLISH</a>
    
    </div>
    <div id="header">
      <img src="scan15d5.jpg" />
      <h1>
    ד"ר מירה רוזנטל - טיפול פסיכולוגי:
    פסיכוטרפיה, פסיכואנליזה, היפנוזה ונתוח חלומות</h1>
    <ul>
    <li><a href="Hebrewindex2.html"">דף הבית</a></li>
    <li><a href="hebrew3.html">קורות חיים</a></li>
    <li><a href="mirasite8.html">צרו קשר</a></li>
    <li><a class="longer" href="hebrewtestimonials.html">מכתבי הוקרה ממטופלים</a></li>
    <li><a href="hebrew18.html">הגישה הטפולית</a></li>
    </ul>
    </div>
    and the relevant CSS for Hebrew version
    Code:
    body    {
        margin: 0;
        padding: 0;
        background-color: #050845;
        color: white;
        font: 100%, Arial, Helvetica, Verdana, sans-serif;
        
        }    
    
    #top2    {
         
                         width:100px;
         
         position: absolute;
    top: 0px;     
    left: 0px;
                         
        background-color: #050845;
        color: white;
        font: 100%, Arial, Helvetica, Verdana, sans-serif;
        }    
    
    #top2 a:link    {color:#FF0000}      /* unvisited link */
    #top2  a:visited {color:#00FF00}  /* visited link */
    #top2 a:hover {color:#FF00FF}  /* mouse over link */
    #top2 a:active {color:#0000FF}  /* selected link */
    
    
    #header {
    
        margin: 50px 0px 10px 0px;
        padding: 5px 0px 15px 0px;
        height: 80px; 
        border-style: solid;
        border-color: green;
        border-width: 10px 0px; 
        
        background-color: #839FAB;
        color: black;
        }
    
    #header h1
        {
        text-align: center;
        color: red;
        margin-bottom: 0px;
        }
    
    #header img
         {
         margin-top: -65px;
         float:right;
         }
    
    #header ul
    {
     float:right;
    width:100%;
    padding:0;
    margin:0;
    list-style-type:none;
    }
    
    
    #header a
    {
     float:right;
    width:6em;
    text-decoration:none;
    color:white;
    background-color: #d03c3c;
    padding:0.2em 0.6em;
    border-right:1px solid white;
    }
    #header a.longer
    {
     float:right;
    width:12em;
    text-decoration:none;
    color:white;
    background-color: #d03c3c;
    padding:0.2em 0.6em;
    border-right:1px solid white;
    }
    
    #header a:hover
    {background-color:#ff3300}
    
    #header li
    {display:inline}
    I havn't been able to figure it out

    Any help is most welcomed

    Thanks
    Alon
    Last edited by Paul O'B; Feb 10, 2010 at 09:01. Reason: code tags added

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,466
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You have an extra closing bracket here:

    Code:
    #top a:active {
        color:#0000FF
    }  /* selected link */
    } <<<<<<<<<<<<<<<< extra bracket to be removed
    #header {
        margin: 50px 0px 10px 0px;
        padding: 5px 0px 15px 0px;
        height: 80px;
        border-style: solid;
        border-color: green;
        border-width: 10px 0px;
        background-color: #839FAB;
        color: black;
    }
    Try that and see if the problem is cured.

  3. #3
    SitePoint Member
    Join Date
    Jan 2008
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks so very much, it's cured

    I love sitepoint


Bookmarks

Posting Permissions

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