19 replies [Last post]
zhastro
zhastro's picture
Offline
Enthusiast
Indonesia
Last seen: 10 years 33 weeks ago
Indonesia
Timezone: GMT+7
Joined: 2005-10-22
Posts: 73
Points: 0

hi guys, i've been asked by my friend to solve his problem.

his site http://www.jayakarta-hotels.com/php/ seem have problem in Firefox.

1.the problem is the picture below the banner is placed in the front of the text, so the text is hidden.

2. the jakarta hotel feature (3 item) is not placed correctly, it's placed in the right of the pages (try to scroll the page).

i know i haven't validate the site yet (the site use Joomla), but i need answer for the problem first. can anyone help me?

the css is here:

body {

  color            : #FFF;

  margin           : 0px;

  padding          : 0px;

  background       : #BC9F62;

  font-family      : Georgia, Verdana, Arial, Helvetica, sans-serif;

  font-size        : 12px;

 

}

td, tr, p, div {

  font-family      : Georgia, Verdana, Arial, Helvetica, sans-serif;

  font-size        : 11px;

  color            : #000;

}

hr {

  color            : #EF8502;

  height           : 1px;

  width            : 100%;

}

.mod {

  background       : #FFFFFF;

  width            : 2px;

}

.main { 

  float            : left; 

  width            : 100%;

  margin           : 0px; 

  padding          : 0px;

}

#bottombox {

vertical-align:bottom

}

#fullbox {

background-color: #BC9F62;

background-image: url(../images/brown_bg.gif);

background-repeat: repeat-x;

background-position: top;

padding: 0px;

margin: 0px;

}

#insetbox {

 padding: 3px;

 margin:2px;

 background: #D2D2D2;

 }

#leftbox {

  padding:0;

  margin-left:2px;

  width: 180px;

  }

#mainbox {

  float:left;

  margin-left:10px;

  margin-top: 5px;

  width: 570px;

  border-left: 0px dotted #000;

  }

#datebox {

  float:left;

  padding-top: 3px;

  padding-left: 10px;

  width: 98%;

  background: inherit;

  border: 0px dotted #333;

  }

ul#mainlevel-nav {

  font-size        : 11px;

  list-style       : none;

  padding          : 0;

  margin           : 0;

  font-size        : 0.8em;

}

ul#mainlevel-nav li {

  display          : block;

  background-image : none;

  padding-left     : 1px;

  padding-right    : 1px;

  float            : right;

  margin           : 0;

  width            : auto !important;

  font-size        : 10px;

  line-height      : 22px;

  white-space      : nowrap;

  }

ul#mainlevel-nav li a {

  font-size        : 10px;

  display          : block;

  padding-left     : 5px;

  padding-right    : 3px;

  text-decoration  : none;

  color            : #999999;

  background       : transparent;

}

ul#mainlevel-nav li a:hover {

  font-size        : 10px;

  color            : #666666;

}

.leftrow {

  background-color : #ECEBD9; 

  width            : 160px;

  height           : 100%;

  margin-right     : 5px;

}

.rightrow {

  background-color : #ECEBD9;

  height           : 100%;

  width            : 168px;

  align            : right;

  margin-left      : 5px;

}

table.moduletable {

  width			   : 100%;

  table-layout	   : auto;

  border:0px;

  margin-top: 5px;

  margin-bottom: 5px;

}

table.moduletable th {

  font-size        : 1.0em;

  font-weight      : bold;

  text-transform   : uppercase;

  text-align       : left;

  height           : 1.8em;

  line-height      : 1.2em;

  text-indent      : 2px;

  padding          : 0.4em;

  color            : #FFF;

  weight           : 160px;

  background       : #B79B5F;  

}

table.moduletable td {

  padding-left     : 0px;

  padding-right    : 0px;

}

#search {

  float            : left;

  margin-top       : 5px;

  border           : 1px solid #cccccc;

  padding          : 0px;

  width´           : 123px !important;

  width            : 125px;

  height           : 16px !important;

  height           : 16px;

  overflow         : hidden;

}

#search .inputbox {

  border           : 0px;

  margin-top       : 0px;

  padding          : 2px 3px 2px 6px !important;

  padding          : 0px 3px 2px 6px;

  font-family      : Georgia, Verdana, Arial, Helvetica, sans-serif;

  font-size        : 10px;

  height           : 12px !important;

  width            : 123px !important;

  color            : #666666;

  background       : #FFFFFF;

}

.back_button {

  color            : #EF8502;

  font-family      : Georgia, Verdana, Arial, Helvetica, sans-serif;

  font-size        : 10px;

  background       : #FFF;

  white-space      : normal;

  font-weight      : normal;

  border           : 1px solid #FFAA55;

  padding          : 3px;

  float            : right;

  font-weight      : normal;

  line-height      : 10px;

  text-decoration  : none; 

}

.button {

  font-size        : 11px;

  color            : #B79B5F;

  border           : 1px solid #BC9F62;

  margin-bottom    : 5px;

  padding          : 1px;

  background       : #ECECC2;

}

.inputbox {

  border           : 1px solid #BC9F62;

  background       : #ECEAD8;

  margin-bottom    : 5px;

  color			   : #660000;

}

.sectiontableheader {

  font-size        : 11px;

  font-weight      : normal;

  text-transform   : uppercase;

  letter-spacing   : 1px;

  color            : #FFF;

  background       : #BC9F62;

  padding          : 1px;

}

.contentdescription { 

  float            :left;

  font-family      : Georgia, Verdana, Arial, Helvetica, sans-serif;

  font-size        : 0.78em;

  line-height      : 1.3em;

  border-left      : 0px dotted #000;

  width            : 530px;

  margin-left      : -570px;

  margin-top       : 15px;

  padding-left     : 10px;

  padding-right    : 10px;

  } 

.sectiontableentry1 {

  vertical-align   : top;

  padding          : 3px;

  background       : #ECEAD8;

  border-top       : 1px solid #FFFFFF;

  border-bottom    : 1px solid #BCB778;

}

.sectiontableentry2 {

  vertical-align   : top;

  padding          : 3px;

  border-top       : 1px solid #FFFFFF;

  border-bottom    : 1px solid #BCB778;

}

a.mainlevel: {

  margin: 0px;

  font-size        : 12px;

  width            : 160px;

  background-color : #FFAA2A;

  text-indent      : 10px;

}

a.mainlevel: link {

  margin           :0px;

  font-size        : 12px;

  width            : 160px;

  background-color : #FFF;

  text-indent      : 10px;

  }

a.mainlevel:link, a.mainlevel:visited {

  display          : block;

  font-size        : 12px;

  border-top       : 0px dotted #999;

  border-bottom    : 0px dotted #999;

  background-color : #FFF;

  font-weight      : normal;

  padding          : 2px 0px 2px 0px;

  color            : #B79B5F;  

  font-weight      : bold;

  width            : 160px;

  text-indent      : 10px;

  margin           : 0px;

}

a.mainlevel:hover {

  background-color : #BC9F62;

  font-size        : 12px;

  font-weight      : border;

  text-decoration  : none;

  text-indent      : 10px;

  color            : #FFD455;

  margin: 0px;

}

#active_menu {

  color            : #B79B5F;

  background-color : #D2D2D2;

  font-weight      : bold;

  margin:0px;

  }

a#active_menu:hover {

  color            : #666;

}

a:link, a:visited {

  padding: 0px 10px 0px 10px;

  font-size        : 11px;

  color            : #B79B5F;

  text-decoration  : none;

  font-weight      : bold;

}

a:hover {

  font-size        : 11px;

  color            : #986E43;

  background       : inherit;

  text-decoration  : none;

  font-weight      : bold;

}

a.sublevel: {

  margin-top:10px;

  padding: 0px 10px 0px 10px;

  display: compact;

  height: 20px;

  color: #FFF;

}

a.sublevel:link{

  margin-top:10px;

  padding: 0px 0px 0px 0px;

  display: compact;

  height: 20px;

  color: #000;

}

a.sublevel:link, a:sublevel:visited {

  padding: 0px 0px 0px 0px;

  display: compact;

  height: 20px;

  color: #FFF;

  background: #CC6600;

}

a.sublevel:hover {

  padding: 0px 0px 0px 0px;

  display: compact;

  height: 20px; 

  color: #FFF;

  background: #CC6600;

}

a.category:link, a.category:visited {

  font-size        : 11px;

  font-weight      : bold;

  color:#BC9F62;

}

a.category:hover {

  font-size        : 11px;

  font-weight      : bold;

  color:#986E43;

}

a.readon:link, a.readon:visited {

  color            : #CC6600;

  font-family      : Georgia, Verdana, Arial, Helvetica, sans-serif;

  font-size        : 10px;

  background       : #FFF;

  white-space      : normal;

  font-weight      : bold;

  border           : 1px solid #BCB778;

  padding-bottom   : 3px;

  padding-left     : 3px;

  padding-right    : 3px;

  padding-top      : 3px;

  float            : left;

  line-height      : 10px;

  text-decoration  : none; 

}

a.readon:hover {

  color            : #996600;

  font-family      : Georgia, Verdana, Arial, Helvetica, sans-serif;

  font-size        : 10px;

  background       : FFF;

  white-space      : normal;

  font-weight      : bold;

  border           : 2px solid #EF8502;

  padding-bottom   : 3px;

  padding-left     : 3px;

  padding-right    : 3px;

  padding-top      : 3px;

  float            : left;

  line-height      : 10px;

  text-decoration  : none; 

}

ul {float          : left;

  margin           : 2px;

  padding-left     : 10px;

  list-style       : none;

}

li {

  

  line-height      : 15px;

  padding-left     : 15px;

  padding-top      : 0px;

  background-image : url(../images/bullet.png) ;

  background-repeat: no-repeat;

  background-position: 0px 3px;

}

table.contenttoc {

  border           : 1px solid #C3C3C3;

  background       : #FFF;

  padding          : 5px;

  margin-left      : 2px;

  margin-bottom    : 2px;

}

.pagenavcounter {

  font-size        : 10px;

  color            : #CC0000;

}

.pagenavbar {

  border-top       : 1px solid #EF8502;

  padding          : 2px;

}

.pagenav {

  font-weight      : bold;

  color            : #DBD8B7;

}

a.pagenav:link, a.pagenav:visited {

  text-decoration  : none;

}

a.pagenav:hover {

  text-decoration  : none;

}

.date {

  font-size        : 10px;

  font-weight      : bold;

  color            : #FFF;  

  }

.small {

  font-size        : 10px;

  color            : #996600;

}

.smalldark {

  font-size        : 10px;

  color            : #996600;

}

.createdate, .modifydate {

  font-size        : 10px;

  color            : #CC9900;

}

.content_vote {

  font-size        : 10px;

  height           : 22px;

  padding-top      : 2px;

  padding-bottom   : 2px;

}

.content_rating {

  font-size        : 10px;

  color            : #CC9900;

}

.pathway {

  font-size        : 12px;

  font-weight      : bold;

  color            : #876325;

  padding-left     : 5px;

  }

a.pathway:link, a.pathway:visited {

  font-size        : 12px;

  color            : #FFD455;

  padding-left     : 0px;

}

a.pathway:hover {

  font-size        : 12px;

  padding-left     : 0px;

  font-weight      : bold;

}

table.content{

  width            : 100%;

  padding          : 0px;

  border-collapse  : collapse;

  border-spacing   : 0px;

  margin-bottom    : 10px;

}

table.contentpane {

  width            : 100%;

  padding-left     : 2px;

  padding-right    : 5px;

  border-spacing   : 0px;

  margin-bottom    : 5px;

}

table.contentpaneopen {

  width            : 100%;

  padding-left     : 2px;

  padding-right    : 5px;

  border-spacing   : 0px;

  margin-bottom    : 5px;

}

