Solved

Firefox/ Internet Explorer show differences (well, thats normal, but there must be a way to do it right)

Posted on 2006-06-20
26
197 Views
Last Modified: 2010-04-25
Hi there,

I am wondering if I am using the right header or document type:

I am trying to display an image and right next to it, same margin from the top, a text.

It does not matter whether I do it with layers or tables -- text and image never have the same upper border in IE and Firefox (no, there is no padding-top in the style for the text). Usually the text is around 10px above the image.
(I regard placing a table inside a layer as a workaround).

I use Dreamweaver 8.02, default doctype is XHTML 1.0 Transitional, header info says

<!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">

Thanks!
0
Comment
Question by:Sumukha
  • 14
  • 12
26 Comments
 
LVL 70

Expert Comment

by:Jason C. Levine
Comment Utility
Hi Sumukha,

The answer is in the source code.  Can you please post a working link or the HTML and CSS here.

Most likely, you've done something that is throwing either or both IE or FF into quirks mode.
0
 

Author Comment

by:Sumukha
Comment Utility
Hi,
Can't link to the site at the moment cause DNS change is happening.

This is the version with two layers, according to DW 8.02 no errors, compatible with both browsers:


<!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"><!-- InstanceBegin template="Templates/elle1.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>Welcome</title>
<!-- InstanceEndEditable --><!-- InstanceBeginEditable name="head" -->
<style type="text/css">
<!--
#book {
      position:absolute;
      width:140px;
      height:300px;
      z-index:1;
      margin-left: 150px;
      margin-top: 85px;
}
-->
</style>
<style type="text/css">
<!--
#descr {
      position:absolute;
      width:320px;
      height:250px;
      z-index:2;
      margin-left: 320px;
      margin-top: 85px;
}
-->
</style>
<!-- InstanceEndEditable -->
<style type="text/css">
<!--
body {
      background-color: #B7FFCE;
      margin-top: 0px;
}
-->
</style>
<link href="elle.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
#Layer1 {
      position:absolute;
      width:780px;
      height:400px;
      z-index:1;
}
a:link {
      text-decoration: none;
      color: #000000;
}
a:visited {
      text-decoration: none;
}
a:hover {
      text-decoration: underline;
      color: #990000;
}
a:active {
      text-decoration: none;
}
-->
</style>
<script type="text/javascript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
</head>

<body>
<table width="780" border="0" align="center" cellpadding="0" cellspacing="0">
  <!--DWLayoutTable-->
  <tr>
    <td width="780" height="90" colspan="5" valign="top"><img src="images/elle2r.jpg" width="780" height="90" /></td>
  </tr>
  <tr>
    <td width="20%" height="30" align="center" valign="top" class="topBar"><a href="www.ellegreenfox.com/index.html">Home</a></td>
    <td width="20%" align="center" valign="top" class="topBar"><a href="book.html">The Book </a></td>
    <td width="20%" align="center" valign="top" class="topBar"><a href="foxtails.html">Foxtails</a></td>
    <td width="20%" align="center" valign="top" class="topBar"><a href="about1.html">About Elle </a></td>
    <td width="20%" align="center" valign="top" class="topBar"><a href="contact.html">Contact</a></td>
  </tr>
  <tr><!-- InstanceBeginEditable name="content" -->
    <td height="400" colspan="5" valign="top"><div id="Layer1">
      <div id="book"><img src="images/book.jpg" width="136" height="190" align="middle" /><br /><br />
      <br />
      </div>
      <div id="descr">
        <p class="textpad" >Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
        </div>
    </div></td>
  <!-- InstanceEndEditable --></tr>
  <tr>
    <td height="30" align="center" valign="top" class="bottBar">Home</td>
    <td height="30" align="center" valign="top" class="bottBar">The Book </td>
    <td height="30" align="center" valign="top" class="bottBar">Foxtails</td>
    <td height="30" align="center" valign="top" class="bottBar">About Elle </td>
    <td height="30" align="center" valign="top" class="bottBar">Contact</td>
  </tr>
</table>
</body>
<!-- InstanceEnd --></html>


And now the table version:



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><!-- InstanceBegin template="/Templates/elle.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Welcome to Elle Greenfox</title>
<style type="text/css">
<!--
body {
      background-color: #B7FFCE;
      margin-top: 0px;
}
.Bar {
      font-family: Arial, Helvetica, sans-serif;
      font-size: 13px;
      color: #003300;
      text-align: center;
      font-weight: 600;
      padding-bottom: 10px;
}
.line {
      border-bottom-width: 1pt;
      border-bottom-style: solid;
      border-bottom-color: #333333;
}
a:link {
      text-decoration: none;
      color: #003300;
}
a:visited {
      text-decoration: none;
      color: #003300;
}
a:hover {
      text-decoration: underline;
      color: #000066;
}
a:active {
      text-decoration: none;
      color: #FF0000;
}
#elle {
      position:absolute;
      width:150px;
      height:200px;
      z-index:1;
      margin-left: 100px;
      margin-top: 80px;
      background-color: #FFFFFF;
}
#quote {
      position:absolute;
      width:300px;
      height:200px;
      z-index:2;
      margin-left: 350px;
      margin-top: 80px;
}
.BarBott {
      font-family: Arial, Helvetica, sans-serif;
      font-size: 13px;
      color: #003300;
      text-align: center;
      font-weight: 400;
      padding-bottom: 10px;
      padding-top: 10px;
}
-->
</style>
<script type="text/javascript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
<link href="elle.css" rel="stylesheet" type="text/css">
</head>

