General Non-Internet Explorer Problems - Webmaster Forum - Web Design, Programming and SEO forums

06-15-2006, 07:08 PM

Lord Kalthorn

Status: I love this place
Join date: Jan 2005
Location: Greathanc
Expertise:
Software:

Posts: 743

iTrader: 0 / 0%

Lord Kalthorn is on a distinguished road

General Non-Internet Explorer Problems

Haven't been on here in ages! But I was thinking to myself, why the bloody hell does this table not understand I want it to be said height in either Firefox or Opera? And then bam! I thought somebody here is bound to know!

I had the same kind of problems when I began making it and testing it in Internet Explorer actually, but I have a nice Developer Toolbar for that and it tells me what things are doing. The Firefox one suffice to say is subpar, and I cannot work out what the devil it is doing to my code.

The page I am thinking of is this: http://beta.dotomega.com/profile. Pretty much everything works, pretty much everything is cross browser too, took a lot of time and a lot of excess tables because Opera doesn't like anything without tables in it for some reason... and organising anything like that with Divs is impossible for any browser other than Internet Explorer. The problem is though, if you're in Firefox, quite obvious. If you're in Internet Explorer of course, it looks perfect, and you would be hard pushed to work out what I was moaning about :P

It is the scrollbar area in the sidebar. I can't really even say what is not working, I cannot work it out! I just know it is something inside there.

Normally with some time and moaning and a reasonable amount of effort I can crack these Firefox bugs. This one however messes me up completely. I need something to anchor the scrollbar itself too. I need something to hide the scrolling content in. There's just... well I have no idea. I'd like at least a reason why it does not work, I can always try and rewrite it completely if somebody says its impossible, but a reason would be nice very nice indeed.

Thanks in advance for your help!

06-15-2006, 07:22 PM

mason

Status: Member
Join date: Apr 2006
Location:
Expertise:
Software:

Posts: 186

iTrader: 0 / 0%

mason is on a distinguished road

it doesn't even show anything on IE view. just the header and footer.

06-15-2006, 07:24 PM

Mount Tropolis

Status: Junior Member
Join date: Jun 2006
Location:
Expertise:
Software:

Posts: 56

iTrader: 0 / 0%

Mount Tropolis is on a distinguished road

Send a message via AIM to Mount Tropolis

Send a message via MSN to Mount Tropolis

same here. im using a extension in FF that lets u preview the site in IE

06-15-2006, 07:37 PM

Lord Kalthorn

Status: I love this place
Join date: Jan 2005
Location: Greathanc
Expertise:
Software:

Posts: 743

iTrader: 0 / 0%

Lord Kalthorn is on a distinguished road

It is changing a lot at the moment :P I am fiddling with it

It will stay somewhere eventually, I'm just getting that particular area to load up remotely as well.

The code for the bit that is the problem is:

Code:

<table id='dct'>
	<tr><td>
		<div id='dcs' class='tableDiv'>
			<table id='dsct'>
        		<tr><td>
			        <div id='ds_wa' class='wa'>
				        <div id='ds_wc' class='wc'>
						        Boobies<br />Boobies<br />Boobies<br />Boobies<br />Boobies<br />
						        Boobies<br />Boobies<br />Boobies<br />Boobies<br />Boobies<br />
						        Boobies<br />Boobies<br />Boobies<br />Boobies<br />Boobies<br />
						        Boobies<br />Boobies<br />Boobies<br />Boobies<br />Boobies<br />
						        Boobies<br />Boobies<br />Boobies<br />Boobies<br />Boobies<br />
						        Boobies<br />Boobies<br />Boobies<br />Boobies<br />Boobies<br />
						        Boobies<br />Boobies<br />Boobies<br />Boobies<br />Boobies<br />
						        Boobies<br />Boobies<br />Boobies<br />Boobies<br />Boobies<br />
						        Boobies<br />Boobies<br />Boobies<br />Boobies<br />Boobies<br />
						        Boobies<br />Boobies<br />Boobies<br />Boobies<br />Boobies<br />
						        Boobies<br />Boobies<br />Boobies<br />Boobies<br />Boobies<br />
						        Boobies<br />Boobies<br />Boobies<br />Boobies<br />Boobies<br />
						        Boobies<br />Boobies<br />Boobies<br />Boobies<br />Boobies<br />
						        Boobies<br />Boobies<br />Boobies<br />Boobies<br />Boobies<br />
						        Boobies<br />Boobies<br />Boobies<br />Boobies<br />Boobies<br />
						        Boobies<br />Boobies<br />Boobies<br />Boobies<br />Boobies<br />
						        Boobies<br />Boobies<br />Boobies<br />Boobies<br />Boobies<br />
						        Boobies<br />Boobies<br />Boobies<br />Boobies<br />Boobies<br />
						        Boobies<br />Boobies<br />Boobies<br />Boobies<br />Boobies<br />
						        Boobies<br />Boobies<br />Boobies<br />Boobies<br />Boobies<br />
						        Boobies<br />Boobies<br />Boobies<br />Boobies<br />Boobies<br />
						        Boobies<br />Boobies<br />Boobies<br />Boobies<br />Boobies<br />
						        Boobies<br />Boobies<br />Boobies<br />Boobies<br />Boobies<br />
						        Boobies<br />Boobies<br />Boobies<br />Boobies<br />Boobies<br />
				        </div>
			        </div>
			        <div id='ds_wsc' class='wsc'>
				        <div id='ds_wth' class='wth' style='left:0px;top:0px;'></div>
			        </div>
        		</td></tr>
        	</table>
		</div>
	</td></tr>
