Jump to content

Welcome to Geeks to Go - Register now for FREE

Geeks To Go is a helpful hub, where thousands of volunteer geeks quickly serve friendly answers and support. Check out the forums and get free advice from the experts. Register now to gain access to all of our features, it's FREE and only takes one minute. Once registered and logged in, you will be able to create topics, post replies to existing threads, give reputation to your fellow members, get your own private messenger, post status updates, manage your profile and so much more.

Create Account How it Works
Photo

CSS: margin attributes not working in Firefox


  • Please log in to reply

#1
KingTheoden

KingTheoden

    Member

  • Member
  • PipPip
  • 21 posts
This is one of the more interesting problems that I have encountered in developing my website. IE is working, but Firefox is failing!

Essentially, the problem is that I have a containing div, contentMain, that is parent to one div, contentBar, which has two horizontally stacked child div elements, infoBoxL and infoBoxR and another (which is alone). Now, I am floating left infoBoxL and infoBoxR and the rendering is fine. In infoBoxMid, I clear the float but want there to be some whitespace between the two former content containers.

Attempting a margin-top, Firefox does nothing while IE properly displays the content with the margin space. My eyes are glazed so I cannot be sure of the source, but I am hypothesizing that it has something to do with an inline attribute.

Any help would be extremely appreciated, particularly because I want to get to my javascript and am furious at myself for being bogged down in CSS. Anyway...

Since psionics are for games, here is my css and html code:

/* CSS Document */
* {
padding:0;
margin:0;
}
/*
#content {
position:relative;
left:0;
width:970px;
border:1px solid #000066;
background-color:#FFFFFF;
color:#666666;
display:block;
margin: 0 0 0 0;
padding: 0 0 0 0;
min-height: 500px;
}
*/

#contentMain {
position:relative;
margin: 20px 10px 20px 15px;
width:678px;
overflow:auto;
border:solid 1px #000066;
}

.contentBar{
position:relative;
margin-top:30px;
margin-bottom:35px;
margin-left:auto;
margin-right:auto;
width:650px;
color:#666666;
}

#infoBoxL {
width:300px;
margin-top:5px;
margin-bottom:5px;
float:left;
}

#infoBoxR{
width:300px;
margin-top:5px;
margin-bottom:5px;
margin-left: 35px;
float:left;
}

#infoBoxMid {
position:relative;
background-color:#666666;
margin-left:auto;
margin-right:auto;
width:320px;
clear:left;

}
/*
#contentSide {
width:200px;
margin-top:20px;
margin-left:10px;
float:left;
}

.sidePill {
margin-left:auto;
margin-right:auto;
width:170px;
}
*/

.pHeading{
font-family:Georgia, Times New Roman, Times, serif;
text-align:left;
font-size:medium;
font-weight:bold;
color:#000066;
}


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

<link href="assets/styles/styles_content.css" rel="stylesheet" type="text/css" />

</head>

<body>
<div id="contentMain">
<div class="contentBar">

<div id="infoBoxL">
<p class="pHeading">Web Development</p>
<p>Our company specializes in planning, configuring, developing, and deploying websites for a range of needs. Perhaps you are a client in need of revamping a current site, or you are new to the Internet. Whatever the case, our company promises to meet your needs with personalized and dedicated service and support.</p>
</div>

<div id="infoBoxR">
<p class="pHeading">Consulting and Instruction</p>

<p>Businesses must remain well-versed in the latest information technologies in order to maintain and improve the effectiveness of their web platforms. Our company offers consulting services to ensure that systems administrators keep their firms as internet leaders.</p>
</div>
</div>


<div id="infoBoxMid">
<p class="pHeading">Why Us?</p>
<p>
&raquo; Data Security and Integrity<br />
&raquo; Transparent Pricing and Project Management<br />
&raquo; Personalized Service<br />
</p>
</div>
</div>
</div>

<div id="contentSide">
<div class="sidePill">
<p> This is side pill element A. This is just filler text.</p>
</div>
<div class="sidePill">
<p> This is side pill element B. This is just filler text. There is a serious problem with the layout of this CSS and I am determined to resolve it in time for tomorrow evening.</p>
</div>
</div>