.pollstableborder{

  border-color     : #666666;

}

.contentheading, .componentheading {

  float            : left;

  background       : #FFF;

  font-size        : 12px;

  font-weight      : bold;

  line-height      : 12px;

  text-transform   : uppercase;

  margin-right     : 5px;

  padding-left     : 0px;

  color            : #B79B5F;

  width            : 100%;

  border           : 0px dotted #999;

  }

.title {

  font-family      : Georgia, Verdana, Arial, Helvetica, sans-serif;

  font-weight      : bold;

  text-transform   : uppercase;

  text-indent      : 8px;

  font-size        : 20px;

  text-align       : left;

  color            : #FFFFFF;

}

.title a:link, .title a:visited {

  font-size        : 20px;

  color            : #FFFFFF;

  text-decoration  : none;

  font-weight      : bold;

}

.title a:hover {

  font-size        : 20px;

  color            : #FFFFFF;

  text-decoration  : none;

  font-weight      : bold;

}

.ontab {

  border-left      : 1px solid #404040;

  text-align       : center;

  font-weight      : bold;

  color            : #333333;

  padding          : 5px;

  cursor           : hand;

  line-height      : 40px;

}

.offtab {

  border-left      : 1px solid #404040;

  text-align       : center;

  color            : #666666;

  font-weight      : normal;

  padding          : 5px;

  cursor           : hand;

   line-height     : 40px;

}

.tabpadding {

 border-left       : 1px solid #404040;

}

.pagetext {

  visibility       : hidden;

  position         : relative;

  top              : -10;

  background-color : #FFFFFF;

  display          : none;

}

.footer {

  font-family      : Georgia, Verdana, Arial, Helvetica, sans-serif;

  color            : #FFFFFF;

  font-size        : 10px;

  color            : #FFFFFF;

  font-weight      : normal;

 }

.footer a:link, .footer a:visited {

  font-size        : 11px;

  color            : #FFFFFF;

  text-decoration  : none;

  font-weight      : bold;

}

.footer a:hover {

  font-size        : 11px;

  color            : #996600;

  text-decoration  : none;

  font-weight      : bold;

}

.contact_email  {

  width            : 100%;

}

.contact_email .inputbox {

  width            : 380px;

}

Only You Can Reach Me Now....
Only You Can Teach Me Now...
Teach Me How To Dream...

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 49 weeks 6 hours ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

Re: Help, another problem with Firefox

zhastro wrote:

i know i haven't validate the site yet (the site use Joomla), but i need answer for the problem first. can anyone help me?

The reason we ask for valid code before helping people is that CSS is predicated on valid xhtml/html.

If the code is invalid then CSS is very likely not going to work the way you want it. In this case it seems to me that the likelyhood is fairly high that the problems you see are caused by the invalid code in the page. If you get it valid and it's still wrong then we can at least know it's worthwhile taking some time to help. With invalid code like this page has I don't feel much incentive to wade my way through your code and CSS trying to find an error that might not even be at that level.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

zhastro
zhastro's picture
Offline
Enthusiast
Indonesia
Last seen: 10 years 33 weeks ago
Indonesia
Timezone: GMT+7
Joined: 2005-10-22
Posts: 73
Points: 0

Re: Help, another problem with Firefox

yess, i realize that but after i visited
[url]
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.jayakarta-hotels.com%2Fphp%2F
[/url]

i couldn't fixed it, i think it happen because of the Joomla structure that i don't understand.

well, i think i can fixed the error if the structure is simple, but because Joomla use template that linked to the main code, it's to hard for me to fix the error.

i'm desperate here.....

Only You Can Reach Me Now....
Only You Can Teach Me Now...
Teach Me How To Dream...

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 15 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Re: Help, another problem with Firefox

zhastro wrote:
well, i think i can fixed the error if the structure is simple, but because Joomla use template that linked to the main code, it's to hard for me to fix the error.

The little I know about Joomla is that it is apparently quite hard to produce compliant code through their templates and that you have to get down & dirty into the main code to pull it off.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

zhastro
zhastro's picture
Offline
Enthusiast
Indonesia
Last seen: 10 years 33 weeks ago
Indonesia
Timezone: GMT+7
Joined: 2005-10-22
Posts: 73
Points: 0

Re: Help, another problem with Firefox

so.. is there any easy way to fixed the problem?

because it just the back button and the link is misplaced, that's all...

i really need help guys!

Only You Can Reach Me Now....
Only You Can Teach Me Now...
Teach Me How To Dream...

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 49 weeks 6 hours ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

Re: Help, another problem with Firefox

zhastro wrote:
so.. is there any easy way to fixed the problem?
because it just the back button and the link is misplaced, that's all...
i really need help guys!

Well, I can certainly sympathize with your predicament, since I myself face it every day at work. Invalid code from our database vendor that I am not allowed to alter. It's extremely frustrating.

Unfortunately it's really hard to help you with that particular problem. Positioning is a real crapshoot with invalid xhtml. I run into that all the time which is one reason I ty to avoid positioning and stick to making things have nice colours and useable fonts. Most browsers do OK with that, even with invalid code, but positioning is pure trouble.

Since you are helping a friend perhaps you need to let that friend know that the invalid code produced by his CMS is making fixing his setup very difficult. Maybe he'll think of changing his approach.

Mind you, I haven't had any good experiences with CMS products so far.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

Livingston
Offline
Regular
Seattle, WA
Last seen: 15 years 32 weeks ago
Seattle, WA
Joined: 2006-06-14
Posts: 25
Points: 0

Buggy html

I'm beginning to warm up to Ed's mantra about validated code. I ran the page through validator and got this:

* Line 14, character 7:

</head>
^

Error: end tag for element head which is not open; try removing the end tag or check for improper nesting of elements
* Line 21, character 67:

... p"></td></br></td>
^

Error: end tag for element br which is not open; try removing the end tag or check for improper nesting of elements
* Line 247, character 13:

<ul><li><a href="http://jayakarta-hot ...
^

Error: ID mainlevel-nav already defined
* Line 27, character 13:

<ul><li><a href="https://www.reservat ...
^

ID mainlevel-nav first defined here

Some of this looks a little nasty. I'll look at the page code to see what I can see, but, as Ed rightfully believes, getting clean code certainly eliminates a frustrating variable.

Liv

P.S. Looked at the site in FireFox and I don't see the problem. The text below the main picture would probably look better in a different font, like verdana, but I can't see any obvious positioning problems. Has it been fixed?

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 49 weeks 6 hours ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

Re: Buggy html

Livingston wrote:
Some of this looks a little nasty. I'll look at the page code to see what I can see, but, as Ed rightfully believes, getting clean code certainly eliminates a frustrating variable.

Just in case anyone gets the wrong impression, I learned this from reading these forums, and particularly some of the posts from the various "gurus". All I'm doing is passing the message on.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

zhastro
zhastro's picture
Offline
Enthusiast
Indonesia
Last seen: 10 years 33 weeks ago
Indonesia
Timezone: GMT+7
Joined: 2005-10-22
Posts: 73
Points: 0

Help, another problem with Firefox (CSS for Joomla site)

Well, you see i already fixed some of the error, so now it have only 3 error :

1. Error Line 79 column 4: end tag for "ul" which is not finished.
2. Error Line 135 column 97: end tag for element "br" which is not open.
3. Error Line 245 column 12: ID "mainlevel-nav" already defined.

if you see the template's index.php:

<php>
<DOCTYPE>
<html>
<head>
<php>id ) { initEditor(); } ?>
<meta>
<php>
<php><php>
</head>

<body>
<table>
  <tr>
    <td><table>
      <tr>
        <td><table>
          <tr>
            <td><php></td>
            <td><php></td>
          </tr>
        </table>          
          </td>
      </tr>
      <tr>
        <td><table>
          <tr>
            <td><img></td>
          </tr>
        </table></td>
      </tr>
      <tr>
        <td><table>
          <tr>
            <td><php></td>
            </tr>
        </table></td>
      </tr>
      <tr>
        <td>          <table>
          <tr>
            <td><table>
              <tr>
                <td><php></td>
              </tr>
            </table>
              </td>
            <td><table>
              <tr>
                <td><php></td>
              </tr>
            </table>
              </td>
          </tr>
        </table>
          <br>
          <table>
            <tr>
              <td><table>
                  <tr>
                    <td><php></td>
                  </tr>
              </table></td>
            </tr>
          </table></td>
      </tr>
      <tr>
        <td><table>
          <tr>
            <td>&nbsp;</td>
          </tr>
        </table></td>
      </tr>
    </table>
      <br>
      <table>
        <tr>
          <td><table>
            <tr>
              <td>&copy; copyright jayakartahotelsresorts.com 2006 </td>
              <td><php></td>
            </tr>
          </table></td>
        </tr>
      </table>    </td>
  </tr>
</table>
</body>
</html>

you'll notice that there's no such of codes.... and i think it came from the main code / script that Joomla use...

so that's the hard part, to find the right code that linked to the template index.php and the template css.

but i believe that there's a way to fixed the problem. by the way the problem is that the back button is covered by the picture and if you scroll to the right there's a link "... (3 items)" and the link should be placed in the bottom of the text.

so the structure in the mainbox should be like this:

1. picture (room picture)
2. text section ("Strategically set in downtown Jakarta .....")
3. link (Jakarta Hotel Features (3 items)) in the bottom leftt
4. Back button --> in the bottom right

ok guys, i wait for the response

rgrds

Only You Can Reach Me Now....
Only You Can Teach Me Now...
Teach Me How To Dream...

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 week 4 days ago
Joined: 2004-06-30
Posts: 9679
Points: 815

Help, another problem with Firefox (CSS for Joomla site)

Zhastro, could you post the code again but click "disable HTML in this post" as all the attributes are being stripped out Laughing out loud

Verschwindende wrote:
  • CSS doesn't make pies

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 49 weeks 6 hours ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

Help, another problem with Firefox (CSS for Joomla site)

zhastro wrote:
Well, you see i already fixed some of the error, so now it have only 3 error :

1. Error Line 79 column 4: end tag for "ul" which is not finished.
2. Error Line 135 column 97: end tag for element "br" which is not open.
3. Error Line 245 column 12: ID "mainlevel-nav" already defined.

you'll notice that there's no such of codes.... and i think it came from the main code / script that Joomla use...

Well as I said before I sympathize, but those are just the kind of html/xhtml errors that are likely to mess up CSS quite badly, unfortunately. Something I deal with many times where I work, but my only technique is to try various things until something works!

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

Livingston
Offline
Regular
Seattle, WA
Last seen: 15 years 32 weeks ago
Seattle, WA
Joined: 2006-06-14
Posts: 25
Points: 0

floats in tables and negative margins

Well, I found the problem you're having with the (3 items) text sitting off to the right. If there's another problem, I haven't understood it yet from your posts.

But, to the text off to the right. First, let me set an important context. This code is very, very difficult to understand. The whole page is table inside of table inside of table, etc., etc. On top of that, cells are floated and negative margins are used for alignment. I also ran into cells with colspan=2 and I can't figure out where the two columns are. I also have concerns because of what's happening when I moved it over to my FrontPage area to work on it. I get a hard FP crash most times I work in it. That normally only happens when there is something fundamentally wrong with the code.

However, since I think your looking for a quick fix, here's the problem your having with the (3 items) text off to the right.

The place you want to look is a table with the class=contentpane which is the main table that defines the right portion of the main section of the page (the hotel image, the text description, and our friend the (3 item) text.)

It's important to understand that this table has 3 rows with 1 cell in each row.

The 1st cell of the 1st row has a class=contentdescription. The 2nd row/cell has no class, and the 3rd row/cell has class=category. The category class in this last cell is only defining the onclick, onhover, etc. attributes to what, I presume, will be links added later. This 3rd row/cell is where our friend (3 items) resides specifically in a ul li.

