Melody Scott
asked on
Spacing Different In Firefox and IE
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.
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.
ASKER
Hmmm.... I get Congratulations! This document validates as CSS!
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
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
ASKER
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!
When you say whitespace, do you mean spacers, like clear30x30.gif? Thanks!
whitespace is referred to a "blank area", which "could" include a clear30x30.whatever image.
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
<div>my div</div>
<div>another div</div>
Try formatting your code like this:
div>my div</div
><div>another div</div
><div> etc
No not spacers or images.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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!
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!
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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 as often as needed.
D
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 as often as needed.
D
ASKER
You guys (gals?) rock!! I will assign points shortly, thanks again.
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