Welcome Guest ( Log In | Join )

Discover the best free computer help!
Learn more about Geeks to Go by taking the tour. Spyware, virus, trojan, fake security or privacy alerts? Read the malware cleaning guide. Want to reply to a topic, start a new one, or remove the advertising? Join today (always free).
      
 
 Reply to this topicStart new topic
CSS: margin attributes not working in Firefox, A wrapping DIV contains four children; IE properly rendering CSS, Fire
KingTheoden
post Feb 16 2008, 02:19 PM
Post #1


Member
**
Posts: 21
OS: XP
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/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>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>
Go to the top of the page
 
+Quote Post
Major Payne
post Feb 16 2008, 03:17 PM
Post #2


Trusted Techie
Group Icon
Posts: 4,476
From: FEMA took "Tin Can" away!
OS: Win XP/Vista Home Premium. Backup PC: Commodore 64 with 300 baud modem!



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
Go to the top of the page
 
+Quote Post
KingTheoden
post Feb 16 2008, 03:42 PM
Post #3


Member
**
Posts: 21
OS: XP
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!
Go to the top of the page
 
+Quote Post
Major Payne
post Feb 16 2008, 04:00 PM
Post #4


Trusted Techie
Group Icon
Posts: 4,476
From: FEMA took "Tin Can" away!
OS: Win XP/Vista Home Premium. Backup PC: Commodore 64 with 300 baud modem!



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
Go to the top of the page
 
+Quote Post
KingTheoden
post Feb 16 2008, 06:42 PM
Post #5


Member
**
Posts: 21
OS: XP
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!


Go to the top of the page
 
+Quote Post
Major Payne
post Feb 16 2008, 06:57 PM
Post #6


Trusted Techie
Group Icon
Posts: 4,476
From: FEMA took "Tin Can" away!
OS: Win XP/Vista Home Premium. Backup PC: Commodore 64 with 300 baud modem!



Glad you got it solved. Got side-tracked and didn't get back to your code.

Ron
Go to the top of the page
 
+Quote Post
coljung
post Feb 23 2008, 03:01 PM
Post #7


Member
**
Posts: 42
OS: XP
Yeah, usually when u're getting problems with FF and not IE, it means that you're doing something wrong with your CSS.
Go to the top of the page
 
+Quote Post
wardct
post Jun 1 2008, 05:59 AM
Post #8


New Member
*
Posts: 1
OS: XP
QUOTE (KingTheoden @ Feb 17 2008, 01:42 AM) *
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! smile.gif
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.
Go to the top of the page
 
+Quote Post
 

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

 

Collapse

> Similar Topics

    Topic Title Replies / Views Topic Information
No New Posts 2 / 563 29th March 2006 - 07:50 AM
Svimmelhet started - last by warriorscot
No New Posts   1 / 1,143 16th May 2008 - 02:11 PM
zestron started - last by starjax
No New Posts   1 / 465 25th June 2008 - 08:23 AM
FutbolMolly started - last by FutbolMolly
No New Posts 4 / 244 5th August 2008 - 08:12 AM
tophat2u started - last by starjax

RSS Time is now: 2nd December 2008 - 07:24 PM
Advertisements do not imply our endorsement of that product or service. The forum is run by volunteers who donate their time and expertise. We make every attempt to ensure that the help and advice posted is accurate and will not cause harm to your computer. However, we do not guarantee that they are accurate and they are to be used at your own risk.
Powered By IP.Board © 2008  IPS, Inc.