Problems with CSS and Content Parts

jscholtysik · Post by **jscholtysik** » Thu 21. Jul 2005, 22:36

Hi all,

I have problems with some content parts:

First a problem with all CPs:
How can I set the title of the CP a little bit higher? In IE 6 the title is around 5 px down, in firefox around 15 px. Why?

CP 1: RSS-Feed

In Internet Explorer 6 the divider lines are shown and also the HR line at the bottom: In Firefox none of the lines are shown, only four dots at the beginning:

CP 2: Ext.Content
In IE 6 the content gets the whole width, in Firefox not.

This is the part of my default.css that is responsible for the main content:

Code: Select all

#main {
  font-family: Verdana, Arial, sans-serif;
  font-size: 10pt;
  top: 187px;
  position: absolute;
  bottom: 35px;
  height: auto;
  width: auto;
  background: #FFFFFF;
  border-left: 1px dashed #003064;
  overflow: auto;
  z-index: 2;
  margin: 5px 232px 5px 232px;
  padding-left: 5px;
  padding-right: 5px;
}

#main {
  height: expression(document.body.clientHeight - 228 + "px");
  width: expression(document.body.clientWidth - 474 + "px");  
}

Does anyone have an idea how I can correct these differences?

Thanks in advance-

Joachim

trip · Post by **trip** » Fri 22. Jul 2005, 15:53

you need to look into specific hacks for IE so that the CSS sits correctly
I find that designing in firefox helps, then the changes to the code are minimal in ie...

use the following to be IE specific

Code: Select all

* html .css_code {}

enjoy
TriP

jscholtysik · Post by **jscholtysik** » Tue 26. Jul 2005, 00:32

Hi trip,

but I don't want to be only IE specific, I want to change my existing design so that it looks good in all browsers. But how can I achieve this?

Joachim

trip · Post by **trip** » Tue 26. Jul 2005, 07:16

its not being IE specific...
you have 2 sets of commands

eg

Code: Select all

/* Firefox */
.css_element {width:100px}
/* IE */
* html .css_element {width:90px}

The above example shows you that the same css value can be specified for IE only using the * html. Test it out and see what it does.

There are loads of tutorials on this ...
TriP

jscholtysik · Post by **jscholtysik** » Tue 26. Jul 2005, 09:24

Hi trip,

I don't think the css code is the problem.

This css code I have in my css file for the newsletter is:

Code: Select all

#left_newsletter {
  font-family: Verdana, Arial, sans-serif;
  font-size: 10pt;
  color: #003064;
  text-decoration: none;  
  margin-left: 2px;
}

This is the newsletter part in my template:

Code: Select all

  <div id="left_newsletter">
    Newsletter abonnieren:
<form action="index.php?newsletter" method="post" name="newsletter" target="_self" 
    onsubmit="if (document.newsletter.newsletter_email.value=='name@domain.com') 
    {document.newsletter.newsletter_email.value='';}"> <input name="newsletter_send" type="hidden" value="1"/>
<input name="newsletter_email" type="text" id="newsletter_email" style="font: normal 13px/16px Verdana; border: dashed 1px #003064; background: #CFE7F7; padding: 1px; color: #003064; width: 155px" size="20" title="Your e-mail adress" value="" onfocus="this.value='';"/><input type="image" src="{SITE}picture/Symbols/newsletter.gif" alt="Senden" align="top"/>
    <script language="JavaScript" type="text/javascript"> 
      <!-- 
      document.newsletter.newsletter_email.value='name@domain.com'; 
      //--> 
    </script>
  </form>
  </div>

Firefox 1.0.6 shows this:

IE produces this:

But there is no additional line between "Newsletter abonnieren" and the entryfield in the sourcecode!!! That is one of my problems I have!!

It's a fundamental display problem. I don't think that can be corrected via css code...

You can look at my site with IE and Firefox if you want. The (test)homepage is located at : http://www.scholtysik.net/cms_p/index.php

Perhaps you or anyone other knows how I can correct the differences between the browsers...

Joachim

trip · Post by **trip** » Tue 26. Jul 2005, 09:28

try putting the <form> </form> tags outside the div element

TriP

jscholtysik · Post by **jscholtysik** » Tue 26. Jul 2005, 09:34

Hi trip,

how should that work?? Then I will loose the formatting of this div area...

Code: Select all

<div id="left_newsletter"> 
    Newsletter abonnieren: 
<form action="index.php?newsletter" method="post" name="newsletter" target="_self" 
    onsubmit="if (document.newsletter.newsletter_email.value=='name@domain.com') 
    {document.newsletter.newsletter_email.value='';}"> <input name="newsletter_send" type="hidden" value="1"/> 
<input name="newsletter_email" type="text" id="newsletter_email" style="font: normal 13px/16px Verdana; border: dashed 1px #003064; background: #CFE7F7; padding: 1px; color: #003064; width: 155px" size="20" title="Your e-mail adress" value="" onfocus="this.value='';"/><input type="image" src="{SITE}picture/Symbols/newsletter.gif" alt="Senden" align="top"/> 
    <script language="JavaScript" type="text/javascript"> 
      <!-- 
      document.newsletter.newsletter_email.value='name@domain.com'; 
      //--> 
    </script> 
  </form> 
  </div>

Could you explain it please?

Joachim

trip · Post by **trip** » Tue 26. Jul 2005, 09:39

Try this, I know this is a problem when you have tables...
so try this out with the div...
TriP

Code: Select all

<form action="index.php?newsletter" method="post" name="newsletter" target="_self"
    onsubmit="if (document.newsletter.newsletter_email.value=='name@domain.com')
    {document.newsletter.newsletter_email.value='';}"> <input name="newsletter_send" type="hidden" value="1"/>

<div id="left_newsletter">
Newsletter abonnieren:
<input name="newsletter_email" type="text" id="newsletter_email" style="font: normal 13px/16px Verdana; border: dashed 1px #003064; background: #CFE7F7; padding: 1px; color: #003064; width: 155px" size="20" title="Your e-mail adress" value="" onfocus="this.value='';"/><input type="image" src="{SITE}picture/Symbols/newsletter.gif" alt="Senden" align="top"/>
    <script language="JavaScript" type="text/javascript">
      <!--
      document.newsletter.newsletter_email.value='name@domain.com';
      //-->
    </script>
 </div>

</form>

jscholtysik · Post by **jscholtysik** » Tue 26. Jul 2005, 09:53

Great! That's it! Thank you very much!!

I see: The problem is the form tag in accordance with <div>.

Do you accidentally have a clue for my content problem that my content is differently wide in different browsers (See first post) ?

That is my code for the main content:

Code: Select all

#main {
  font-family: Verdana, Arial, sans-serif;
  font-size: 10pt;
  top: 187px;
  position: absolute;
  bottom: 35px;
  height: auto;
  width: auto;
  background: #FFFFFF;
  border-left: 1px dashed #003064;
  overflow: auto;
  z-index: 2;
  margin: 5px 232px 5px 232px;
  padding-left: 5px;
  padding-right: 5px;
}

#main {
  height: expression(document.body.clientHeight - 228 + "px");
  width: expression(document.body.clientWidth - 474 + "px");  
}

It is the css solution by pico because IE 6 does not accept the width and height values the right way.

Once more: Thank you very much!

Joachim