Solved

Firefox/ Internet Explorer show differences Vol 2

Posted on 2006-06-27
6
180 Views
Last Modified: 2010-04-25
Hi,

I am still learning CSS, so ...
again the differences...
The <p class= > shows different in both browsers (upper margins differ):

<div id="box">
      <p class="boxtextPad20">Join Elle&rsquo;s conversation in her foxtails column
        as she discusses everything from X to Y.<br />
    Learn about her new book &ldquo;Two Red Flowers&rdquo; and explore ___________          
      <p class="boxtextCenter">Coming Soon<br />
      Elle&rsquo;s Store      
      <p class="boxtext">Visit her online store for her latest books of prose
        and poetry. Browse through a collection of specialty bookmarks, stationary,
      cards, jewelry, and exotic incense.
    </div>

Or the link:

http://www.ellegreenfox.com/indexNew.html

Thanks
Su
0
Comment
Question by:Sumukha
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 2
6 Comments
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 16996263
Hi Su,

There are several things that could be going on here, none of them are really Dreamweaver specific :)

The first thing I would like you to fix is your invalid XHTML.  See the following:

http://validator.w3.org/check?uri=http%3A%2F%2Fwww.ellegreenfox.com%2FindexNew.html

and

http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.ellegreenfox.com%2FindexNew.html&usermedium=all

Basically, when you have invalid markup for your declared DOCTYPE, the browsers go into their "quirks" mode to render your pages.  As the browsers have different default settings for things, this can result in unexpected whitespace around containers.  Fix the errors and post back when this page passes both validation tests.

Finally, here is a really good visual representation of the CSS box model:

http://www.w3.org/TR/REC-CSS2/box.html#box-dimensions
0
 

Author Comment

by:Sumukha
ID: 16996779
Ok. So far so good. Found many mistakes. (wonder why DW doesn't scream or show these errors even on validation)

It actually leads me back to the question in the other thread about container expanding when a style with padding is applied.

So how do I insert a text now correctly?

See the container growing in http://www.ellegreenfox.com/indexNew1.html 
In the other way, p-style, there are the differences between IE and FF: http://www.ellegreenfox.com/indexNew2.html

THanks
Su
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 16997120
For indexNew1,

You need to constrain the text with a nested div so that the padding is applies inwards.  Your current code does not do that, as the box receives both an ID and a class:

Here's the relevant source code:

    <div id="box" class="boxtextPad20">
Join Elle’s conversation in her foxtails column as she
        discusses everything from X to Y.<br />
        Learn about her new book “Two Red Flowers” and explore ___________
    </div>

Should be:

    <div id="box">
      <div class="boxtextPad20">Join Elle’s conversation in her foxtails column as she
        discusses everything from X to Y.<br />
        Learn about her new book “Two Red Flowers” and explore ___________</div>
    </div>

The above "<div id="box" class="boxtextPad20">" probably isn't the best way to go about it.  You should either make it a class or div but not both at once...makes the CSS editing really tough to do unless you plan on using boxtextPad20 elsewhere in the document.  

Also, to prevent the bg image from repeating, set background-repeat: no-repeat; in the same style that holds the BG image.

For indexNew2 <p> tags, you are running into a default difference in the two browsers and there isn't a lot you can do about that unless you explicity kill the margin in the <p> tag.  To do that effectively, you also need to add another div to apply boxtextPad20.  Now the boxtextPad20 controls the padding inside "box" and you can create as many classes as you need to apply to p tags.

Revised code:

    <div id="box">
<div class="boxtextPad20">      
      <p class="textfix">Join Elle’s conversation in her foxtails column as she
        discusses everything from X to Y.<br />
        Learn about her new book “Two Red Flowers” and explore ___________</p>
      <p class="boxtextCenter">Coming Soon:<br />
        Elle's Shop</p>
      <p class="textfix">Visit her online store for her latest books of
        prose
and poetry. Browse through a collection of specialty bookmarks, stationary,
cards, jewelry, and exotic incense.</p>
</div>

class .textfix is:

.textfix {
      font-family: Arial;
      font-size: 12pt;
      font-style: italic;
      font-weight: 400;
      margin: 0px;
      padding: 0px;
      text-align: justify;
}

boxpad20 should be:

.boxtextPad20 {
      padding: 20px;
}  
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.

 
LVL 70

Accepted Solution

by:
Jason C. Levine earned 250 total points
ID: 16997134
>> (wonder why DW doesn't scream or show these errors even on validation)

Hmm.   It should show you in source code by redlining the offenders but that may be disabled.  From the Results | Validation panel, you need to hit the green arrow icon to force a validation check.
0
 

Author Comment

by:Sumukha
ID: 16997209
Actually it distinguishes between 'Validate Markup' PLUS 'Validate XML', so you actually have to validate twice.
No red marks in the code. Pity.

Thanks, Jason. That was really brilliant.
I wonder if these things will be described in the book I ordered.

Thanks again
Su

0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 16997335
You're welcome.   It takes a little time to get one's head around the box model, but once you do it becomes very easy to replicate.
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

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…
Exchange organizations may use the Journaling Agent of the Transport Service to archive messages going through Exchange. However, if the Transport Service is integrated with some email content management application (such as an antispam), the admini…

733 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