Here's your problem: The style definition for the 1st row in this table has a left-margin: -270px but neither of the other two row/cells have any margin setting. Thus, the image of the hotel and the text that follows it is shifted left 270 pixels but the (3 items) text is not.

One of the problems your going to have in fixing this if you're thinking about assigning class=contentdescription to the 3rd row/cell is that it already has the class=category assigned to it.

For a quick fix, add a style= to the td in rows 2 and 3 with the proper negative margin.

The dilema I have after looking at the code is why floating, which is done more than once here, is necessary. And if it is, using negative margins to force things into alignment seems like a risky approach.

Then again, maybe this is the right approach and I'm just not used to the floating and negative margins in a tables context. Perhaps it's just the simple issue of mixed margins in this small table.

If there's another problem with the page, describe it again and I'll take a look.

Hope this helps.

Liv

For some reason, and I suspect it may have to do with the use of float:left on some of the table cells,

zhastro
zhastro's picture
Offline
Enthusiast
Indonesia
Last seen: 10 years 33 weeks ago
Indonesia
Timezone: GMT+7
Joined: 2005-10-22
Posts: 73
Points: 0

Help, another problem with Firefox (CSS for Joomla site)

thepineapplehead wrote:
Zhastro, could you post the code again but click "disable HTML in this post" as all the attributes are being stripped out Laughing out loud

the css:

body {

  color            : #FFF;

  margin           : 0px;

  padding          : 0px;

  background       : #BC9F62;

  font-family      : Georgia, Verdana, Arial, Helvetica, sans-serif;

  font-size        : 12px;

 

}

td, tr, p, div {

  font-family      : Georgia, Verdana, Arial, Helvetica, sans-serif;

  font-size        : 11px;

  color            : #000;

}

hr {

  color            : #EF8502;

  height           : 1px;

  width            : 100%;

}

.mod {

  background       : #FFFFFF;

  width            : 2px;

}

.main { 

  float            : left; 

  width            : 100%;

  margin           : 0px; 

  padding          : 0px;

}

#bottombox {

vertical-align:bottom

}

#fullbox {

background-color: #BC9F62;

background-image: url(../images/brown_bg.gif);

background-repeat: repeat-x;

background-position: top;

padding: 0px;

margin: 0px;

}

#insetbox {

 padding: 3px;

 margin:2px;

 background: #D2D2D2;

 }

#leftbox {

  padding:0;

  margin-left:2px;

  width: 180px;

  }

#mainbox {

  float:left;

  margin-left:10px;

  margin-top: 5px;

  width: 570px;

  border-left: 0px dotted #000;

  }

#datebox {

  float:left;

  padding-top: 3px;

  padding-left: 10px;

  width: 98%;

  background: inherit;

  border: 0px dotted #333;

  }

ul#mainlevel-nav {

  font-size        : 11px;

  list-style       : none;

  padding          : 0;

  margin           : 0;

  font-size        : 0.8em;

}

ul#mainlevel-nav li {

  display          : block;

  background-image : none;

  padding-left     : 1px;

  padding-right    : 1px;

  float            : right;

  margin           : 0;

  width            : auto !important;

  font-size        : 10px;

  line-height      : 22px;

  white-space      : nowrap;

  }

ul#mainlevel-nav li a {

  font-size        : 10px;

  display          : block;

  padding-left     : 5px;

  padding-right    : 3px;

  text-decoration  : none;

  color            : #999999;

  background       : transparent;

}

ul#mainlevel-nav li a:hover {

  font-size        : 10px;

  color            : #666666;

}

.leftrow {

  background-color : #ECEBD9; 

  width            : 160px;

  height           : 100%;

  margin-right     : 5px;

}

.rightrow {

  background-color : #ECEBD9;

  height           : 100%;

  width            : 168px;

  align            : right;

  margin-left      : 5px;

}

table.moduletable {

  width			   : 100%;

  table-layout	   : auto;

  border:0px;

  margin-top: 5px;

  margin-bottom: 5px;

}

table.moduletable th {

  font-size        : 1.0em;

  font-weight      : bold;

  text-transform   : uppercase;

  text-align       : left;

  height           : 1.8em;

  line-height      : 1.2em;

  text-indent      : 2px;

  padding          : 0.4em;

  color            : #FFF;

  weight           : 160px;

  background       : #B79B5F;  

}

table.moduletable td {

  padding-left     : 0px;

  padding-right    : 0px;

}

#search {

  float            : left;

  margin-top       : 5px;

  border           : 1px solid #cccccc;

  padding          : 0px;

  width´           : 123px !important;

  width            : 125px;

  height           : 16px !important;

  height           : 16px;

  overflow         : hidden;

}

#search .inputbox {

  border           : 0px;

  margin-top       : 0px;

  padding          : 2px 3px 2px 6px !important;

  padding          : 0px 3px 2px 6px;

  font-family      : Georgia, Verdana, Arial, Helvetica, sans-serif;

  font-size        : 10px;

  height           : 12px !important;

  width            : 123px !important;

  color            : #666666;

  background       : #FFFFFF;

}

.back_button {

  color            : #EF8502;

  font-family      : Georgia, Verdana, Arial, Helvetica, sans-serif;

  font-size        : 10px;

  background       : #FFF;

  white-space      : normal;

  font-weight      : normal;

  border           : 1px solid #FFAA55;

  padding          : 3px;

  float            : right;

  font-weight      : normal;

  line-height      : 10px;

  text-decoration  : none; 

}

.button {

  font-size        : 11px;

  color            : #B79B5F;

  border           : 1px solid #BC9F62;

  margin-bottom    : 5px;

  padding          : 1px;

  background       : #ECECC2;

}

.inputbox {

  border           : 1px solid #BC9F62;

  background       : #ECEAD8;

  margin-bottom    : 5px;

  color			   : #660000;

}

.sectiontableheader {

  font-size        : 11px;

  font-weight      : normal;

  text-transform   : uppercase;

  letter-spacing   : 1px;

  color            : #FFF;

  background       : #BC9F62;

  padding          : 1px;


}

.contentdescription { 

  float            :left;

  font-family      : Georgia, Verdana, Arial, Helvetica, sans-serif;

  font-size        : 0.78em;

  line-height      : 1.3em;

  border-left      : 0px dotted #000;

  width            : 530px;

  margin-left      : -570px;

  margin-top       : 15px;

  padding-left     : 10px;

  padding-right    : 10px;

  } 

.sectiontableentry1 {

  vertical-align   : top;

  padding          : 3px;

  background       : #ECEAD8;

  border-top       : 1px solid #FFFFFF;

  border-bottom    : 1px solid #BCB778;

}

.sectiontableentry2 {

  vertical-align   : top;

  padding          : 3px;

  border-top       : 1px solid #FFFFFF;

  border-bottom    : 1px solid #BCB778;

}

a.mainlevel: {

  margin: 0px;

  font-size        : 12px;

  width            : 160px;

  background-color : #FFAA2A;

  text-indent      : 10px;

}

a.mainlevel: link {

  margin           :0px;

  font-size        : 12px;

  width            : 160px;

  background-color : #FFF;

  text-indent      : 10px;

  }

a.mainlevel:link, a.mainlevel:visited {

  display          : block;

  font-size        : 12px;

  border-top       : 0px dotted #999;

  border-bottom    : 0px dotted #999;

  background-color : #FFF;

  font-weight      : normal;

  padding          : 2px 0px 2px 0px;

  color            : #B79B5F;  

  font-weight      : bold;

  width            : 160px;

  text-indent      : 10px;

  margin           : 0px;

}

a.mainlevel:hover {

  background-color : #BC9F62;

  font-size        : 12px;

  font-weight      : border;

  text-decoration  : none;

  text-indent      : 10px;

  color            : #FFD455;

  margin: 0px;

}

#active_menu {

  color            : #B79B5F;

  background-color : #D2D2D2;

  font-weight      : bold;

  margin:0px;

  }

a#active_menu:hover {

  color            : #666;

}

a:link, a:visited {

  padding: 0px 10px 0px 10px;

  font-size        : 11px;

  color            : #B79B5F;

  text-decoration  : none;

  font-weight      : bold;

}

a:hover {

  font-size        : 11px;

  color            : #986E43;

  background       : inherit;

  text-decoration  : none;

  font-weight      : bold;

}

a.sublevel: {

  margin-top:10px;

  padding: 0px 10px 0px 10px;

  display: compact;

  height: 20px;

  color: #FFF;

}

a.sublevel:link{

  margin-top:10px;

  padding: 0px 0px 0px 0px;

  display: compact;

  height: 20px;

  color: #000;

}

a.sublevel:link, a:sublevel:visited {

  padding: 0px 0px 0px 0px;

  display: compact;

  height: 20px;

  color: #FFF;

  background: #CC6600;

}

a.sublevel:hover {

  padding: 0px 0px 0px 0px;

  display: compact;

  height: 20px; 

  color: #FFF;

  background: #CC6600;

}

a.category:link, a.category:visited {

  font-size        : 11px;

  font-weight      : bold;

  color:#BC9F62;

}

a.category:hover {

  font-size        : 11px;

  font-weight      : bold;

  color:#986E43;

}

a.readon:link, a.readon:visited {

  color            : #CC6600;

  font-family      : Georgia, Verdana, Arial, Helvetica, sans-serif;

  font-size        : 10px;

  background       : #FFF;

  white-space      : normal;

  font-weight      : bold;

  border           : 1px solid #BCB778;

  padding-bottom   : 3px;

  padding-left     : 3px;

  padding-right    : 3px;

  padding-top      : 3px;

  float            : left;

  line-height      : 10px;

  text-decoration  : none; 

}

a.readon:hover {

  color            : #996600;

  font-family      : Georgia, Verdana, Arial, Helvetica, sans-serif;

  font-size        : 10px;

  background       : FFF;

  white-space      : normal;

  font-weight      : bold;

  border           : 2px solid #EF8502;

  padding-bottom   : 3px;

  padding-left     : 3px;

  padding-right    : 3px;

  padding-top      : 3px;

  float            : left;

  line-height      : 10px;

  text-decoration  : none; 

}

ul {float          : left;

  margin           : 2px;

  padding-left     : 10px;

  list-style       : none;

}

li {

  

  line-height      : 15px;

  padding-left     : 15px;

  padding-top      : 0px;

  background-image : url(../images/bullet.png) ;

  background-repeat: no-repeat;

  background-position: 0px 3px;

}

table.contenttoc {

  border           : 1px solid #C3C3C3;

  background       : #FFF;

  padding          : 5px;

  margin-left      : 2px;

  margin-bottom    : 2px;

}

.pagenavcounter {

  font-size        : 10px;

  color            : #CC0000;

}

.pagenavbar {

  border-top       : 1px solid #EF8502;

  padding          : 2px;

}

.pagenav {

  font-weight      : bold;

  color            : #DBD8B7;

}

a.pagenav:link, a.pagenav:visited {

  text-decoration  : none;

}

a.pagenav:hover {

  text-decoration  : none;

}

.date {

  font-size        : 10px;

  font-weight      : bold;

  color            : #FFF;  

  }

.small {

  font-size        : 10px;

  color            : #996600;

}

.smalldark {

  font-size        : 10px;

  color            : #996600;

}

.createdate, .modifydate {

  font-size        : 10px;

  color            : #CC9900;

}

.content_vote {

  font-size        : 10px;

  height           : 22px;

  padding-top      : 2px;

  padding-bottom   : 2px;

}

.content_rating {

  font-size        : 10px;

  color            : #CC9900;

}

