celandine css meltdown.

  • celandine
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2008
  • Loc: Belgrade, Serbia

Post 3+ Months Ago

Ok, I've done what I can for this css competition entry and I'm actually quite happy with it, but how-oh-how-oh-how do I get the box-sizing thing to work? I did try with just a simple

box-sizing: border-box;

in the body part of the css, but predictably that did nothing. I know what's causing the problems - it's the borders-padding thing...... and I understand precisely why each browser renders as it does, and all..... I just don't know how to fix it!

I'll keep digging at it, but man oh man so many hours of pushing and prodding at borders and margins....................................................
  • kbergmann
  • Expert
  • Expert
  • User avatar
  • Posts: 659
  • Loc: USA

Post 3+ Months Ago

I know I know!

Well maybe if you have not done this yet ...

Code:

body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
margin: 0px;
padding: 0px;
background-color:#000000;
}

This is my body code in my CSS file that is for my site I have posted here ... Do you have the Zero PX code in yours?

If you are having issues with boxes FF seems to know all about width .... but IE does know know what a blank width is with a left and right PX boundry. If need be until it's fixed, Do what I did .... :-D add an <hr> and the box works in IE, just gotta make sure the div's are not too wide.
  • kbergmann
  • Expert
  • Expert
  • User avatar
  • Posts: 659
  • Loc: USA

Post 3+ Months Ago

Do you mean height or width for box sixing? The margins and padding were my first step to attempt to fix my sizing problem / layout problem.
  • celandine
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2008
  • Loc: Belgrade, Serbia

Post 3+ Months Ago

it's a width problem, and the body padding/margins are set to 0, it's just that I have two divs one above the other and they are the same width except one has a whole series of other divs inside it, each with a pixel or two of border and padding (for aesthetic effect, so I don't want to take that off) and that makes the two divs come out a different width in FF and IE because they interpret box-sizing differently (FF adheres to the W3C box-sizing model I think, and IE sticks to the Traditional)

thanks for trying to help though :)
  • kbergmann
  • Expert
  • Expert
  • User avatar
  • Posts: 659
  • Loc: USA

Post 3+ Months Ago

Maybe the answer lays in my question? I got some helpful feed back: http://www.ozzu.com/website-design-forum/css-accomodating-all-browsers-t83442.html

I think you are right ... each one reads width different.

I am probably wrong to go this route ... but ... was thinking have a FF.CSS and a IE.CSS and find a javascript to pick the right one to add the proper CSS if I am unable to solve my problem.

They should all box the same! LOL

Sorry I could not be of more help.
  • jameson5555
  • Bronze Robot
  • Bronze Member
  • User avatar
  • Posts: 575
  • Loc: Phoenix, AZ

Post 3+ Months Ago

If I want it to exactly match up with borders and everything, I usually just do the math- for example, the container is 800px wide, an item in the container has a 1px border, so I subtract those two pixels and make that item 798px.

Or is that what you're doing and it's rendering wrong in different browsers?
  • kbergmann
  • Expert
  • Expert
  • User avatar
  • Posts: 659
  • Loc: USA

Post 3+ Months Ago

That is what I had to do for my padding in FF ... for spacing purposes my box was say 450px tall but in reality it had 5px padding top and bottom so it was really only 440px.

Jameson,

I have found though IE and width do not work with each other ... which could be part of the larger problem. ?
  • jameson5555
  • Bronze Robot
  • Bronze Member
  • User avatar
  • Posts: 575
  • Loc: Phoenix, AZ

Post 3+ Months Ago

kbergmann wrote:
Jameson,

I have found though IE and width do not work with each other ... which could be part of the larger problem. ?

I've usually found that width works ok in IE, but it (IE6 anyway) tends to have issues with padding and margins.
  • kbergmann
  • Expert
  • Expert
  • User avatar
  • Posts: 659
  • Loc: USA

Post 3+ Months Ago

jameson5555 wrote:
I've usually found that width works ok in IE, but it (IE6 anyway) tends to have issues with padding and margins.


You are correct ... I am on IE6 at work and I need to get 7.0 on here.

Half of my traffic is on IE6 and half IE7 ... in my case and averages out to about 85% IE users ...

Celandine,

Do you know which IE you are testing in that is having problems?

I'll be quiet now, unless others think I am being helpful :/
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5148
  • Loc: SC-USA

Post 3+ Months Ago

My advice is to not use the padding of the container, but the margining of the elements in the container...
Code: [ Select ]
<div style="width:220px;">
  <h1 style="margin:5px;">Heading</h1>
  <p style="margin:5px;">Paragraph kind of stuff.</p></div>
  1. <div style="width:220px;">
  2.   <h1 style="margin:5px;">Heading</h1>
  3.   <p style="margin:5px;">Paragraph kind of stuff.</p></div>

Using this method, the box model doesn't matter.

Before the "obvious police" get here; The CSS would of course go into the external CSS file.
  • jameson5555
  • Bronze Robot
  • Bronze Member
  • User avatar
  • Posts: 575
  • Loc: Phoenix, AZ

Post 3+ Months Ago

digitalMedia wrote:
My advice is to not use the padding of the container, but the margining of the elements in the container...

