Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 11
  1. #1
    WDF Staff smoseley's Avatar
    Join Date
    Mar 2003
    Location
    Boston, MA
    Posts
    9,729
    Member #
    819
    Liked
    205 times
    Everyone (Brak), I have a couple of tough CSS questions.

    First, regarding "width". If I do something like this:
    Code:
    <div style="width: 300px">
      <div style="width: 100%">
      </div>
    </div>
    As I understand it, the child div should stretch to 100% of the parent div's size, right? Well it's working in IE, but not in Moz (it's going 100% of the window). Any ideas why and how to resolve the disparity?

    Next, regarding "padding". If I do something like this:
    Code:
    <div style="width: 300px; padding: 9px; border: 1px">
    </div>
    What happens is that in IE you have an overall width of 300px, and in Moz you have an overall width of 320px. Any idea how to get around this without using nested DIVs? I need to get this working consistently in all browsers with one div if possible.

    Thanks!

  2.  

  3. #2
    Senior Member glyakk's Avatar
    Join Date
    Nov 2003
    Location
    USA
    Posts
    1,263
    Member #
    3828
    Liked
    6 times
    you do not need to specify 100% in the child div it will automatically do this. but if you insist on keeping it you need to get the child to recognize that its parent is its container. right now it does not see it as such. You would do this by applying positioning to the parent div..
    HTML Code:
    <div style="width: 300px; position: relative">
      <div style="width: 100%">
      </div>
    </div>

    Your second problem deals with IE's ineffective use of the box model. and will be fixed with the (simplified) box model hack. This is rampent in IE 5.5 and below and in 6.0 when it is in quarks mode.


  4. #3
    WDF Staff smoseley's Avatar
    Join Date
    Mar 2003
    Location
    Boston, MA
    Posts
    9,729
    Member #
    819
    Liked
    205 times
    glyakk,

    Thanks for the help. Not sure I understand your response to question #1. I think I should post my actual code so you can help me better:
    Code:
    CSS:
    
    div.window
    {
    	width: 236px;
    	margin: 5px;
    	display: inline;
    }
    
    div.body
    {
    	width: 100%;
    	height: 200px; 
    	overflow: auto;
    	background: #F8F8F8;
    }
    
    HTML:
    
    <div class="window">
      <div class="header" />
      <div class="body" />
    </div>
    And for #2, do you have any suggestions? Here's what I'm trying to do... I have a div that has a border 1px thick. On mouseover, I'm changing it to 3px thick. To prevent content shifting issues, I have to change the padding. The problem this is causing is that the div has a specified width, so Moz and IE treat the padding differently

    It looks something like this:
    Code:
    CSS:
    
    div.location
    {	
    	width: 222px;
    	height: 160px;
    	display: inline;
    	margin: 10px 10px 10px 10px;
    	border: solid 1px #F7970F;
    	padding: 9px;
    }
    
    div.locationOver
    {
    	width: 222px;
    	height: 160px;
    	display: inline;
    	margin: 10px 10px 10px 10px;
    	border: solid 3px #F7970F;
    	padding: 7px
    	background: #FFFFFF;
    }
    
    HTML:
    
    <div class="location" onmouseover="this.className='locationOver'" onmouseout="this.className='location'" />
    Thanks again !! Help much appreciated.

  5. #4
    Senior Member glyakk's Avatar
    Join Date
    Nov 2003
    Location
    USA
    Posts
    1,263
    Member #
    3828
    Liked
    6 times
    The only change is to give the parent element some type of positioning, I chose relative because it causes no ill effects to layout flow as long as you do not give it an offset value, but you could use absolute positioning or fixed if the situation called for it. The reason for this is to allow it to act as an 'upline container' to its child elemnt(s). So when you say 100%, it will not assume you mean the window, but its container. It seems like this is an inherient problem with CSS and I will admit it does seem like a work around but it does coinside with with CSS is trying to accomplish.
    Code:
    CSS:
    
    div.window
    {
    	width: 236px;
    	margin: 5px;
    	display: inline;
            position: relative;
    }
    The (simplified) box model hack is used to pass instructions specifically to IE5.5 and below in order to correct flaws in that browsers rending of your page. It is a hack and a work around but a nessessary evil for now. IE does not properly interperate the box model. What earlyer versions of IE consider the width(and height) of an element is actualy the outer edge of where the borders would go. So IE includes padding and borders in its equation of width. So an element in your case where the width is 300px with a 9px padding and 1px border that should be 320px wide overall(1+9+300+9+1=320), IE sees as 300px wide with the padding and border 'squeezing' the insides. So your effective width would actually be 280px(300-1-9-9-1=280). You need to correct this using rules that the early versions of IE understand but then could be reset by proper browsers.. so take this for example:
    HTML Code:
    div {
    width: 300px;
    \width: 320px; 
    w\idth: 300px;
    }
    What you have done is this.. each browser will see this instruction from the top down and anything it does not recognize it will discard. Every browser should be able to read the first one, width: 300px. So every browser from IE to Opera to mozilla will set the width to 300 pixles wide. This is actually what we want but IE makes a mess of it. So the next rule down fixes that.. IE recognizes escapes as a first character and will then set the width according to the second rule, 320 as will mozilla, however early versions of opera do not recongize escapes at all and will ignore this rule and the last, but will keep the previous width: 300px rule witch is correct. However now Moxilla is set to a width of 320px witch is way to wide.. that is where the last rule comes in. All modern browsers should recongize this last one and will set the width properly to 300px but earlier versions of IE will not since the only recignize escapes as a first character and they will ignore this last rule and stick with the previous one of 320px.

    So as you see the box model hack is used to pass instructions to various browsers depending on the rules they have set on them selves.

    NOTE: you cannot escape any character used in hexidecimal notation (0-9,a-f) as this could cause problems.


  6. #5
    WDF Staff smoseley's Avatar
    Join Date
    Mar 2003
    Location
    Boston, MA
    Posts
    9,729
    Member #
    819
    Liked
    205 times
    gly, what about IE6 ?? It still has the padding issue.

  7. #6
    Member
    Join Date
    Aug 2004
    Location
    Ohio
    Posts
    47
    Member #
    7210
    IE6 will render properly if you supply a doctype.
    ( http://www.alistapart.com/articles/doctype/ )

    Rather than the hack, I prefer the IE Conditional Comments to give IE 5 and 5.5 specific code, since it A) validates and B) you don't have to worry about future browsers interpreting the hacks differently.
    ( http://www.quirksmode.org/css/condcom.html ) Both work fine, just a matter of taste I guess.

  8. #7
    WDF Staff smoseley's Avatar
    Join Date
    Mar 2003
    Location
    Boston, MA
    Posts
    9,729
    Member #
    819
    Liked
    205 times
    Yeah, that... well, unfortunately, I'm using XSL-T to generate the HTML, and every XSL-T transformer available to me generates non-standard <meta and <link elements.... so you can imagine the horror of applying a doctype and seeing the site without any CSS at all!

  9. #8
    Senior Member glyakk's Avatar
    Join Date
    Nov 2003
    Location
    USA
    Posts
    1,263
    Member #
    3828
    Liked
    6 times
    yea IE 6 is going to still have the issue without a doctype because the browser will still recognize escaped characters in quarks mode so it will try to apply the last value to the width, but it will do so improperly.

    the box model hack validates.. if anything else you might get a warning if you use the long 'voice-family' version. and any future browser should interperate the hack properly providing they adhear to standards and they will. this is why i push so hard for standards to ensure we dont have the motley set of tools and techniques in the future that we 'web pioneers' had in the early days of yore. but yea, Conditional Comments may fix your specific problem if you cannot attatch doctype though. but as far as i am aware, conditional comments cannot be used in external style sheets if you happen to be using them.


  10. #9
    Senior Member Brak's Avatar
    Join Date
    Apr 2003
    Location
    San Francisco, CA
    Posts
    3,413
    Member #
    1217
    Liked
    2 times
    You should still be able to specify doctype with XSL-T. We are with our CMS at work.. sure the thing doesn't validate, but as long as the doctype is there, it's all good. Always specify a doctype, it'll solve 90% of IE6 problems.

    The box model hack is also available in many different flavors.

    On a sidenote, have you considered something like a "hack" for your border dillemma? Have two divs, one nested in the other. The outer has a 2px border that is white (or background) and onmouseover it turns blue (inner border). So the innner div has a constant 1px and the outer is just changing colors.

    I know it's a diry hack, but it's better than worrying about padding if you can't get IE6 out of quirks mode. P.S. if you want to specify an IE6 only padding you can do so with the following rule:
    Code:
    * html #id{
    padding:10px // only for IE
    }
    I would reccomend using the latter as a last resort, as it applies to IE5/Mac which actually interprets some rules properly, which means you need IE5/Mac filters... adding more and more 'broken windows' to your code.
    Kyle Neath: Rockstar extraordinare
    The blog | The poetry site | The Spore site

  11. #10
    WDF Staff smoseley's Avatar
    Join Date
    Mar 2003
    Location
    Boston, MA
    Posts
    9,729
    Member #
    819
    Liked
    205 times
    Brak,

    Problem I'm having is that my XSL-T transformer renders a stylesheet link like this:
    Code:
    <link type="text/css" href="stylesheet.css">
    The element is not closed. When I specify the doctype, Moz ignores the call altogether!

    Anyhow, I got #1 working. Thanks, glyakk !!! I'm gonna try to get #2 resolved today. I think I'll have to use nested divs... not looking forward to it.


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Search tags for this page

css compatibility border padding

,

css padding compatibility

,

html padding compatibility

Click on a term to search for related topics.
All times are GMT -6. The time now is 06:25 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com