.pathway {

  font-size        : 12px;

  font-weight      : bold;

  color            : #876325;

  padding-left     : 5px;

  }

a.pathway:link, a.pathway:visited {

  font-size        : 12px;

  color            : #FFD455;

  padding-left     : 0px;

}

a.pathway:hover {

  font-size        : 12px;

  padding-left     : 0px;

  font-weight      : bold;

}

table.content{

  width            : 100%;

  padding          : 0px;

  border-collapse  : collapse;

  border-spacing   : 0px;

  margin-bottom    : 10px;

}

table.contentpane {

  width            : 100%;

  padding-left     : 2px;

  padding-right    : 5px;

  border-spacing   : 0px;

  margin-bottom    : 5px;

}

table.contentpaneopen {

  width            : 100%;

  padding-left     : 2px;

  padding-right    : 5px;

  border-spacing   : 0px;

  margin-bottom    : 5px;

}

.pollstableborder{

  border-color     : #666666;

}

.contentheading, .componentheading {

  float            : left;

  background       : #FFF;

  font-size        : 12px;

  font-weight      : bold;

  line-height      : 12px;

  text-transform   : uppercase;

  margin-right     : 5px;

  padding-left     : 0px;

  color            : #B79B5F;

  width            : 100%;

  border           : 0px dotted #999;

  }

.title {

  font-family      : Georgia, Verdana, Arial, Helvetica, sans-serif;

  font-weight      : bold;

  text-transform   : uppercase;

  text-indent      : 8px;

  font-size        : 20px;

  text-align       : left;

  color            : #FFFFFF;

}

.title a:link, .title a:visited {

  font-size        : 20px;

  color            : #FFFFFF;

  text-decoration  : none;

  font-weight      : bold;

}

.title a:hover {

  font-size        : 20px;

  color            : #FFFFFF;

  text-decoration  : none;

  font-weight      : bold;

}

.ontab {

  border-left      : 1px solid #404040;

  text-align       : center;

  font-weight      : bold;

  color            : #333333;

  padding          : 5px;

  cursor           : hand;

  line-height      : 40px;

}

.offtab {

  border-left      : 1px solid #404040;

  text-align       : center;

  color            : #666666;

  font-weight      : normal;

  padding          : 5px;

  cursor           : hand;

   line-height     : 40px;

}

.tabpadding {

 border-left       : 1px solid #404040;

}

.pagetext {

  visibility       : hidden;

  position         : relative;

  top              : -10;

  background-color : #FFFFFF;

  display          : none;

}

.footer {

  font-family      : Georgia, Verdana, Arial, Helvetica, sans-serif;

  color            : #FFFFFF;

  font-size        : 10px;

  color            : #FFFFFF;

  font-weight      : normal;

 }

.footer a:link, .footer a:visited {

  font-size        : 11px;

  color            : #FFFFFF;

  text-decoration  : none;

  font-weight      : bold;

}

.footer a:hover {

  font-size        : 11px;

  color            : #996600;

  text-decoration  : none;

  font-weight      : bold;

}

.contact_email  {

  width            : 100%;

}

.contact_email .inputbox {

  width            : 380px;

}

the index.php

<?php defined( "_VALID_MOS" ) or die( "Direct Access to this location is not allowed." );?>
<!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>
<?php if ( $my->id ) { initEditor(); } ?>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<?php mosShowHead(); ?>
<?php echo "<link rel=\"stylesheet\" href=\"$GLOBALS[mosConfig_live_site]/templates/$GLOBALS[cur_template]/css/template_css.css\" type=\"text/css\"/>" ; ?><?php echo "<link rel=\"shortcut icon\" href=\"$GLOBALS[mosConfig_live_site]/images/favicon.ico\" />" ; ?>
</head>

</head>

<body>
<table width="100%"  border="0" cellpadding="0" cellspacing="0" id="fullbox">
  <tr>
    <td align="center" valign="top"><table width="780" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
      <tr>
        <td align="center" valign="top"><table width="760" height="30" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
          <tr>
            <td width="215" align="left" valign="middle"><?php echo mosCurrentDate(); ?></td>
            <td width="499" align="right" valign="middle"><?php mosLoadModules ( 'top' ); ?></td>
          </tr>
        </table>          
          </td>
      </tr>
      <tr>
        <td align="center" valign="top"><table width="760" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td><img src="<?php echo $mosConfig_live_site;?>/templates/darkgreen/images/header_brown.jpg" /></td>
          </tr>
        </table></td>
      </tr>
      <tr>
        <td align="center" valign="middle"><table width="760" height="25" border="0" cellpadding="0" cellspacing="0" id="datebox">
          <tr>
            <td align="left" valign="middle"><?php mosPathWay(); ?></td>
            </tr>
        </table></td>
      </tr>
      <tr>
        <td align="center" valign="top">          <table width="760" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td width="170" align="left" valign="top"><table width="100%"  border="0" cellpadding="0" cellspacing="0" id="leftbox">
              <tr>
                <td><?php mosLoadModules ( 'left' ); ?></td>
              </tr>
            </table>
              </td>
            <td width="550" align="left" valign="top"><table width="100%"  border="0" cellpadding="0" cellspacing="0" id="mainbox">
              <tr>
                <td><?php mosMainBody(); ?></td>
              </tr>
            </table>
              </td>
          </tr>
        </table>
          <br />
          <table width="760" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td align="center" valign="middle"><table width="100%"  border="0" cellpadding="0" cellspacing="0" id="insetbox">
                  <tr>
                    <td><?php mosLoadModules ( 'inset' ); ?></td>
                  </tr>
              </table></td>
            </tr>
          </table></td>
      </tr>
      <tr>
        <td align="center" valign="top"><table width="760"  border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td>&nbsp;</td>
          </tr>
        </table></td>
      </tr>
    </table>
      <br />
      <table width="780" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
        <tr>
          <td align="center" valign="bottom"><table width="760" height="25" border="0" align="center" cellpadding="0" cellspacing="0" id="bottombox">
            <tr>
              <td width="474" align="right" valign="middle">&copy; copyright jayakartahotelsresorts.com 2006 </td>
              <td width="240" align="left" valign="middle"><?php mosLoadModules ( 'bottom' ); ?></td>
            </tr>
          </table></td>
        </tr>
      </table>    </td>
  </tr>
</table>
</body>
</html>

Only You Can Reach Me Now....
Only You Can Teach Me Now...
Teach Me How To Dream...

zhastro
zhastro's picture
Offline
Enthusiast
Indonesia
Last seen: 10 years 33 weeks ago
Indonesia
Timezone: GMT+7
Joined: 2005-10-22
Posts: 73
Points: 0

Re: floats in tables and negative margins

for livingston:

yes, the site layout is very-very confusing... (well that's a good information if you want to use Joomla Laughing out loud )..

and another problem (beside the '3 items) things is actually there's a back button behind 'inside a room picture', and the back button should be placed in the bottom of the '.. 3 items' things.

well, i already do some changes, like add margin to back button and 3 items things, add clear:both, but it didn't work... i suspect the problem is in the text and room picture section, but maybe i wrong...

btw. thks for the efforts guys, i really appreciate it

Only You Can Reach Me Now....
Only You Can Teach Me Now...
Teach Me How To Dream...

Livingston
Offline
Regular
Seattle, WA
Last seen: 15 years 32 weeks ago
Seattle, WA
Joined: 2006-06-14
Posts: 25
Points: 0

BACK button missing

I don't see the problem. When I look at the site the BACK button is inside the main white area near the right edge and below the main picture and text.

I scanned the code and only found one occurence of the text BACK so I'm unable to recreate the problem you're describing.

BTW, I did look at the site in the three browsers I usually test with, Internet Explorer, Firefox, and Netscape. Netscape can't handle the right side of the main area of the site at all. Nothing (the main picture, the following text, our friend (3 items), and the BACK button is displayed.

If I'm misunderstanding the problem with the BACK button try again. What I thought you said was that it wasn't being displayed and was somehow hidden behind the main picture.

Liv

zhastro
zhastro's picture
Offline
Enthusiast
Indonesia
Last seen: 10 years 33 weeks ago
Indonesia
Timezone: GMT+7
Joined: 2005-10-22
Posts: 73
Points: 0

Re: BACK button missing

Livingston wrote:
I don't see the problem. When I look at the site the BACK button is inside the main white area near the right edge and below the main picture and text.

I scanned the code and only found one occurence of the text BACK so I'm unable to recreate the problem you're describing.

well, if i'm using IE the problemo is not occured (everything placed in the place they should be). But when i'm using FF and K-Meleon, the back button is displayed behind the text, and the "... (3 items)" things displayed way to the right...

and i try to eliminate the float:left on the #mainbox, but seem didn't change anything, well it should be change something i guess.

and the clear:both (or left and right) on the p, or the category, and backbutton also not an answer....

and liv said, maybe i should give style to the 2nd and 3rd row... well the index.php (the template) -as you can see in my code- the mainbox section only have one row.

the 2nd and th 3rd row (i think) came from the other code / modules / components that Joomla use. And because i'm new to Joomla, it been a hard job for me to find the correlation.

guys, keep on searching and thanks alot

Only You Can Reach Me Now....
Only You Can Teach Me Now...
Teach Me How To Dream...

Livingston
Offline
Regular
Seattle, WA
Last seen: 15 years 32 weeks ago
Seattle, WA
Joined: 2006-06-14
Posts: 25
Points: 0

BACK button missing

What version of Firefox are you running? I can see the BACK button just fine in both IE and Firefox 1.5.0.4. Netscape doesn't even display the main part of the page at all though.

I can't help you because I see the BACK button just fine in FF.

And since I'm not familiar with Joomla I don't know how much control you have over the html. If I were you and still wanted to use tables for your site, I'd turn the whole center section of the site into a single table with multiple columns and get rid of all the table inside of table stuff. I'd also stop using a tr with only 1 td. Your problem with the (3 items) isn't the floats.

One table, no floats, no negative margins.

Liv

zhastro
zhastro's picture
Offline
Enthusiast
Indonesia
Last seen: 10 years 33 weeks ago
Indonesia
Timezone: GMT+7
Joined: 2005-10-22
Posts: 73
Points: 0

Re: BACK button missing

Livingston wrote:
What version of Firefox are you running?

One table, no floats, no negative margins.

I use 1.0.7 FF... and you maybe right about the table structure, it's very difficult to understand why Joomla using that kind of structure, but if i change the table's row and column structure i'm affraid of screw the whole site..

btw, how to attach picture in this threads?[/img]

Only You Can Reach Me Now....
Only You Can Teach Me Now...
Teach Me How To Dream...

Livingston
Offline
Regular
Seattle, WA
Last seen: 15 years 32 weeks ago
Seattle, WA
Joined: 2006-06-14
Posts: 25
Points: 0

BACK button missing

You may want to upgrade your version of FF since I'm not having any problem viewing the BACK button with the latest version.

And I understand your reluctance to change all the structure. There's nothing fundamenatlly wrong with the approach. It's just that the last two rows of the table on the right of the main section of your page do not have the same negative margin as the row before them.

You know, the easiest way to deal with this might be to set those other two rows to the same class as the first which includes replacing the category class in the last row. You could then change the CSS for the category class, which appears to be being used for things like a:hover, by simply changing it to .contentdisplay a:hover etc. in your style sheet. That way your avoid the risk of changing the entire table technique being used.

Good luck

Liv

zhastro
zhastro's picture
Offline
Enthusiast
Indonesia
Last seen: 10 years 33 weeks ago
Indonesia
Timezone: GMT+7
Joined: 2005-10-22
Posts: 73
Points: 0

Re: BACK button missing

ok, try to fix the problem now, gotta give you report soon..

thks man!

Only You Can Reach Me Now....
Only You Can Teach Me Now...
Teach Me How To Dream...