?
Solved

Firefox/ Internet Explorer show differences Vol 2

Posted on 2006-06-27
6
Medium Priority
?
182 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: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

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.

 
LVL 70

Accepted Solution

by:
Jason C. Levine earned 1000 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: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

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

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…
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 tutorial will teach you the special effect of super speed similar to the fictional character Wally West aka "The Flash" After Shake : http://www.videocopilot.net/presets/after_shake/ All lightning effects with instructions : http://www.mediaf…
In this video, Percona Solution Engineer Dimitri Vanoverbeke discusses why you want to use at least three nodes in a database cluster. To discuss how Percona Consulting can help with your design and architecture needs for your database and infras…
Suggested Courses

752 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