CSS help *new question*

[BeauJangles]

Okay, so I have another question.

if you look here
http://people.brandeis.edu/~bblinder/css/homepage.html
http://people.brandeis.edu/~bblinder/css/style.css

in IE the stories boxes show up immediately under the content above it, in firefox, however, the second row of content does not... instead it lines up with the bottom of the page. I want it to appear below the first row of content, regardless of the screen height. I've been googling for a while and can't find the answer.

 

[WillyF1uhm1]

I have looked into your CSS file and made 2 changes at 2 of your classes, .newsouter and .stories_left:

1. changed width: 50%; to width: 47%;
2. added float:left;

That should help a bit. although it doesn't make the view in IE and Firefox exactly the same. Good luck!

http://www.willyf.org/troep/homepage2.html
http://www.willyf.org/troep/homepage2.css

[edit]Added links to files [/edit]

 

[jjones]

Okay, this works for both IE and Firefox:

Add float: left; to .newsouter

Delete all properties for .stories_left

Change .stories_right to equal this:

.stories_right {
float: right;
margin-left: 35px;
width: 50%
}

By the way, you could have .stories_left at 50% and use padding instead of margins and it shows up right in IE but Firefox looks bad as the boxes still seem to be over-running each other. This appears to be a CSS bug in Firefox that extends the box beyond 50% as if you were using margins, not padding.

 

[WillyF1uhm1]

There is indeed a difference between Firefox and IE.
AFAIK Firefox and Mozilla add the margins and padding to the total width (according to w3c standards.) while IE doesn't.

 

[jjones]

Really? I know margins add to the box but I thought padding was supposed to be from the edge of the box inwards, not increasing the box size.

Edit: I just reviewed the CSS spec and you're right. The dimensions specified by width is the actual box size, then padding is added to that, then the border, then margins; all three properties are outside the box. IE is the one that is wrong about the spec.

 

[ivwshane]

I'm a noob too but could you then set the padding to 0 so that both IE and FF display it the same?

 

[Nextman916]

lol i came in to this thread thinking it was CS:Source, which im sure many others did...........

 

[imported_LoKe]

Originally posted by: Nextman916
lol i came in to this thread thinking it was CS:Source, which im sure many others did...........

Yet another reason why we need to split these forums. :roll:

 

[FeuerFrei]

Originally posted by: jjones
Really? I know margins add to the box but I thought padding was supposed to be from the edge of the box inwards, not increasing the box size.

Edit: I just reviewed the CSS spec and you're right. The dimensions specified by width is the actual box size, then padding is added to that, then the border, then margins; all three properties are outside the box. IE is the one that is wrong about the spec.

Gahh, so frustrating. I had to wrestle with that today. Firefox pisses me off. Or at least the specs!
What if you want to stack two or more <divs> and make them equal outer width with each having different padding or border thickness??? You can't in Firefox, the widths will vary according to amount of padding and screw up a neat stack. Same problem horizontally too. Firefox demands equal padding/border thickness if you want equal overall width. :|

I.E. renders stuff the way you intend it. :thumbsup:

 

[imported_LoKe]

No. IE renders the stuff the way they would like to see it. Firefox handles CSS the way it's supposed to be, or at least, as close to it as they can.

 

[BeauJangles]

Okay, so I have another question.

if you look here
http://people.brandeis.edu/~bblinder/css/homepage.html
http://people.brandeis.edu/~bblinder/css/style.css

in IE the stories boxes show up immediately under the content above it, in firefox, however, the second row of content does not... instead it lines up with the bottom of the page. I want it to appear below the first row of content, regardless of the screen height. I've been googling for a while and can't find the answer.