Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13

Thread: CSS Nightmare

  1. #1
    Regular Coder
    Join Date
    Dec 2006
    Posts
    166
    Thanks
    9
    Thanked 4 Times in 4 Posts

    CSS Nightmare

    Alright, since there is too much code to post, I'll just give you a link to a temporary live copy of the site. http://eggheadtutor.com/fastimports .
    Here are some of the problems I'm having
    1. Firefox displays this exactly how it's supposed to be. IE, puts ~3px margin on certain elements (i.e. Banner, nav bar, etc.)
    2. If the window is sized smaller than the right side of the banner, then it will put the banner on two lines.
    3. Originally I had two images on the left and right side of the footer which rounded the corners, but if you add them in, then the 'footer_right.jpg' will be pushed onto the next row. I've tried messing w/ spans, display styles, splitting it up into 3 divs etc.
    4. Since earlier IE versions don't support the CSS "min-height:", I implemented some JS to change the 'content' div to have a min-height of 500px along with putting it in the CSS. It works in FF, but not IE.

  • #2
    Regular Coder
    Join Date
    Dec 2006
    Posts
    166
    Thanks
    9
    Thanked 4 Times in 4 Posts
    I removed the table that was put around the buttons by fireworks along with added a temporary login script in the nav bar. Similar to how the banner would be put on two lines, the same thing is happening w/ the nav bar now. The effect I want is that if the screen is too small, then you would have to scroll horizontally.

  • #3
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Are you aware that you don't have a document type declaration? This causes your page to be rendered in quirks mode.

    Especially in IE this gives an entirely different rendering. In IE6 and IE7 your page is deliberately displayed using a rendering engine similar to the one of IE5. And in IE5.x, due to a bug, all floated images were added a 3px gap on both right and left side. You may also read about the related IE6 3px gap which mentions the IE5.x floated image 3px bug in a special note at the end.

    To solve the above problem, put in a document type declaration. This one may be the right one for you:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/REC-html40/loose.dtd">
    After putting in this one, fix any validation errors there might be. Then we can start looking at the other issues.

  • #4
    Regular Coder
    Join Date
    Dec 2006
    Posts
    166
    Thanks
    9
    Thanked 4 Times in 4 Posts
    Wow.... I'm an idiot. I don't even know how I missed that lol. Thanks for noticing the missing declaration. I probably should have run this through a validator before posting it... Anyways, the updated version should be uploaded remotely in a few minutes. That fixed problems 1 and 4.
    Edit: as for fixing the banner going onto 2 lines, do you think I should set up a min-width?
    Edit2: Actually, I'm assuming since the min-height doesn't work in quirks mode, that the min-height still doesn't work in IE6 or lower. I have IE7 installed, and based on that, it works, but I'm not sure about previous versions.
    Edit 3: Just tried it on IE6, and it doesn't work, but I also noticed the nav login form isn't vertically centered either (btw, I didn't use a conventional centering technique).
    Last edited by 194673; 05-20-2007 at 09:42 PM.

  • #5
    Regular Coder kosstr12's Avatar
    Join Date
    Apr 2007
    Location
    Woodstock, Georgia
    Posts
    428
    Thanks
    7
    Thanked 5 Times in 5 Posts
    yes, set up a min-width, it should solve your problem.

  • #6
    Regular Coder
    Join Date
    Dec 2006
    Posts
    166
    Thanks
    9
    Thanked 4 Times in 4 Posts
    Alright, but if I do, do you guys know of any way it will work in IE6 or below?

  • #7
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by 194673 View Post
    Alright, but if I do, do you guys know of any way it will work in IE6 or below?
    Use a dynamic expression for IE6 and below. You may need to experiment a little, but basically it looks like this if you need both min-width and max-width.
    Code:
    _width: expression((document.body.clientWidth > 1000)
                        ? '1000px'
                          : (document.body.clientWidth <= 600)
                            ? '600px'
                              : 'auto');
    Note the underscore hack in order that only IE6 sees this. No reason to feed IE7 since it supports min-width / max-width.

  • #8
    Regular Coder
    Join Date
    Dec 2006
    Posts
    166
    Thanks
    9
    Thanked 4 Times in 4 Posts
    Could you possibly explain that code or give an example of where it would be used? I haven't had the pleasure of engulfing myself in the world of Javascript XD. Is this setting the width of the browser or what? From what I can tell it's a logic statement saying if the browser is wider than 1000px then the width of whatever is set to 1000px, but if the browser's width is less than 600px then set the width to 600px, else as a precaution set it to auto.

  • #9
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by 194673 View Post
    Could you possibly explain that code or give an example of where it would be used?
    Here is a very simple example you can try in IE. For simplicity it shows just the min-width case.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/REC-html40/strict.dtd"> 
    <html>
    <head>
    <title>min-width 600px in IE</title>
    <style>
    body {
    	margin: 0;
    	padding: 0;
    }
    #wrap {
    	margin: 0 auto;
    	background: red;
    	width: expression((document.body.clientWidth <= 600) ? '600px' : 'auto');
    }
    </style>
    </head>
    <body>
      <div id="wrap">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
      </div>
    </body>
    </html>
    Quote Originally Posted by 194673 View Post
    Is this setting the width of the browser or what? From what I can tell it's a logic statement saying if the browser is wider than 1000px then the width of whatever is set to 1000px, but if the browser's width is less than 600px then set the width to 600px, else as a precaution set it to auto.
    Perhaps the MSDN page is the best introduction for learning about dynamic properties.

    Basically, your explanation is correct. In the expression above, document.body.clientWidth should be read as the real-time actual width in pixels for the padding-area of the body element. However, it sounds like you may not be aware that auto is a valid value for the width property. It is in fact the value that is assumed when you don't specify an explicit value for width in CSS. There is nothing magical about the auto value.

    Warning! Whenever you use this type of dynamic expression for IE6 or below you must be aware of the expanding box problem in IE6 and below. Don't put IE in a situation where it can get into trouble with its own bugs. For example, in the example above, if you add the style body {padding: 1px} this can make IE crash when you resize the window! Why?

    Because suppose you resize your window so that the padding-area for the body element becomes less than 600px wide. Then the expression says that the width for #wrap should be 600px. In turn, because of the expanding box problem and because body has a 1px padding, then IE6 will make the padding-area for the body element 602px wide. But now the dynamic expression says that the width for #wrap again should revert to auto. See the problem?

    I recall that I have seen complaints about dynamic expressions not working properly for emulating max-width / min-width. I suspect that it is because they have not taken into account the expanding box problem, but I don't know for sure.

    There are other ways of emulating min-width in IE6 which don't even depend on JavaScript being enabled, but I think that they all require extra mark-up. For example here is a clever method by Stu Nicholls.

  • #10
    Regular Coder
    Join Date
    Dec 2006
    Posts
    166
    Thanks
    9
    Thanked 4 Times in 4 Posts
    Thanks for the help! I'll be sure to try the code out tomorrow. It's 2:40 AM, and I'm writing a Spanish essay right now and later I need to study for tests and read a book, so I guess I'll have to check this out tomorrow.

  • #11
    Regular Coder
    Join Date
    Dec 2006
    Posts
    166
    Thanks
    9
    Thanked 4 Times in 4 Posts
    OK, I have this code (and I haven't tried it out yet):
    Code:
    #navigation {
    margin: 10px 0;
    background: url('images/nav_bg.jpg') repeat-x;
    height: 35px;
    min-width: 1000px;
    width: expression( ( document.body.clientWidth <= 1000 ) ? '1000px' : 'auto' );
    }
    
    #banner {
    height: 175px;
    margin-bottom: 10px;
    padding: 0;
    background: url('images/banner_bg.jpg') 0 0 repeat;
    min-width: 768px;
    width: expression( ( document.body.clientWidth <= 768 ) ? '768px' : 'auto' );
    }
    The only possible issue I could see happening is losing the fluidity/dynamic(ness?) of the width beforehand.
    Edit: Nevermind, doesn't seem to be an issue. BTW I have never used JS in CSS before... interesting!

    Edit2: This is kind of weird, but it seems to work for the navigation, but not for the banner when tested in IE6.
    Any ideas why? http://eggheadtutor.com/fastimports
    Also, I tried the same concept with a min-height of the content div, but it ends up crashing IE. The following is some code that is in the CSS definition for #content (don't try to use it, it will crash IE)
    Code:
    height: expression( ( document.getElementById( 'content' ).clientWidth <= 500 ) ? '500px' : 'auto' );
    Last edited by 194673; 05-23-2007 at 06:44 AM.

  • #12
    Regular Coder
    Join Date
    Dec 2006
    Posts
    166
    Thanks
    9
    Thanked 4 Times in 4 Posts
    It's kind of urgent, so *bump*

  • #13
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by 194673 View Post
    This is kind of weird, but it seems to work for the navigation, but not for the banner when tested in IE6.
    Any ideas why?
    You have this:
    Code:
    #banner {
    height: 175px;
    margin-bottom: 10px;
    padding: 0;
    background: url('images/banner_bg.jpg') 0 0 repeat;
    min-width: 768px;
    width: expression( ( this.clientWidth <= 768 ) ? '768px' : 'auto' );
    }
    #navigation {
    margin: 10px 0;
    background: url('images/nav_bg.jpg') repeat-x;
    height: 35px;
    min-width: 1000px;
    width: expression( ( this.clientWidth <= 1000 ) ? '1000px' : 'auto' );
    }
    The second expression results in that the body element will never get narrower than 1000px. But, in turn, this means that the boolean test in first expression never evaluates to true. So the #banner width always stays 'auto' in IE. Then you might think that #banner would get as wide as body element being expanded by #navigation. But it doesn't. That is a peculiarity about the expanding box problem in IE6.

    I had imagined that you would just specify a min-width for the #container and only use 1 dynamic expression in your CSS. Will this not suffice?

    There are workarounds so you can get the other thing too by adding additional wrappers around each of the elements you want a min-width for, but I suggest that you just impose a min-width for your #container. After all, the main purpose is to ensure that the page does not break under resizing.

    Quote Originally Posted by 194673 View Post
    Also, I tried the same concept with a min-height of the content div, but it ends up crashing IE. The following is some code that is in the CSS definition for #content (don't try to use it, it will crash IE)
    Code:
    height: expression( ( document.getElementById( 'content' ).clientWidth <= 500 ) ? '500px' : 'auto' );
    You probably meant to use clientHeight in that expression. I recall having had the issue with IE crashing when using clientHeight in a expression like that. I never tried to figure out what the reason could be, but for some reason it never seemed to happen when you use scrollHeight. For now, try this instead:
    Code:
    height: expression((this.scrollHeight < 500) ? '500px' : 'auto');
    In the meantime I may investigate.


  •  

    Posting Permissions

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