Solved

Firefox/ Internet Explorer show differences Vol 2

Posted on 2006-06-27
6
175 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
  • 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
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

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 …
This article is very specific and is only intended to help if you are installing Dreamweaver 8 in a Windows 7 environment with Office 2007 installed.   I'm not sure why Microsoft tends to release OS' that should not be released but they do.  Windows…
This demo shows you how to set up the containerized NetScaler CPX with NetScaler Management and Analytics System in a non-routable Mesos/Marathon environment for use with Micro-Services applications.
When you create an app prototype with Adobe XD, you can insert system screens -- sharing or Control Center, for example -- with just a few clicks. This video shows you how. You can take the full course on Experts Exchange at http://bit.ly/XDcourse.

708 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

17 Experts available now in Live!

Get 1:1 Help Now