Page 1 of 2
IE css problem
Posted: Thu Sep 09, 2004 9:09 am
by vigge89
Take a look at the php-code boxes at
http://vigge.ath.cx/. They show up fine in Firefox and Opera, but IE can't (of course) show it properly. It seems to be the css-attributes under .code, .php {} in the
css-file;
Code: Select all
overflow: auto;
white-space: nowrap;
which doesn't work properly.
Does anyone have any ideas on how to make it show properly in IE?
Posted: Thu Sep 09, 2004 11:59 am
by feyd
take a look at the CSS sent for the new
Code: Select all
tags I wrote. 1 part is in-line to all pages. The rest is in the template's css file.
Posted: Thu Sep 09, 2004 12:24 pm
by vigge89
yea, i've checked it, but I can't get it to work properly, i've tried both tables and divs, but none of them work

Also, i noticed that if you take away the width: 1em; setting in .num, the right border of the codebox-div disappears. However, if I have the width set, the linenumbers gets centered (text-align doesn't seem to work), and if the linenumbers pass a length of 2 numbers, they are outside the div.
Here's the css:
Code: Select all
.codebox {
border: 1px solid #aaa;
background-color: #f3f3f6;
width: 100%;
display: block;
padding: 0; margin: 0;
}
.codebox .header {
color: #344; background: #c0d0d0;
font-weight: bold;
border-bottom: 1px solid #999;
padding: 1px; padding-left: 4px;
}
.codebox .num, .codebox .php {
font-family: "Courier New", courier, monospace; font-weight: normal; font-size: 11px;
vertical-align: top;
padding: 5px;
}
.codebox .num {
background-color: #f3f3f6;
text-align: right;
padding-right: 4px;
float: left;
}
.code, .php {
background-color: #fcfcfd;
border-left: 1px solid #aaa;
overflow: auto;
white-space: nowrap;
}
and here's the html:
Code: Select all
<div class='codebox'>
<div class='header'>{%title%} ({%numlines%} lines) ::</div>
<div class='num'><code>
{%rownumbers%}
</code></div>
<div class='php'>
{%code%}
</div>
</div>
Thanks in advance
Posted: Thu Sep 09, 2004 12:59 pm
by feyd
did you notice that the CSS changes for IE and non-IE browsers?
Posted: Thu Sep 09, 2004 2:23 pm
by vigge89
yes, i added the ie.css becuase i wanted :hover to work, here's it's code:
Code: Select all
body {
behavior: url('/mods/cssfocusandhover.htc');
}
shouldn't change anything related to the divs?
Posted: Sat Sep 11, 2004 6:05 am
by vigge89
any css gurus with a solution?
Firefox 0.93:
Internet Explorer 6:

Posted: Sat Sep 11, 2004 8:01 am
by feyd
I'll post the new forum tag code in the code snippets over this weekend.
Posted: Sat Sep 11, 2004 9:57 am
by vigge89
great, it could be of use

Posted: Mon Sep 13, 2004 3:24 am
by vigge89
hmm, any progress?

Posted: Mon Sep 13, 2004 11:26 am
by feyd
I spent all weekend fixing some issues and adding handling for the
Code: Select all
tags. It's taken longer than expected. I'll post it when I finish.
Posted: Mon Sep 13, 2004 12:42 pm
by vigge89
ok, sorry if im impatient, but i've been trying to solve this for one week, and i haven't accomplished

Posted: Thu Sep 16, 2004 11:36 am
by vigge89
I think i've find the problem with IE, if an width for the box which has overflow: auto; haven't been set, it just continues.
However, I need the width of the div to be variable, becuase the linenumbers-div takes up uknown space.
Anyone got any solution?
Posted: Thu Sep 16, 2004 11:40 am
by feyd
The css for it here, is dynamically set. IE gets 100% width, everything else gets auto. (depends on the css element)
Posted: Thu Sep 16, 2004 1:30 pm
by m3rajk
that's because IE, like with javascript, html and everything else, refuses to use standards and creates it's own version. hence why there's so many more issues with it than other browsers.
CSS 1 and 2 are supported by all mozilla derivatives and opera. CSS 3 is supported by firefox/mozilla last 3 or 4 revs.
check css resource pages. a lot of times you can actually put IE only tags in with the rest and have ie work right without making it dynamic. thought if it's reworking the same tags....
Posted: Thu Sep 16, 2004 2:17 pm
by vigge89
ok, i've changed ie.css and v2.css, here's the changes:
ie.css
Code: Select all
.codebox {
padding: 0;
}
.codebox .code, .codebox .php {
width: 98%;
border: 0;
}
.codebox .num {
display: none;
}
v2.css
Code: Select all
.codebox {
border: 1px solid #999;
background: #f3f3f6;
display: block;
padding: 0; margin: 0;
}
.codebox .header {
color: #233;
background: #f0f0f0 url("/img/grad1.gif") repeat-x bottom;
font-weight: bold;
border-bottom: 1px solid #999;
padding: 1px; padding-left: 4px;
}
.codebox .num, .codebox .php, .codebox .code {
font-family: "Courier New", courier, monospace; font-weight: normal; font-size: 11px;
vertical-align: top;
padding: 5px;
}
.codebox .num {
background-color: #f3f3f6;
text-align: right;
padding-right: 4px;
float: left;
}
.codebox .code, .codebox .php {
background-color: #fcfcfd;
border-left: 1px solid #aaa;
overflow: auto;
white-space: nowrap;
}
In Firefox it shows up like it should, and i've changed so IE hides the linenumbers, and now it seems to work.
However, I do want the linenumbers to work too, but i can't fins any way of doing it

Any ideas?