Hi GT friends,

I do hope that there are some CSS-experts out there who are willing to help me on this.......


I do have a CSS-bug within "detailed.html" which I am struggling on, please see this link:


http://www.austria1.com/cgi-bin/lsql/page.cgi?g=Detailed%2F117.html;d=1


I want to have the "descriptioncontact" (this is the contact information from the link-entry, "Kontakt", "Tel.:", etc.) and the "descriptiondata" (this is the information like: "entry added by" , "entry added date" , "hits", etc) in a CSS-format with two columns.


I have tried to achieve this, but it looks weird in Firefox as it moves the "ratings" somehow horizontally higher.
Besides the fact that the "descriptiondata"-box is to far right, it looks quite O.K. in Internet-Explorer.


this is my CSS-data:

---

/* ie needs a width for overflow: hidden to work */
* html #detailed p.description, {
width: 96%;
}

* html #detailed .descriptioncontact {
width: 50%;
}

* html #detailed .descriptiondata {
width: 40%;
}

* html div#descriptionboth {
width: 100%;
}


#detailed p.description {
margin: 0px 0px 5px 0px;
padding: 5px;
border: 1px solid #cccccc;
background: #f5f5f5;
overflow: hidden;
}

#detailed .descriptioncontact {
float: left;
width: 50%;
margin: 0px 0px 5px 0px;
padding: 5px;
border: 1px solid #cccccc;
background: #f5f5f5;
overflow: hidden;
}

#detailed .descriptiondata {
float: right;
width: 40%;
margin: 0px 0px 5px 0px;
padding: 5px;
border: 1px solid #cccccc;
background: #f5f5f5;
overflow: hidden;
}

div#descriptionboth {
width: 100%;
text-align: left;
margin: 0 auto;
}

---

this is my template-data:


<div id="descriptionboth">

<div class="descriptioncontact">

Kontakt:<br />

<%if External_Contactname%><%External_Contactname%><br /><%endif%>
<%if External_Contactstreet%><%External_Contactstreet%><br /><%endif%>
<%if External_Contactzip%><%External_Contactzip%><%endif%>&nbsp;&nbsp;<%if External_Contactcity%><%External_Contactcity%>,&nbsp;<%endif%><%if External_Contactprovince%><%External_Contactprovince%>,&nbsp;<%endif%><%if External_Contactcountry%><%External_Contactcountry%><%endif%><br /><br />

<%if External_Contacttelone%>Telefon-Nr.1:&nbsp;<%External_Contacttelone%><br /><%endif%>
<%if External_Contactteltwo%>Telefon-Nr.2:&nbsp;<%External_Contactteltwo%><br /><%endif%>
<%if External_Contacthandy%>Handy-Nr.:&nbsp;<%External_Contacthandy%><br /><%endif%>
<%if External_Contactfax%>Fax-Nr.:&nbsp;<%External_Contactfax%><br /><%endif%>

<%if External_Contactmail%><br />e-mail:&nbsp;<a href="<%db_cgi_url%>/sendmail.cgi?ID=<%ID%>">wir freuen uns auf Ihre Anfrage per e-mail</a><br /><br /><%endif%>

</div>


<div class="descriptiondata">

Eingetragen von: <%LinkOwner%><br />Eingetragen am: <%Add_Date%><br /><%if Add_Date ne $Mod_Date%>Letzte Änderung: <%Mod_Date%><%endif%><br />Treffer: <%Hits%>
</div>

</div>

---

Please help me on this.
Wish you all A Happy and Successful New Year !


Erich

Sorry, not sure what it's supposed to look like - can you post an image of what it should look like?

Adrian

If you want the 'Kommentare' section to be flush with the left side of the page, you need to clear the floated columns above. You could wrap this section in a div of its own, or just adding "clear:both;" to the h3 CSS should work ok.

hi brewt,

unfortunately I do not have any image.

The two grey fields with the content:

**********************
Kontakt:
Stadtgemeinde Althofen
Hauptplatz 8
A-9330 Althofen, Kaernten, Austria

Telefon-Nr.1: +43 (0) 4262/ 22 88-20
Telefon-Nr.2: +43 (0) 4262/ 22 88-21
Fax-Nr.: +43 (0) 4262/ 22 88 - 33

e-mail: wir freuen uns auf Ihre Anfrage per e-mail

***********************

AND

***********************

Eingetragen von: rico
Eingetragen am: Dienstag, 28.12.2004
Letzte Änderung: Samstag, 31.12.2005
Treffer: 33

************************


.......should be located next to each other while the left grey field should take arount 65% of the width and the right grey field should have around 30% of the width (so two tables next to each other). There should be a small space (around 5mm or so) between these two grey fields.

The pink-colored-field called "Kommentare" (reviews) should be aligned to the left, but should be a bit lower (if you look at it at the moment with the Firefox-browser, it looks quite strange......


Many thanks,

Erich

Did you try adding clear:both to the h3 CSS?

That our use the clear class on <div id="descriptionboth" class="clear">

Adrian

Hi Dave,

many thanks for your help ! It looks very good now when I look at it by using Firefox-browser.


I still do have an issue when I look at the site with Internet-Explorer-browser:
the grey box with the following content needs to be aligned on the right-hand-side with the other 2 boxes (big grey box above and pink box below):

Content:

*****************
Eingetragen von: rico
Eingetragen am: Dienstag, 28.12.2004
Letzte Änderung: Samstag, 31.12.2005
Treffer: 33
*****************


could you please help me with this one ?

I haven't got time to test this for you but I would say it is to do with the .description and .review CSS using overflow:hidden and a 96% width i.e. they are not going to the right edge as the other divs etc. are.