IE html/css problem [solved!]
-
problem solved thanx to Guffa, with a simple overflow:hidden ------------------------------------------------------------ Wouldn't you know, another wierd problem that appears _only_ in IE. Tested on all other browsers, IE seems to want to ruin my day and night. Anyways, to the point. http://www.loadx.org/cardet is the website in development, and appears nice of (i.e.) FireFox 2.0.0.2 and many other browsers (tested from http://browsershots.org, great site for testing) Well, if you've noticed, in IE, the color bar that appears on the top (immediately after the logo) has a white line under it, which should take only 1 pixel in width, but in IE, it likes to take (what appears to be) 2 more. It causes a bigger problem than the ugly line, as it pushes all the content below. Enough jibber-jabber, here's some html code. . .
. . and some css . . #after_logo { position:relative; height:14px; } #colorbar { position:relative; height:11px; background:#fff url(../images/colorbar.jpg) repeat-x; } #header-logo { height:110px; } . . i know there's some stuff missing to get the whole idea, but the point is that the colorbar always gets 14 pixels height, even though i specify 11. and if i specify a lower number it still shows 14, but any larger than 14 and it grows. Driving me mad i tell you.. :(( Any help will be greatly appreciated! Ericos Georgiades
-
problem solved thanx to Guffa, with a simple overflow:hidden ------------------------------------------------------------ Wouldn't you know, another wierd problem that appears _only_ in IE. Tested on all other browsers, IE seems to want to ruin my day and night. Anyways, to the point. http://www.loadx.org/cardet is the website in development, and appears nice of (i.e.) FireFox 2.0.0.2 and many other browsers (tested from http://browsershots.org, great site for testing) Well, if you've noticed, in IE, the color bar that appears on the top (immediately after the logo) has a white line under it, which should take only 1 pixel in width, but in IE, it likes to take (what appears to be) 2 more. It causes a bigger problem than the ugly line, as it pushes all the content below. Enough jibber-jabber, here's some html code. . .
. . and some css . . #after_logo { position:relative; height:14px; } #colorbar { position:relative; height:11px; background:#fff url(../images/colorbar.jpg) repeat-x; } #header-logo { height:110px; } . . i know there's some stuff missing to get the whole idea, but the point is that the colorbar always gets 14 pixels height, even though i specify 11. and if i specify a lower number it still shows 14, but any larger than 14 and it grows. Driving me mad i tell you.. :(( Any help will be greatly appreciated! Ericos Georgiades
-
problem solved thanx to Guffa, with a simple overflow:hidden ------------------------------------------------------------ Wouldn't you know, another wierd problem that appears _only_ in IE. Tested on all other browsers, IE seems to want to ruin my day and night. Anyways, to the point. http://www.loadx.org/cardet is the website in development, and appears nice of (i.e.) FireFox 2.0.0.2 and many other browsers (tested from http://browsershots.org, great site for testing) Well, if you've noticed, in IE, the color bar that appears on the top (immediately after the logo) has a white line under it, which should take only 1 pixel in width, but in IE, it likes to take (what appears to be) 2 more. It causes a bigger problem than the ugly line, as it pushes all the content below. Enough jibber-jabber, here's some html code. . .
. . and some css . . #after_logo { position:relative; height:14px; } #colorbar { position:relative; height:11px; background:#fff url(../images/colorbar.jpg) repeat-x; } #header-logo { height:110px; } . . i know there's some stuff missing to get the whole idea, but the point is that the colorbar always gets 14 pixels height, even though i specify 11. and if i specify a lower number it still shows 14, but any larger than 14 and it grows. Driving me mad i tell you.. :(( Any help will be greatly appreciated! Ericos Georgiades
Well, I checked it out. I can't find a way to reduce the height of the line in IE, but I do know of a few alternatives. 1. You can use a hard rule (
<hr>), and then style it via CSS. 2. You could use a container like you are now, and change the height using an image. Either of these would work.
Trinity: Neo... nobody has ever done this before. Neo: That's why it's going to work.
-
sorry that "is" was a seperate word :P
Ericos Georgiades
-
Well, I checked it out. I can't find a way to reduce the height of the line in IE, but I do know of a few alternatives. 1. You can use a hard rule (
<hr>), and then style it via CSS. 2. You could use a container like you are now, and change the height using an image. Either of these would work.
Trinity: Neo... nobody has ever done this before. Neo: That's why it's going to work.
1. (trying right now, it's a good idea) 2. the image doesn't affect the height at all. weather i use a diffrent image (and/or image size) or even removing the image, it's still going on 14px instead of 11px thank you for the suggestions, brb with the results on
Ericos Georgiades
-
Well, I checked it out. I can't find a way to reduce the height of the line in IE, but I do know of a few alternatives. 1. You can use a hard rule (
<hr>), and then style it via CSS. 2. You could use a container like you are now, and change the height using an image. Either of these would work.
Trinity: Neo... nobody has ever done this before. Neo: That's why it's going to work.
i can't get the
to work the same on both browsers. maybe i'm getting too tired to work, but i'm starting to think the problem lies elsewhere? (but without the entire colorbar everything was ok...) anyways
doesn't seem to be a solution either. Ericos Georgiades
-
sorry that "is" was a seperate word :P
Ericos Georgiades
ad3z wrote:
sorry that "is" was a seperate word
Then it works better. :) The problem only appears in IE 6, not in IE 7. How unexpected. ;) IE 6 has a strange notion that any element should be expanded to be at least one character high. You can specify
overflow:hiddento keep it from doing that. (It will still make the contents of the element one character high, but the contents will not change the size of the element.)--- single minded; short sighted; long gone;
-
ad3z wrote:
sorry that "is" was a seperate word
Then it works better. :) The problem only appears in IE 6, not in IE 7. How unexpected. ;) IE 6 has a strange notion that any element should be expanded to be at least one character high. You can specify
overflow:hiddento keep it from doing that. (It will still make the contents of the element one character high, but the contents will not change the size of the element.)--- single minded; short sighted; long gone;
oh my god, if you were anywhere near me i'd jump up and kiss you right now (even though i am male and completely heterosexual) that works like a charm, and imagine, overflow was probably the only css/div property i didn't tweak in my frantic madness of trying to solve this. alas, another reason to hate IE 6. thanx again!
Ericos Georgiades