</body>
</html>
  • 0

Advertisements


#2
Major Payne

Major Payne

    Retired Staff

  • Retired Staff
  • 5,307 posts
My eyes aren't glazed yet, but the only difference I see between FF 2.0.0.12 and IE is the usual IE problem of getting sizes correct. Other then that they look identical so I must not be seeing what you're seeing.

Ron
  • 0

#3
KingTheoden

KingTheoden

    Member

  • Topic Starter
  • Member
  • PipPip
  • 21 posts
Thank you very much Major Payne for the quick reply!

I hope that I am chasing a phantom, but the problem as I see it is specific to the vertical space between the two horizontal infoBox elements and the infoBoxMid element (i.e., the one that reads 'Why Us...')

If I take away the margin-bottom attribute from contentBar element, in IE the lower element jumps up 35px while nothing happens in Firefox 2.0.0.1.2. Similarly, if I add margin-top y px to infoBoxMid, IE shows the added whitespace while nothing happens in Firefox.

I'm back to tinkering with it so perhaps I will figure out what the issue is. Thanks again for your assistance!
  • 0

#4
Major Payne

Major Payne

    Retired Staff

  • Retired Staff
  • 5,307 posts
It may be related to IE's Box Model problem. IE does not calculate the way it is suppose to as it is a non-compliant browser. Firefox meets pretty near all the CSS2 standards. If it looks the way it should be in FF, then your coding is correct. Then you have to use a separate IE only CSS or conditional statements to get IE to behave.

In FF, the "Personalize Services" and its container are about half way down using 1024x768 res and a 17-inch flat screen. With IE, the same is over half way down. You can see a gig jump when switching between FF and IE.

IE does not recognize min-height. I haven't discovered any more problems with IE yet, but these two should give you a good idea of what to look for.

Known Bugs

Ron
  • 0

#5
KingTheoden

KingTheoden

    Member

  • Topic Starter
  • Member
  • PipPip
  • 21 posts
Topic solved! It was entirely simple. How it eluded me, I will never know.

The problem was with the wrapper class element, contentBar. I needed to add the following style attribute: overflow:auto. That I did not do this before caused the wrapper to collapse since the child elements are floated.

Margins are working fine in IE and Firefox. Thanks for your input!
  • 0

#6
Major Payne

Major Payne

    Retired Staff

  • Retired Staff
  • 5,307 posts
Glad you got it solved. Got side-tracked and didn't get back to your code.

Ron
  • 0

#7
coljung

coljung

    Member

  • Member
  • PipPip
  • 47 posts
Yeah, usually when u're getting problems with FF and not IE, it means that you're doing something wrong with your CSS.
  • 0

#8
wardct

wardct

    New Member

  • Member
  • Pip
  • 1 posts

Topic solved! It was entirely simple. How it eluded me, I will never know.

The problem was with the wrapper class element, contentBar. I needed to add the following style attribute: overflow:auto. That I did not do this before caused the wrapper to collapse since the child elements are floated.

Margins are working fine in IE and Firefox. Thanks for your input!


I encountered a similar problem, and the overflow:auto solution has worked for me too - happy days! :)
What I don't understand is how this works. If the overflow property sets what happens if the contents of an element overflows its area, I don't see the relationship with margin-top here? Can someone please enlighten me.
  • 0

#9
Maitreya

Maitreya

    New Member

  • Member
  • Pip
  • 3 posts
Kudos to you KingTheoden...this problem was driving me nuts... Thanks a ton!
  • 0

#10
calvers7

calvers7

    New Member

  • Member
  • Pip
  • 1 posts
I'd just like to say thanks for posting how you solved this. I've been having a nightmare with exactly the same thing and it's very late so didn't fancy spending ages trying to solve what I was sure would be quite simple. Couldn't believe IE was doing it better than FF either :)
  • 0






Similar Topics

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

As Featured On:

Microsoft Yahoo BBC MSN PC Magazine Washington Post HP