</table>

It all sits inside an absolutely positioned div. Any ideas? I could probably rig up a static page that I won't work on for you to check out if that would help getting answers?

EDIT:
Classes for these are:

Code:

    /***  *Display Strip Scroll Classes*  ***/

    #ds_wa
        {background:#fff;border:1px solid #cfdbf8;height:100%;width:178px;}

    #ds_wc
        {}

    #ds_wh
        {background:#2e5dc7;}

    #ds_wsc
        {background:#fff;height:100%;width:12px;}

    #ds_wth
        {background:#cfdbf8;width:10px;}


...and...

.wa
	{float:left;overflow:hidden;}

.wc
	{left:0px;position:absolute;top:0px;}

.wh
	{width:100%;}

.wsc
	{float:left;}

.wth
	{height:50px;position:relative;width:10px;}

.wt
	{color:#fff;font-size:11px;font-weight:bold;height:16px;padding-left:5px;}

Forgot that, lol, should be handy :P

06-15-2006, 09:26 PM

Jonny

Status: Member
Join date: Feb 2005
Location: UK
Expertise:
Software:

Posts: 335

iTrader: 0 / 0%

Jonny is on a distinguished road

I doubt anyones going to be able to read through your code, it's pretty bad. I mean, look at this:

<div id='dm_1' class='dm' style='right:20px;'>
<table id='dmt_1'>
<tr><td class='dms'></td></tr><tr><td class='dmi' onmouseover='omega.doHover("1","dm","dm");' onmouseout='omega.undoHover("1","dm","dm")'>
<a href='/arcade' onclick='return false;' title='Go to the Forum Arcade'><span id='en-gb_arcade'>
Arcade
</span></a>
</td></tr>
</table>
</div>

... and that's just for ONE navigation link! :O

I would recommend you look at some of the navigation techniques on listamatic. Most of them work around IE6's crappy support of the :hover selector aswell as some of it's other quirks so they should work fine cross browser.

and organising anything like that with Divs is impossible for any browser other than Internet Explorer

Your probably just not compensating for IE's incorrect implementation of the box model. It's pretty easy to work around. (there are details on that page)

As for the content not displaying in IE, I believe it is something to do with your javascript, you should probably try to debug it a bit. (I'm a bit busy to do that atm)

06-16-2006, 07:04 PM

Lord Kalthorn

Status: I love this place
Join date: Jan 2005
Location: Greathanc
Expertise:
Software:

Posts: 743

iTrader: 0 / 0%

Lord Kalthorn is on a distinguished road

Originally Posted by Jonny

I doubt anyones going to be able to read through your code, it's pretty bad. I mean, look at this:

There is a reason for all the code in there

The Div Positions it and sizes it, the row accounts for the fact that if I put in padding, Firefox messes about with the size of the box! The second is for the actual menu text, the link is of course what it is, it is a link, the span was for a feature I was going to put in, its pretty useless now. Hence where all the bits are from

Originally Posted by Jonny

I would recommend you look at some of the navigation techniques on listamatic. Most of them work around IE6's crappy support of the :hover selector aswell as some of it's other quirks so they should work fine cross browser.

I shall have a looksee, I do hate writing more code than needed, but to be honest, as a rule, clean code works in Internet Explorer; I have to add bits for Firefox and Opera as displayed in the reason for this thread. For Opera even I needed to put tables in all my Divs, even ones that will never have content in them! Just so that it displays them! I mean... good lord come on! What is that all about?

Originally Posted by Jonny

Your probably just not compensating for IE's incorrect implementation of the box model. It's pretty easy to work around. (there are details on that page)

Oh I know all about the bloody box model. I am afraid however that I do not believe Internet Explorer's Box Model is incorrect. As I see it, it is correct. Padding goes inside a box, if you've ever had something ordered from Amazon.com you will know this. Margin goes on the outside; if you have ever seen a Document you will know this. Borders are part of a box, if you ever measure a box and do not include its border you are a twit and your box will end up not made properly. If you look at how a box is made up logically you will see the Internet Explorer one is correct.

Originally Posted by Jonny

As for the content not displaying in IE, I believe it is something to do with your javascript, you should probably try to debug it a bit. (I'm a bit busy to do that atm)

Content displays perfectly in Internet Explorer. It is not displaying in Firefox. The problem I am having is that my box is not opening up. Its not even that messed up code. There is a Div, it is positionned absolutely. There is a table, it covers the fact Opera doesn't like Divs. There is a Div, it is stretched to 100% of the table to overcome the fact no browser seems to like vertical positioning. A table inside the div... not sure what that's for but it shouldn't be a problem I would have thought. Two divs inside the table, they both float left, one hides overflow. Inside one div is another div which is relatively positioned and moves, in Internet Explorer it moves, in Firefox is moves but does not get hidden. In the other is another div for dragging. In Firefox it drags and moves the content, but only a little way. The actual boxes around these things, the content and the scroller, display only as two border lines, no gap between, in the middle of the area. There boxes have height on them, the have no padding, they have no margin, there is nothing about these boxes that says shrink to a size that normally a box would not shrink to even if you wanted it to because the text is not that small. It just... it doesn't make sense. I have it at 100% height normally, it is the right way, but even with a pixel rated height it changes nothing.

I simply cannot work out why it does this. Excessive levels of code aside, those boxes should be 100% high however much stuff is in there according to the div it is inside. There is even a table to hold the positioning inside that Div together. Because for some unknown reason, Firefox and Opera do not believe that Divs should be used... at all? There is no positioning inside divs you cannot float things they don't even get displayed if you're not careful.

Somebody must to know why this doesn't work...

06-16-2006, 07:33 PM

Joe

Status: Custom User Title
Join date: Apr 2005
Location:
Expertise:
Software:

Posts: 2,297

iTrader: 0 / 0%

Joe is on a distinguished road

Doesn't seem to work properly in Safari. You shouldn't use so many nested tables. Your coding is horrible.

06-16-2006, 07:52 PM

Lord Kalthorn

Status: I love this place
Join date: Jan 2005
Location: Greathanc
Expertise:
Software:

Posts: 743

iTrader: 0 / 0%

Lord Kalthorn is on a distinguished road

Lol, I've never been able to test it in Safari :P

Nested tables as I have explained are an annoying send off from Opera. I could do it no problems in Internet Explorer without any blooming tables. Unfortunately some hippie scum decided they would write out some standards; a few too many quorn sausages and fizzy waters later they came up with the most ridiculous piece of crap ever conceived. A few days later some stupid bastard too lazy to make his browser popular through work like everybody else does decided that he would latch on to aforementioned ridiculous set of standards. Three seconds later four dozen Linux-Folk bastards decide standards help them in their continued quest to get all the software they want without having to actually go to work, stick it on their Blog, and everybody believes aforementioned group of hippie scum got their standards right and all hell breaks lose.

I checked out the Listamatic Site, looked promising. Would be nice to have just a list, would look nicer in the PHP. However, I found it to be an impossibility to do what I have done that way. First off, I cannot space the list items. Borders worked a little but cannot be made transparent and would be noticeable as content scrolled up. Height could not be changed, short of sticking in some divs to space out the top and the bottom, which defeats the object of using a list :P Width could not be changed without sticking in a table to define a width, which again would defeat the object.

If anybody seriously believes they can pull that menu off using a List and CSS; then by all means show me I will be impressed. Until that day, I would enjoy not having my code called horrible. Proper code doesn't look nice anyway, even without crap to get around.

The thing that is going wrong is here: http://beta.dotomega.com/profile. You don't need to look at the code to see what is going wrong :P