IE css problem

JavaScript and client side scripting.

Moderator: General Moderators

User avatar
vigge89
Forum Regular
Posts: 875
Joined: Wed Jul 30, 2003 3:29 am
Location: Sweden

IE css problem

Post 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?
Last edited by vigge89 on Mon Sep 13, 2004 3:22 am, edited 1 time in total.
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post 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.
User avatar
vigge89
Forum Regular
Posts: 875
Joined: Wed Jul 30, 2003 3:29 am
Location: Sweden

Post 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'>&#123;%title%&#125; (&#123;%numlines%&#125; lines) ::</div>
<div class='num'><code>
&#123;%rownumbers%&#125;
</code></div>
<div class='php'>
&#123;%code%&#125;
</div>
</div>
Thanks in advance
Last edited by vigge89 on Sat Sep 11, 2004 6:25 am, edited 1 time in total.
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

did you notice that the CSS changes for IE and non-IE browsers?
User avatar
vigge89
Forum Regular
Posts: 875
Joined: Wed Jul 30, 2003 3:29 am
Location: Sweden

Post by vigge89 »

yes, i added the ie.css becuase i wanted :hover to work, here's it's code:

Code: Select all

body &#123;
	behavior: url('/mods/cssfocusandhover.htc');
&#125;
shouldn't change anything related to the divs?
User avatar
vigge89
Forum Regular
Posts: 875
Joined: Wed Jul 30, 2003 3:29 am
Location: Sweden

Post by vigge89 »

any css gurus with a solution? :(

Firefox 0.93:
Image

Internet Explorer 6:
Image
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

I'll post the new forum tag code in the code snippets over this weekend.
User avatar
vigge89
Forum Regular
Posts: 875
Joined: Wed Jul 30, 2003 3:29 am
Location: Sweden

Post by vigge89 »

great, it could be of use :)
User avatar
vigge89
Forum Regular
Posts: 875
Joined: Wed Jul 30, 2003 3:29 am
Location: Sweden

Post by vigge89 »

hmm, any progress? :(
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post 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.
User avatar
vigge89
Forum Regular
Posts: 875
Joined: Wed Jul 30, 2003 3:29 am
Location: Sweden

Post by vigge89 »

ok, sorry if im impatient, but i've been trying to solve this for one week, and i haven't accomplished :(
User avatar
vigge89
Forum Regular
Posts: 875
Joined: Wed Jul 30, 2003 3:29 am
Location: Sweden

Post 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?
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

The css for it here, is dynamically set. IE gets 100% width, everything else gets auto. (depends on the css element)
m3rajk
DevNet Resident
Posts: 1191
Joined: Mon Jun 02, 2003 3:37 pm

Post 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....
User avatar
vigge89
Forum Regular
Posts: 875
Joined: Wed Jul 30, 2003 3:29 am
Location: Sweden

Post by vigge89 »

ok, i've changed ie.css and v2.css, here's the changes:

ie.css

Code: Select all

.codebox &#123;
	padding: 0;
&#125;

.codebox .code, .codebox .php &#123;
	width: 98%;
	border: 0;
&#125;

.codebox .num &#123;
	display: none;
&#125;
v2.css

Code: Select all

.codebox &#123;
	border: 1px solid #999;
	background: #f3f3f6;
	display: block;
	padding: 0; margin: 0;
&#125;

.codebox .header &#123;
	color: #233;
	background: #f0f0f0 url("/img/grad1.gif") repeat-x bottom;
	font-weight: bold;
	border-bottom: 1px solid #999;
	padding: 1px; padding-left: 4px;
&#125;

.codebox .num, .codebox .php, .codebox .code &#123;
	font-family: "Courier New", courier, monospace;	font-weight: normal; font-size: 11px;
	vertical-align: top;
	padding: 5px;
&#125;

.codebox .num &#123;
	background-color: #f3f3f6;
	text-align: right;
	padding-right: 4px;
	float: left;
&#125;

.codebox .code, .codebox .php &#123;
	background-color: #fcfcfd;
	border-left: 1px solid #aaa;
	overflow: auto;
	white-space: nowrap;
&#125;
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?
Post Reply