Welcome to WebmasterWorld Guest from 107.21.183.163

Forum Moderators: open

Message Too Old, No Replies

Horizontal Scroll on IE but not Opera

     

voidet

2:23 am on Jun 11, 2004 (gmt 0)

10+ Year Member



Hey all,

i have been trying to fix up a bug in my page for a while now, the problem is, when i open up the page in opera browser everything is the way it should be, but when i open it up in IE, the middle content box goes insanely wide and makes the page scroll horizontally.

Link to page::

<Sorry, no personal URLs. See TOS [webmasterworld.com]>

Any help is greatly appreciated!
Thanks!

VoiDeT

[edited by: tedster at 3:23 am (utc) on June 11, 2004]

BlobFisk

2:57 pm on Jun 11, 2004 (gmt 0)

WebmasterWorld Senior Member blobfisk is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Hi voidet,

How are you rendering the middle content? Is it using a table or CSS? Maybe a short and relevant code snippet may help us find the cause of this problem...

voidet

4:33 am on Jun 12, 2004 (gmt 0)

10+ Year Member



Heya,

rendering it with tables, and using repeditive information with css class elements :)

i think the problem is somewhere here, i keep playin around with it, but im getting no where.

Thanks

VoiDeT

<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="20" height="8" valign="top"><img src="images/NG-MIDDLEVERYTOPCORNERLEFT.jpg" width="20" height="8" alt="NightGen"></td>
<td width="281" valign="top"><img src="images/NG-MIDDLEVERYTOPSTRETCH.jpg" width="281" height="8" alt="NightGen"></td>
<td width="28" valign="top"><img src="images/NG-MIDDLEVERYTOPCORNERRIGHT.jpg" width="28" height="8" alt="NightGen"></td>
<td valign="top" width="100%" class="bgtopcornerright"></td>
<td width="83" valign="top"><img src="images/NG-MIDDLEVERYTOPCORNERRIGHTAB.jpg" width="83" height="8" alt="NightGen"></td>
</tr>
<tr>
<td height="100%" colspan="5" valign="top">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="100%" width="100%" valign="top">
<table width='100%' border='0' cellpadding='0' cellspacing='0'><tr><td height='20' valign='top' colspan='2'><img src='images/NG-MIDDLETOPCORNERLEFT.jpg' width='31' height='20' alt='NightGen'></td><td valign='top' class='bgmiddletopstretch' width='154'></td><td valign='middle' class='bgmiddletopstretch' width='100%'><div align='center'><b><a href='index.php?itemid=7'><div class='title'>$TITLE</div></a></b></div></td><td valign='top' class='bgmiddletopstretch' width='123'></td><td width='43' valign='top'><img src='images/NG-MIDDLETOPLOGO.jpg' width='43' height='20' alt='NightGen'></td><td width='20' valign='top'><img src='images/NG-MIDDLETOPCORNERRIGHT.jpg' width='20' height='20' alt='NightGen'></td></tr><tr><td valign='top' width='20' height='59' class='bgcontentleft'><img src='images/NG-MIDDLELEFT.jpg' width='20' height='59' alt='NightGen'></td><td valign='top' colspan='5'><table width='100%' border='0' cellpadding='10' cellspacing='0'><tr><td width='120' height='59' valign='top' class='bgcontent'><img src='/media/1/$IMAGE' border='1' width='100' height='100'></td><td valign='top' class='bgcontent' width='100%'><div class='text'>Welcome to the Nightgen Dj Team webpage.<br />
<b>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</b></div></td></tr></table></td><td valign='top' class='bgcontentright' width="20"><img src='images/NG-MIDDLERIGHT.jpg' width='20' height='59' alt='NightGen'></td></tr><tr><td height='15' valign='top'><img src='images/NG-MIDDLEBOTTOMCORNERLEFT.jpg' width='20' height='15' alt='NightGen'></td><td valign='top' colspan='2'><img src='images/NG-MIDDLEBOTTOMSTRETCHLEFT.jpg' width='165' height='15' alt='NightGen'></td><td valign='top' class='bgmiddlebotstretch'></td><td colspan='2' valign='top'><img src='images/NG-MIDDLEBOTTOMSTRETCHRIGHT.jpg' width='166' height='15' alt='NightGen'></td><td valign='top'><img src='images/NG-MIDDLEBOTTOMCORNERRIGHT.jpg' width='20' height='15' alt='NightGen'></td></tr><tr><td height='1'></td><td width='11'></td><td></td><td></td><td></td><td></td><td></td></tr></table>
</td>
</tr>
</table>
</td>
</tr>
</table>

tedster

8:56 pm on Jun 12, 2004 (gmt 0)

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member



I've been playing around with your mark-up for a bit - and I've seen this kind of thing in IE before.

I got a shift in the right direction (but not all the way) by changing this line:

<td valign="top" width="100%" class="bgtopcornerright"></td>

to this:

<td valign="top" class="bgtopcornerright"></td>

In other words, IE sometimes flakes out when there are many "width=100%" attributes, especially if the mark-up already has enough information to dictate the layout.

For instance, if a table is declared width=100%, and 4 out of 5 <td> elements in one row have an exact pixel width, then you can let the last cell width be completely undeclared. The browser's internal code will automatically work it out because you've given it enough information.

Part of this strangeness comes because of IE's attempts at error recovery, which sometimes interfere when there is no error.

So my suggestion is to begin to eliminate a bunch of those width= attributes, testing after each change. Try to get things down to a bare minimum amount of mark-up. At some point, IE will probably jump into line for you.

To say it another way, the approach is to LET Explorer render the page instead of trying to FORCE Explorer to do what you envision.

j4mes

9:08 pm on Jun 12, 2004 (gmt 0)

10+ Year Member



This is a fairly old issue with IE6, the best fix for which I've seen is (weirdly) to remove the doctype declaration from the page.

Seriously, recommended by Macromedia!

[macromedia.com...]

J.

tedster

11:04 pm on Jun 12, 2004 (gmt 0)

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member



So MM recommends removing the URL from the DTD - and that makes sure IE 6 is in quirks mode, not standards mode.

According to that MM page (thanks for the link) the issue comes up when you use deprecated attributes in your mark-up with a full DTD. Like using width= and height= for a <td> element.

So, voidet, you also can get this page to work if you move those deprecated tags into a set of stylesheet rules. This might be a good time to link to the deprecated attribute thread:

[webmasterworld.com...]

voidet

4:37 am on Jun 13, 2004 (gmt 0)

10+ Year Member



THanks for all your help,
and sorry about the late reply,

I have taken that 100% out thanks tedster, but as before it still screws up the page. I also have not had any doc type at the top of the page, infact i like working without the doc types :D

I really dont see what is going on here, the page was working fine until i put some wide content in it, i.e "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX" then the whole thing broke down.

So do you recommend that i convert the td's into style sheet objects? but i had this page working 100% fine without using style sheet objects as tables :S

If i could somehow show you guys my full page?, i believe the policy is setup to prevent any promotional material reaching the users that click on the link, but i assure you i aint one of those sly marketeers!

Thanks again for your help!

but anymore ideas?

VoiDeT

j4mes

9:28 am on Jun 13, 2004 (gmt 0)

10+ Year Member



So do you recommend that i convert the td's into style sheet objects?

Absolutely. It'll make the code you posted earlier far simpler and more compact. Maybe you could just explain the kind of thing you're going for and we can work from there.

I *think* (and may well be completely wrong) that it's OK to post URLs provided they contain no business content and aren't on a business domain, as is done for the Gizmo Quiz, etc., (TOS #13 and #25) but I'd wait 'til tedster gives the all clear :)

James.

voidet

9:35 am on Jun 13, 2004 (gmt 0)

10+ Year Member



Ahh,
I just want the page to work the way it is supposed to in both opera browsers and IE browsers. I would post a screenshot of how the page looks in opera, but i guess i cant do that also =(

Thanks for all your help, there has to be a bug in my code, cause it didnt choke this bad last time!

[edited by: tedster at 1:31 am (utc) on June 14, 2004]
[edit reason] remove specifics [/edit]

j4mes

9:42 am on Jun 13, 2004 (gmt 0)

10+ Year Member



Romoving every single occurence of
width="100%"
seemed to do the trick without mashing up the page.

Try it out :)

J.

voidet

9:57 am on Jun 13, 2004 (gmt 0)

10+ Year Member



hey j4ames,

I removed all the 100%'s from the code that i posted above, howeveer the page got messed up in both opera and IE :S

did you mean take out all 100%'s on the entire page, or just the code above?

voidet

2:14 pm on Jun 13, 2004 (gmt 0)

10+ Year Member



oki,
ive narrowed down the issue to:

<tr>
<td width="20" height="8" valign="top"><img src="images/NG-MIDDLEVERYTOPCORNERLEFT.jpg" width="20" height="8" alt="NightGen"></td>
<td width="281" valign="top"><img src="images/NG-MIDDLEVERYTOPSTRETCH.jpg" width="281" height="8" alt="NightGen"></td>
<td width="28" valign="top"><img src="images/NG-MIDDLEVERYTOPCORNERRIGHT.jpg" width="28" height="8" alt="NightGen"></td>
<td valign="top" class="bgtopcornerright"></td>
<td width="83" valign="top"><img src="images/NG-MIDDLEVERYTOPCORNERRIGHTAB.jpg" width="83" height="8" alt="NightGen"></td>
</tr>

however, i think this area of code depends on the rest of the table, the entire table is:

sorry for the massive post, but cant post links!

<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="20" height="8" valign="top"><img src="images/NG-MIDDLEVERYTOPCORNERLEFT.jpg" width="20" height="8" alt="NightGen"></td>
<td width="281" valign="top"><img src="images/NG-MIDDLEVERYTOPSTRETCH.jpg" width="281" height="8" alt="NightGen"></td>
<td width="28" valign="top"><img src="images/NG-MIDDLEVERYTOPCORNERRIGHT.jpg" width="28" height="8" alt="NightGen"></td>
<td valign="top" class="bgtopcornerright"></td>
<td width="83" valign="top"><img src="images/NG-MIDDLEVERYTOPCORNERRIGHTAB.jpg" width="83" height="8" alt="NightGen"></td>
</tr>
<tr>
<td height="100%" colspan="5" valign="top">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="100%" width="100%" valign="top">
<table width='100%' border='0' cellpadding='0' cellspacing='0'>
<!--DWLayoutTable-->
<tr>
<td height='20' valign='top' colspan='2'><img src='images/NG-MIDDLETOPCORNERLEFT.jpg' width='31' height='20' alt='NightGen'></td>
<td colspan="3" valign='middle' class='bgmiddletopstretch'>
<div align='center'><b><a href='<%itemlink%>'>
<div class='title'>VoiDeTXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</div>
</a></b></div>
</td>
<td width='43' valign='top'><img src='images/NG-MIDDLETOPLOGO.jpg' width='43' height='20' alt='NightGen'></td>
<td width="20" valign='top'><img src='images/NG-MIDDLETOPCORNERRIGHT.jpg' width='20' height='20' alt='NightGen'></td>
</tr>
<tr>
<td valign='top' width='20' height='122' class='bgcontentleft'><img src='images/NG-MIDDLELEFT.jpg' width='20' height='59' alt='NightGen'></td>
<td valign='top' colspan='5'>
<table width='100%' border='0' cellpadding='10' cellspacing='0'>
<tr>
<td width='120' height='59' valign='top' class='bgcontent'><img src='/media/1/voidet.jpg' border='1' width='100' height='100'></td>
<td valign='top' class='bgcontent'>
<div class='text'>Dj Alias:: VoiDeT<br />
Location:: Brisbane, Australia<br />
Age:: 18<br />
Equipment:: 2x Pioneer<br />
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</div>
</td>
</tr>
</table>
</td>
<td valign='top' class='bgcontentright'><img src='images/NG-MIDDLERIGHT.jpg' width='20' height='59' alt='NightGen'></td>
</tr>
<tr>
<td height='15' valign='top'><img src='images/NG-MIDDLEBOTTOMCORNERLEFT.jpg' width='20' height='15' alt='NightGen'></td>
<td colspan='2' valign='top' class="bgmiddlebotstretch"><img src='images/NG-MIDDLEBOTTOMSTRETCHLEFT.jpg' width='165' height='15' alt='NightGen'></td>
<td class="bgmiddlebotstretch"></td>
<td colspan='2' valign='top'><img src='images/NG-MIDDLEBOTTOMSTRETCHRIGHT.jpg' width='166' height='15' alt='NightGen'></td>
<td valign='top'><img src='images/NG-MIDDLEBOTTOMCORNERRIGHT.jpg' width='20' height='15' alt='NightGen'></td>
</tr>
<tr>
<td height="0"></td>
<td width="11"></td>
<td width="100%"></td>
<td></td>
<td width="123"></td>
<td></td>
<td></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>

thanks for everyones help!

VoiDeT

 

Featured Threads

Hot Threads This Week

Hot Threads This Month