Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 244
  • Last Modified:

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

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
Sumukha
Asked:
Sumukha
  • 14
  • 12
1 Solution
 
Jason C. LevineNo oneCommented:
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
 
SumukhaAuthor Commented:
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
 
SumukhaAuthor Commented:
OK,
Either nobody knows or not enough points...
The second I can change.
0
Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

 
Jason C. LevineNo oneCommented:
No, the third option is I haven't had the time to get back to it yet
0
 
Jason C. LevineNo oneCommented:
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
 
SumukhaAuthor Commented:
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
 
Jason C. LevineNo oneCommented:
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
 
SumukhaAuthor Commented:
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
 
SumukhaAuthor Commented:
"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
 
Jason C. LevineNo oneCommented:
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
 
SumukhaAuthor Commented:
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
 
Jason C. LevineNo oneCommented:
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
 
Jason C. LevineNo oneCommented:
You still have a <p> tag around the image.
0
 
SumukhaAuthor Commented:
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
 
Jason C. LevineNo oneCommented:
>> 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
 
SumukhaAuthor Commented:
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
 
Jason C. LevineNo oneCommented:
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
 
SumukhaAuthor Commented:
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
 
Jason C. LevineNo oneCommented:
0
 
SumukhaAuthor Commented:
Thanks for your help!

Su
0
 
SumukhaAuthor Commented:
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
 
Jason C. LevineNo oneCommented:
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
 
SumukhaAuthor Commented:
Is there any way to avoid that the containers grow when padding is applied?

Thanks
Su
0
 
Jason C. LevineNo oneCommented:
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
 
SumukhaAuthor Commented:
I agree. I will.

Thanks again
Su
0
 
SumukhaAuthor Commented:
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 14
  • 12
Tackle projects and never again get stuck behind a technical roadblock.
Join Now