homepage Welcome to WebmasterWorld Guest from 23.20.28.193
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Browsers / Opera Browser Usage and Support
Forum Library, Charter, Moderator: open

Opera Browser Usage and Support Forum

    
Horizontal Scroll on IE but not Opera
voidet




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

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




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

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




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

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




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

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




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

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




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

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




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

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




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

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




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

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




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

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

Try it out :)

J.

voidet




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

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




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

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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Browsers / Opera Browser Usage and Support
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved