...

View Full Version : CSS Nightmare



194673
05-20-2007, 06:43 PM
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.

194673
05-20-2007, 08:46 PM
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.

koyama
05-20-2007, 09:07 PM
Are you aware that you don't have a document type declaration? This causes your page to be rendered in quirks mode (http://www.quirksmode.org/css/quirksmode.html).

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 (http://www.positioniseverything.net/explorer/threepxtest.html) 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:


<!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.

194673
05-20-2007, 09:28 PM
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).

kosstr12
05-20-2007, 09:38 PM
yes, set up a min-width, it should solve your problem.

194673
05-20-2007, 09:48 PM
Alright, but if I do, do you guys know of any way it will work in IE6 or below?

koyama
05-20-2007, 09:56 PM
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.


_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.

194673
05-21-2007, 03:44 AM
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.

koyama
05-21-2007, 06:13 AM
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.


<!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>

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 (http://msdn2.microsoft.com/en-us/library/ms537634.aspx) 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 (http://www.positioniseverything.net/explorer/expandingboxbug.html) 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 (http://www.cssplay.co.uk/boxes/width.html) by Stu Nicholls.

194673
05-21-2007, 08:39 AM
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.

194673
05-23-2007, 06:08 AM
OK, I have this code (and I haven't tried it out yet):

#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)

height: expression( ( document.getElementById( 'content' ).clientWidth <= 500 ) ? '500px' : 'auto' );

194673
05-23-2007, 07:49 AM
It's kind of urgent, so *bump*

koyama
05-23-2007, 04:26 PM
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:


#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.


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)

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:


height: expression((this.scrollHeight < 500) ? '500px' : 'auto');

In the meantime I may investigate.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum