Solved

Firefox/ Internet Explorer show differences Vol 2

Posted on 2006-06-27
6
181 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
On Demand Webinar: Networking for the Cloud Era

Ready to improve network connectivity? Watch this webinar to learn how SD-WANs and a one-click instant connect tool can boost provisions, deployment, and management of your cloud connection.

 
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

On Demand Webinar: Networking for the Cloud Era

Did you know SD-WANs can improve network connectivity? Check out this webinar to learn how an SD-WAN simplified, one-click tool can help you migrate and manage data in the cloud.

Question has a verified solution.

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

For those who don't know, Adobe Dreamweaver is a popular commercial web editor that enables you to design, build and manage complex websites. The editor is a WYSIWYG (What You See Is What You Get) web editor, which means that you can create your web…
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 …
Michael from AdRem Software outlines event notifications and Automatic Corrective Actions in network monitoring. Automatic Corrective Actions are scripts, which can automatically run upon discovery of a certain undesirable condition in your network.…
This is my first video review of Microsoft Bookings, I will be doing a part two with a bit more information, but wanted to get this out to you folks.

717 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