Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Spacing Different In Firefox and IE

Posted on 2006-11-28
12
Medium Priority
?
408 Views
Last Modified: 2013-11-19
Hi, all,

 I just wondered if anyone could tell me why this code is rendering very differently in IE and Firefox (and opera)? The problem is the spacing. If I make it look nice in IE, then it's cramped in FF and Opera. If I space it for FF, the spacing is too wide for IE. The page is http://dev.mysite.com, exchange magickitchen for mysite.

The spacing issues are in the two sidebars, the weekly recipe, discounts, newsletter, etc. Thanks! I always learn a lot here.
0
Comment
Question by:mel200
[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
  • 4
  • 2
  • +1
12 Comments
 
LVL 30

Expert Comment

by:irwinpks
ID: 18030635
http://jigsaw.w3.org/css-validator/

Visit that link and enter your URL.. it will point out what is not working with the other.  Correct it, and you should have similar results in both browsers
0
 

Author Comment

by:mel200
ID: 18030683
Hmmm.... I get Congratulations!  This document validates as CSS!

0
 
LVL 30

Expert Comment

by:Mark Steggles
ID: 18030709
Greetings mel200,

Firstly, add * {padding:0;margin:0;} to your stylesheet. This will set the default padding and margin on all elements to zero. IE6 adds padding unless you tell it not to!!!

Also, remove whitespace from your html file as ie6 plays all kinds of tricks if you give it some whitespace!!!

Regards
0
Survive A High-Traffic Event with Percona

Your application or website rely on your database to deliver information about products and services to your customers. You can’t afford to have your database lose performance, lose availability or become unresponsive – even for just a few minutes.

 

Author Comment

by:mel200
ID: 18030806
hmmm...interesting. When I added that to my stylesheet, it didn't change IE, but it moved the whole page to the left in FF. Forgive my inexperience-I added it exactly as you had written it,  * {padding:0;margin:0;}.

 When you say whitespace, do you mean spacers, like clear30x30.gif? Thanks!
0
 
LVL 30

Expert Comment

by:irwinpks
ID: 18032377
whitespace is referred to a "blank area", which "could" include a clear30x30.whatever image.
0
 
LVL 30

Expert Comment

by:Mark Steggles
ID: 18032392
whitespace in your html file, like:

<div>my div</div>


<div>another div</div>

Try formatting your code like this:

div>my div</div
><div>another div</div
><div> etc
0
 
LVL 30

Expert Comment

by:Mark Steggles
ID: 18032399
No not spacers or images.
0
 
LVL 10

Accepted Solution

by:
Dennis Maeder earned 1600 total points
ID: 18033004
Your html is full of errors. 27 of them. That means that IE/FF may treat them differently.
check it at http://validator.w3.org/

Further, there is a hierarchy that must be observed
block > inline > data
where block elements (span, div) may contain elements at the same or lower levels and inline elements e.g. <a></a> may not contain <div> or <span>

You have the following which will cause confusion:
  <!-- Recipe-->              
  <a href="recipe.html">
    <img src="images/recipe2.gif" alt="Weekly recipe" border="0">
    <br>
    <span class="SidebarBody">
      Click here for our weekly recipe.
    </span>
  </a>

perhaps you meant:
<!-- Recipe-->              
<span class="SidebarBody">
  <a href="recipe.html">
    <img src="images/recipe2.gif" alt="Weekly recipe" border="0">
    <br>
     Click here for our weekly recipe.
  </a>
</span>

D
0
 

Author Comment

by:mel200
ID: 18037711
Hi-I have a  few more questions, sorry about that- first, in the validator, it says "This page is not Valid HTML 4.01 Transitional!" But it doesn't explain why. Is that just because of the errors?

Second, many of the errors are "required attribute "ALT" not specified." But sometimes we don't want to specify an alt-they are just spacers or a nav element. Does anyone know why we must specifiy an alt?

Third, if I do this:
<!-- Recipe-->            
<span class="SidebarBody">
  <a href="recipe.html">
    <img src="images/recipe2.gif" alt="Weekly recipe" border="0">
    <br>
     Click here for our weekly recipe.
  </a>
</span>

 I lose the class on the text. Also <a class=sidebar" href="recipe.html"><img src="images/recipe2.gif" alt="Weekly recipe" border="0">
    <br>
     Click here for our weekly recipe.
  </a>
And create an a.sidebar:link etc class?

And fourth :)  I wasn't aware that whitespace within the html file caused problems! Is there an article you can reference for me?

Thanks, I'll try to fix the rest. I appreciate all the help!

0
 
LVL 30

Assisted Solution

by:Mark Steggles
Mark Steggles earned 400 total points
ID: 18038853
Hi,

1) Yes it says that because there are errors. When you fix the errors, it will say, "congratulations this is html transitional etc :)"

2) Alt is for alternative text if your images fail to show or someone is using a screen reader. You can just use alt="" for spacers etc.

4) I couldnt find any related articles but is it a known bug
0
 
LVL 10

Expert Comment

by:Dennis Maeder
ID: 18038907
To your first question it won't be valid while there are errors.

To the second use alt='' or alt='shim' to make those go away. They are useful for user agents other than gui browsers and for access issues.

On the nesting, I was wrong. So put the <span> back in the <a>!
I've sought some clarity on this: See
http://www.3point7designs.com/blog/2006/11/15/the-symantic-div-id-class-and-span/
and
http://www.w3.org/TR/html4/struct/global.html#edef-SPAN
which describe usage pretty well.
<a> is also a block element (it encloses content) so there is contention. Span can contain
inline material like text, <br>, <hr>. Effectively it is a container for style statements and exists at the lowest level unlike <div> which lives at the other end of the hierarchy.


Whitespace should be ignored, but isn't always.
The rule collapses multiple white space to single, but there are differences in rendition based on tags which are or are not separated (including lin breaks). Thats a personal observation.
To force whitespace use &nbsp; as often as needed.

D
0
 

Author Comment

by:mel200
ID: 18039731
You guys (gals?) rock!! I will assign points shortly, thanks again.
0

Featured Post

Simplify Your Workload with One Tool

How do you combat today’s intelligent hacker while managing multiple domains and platforms? By simplifying your workload with one tool. With Lunarpages hosting through Plesk Onyx, you can:

Automate SSL generation and installation with two clicks
Experience total server control

Question has a verified solution.

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

Does your audience prefer people in photos or no people? How can you best highlight what you’re selling? What are your competitors doing, and what can you do that is different and unique from them?  Continue reading to learn how to make your images …
When it comes to security, close monitoring is a must. According to WhiteHat Security annual report, a substantial number of all web applications are vulnerable always. Monitis offers a new product - fully-featured Website security monitoring and pr…
Viewers will get an overview of the benefits and risks of using Bitcoin to accept payments. What Bitcoin is: Legality: Risks: Benefits: Which businesses are best suited?: Other things you should know: How to get started:
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.
Suggested Courses

661 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