The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> <div> Margins, Padding Firefox vs. IE, Paddding works in IE not in Firefox
fjp
post Mar 16 2008, 04:57 PM
Post #1





Group: Members
Posts: 6
Joined: 16-March 08
Member No.: 5,213



Hello,

I have a <div> element that contains text. I currently have two divs one inside the other (in an effort to control text alignment). The divs compose my main content area for text. ".content_div" applies to the <div> that contains the text, which is nested inside the main content element "#content". There is a floating div to the left which is the navigation bar/links area.

If I set margins or padding at 20px, the text is displayed properly in IE 7, but the left margin does not change in Firefox 1.7.2. I can get it to look correct in Firefox by adding a margin that equals the width of the navbar <div>/element + 20px, but then that overextends the left margin in IE.

Thanks for any suggestions that can resolve this...

Page:

http://www.fredjohnsonphotography.com/about_test.html

http://www.fredjohnsonphotography.com/CSS/about_test.css
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
john f
post Mar 16 2008, 05:25 PM
Post #2


Member
***

Group: Members
Posts: 47
Joined: 23-August 06
Member No.: 10



BENEATH </body></html> You have the following:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>

<body>
</body>
</html>

Remove this.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
john f
post Mar 16 2008, 05:29 PM
Post #3


Member
***

Group: Members
Posts: 47
Joined: 23-August 06
Member No.: 10



Validate CSS at http://qa-dev.w3.org:8001/css-validator/
There are some errors.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
fjp
post Mar 16 2008, 05:35 PM
Post #4





Group: Members
Posts: 6
Joined: 16-March 08
Member No.: 5,213




Yikes! It's gone, thanks for pointing that out. Although I am afraid that did not change anything as far as the problem with Firefox I am having.



QUOTE(john f @ Mar 16 2008, 02:25 PM) *

BENEATH </body></html> You have the following:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>

<body>
</body>
</html>

Remove this.

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
fjp
post Mar 16 2008, 05:45 PM
Post #5





Group: Members
Posts: 6
Joined: 16-March 08
Member No.: 5,213



QUOTE(john f @ Mar 16 2008, 02:29 PM) *

Validate CSS at http://qa-dev.w3.org:8001/css-validator/
There are some errors.



I appreciate your suggestion, and did so, and it seems to have been validated ok. What errors were you refering to?

http://jigsaw.w3.org/css-validator/validat...s&warning=1

http://jigsaw.w3.org/css-validator/validat...l&warning=1
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
fjp
post Mar 16 2008, 05:52 PM
Post #6





Group: Members
Posts: 6
Joined: 16-March 08
Member No.: 5,213



john f

I should of pointed out that I ran the validation after removing the crap I had at the bottom. It got in there when I copied and pasted the code before uploading to test. As I mentioned it is gone now and it seems to pass the validation test now.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
fjp
post Mar 16 2008, 06:06 PM
Post #7





Group: Members
Posts: 6
Joined: 16-March 08
Member No.: 5,213



"and it seems to pass the validation test now."

However, just to be clear the problem still exists. Padding and Margins in Firefox appear to be relative to the page border, ie. the window border/navigation element as opposed to the content <div> elements box. IE is diplaying the Left Margin and Padding settings correctly. In the page that is posted I just have the margins set at 20px. Although I have also tested with Padding and get the same results, where the text remains up against the left edge. The top, right, and bottom margins and padding display correctly.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Mar 17 2008, 03:51 AM
Post #8


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



You need a 170px left margin for #content_div. A float doesn't push away static boxes beside it. It's just their inline content that's pushed to the side. In reality the content box stretches under the float all the way to the left edge. So you need a margin that is the width of the float + the visible spacing you really want.


Behold this. I added the margins to the float so you'll be able to see the static box behind it on all sides.



CODE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>
<title>Floats</title>

<style type="text/css">

#floater   { float: left;
             width: 150px; height: 400px;
             margin: 10px 0 0 10px;
             background: yellow }
#static    { background: red }

</style>

</head>


<body>

<div id="floater">FLOAT</div>
<div id="static">STATIC BOX<br>STATIC BOX<br>STATIC BOX<br>STATIC BOX<br>STATIC BOX</div>


</body>
</html>


This does not happen with your page in IE because you've triggered its broken float model. This article is old and it doesn't tell the whole story. It says the static box needs to have a width for this to happen. The truth is that the broken float model can be triggered by the static box having a height, which yours have, and probably by other things to. The article can be worth a read anyway.
http://www.positioniseverything.net/floatmodel.html

Load the HTML I posted above in IE. Then edit it and add this (or a width):
CODE
#static    { height: 10em }

Hit refresh in IE and see the page change.


I'm sad to hear this isn't fixed in IE7. I kinda believed it was. sad.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
fjp
post Mar 17 2008, 05:56 PM
Post #9





Group: Members
Posts: 6
Joined: 16-March 08
Member No.: 5,213



OK, have it working in Firefox and IE7 anyway.

Give my static element a margin equal to the inline floating element's width, and relative to the floating element's position (inline left or right floating element). If the floating element is Left, then the static element's left margin is set to the floating element's width. If the floating element is to the right then the static element's right margin is set to the float's width. In addition to outsmart the standards breaking pimps at Monopolysoft, do not add a width or height parameter to the static element. I think I have gotten around this by adding the height value to the nested <div>. I set the compensating margin in the wrapper, and the height in the nested <div>.

Adding padding created another issue in terms of the height of the <div> box relative to the float box. When I added 20px padding I needed to subtract 40px from the <div> height for it to match the float's height as displayed in the browser. Changes below.

Thanks for the link and the example.


CODE

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>
<title>Floats</title>

<style type="text/css">

#floater   { float: left;
             width: 150px; height: 400px;
             margin: 0px 0 0 0px;
             background: yellow }
#static    {
    background: red;
    border: 0px;
    margin-left: 150px;
    padding: 20px;
    
}

#nested     {
    height: 360px;
    }

body {
    margin: 0px;
}
</style>

</head>


<body>

<div id="floater">FLOAT</div>
<div id="static">
  <div id="nested">STATIC BOX STATIC BOX STATIC BOX STATIC BOX STATIC BOX STATIC BOX STATIC BOX STATIC BOX STATIC BOX STATIC BOX STATIC BOX STATICBOX STATIC BOX STATIC BOX STATIC BOX STATIC BOX STATIC BOX STATIC BOX STATIC BOX
  </div>
</div>


</body>
</html>






I'm sad to hear this isn't fixed in IE7. I kinda believed it was. sad.gif
[/quote]
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 29th March 2024 - 07:40 AM