That sounds like a good habit to get into. For the competition, I ended up using one of these little numbers to get around it:
Code: [ Select ]
* html body .catborder{
        border:none; /* because ie6 doesn't do padding right */
        }
  1. * html body .catborder{
  2.         border:none; /* because ie6 doesn't do padding right */
  3.         }
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5148
  • Loc: SC-USA

Post 3+ Months Ago

Actually, the border-box is far more sensible than the content-box, IMO. But, technologist write the rules here, not creative people.
  • celandine
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2008
  • Loc: Belgrade, Serbia

Post 3+ Months Ago

yes, it looks picture-perfect in FF and it falls apart (only by 5 px though, but it's enough) in IE.

and yes, the borders were acting ok, the content-boxes were going crazy. the only problem is that I'm using the small borders and padding as part of the design... but it could still work if I re-jig things dM-style. Although at one point in desperation I took out all the padding, and things still weren't matching up... but that's probably another glitch I've got somewhere.

I realise it's hard to help when you can't see the file, but I'll keep working on it on my own until tomorrow I guess.... then I'll have to put it up anyway because the entries have to be up before the New Year and I'm going away for a few days...

Incidentally, where do we put the Ozzu css comp entries? in the initial 'competition' thread'?

I might have to put mine in even if I don't work out all the bugs.... can we have a section for 'self-disqualified, tried hard but just couldn't make it work' people? even if that's just me? :)

ps. I'm viewing in IE6. is there likely to be a difference with IE7?
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5148
  • Loc: SC-USA

Post 3+ Months Ago

celandine wrote:
Incidentally, where do we put the Ozzu css comp entries? in the initial 'competition' thread'?

ps. I'm viewing in IE6. is there likely to be a difference with IE7?


Yup, Benat has already submitted her's. Check out what she did.

IE7 uses the content-box. So, yes, huge difference between IE6 and 7.
  • kbergmann
  • Expert
  • Expert
  • User avatar
  • Posts: 659
  • Loc: USA

Post 3+ Months Ago

Does anyone know if you can have IE6 and IE7 installed at the same time. Logically you should be able to, adding IE7 to testing browsers list to round my day out :)

I have always just upgraded ... but now need to keep IE6 around ... because of my user base.
  • jameson5555
  • Bronze Robot
  • Bronze Member
  • User avatar
  • Posts: 575
  • Loc: Phoenix, AZ

Post 3+ Months Ago

kbergmann wrote:
Does anyone know if you can have IE6 and IE7 installed at the same time. Logically you should be able to, adding IE7 to testing browsers list to round my day out :)

I have always just upgraded ... but now need to keep IE6 around ... because of my user base.

Yeah, that's a rough one. I'd love to hear if anyone has found a way to do it.. I get around this by using two computers connected by a KVM switch- one computer has IE6 and the other has IE7.
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5148
  • Loc: SC-USA

Post 3+ Months Ago

jameson5555 wrote:
...one computer has IE6 and the other has IE7.


Same here.
  • kbergmann
  • Expert
  • Expert
  • User avatar
  • Posts: 659
  • Loc: USA

Post 3+ Months Ago

I do have a 98 box sitting next to me not in use hahaha .... that could be on all work day I guess for testing purposes *shrugs* so I don't disturb my co-workers. Would be nice if you could run both on one box though.

From what I read, you can install a stand-alone version of 6 but it may not run right.
  • Benat
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2123

Post 3+ Months Ago

I had massive problems making the CSS work in all browsers, all because I flipped the design from Menu on the right, to the left, but IE7 didn't like that, and I tried every single way under the sun to make my margins even in all browsers, so then I tried padding instead, then FF decided to not allow my links to work and in the end I got so frustrated I decided to give the left menu a miss.

IE didn't like margin-top: or padding-top:, but every other value it had no problems with.

Opera didn't like the float: right value.

I got there in the end it took me forever, but just keep at it C, it will work eventually :shock:
  • grinch2171
  • Moderator
  • Genius
  • User avatar
  • Posts: 6810
  • Loc: Martinsburg, WV

Post 3+ Months Ago

IE6 and IE7 can reside on the same box

http://tredosoft.com/Multiple_IE
http://www.ozzu.com/mswindows-forum/how-can-run-ie6-and-ie7-the-same-t76721.html
http://www.ozzu.com/mswindows-forum/run-ie7-and-ie6-the-same-box-t62965.html

If you do some searching you will find the answers you seek.
  • kbergmann
  • Expert
  • Expert
  • User avatar
  • Posts: 659
  • Loc: USA

Post 3+ Months Ago

grinch2171 wrote:
IE6 and IE7 can reside on the same box

http://tredosoft.com/Multiple_IE
http://www.ozzu.com/mswindows-forum/how-can-run-ie6-and-ie7-the-same-t76721.html
http://www.ozzu.com/mswindows-forum/run-ie7-and-ie6-the-same-box-t62965.html

If you do some searching you will find the answers you seek.


I was just reading this article... and clicked on the link to it through my google search ...

Thank You Mr. Grinch!

Post Information

  • Total Posts in this topic: 21 posts
  • Users browsing this forum: No registered users and 18 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.