<body>
<table width="780" border="0" align="center">
  <!--DWLayoutTable-->
  <tr>
    <td height="120" colspan="6" align="center" scope="col"><br>
        <img src="images/elle2r.jpg" width="780" height="90" align="absbottom">   </tr>
  <tr>
    <td height="27" align="center" class="Bar"><a href="index.html">Home</a></td>
    <td align="center" class="Bar"><a href="book.html">The Book </a></td>
    <td align="center" class="Bar"><a href="foxtails1.html">Foxtails</a></td>
    <td align="center" class="Bar"><a href="about1.html">About Elle </a></td>
    <td align="center" class="Bar"><a href="contact.html">Contact</a></td>
  </tr>
  <tr><!-- InstanceBeginEditable name="c" -->
    <td height="400" colspan="6" valign="top"><table width="100%" border="0">
      <tr>
        <td width="120" height="80" valign="top">&nbsp;</td>
        <td align="left" class="text">&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td height="280" valign="top"><img src="images/book.jpg" width="136" height="190"></td>
        <td width="330" valign="top"><p class="text">Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>
          </td>
        <td width="120">&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td height="40">&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
    </table></td>
  <!-- InstanceEndEditable --></tr>
  <tr>
    <td height="2" colspan="6" class="line"><img src="images/space.gif" width="1" height="1"></td>
  </tr>
  <tr>
    <td width="20%" height="27" class="BarBott">Home</td>
    <td width="20%" class="BarBott">The Book </td>
    <td width="20%" class="BarBott">Foxtails</td>
    <td width="20%" class="BarBott">About Elle </td>
    <td width="20%" class="BarBott">Contact</td>
    <td class="BarBott"><!--DWLayoutEmptyCell-->&nbsp;</td>
  </tr>
  <tr>
    <td height="27" colspan="6">&nbsp;</td>
  </tr>
</table>
</body>
<!-- InstanceEnd --></html>


Thanks!
0
 

Author Comment

by:Sumukha
Comment Utility
OK,
Either nobody knows or not enough points...
The second I can change.
0
 
LVL 70

Expert Comment

by:Jason C. Levine
Comment Utility
No, the third option is I haven't had the time to get back to it yet
0
 
LVL 70

Expert Comment

by:Jason C. Levine
Comment Utility
Okay, when I load up both pages, I see the text text text at the same horizontal level as the image.  Am I missing something?
0
 

Author Comment

by:Sumukha
Comment Utility
Hi Jasin,
Then go to http://www.ellegreenfox.com/test1.html and http://www.ellegreenfox.com/test2.html and see the difference in IE/Firefox.

Or http://www.ellegreenfox.com/book.html.

Let me know if you need the stylesheet...

Thanks
Su
0
 
LVL 70

Expert Comment

by:Jason C. Levine
Comment Utility
Okay, going in reverse:

On http://www.ellegreenfox.com/book.html you do have a 15px pad defined for .booktext and that will misalign the top of the book image with the top of the text.  Remove the padding and the text aligns to the top of the image.

For test2, same issue.  There is a top pad defined for .textpad.

Test1 is a little different.  The <p> tag inside of a table cell will automatically add some padding there.  To avoid this, remove the <p> tag from the text and apply the .text class to the <td> tag to preserve the formatting.
0
 

Author Comment

by:Sumukha
Comment Utility
Lets stick with book.html. I made the tables visible... I removed the padding from booktext, now the text is at the table border in IE (still I need some padding there, wonder how to do it) and in FF there is padding, also above the book.

How can I now have both the same in IE and FFox and the padding?

Thanks
Su
0
 

Author Comment

by:Sumukha
Comment Utility
"Test1 is a little different.  The <p> tag inside of a table cell will automatically add some padding there.  To avoid this, remove the <p> tag from the text and apply the .text class to the <td> tag to preserve the formatting."

Didn't know that with the <p>, thought it would only apply to the text, not to the whole table.
Can I also change it to <span class> instead to the <td>?

Thanks
Su
0
 
LVL 70

Accepted Solution

by:
Jason C. Levine earned 500 total points
Comment Utility
Okay, now you are the same place as test1.

When you have a <p> inside a <td>, the browsers will automatically add some padding to the top and bottom of the <p>

One solution is to remove the <p> from both the image cell and the text cell and use two <br> tags to break up the paragraphs.  To keep your text formatting, apply .booktext to the entire table.

The better solution is to not use tables in your layout at all and make this pure css.  All you need are two more classes to mimic the table functionality and you will gain much more control over the layout.
0
 

Author Comment

by:Sumukha
Comment Utility
Have a look again:
now both, book and text are the same style. Still not exactly the same height.
No more padding involved...

Thanks
Su
0
 
LVL 70

Expert Comment

by:Jason C. Levine
Comment Utility
Okay, I see you read the other answer.

CSS is wonderful in that you can apply a class to anything that is a container (table, tr, td, p, span, etc).  The caveat is that depending on the doctype declaration and the browser, some CSS things render differently in the different browsers.

I think you could use span in this case, but as I say above, you are really better off going 100% CSS here.
0
 
LVL 70

Expert Comment

by:Jason C. Levine
Comment Utility
You still have a <p> tag around the image.
0
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 

Author Comment

by:Sumukha
Comment Utility
I always thought of <span> as CSS... Sounds as if it is not.

How would that look like in this case?
Right now I have
                <span class="text"><strong>Two Red Flowers</strong><br />
                Elle Greenfox </span>  

for the text under the book and in FF the title does not show bold.

Do I make a new style in the stylesheet even for a bold highlight?

And anyway, can I tell DW not to use <span> or <p class=> ?

Thanks
Su
0
 
LVL 70

Expert Comment

by:Jason C. Levine
Comment Utility
>> I always thought of <span> as CSS... Sounds as if it is not.

Not technically.  It's an HTML container that you can apply CSS to.

>> Right now I have <span class="text"><strong>Two Red Flowers</strong><br />  Elle Greenfox </span>  for the text under the book and in FF the title does not show bold.

Okay, here is where you run into a difference between CSS and non-CSS design.  The text class overrides the strong tag when contained by span.  What you need is:

<span class="text">Two Red Flowers<br /></span><span class="nobold"> Elle Greenfox </span>

Where the font-weight property is set to bold in the class text and isn't in the nobold class.

Alternately, you don't use span.  span has special properties.  What you should be doing is not using tables and use divs.  Then you can use <p> and <strong> without any issues.
0
 

Author Comment

by:Sumukha
Comment Utility
Something I don't get:
When I use divs,  I define a class with it, right?  When I want to switch to another font, DW inserts the <span> tag.
How to do that without <span>?

Thanks
Su
0
 
LVL 70

Expert Comment

by:Jason C. Levine
Comment Utility
By defining new classes for things.

You are using XHTML 1.0 transitional and <font> is deprecated.  XHTML requires the use of CSS classes or span.  Switch the doctype back to HTML Transitional 4.0 to use font.

It sounds like you aren't all that familiar with how CSS should be implemented.  I'd suggest reading up on it.
0
 

Author Comment

by:Sumukha
Comment Utility
I have been working my way through it, try and error... XHTML 1.0 transitional without <font> is clear to me.
Still do you recommend some literature to be more familiar with CSS?
0
 
LVL 70

Expert Comment

by:Jason C. Levine
Comment Utility
0
 

Author Comment

by:Sumukha
Comment Utility
Thanks for your help!

Su
0
 

Author Comment

by:Sumukha
Comment Utility
Hi there again,

I ordered "Cascading Style Sheets : Designing for the Web (3rd Edition)",
but as I am getting more into CSS, I see that Dreamweaver' help section is not very good in explaining plus it is not clear when e.g. to use <p class=> and when to use <div class=...>.
Do you know any CSS book more related to DW?

Thanks
Su
0
 
LVL 70

Expert Comment

by:Jason C. Levine
Comment Utility
No, as CSS is not a DW specific thing.  Think of it this way...<divs> are containers.  You use them to lay things out and set a certain global style for the container.  Inside the div, you can have <p> tags that break your content up into paragraphs.  Those <p> tags can also have styles that do different things.
0
 

Author Comment

by:Sumukha
Comment Utility
Is there any way to avoid that the containers grow when padding is applied?

Thanks
Su
0
 
LVL 70

Expert Comment

by:Jason C. Levine
Comment Utility
I'm not sure what you're asking here, but the answer is probably yes.  I'd need to see an example of what you are trying to do so we're clear.

Also, you should be posing this as a new question.
0
 

Author Comment

by:Sumukha
Comment Utility
I agree. I will.

Thanks again
Su
0
 

Author Comment

by:Sumukha
Comment Utility
0

Featured Post

Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

I still run into .cgi files every now and then. In some instances, I actually prefer the simplicity of a .cgi script to other options. Since I use DreamWeaver extensively, what I needed was a way to open .cgi scripts in Dreamweaver. And I wanted to …
Adobe Dreamweaver CS5 is a WYSIWYG web page editor that has advanced HTML, CSS, and Javascript rendering functionality and is probably the most well-known HTML editor available. Much of Dreamweaver's appeal centers around the Design View interfac…
In this tutorial you'll learn about bandwidth monitoring with flows and packet sniffing with our network monitoring solution PRTG Network Monitor (https://www.paessler.com/prtg). If you're interested in additional methods for monitoring bandwidt…
This video demonstrates how to create an example email signature rule for a department in a company using CodeTwo Exchange Rules. The signature will be inserted beneath users' latest emails in conversations and will be displayed in users' Sent Items…

772 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now