Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations derfloh on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Huge horizontal scroll in IE 5.5 3

Status
Not open for further replies.
pindky

pindky

Programmer
Joined
Apr 26, 2002
Messages
101
Location
US
Hello,

I am testing this site and find that there in IE 4.0 and 5.5 the pages create a huge horizontal scroll.

Would you look at this page and perhaps tell me why this is happening so I can correct it.


It displays fine in other browsers.

The same problem is occuring on the other pages in the site.

Thanks!
 
Sort by date Sort by votes
I looked at your site and removed the library item on the bottom that didn't display anyway and the vertical scroll was even with the content of the page. I think it has to do with the library item.
 
Upvote 0 Downvote
The problem was in the horizontal scroll. It's okay if it scrolls vertically.

Also, what library item wasn't displaying. I can see them all on my browser.

thanks,
c
 
Upvote 0 Downvote
Looks perfect using IE6 at 1024x768. Is your resolution set lower than 800x600 and/or from the View->Text Size menu is your text set to largest? Just some ideas.
 
Upvote 0 Downvote
This is only a problem in IE 5.5 and lower both on PC and MAC. Still trying to resolve this....help!
 
Upvote 0 Downvote
The only thing I think to do is force IE to word wrap:
Code: 
<body style=&quot;word-wrap:break-word&quot;>
 
Upvote 0 Downvote
Help!! Tried the &quot;word-wrap:break-work&quot; suggestion. Wasn't that. Tried to eliminate all the library items. Still a problem. Tried to make the table absolute sizes. Still a problem. Tried to eliminate all the margins from the style sheet. Still a problem. I'm soooooo stuck. Any other ideas out there??

Thanks!
cbl
 
Upvote 0 Downvote
I think, it is something in your javascript. I thought at first it was something in your css, because I had a similar problem when I coded text-indent: 5% on my web site. But, I noticed that soon as I copied your index.html and the style.css to my hard disk and looked at the page, the page looked OK in IE 5. I didn't get your javascripts.

Dan
 
Upvote 0 Downvote
Ok on IE 5.5 I tried numerous things to resolve the issue. Nothing worked until I removed the floating menu then the page displayed fine. Library items are showing fine so I surmise the problem lies in your menu. Also at 800x600 the menu is cut off and you cannot access the bottom links, of course scrolling down doesn't help since the blam thing moves. Mayhap try using a different menu unless your heart is really set on that one. I checked the FAQ at the menu's homepage and could not find an answer there either ):

Moira
&quot;Those that stop learning, stop living.&quot;
 
Upvote 0 Downvote
Many thanks! I believe that is the problem!
 
Upvote 0 Downvote
Oops!! That is not the problem. I removed the Javacript and ran the page through Net Mechanic's Browser Photo and the problem still exists.

Then, I removed the link to the style sheet all together and ran it through Browser Photo (with the Javascript) and the IE 5.5 horizontal scroll problem is gone.

So, the problem is in my .css file (below if anyone can spot the offending style)
------------------------

body {
margin: 0px;
background-color : #ffffff;
}
p, h1, h2, h3, h4, h5, h6, ul, li, ol, caption {
font-family : verdana, Geneva, Arial, Helvetica, sans-serif;
}

p {
color: #000000;
font-size: 90%;
margin-right: 10%;
}

a:link {
color: blue;
text-decoration: underline;
}

a:visited {
color: Purple;
text-decoration: underline;
}

a:hover {
text-decoration: none;
color: #000099;
background-color : #ccccff;
}



.copy {
color: #000099;
font-weight: normal;
font-size: 80%;
font-family : verdana, Geneva, Arial, Helvetica, sans-serif;
}

h1 {
color: #000099;
font-size: 125%;
font-weight: bold;

}

h2 {
color: #000099;
font-size: 100%;
font-weight: bold;
border-bottom: 1px solid #000099;
border-top: 0px;
border-right: 0px;
border-left: 0px;
margin-right: 10%;

}

h3 {
color: #000099;
font-size: 95%;
font-weight: bold;

}

caption {
color: #000099;
font-size: 100%;
font-weight: bold;
border-bottom: 1px solid #000099;
border-top: 0px;
border-right: 0px;
border-left: 0px;
margin-right: 10%;
text-align : left;

}

.logo {
margin-top: 10px;
margin-left: 10px;
}

.slant {
font-style: italic;
font-weight: bold;
color: #000099;
}


.bold {
font-weight: bold;
}

th {
background-color: #000099;
color: #ffffff;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 90%;
font-weight: bold;
border: 1px solid #000099;
}

.call {
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 80%;
color: #000099;
background-color: #ffffff;
font-weight: normal;
border: 1px solid #000099;
}

.border {
border: 1px solid #000099;
}

.rt {
margin-right: 60px;
}

.member {
color: #000099;
}

.block {
margin-left: 20px;
margin-right: 150px;
text-align : justify;
color: #000099;
font-weight: bold;
}

.header {
font-size: 100%;
color: #000099;
background-color: #ccccff;
padding: 3px;
margin-bottom: 0px;
margin-right: 10%;
border: 1px solid #000099;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}

.indexheader {
font-size: 100%;
color: #000099;
background-color: #ccccff;
padding: 3px;
margin-bottom: 0px;
margin-right: 2%;
border: 1px solid #000099;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}

.housekeep {
margin-right: 7%;
margin-top: 10px;
font-size: 70%;
font-weight: normal;
color: #9999FF;
}

.housekeep a:link {
color: #9999FF;
text-decoration : none;
}

.housekeep a:visited {
color: #9999FF;
text-decoration : none;
}

.housekeep a:hover {
text-decoration: underline;
color: #000099;
background-color : #ccccff;
}

.address {
font-size: 70%;
font-weight: normal;
color: #000099;
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
margin-right : 10%;
}

.address a:link {
text-decoration: none;
color: #000099;
}

.address a:visited {
text-decoration : none;
color: #000099;
}

.address a:hover {
color: #000099;
text-decoration : underline;
background-color : #ccccff;
}

label {
font-size: 70%;
font-weight: normal;
color: #000099;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}

.margin {
margin-right: 7%;
}

hr {
margin-right: 10%;
color: #000099;
height : 1px;

}

.link {
font-size: 75%;
}

.mini {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 65%;
color: #000099;
font-weight: normal;
padding: .5%;
}

.mini a:link {
text-decoration : underline;
color: #000099;
}

.mini a:visited {
color: purple;
}

.mini a:hover {
background-color : #ccccff;
text-decoration : none;
}

.newbox {
font-size: 110%;
font-weight: bold;
color: #ffffff;
background-color: #000099;
text-align: center;
margin-top: 2px;
margin-bottom: 2px;
}

.whatsnew {
color: #000099;
font-weight: bold;
font-size: 75%;
}

.whatsnew a:link {
color: #000099;
text-decoration: underline;
}

.whatsnew a:visited {
color: #000099;
text-decoration: underline;
}

.whatsnew a:hover {
color: #ffffff;;
text-decoration: none;
}

.index {
padding-right: 5%;
text-align: justify;
}
--------------------------------------
 
Upvote 0 Downvote
Try changing your percentage margins to pixels to see if the problem goes away. As I said in my previous post, I had text-indent with percentage value and it messed my pages up so bad IE 5.x users could say was that my page was stretched out. I couldn’t believe that until I finally installed IE 5 to see what the users were talking about. Just like your page, any long paragraph was extended without line breaks until it ended regardless of size of the table cell.

Another thing to try is to use margin: syntax instead of margin-left:, margin-right:, etc.

Dan
 
Upvote 0 Downvote
This is a little off topic of your question, but I am using IE6 and the screen resolution is 600 x 800. Your floating menu doesn't show past the word &quot;Newsletter&quot;. If I want to see below it, I have to use the scroll-bars fast upward. Was it meant to be seen at a higher resolution?
 
Upvote 0 Downvote
This website is being created by three people, and the Javascript menu isn't my effort, so I can't respond directly to that myself right now.

I can't change the margins to pixels because the site needs to be accessible for disabled users, thus the percentages.

Instead, I completely removed all the percentage margin properties in the style sheet and used cell padding instead.

With this change the pages render properly in most IE 5.5 and below except on larger screen resolutions. Also, the Javascript menu randomly (seemingly) disappears on IE 5.5.

One problem I fixed was that the script attribute wasn't quoted out. It was type=text/javascript and is now type=&quot;text/javascript&quot;

The new css file is below.

I feel like I'm out of tricks.

I used a .5 for padding on one style. Didn't know if that was a no-no.

-------------------
body {
margin: 0px;
background-color : #ffffff;
}
p, h1, h2, h3, h4, h5, h6, ul, li, ol, caption {
font-family : verdana, Geneva, Arial, Helvetica, sans-serif;
}

p {
color: #000000;
font-size: 90%;
}

a:link {
color: blue;
text-decoration: underline;
}

a:visited {
color: Purple;
text-decoration: underline;
}

a:hover {
text-decoration: none;
color: #000099;
background-color : #ccccff;
}



.copy {
color: #000099;
font-weight: normal;
font-size: 80%;
font-family : verdana, Geneva, Arial, Helvetica, sans-serif;
}

h1 {
color: #000099;
font-size: 125%;
font-weight: bold;

}

h2 {
color: #000099;
font-size: 100%;
font-weight: bold;
border-bottom: 1px solid #000099;
border-top: 0px;
border-right: 0px;
border-left: 0px;
}

h3 {
color: #000099;
font-size: 95%;
font-weight: bold;

}

caption {
color: #000099;
font-size: 100%;
font-weight: bold;
border-bottom: 1px solid #000099;
border-top: 0px;
border-right: 0px;
border-left: 0px;
text-align : left;

}


.slant {
font-style: italic;
font-weight: bold;
color: #000099;
}


.bold {
font-weight: bold;
}

th {
background-color: #000099;
color: #ffffff;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 90%;
font-weight: bold;
border: 1px solid #000099;
}

.call {
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 80%;
color: #000099;
background-color: #ffffff;
font-weight: normal;
border: 1px solid #000099;
}

.border {
border: 1px solid #000099;
}

.rt {
}

.member {
color: #000099;
}

.block {
margin-left: 20px;
margin-right: 150px;
text-align : justify;
color: #000099;
font-weight: bold;
}

.header {
font-size: 100%;
color: #000099;
background-color: #ccccff;
padding: 3px;
border: 1px solid #000099;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}

.indexheader {
font-size: 100%;
color: #000099;
background-color: #ccccff;
padding: 3px;
border: 1px solid #000099;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}

.housekeep {
font-size: 70%;
font-weight: normal;
color: #9999FF;
}

.housekeep a:link {
color: #9999FF;
text-decoration : none;
}

.housekeep a:visited {
color: #9999FF;
text-decoration : none;
}

.housekeep a:hover {
text-decoration: underline;
color: #000099;
background-color : #ccccff;
}

.address {
font-size: 70%;
font-weight: normal;
color: #000099;
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
}

.address a:link {
text-decoration: none;
color: #000099;
}

.address a:visited {
text-decoration : none;
color: #000099;
}

.address a:hover {
color: #000099;
text-decoration : underline;
background-color : #ccccff;
}

label {
font-size: 70%;
font-weight: normal;
color: #000099;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}

.margin {
}

hr {
color: #000099;
height : 1px;

}

.link {
font-size: 75%;
}

.mini {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 65%;
color: #000099;
font-weight: normal;
padding: 1%;
}

.mini a:link {
text-decoration : underline;
color: #000099;
}

.mini a:visited {
color: purple;
}

.mini a:hover {
background-color : #ccccff;
text-decoration : none;
}

.newbox {
font-size: 110%;
font-weight: bold;
color: #ffffff;
background-color: #000099;
text-align: center;
}

.whatsnew {
color: #000099;
font-weight: bold;
font-size: 75%;
}

.whatsnew a:link {
color: #000099;
text-decoration: underline;
}

.whatsnew a:visited {
color: #000099;
text-decoration: underline;
}

.whatsnew a:hover {
color: #ffffff;;
text-decoration: none;
}

.index {
padding-right: 5%;
text-align: justify;
}
 
Upvote 0 Downvote
One more question,

what is margin: syntax ?? How does that work.

Also, can you install IE 5x when you have IE6?

-cbl
 
Upvote 0 Downvote
I couldn't install IE5 when I had IE6 installed, that was the reason it took me so long to figure out what the users were trying to tell me. Luckly on one of my computers, I use a removable hard drive kit, so, I trashed one of my hard disks and installed IE 5 on it. So all I have to do is to shutdown, slide out my normal system hard drive and put in the the hard drive with IE 5 to test it.

margin: t, r, b, l; - it lets you set all the margins at once.

Where t is the value equal to margin-top:
r is the value equal to margin-right:
b is the value equal to margin-bottom:
l is the value equal to margin-left:

refer to:
Try to remove/change your percentage values to pixels just to see if the problem goes away, then you can attack the problem. In my case text-indent: 5% was the last thing I thought would cause the problem and so it took a while to fix the problem.

Dan



Dan
 
Upvote 0 Downvote
Since this site is to be accessable for disabled users ...
run it through Bobby cerifications (there are 3 levels of bobby certification, and NONE of them allow for javascripts ...)

Get rid of the javascripts...

J...
 
Upvote 0 Downvote
Get rid of the floating menu - it's not necessary and it's very annoying, not to mention the extra overhead it takes to rn and load. There's always a better way...
 
Upvote 0 Downvote
This site is being designed by a committee, and I'm afraid I'm not the last word on the menu. BTW - how much does the menu add to the load of the page? CBL
Small World Graphics
 
Upvote 0 Downvote
FYI -- The pages work fine when that Javacript menu is removed. They render improperly when it is there. Somehow I have eliminated most of the offending style properties (margins and padding) so that most of the pages work in IE 5.5 even w/ the Javascript menu. The index.html page which contains a table inside a table will not render correctly w/ the javascript menu.

I shall now turn the problem over to the committee member who created them menu and thank you all for your help.

I tend to design accessible pages so I don't use javascript much and don't have a clue what to do when it goes wrong.

I've also learned to be wary of using percentages in margins and padding in IE 5.5

Also loading the margin properties by: top right bottom and left helped as well.

Thank you all! CBL
Small World Graphics
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

PeDa
  • Locked
  • Question Question
CSS two level horizontal menu
Replies
0
Views
935
PeDa
PeDa
cae154
  • Locked
  • Question Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
1K
spamjim
spamjim
soni21
  • Locked
  • Question Question
JavaScript String to Number Conversion in HTML: Seeking Clarification
Replies
4
Views
3K
Chris Miller
Chris Miller
PeDa
  • Locked
  • Question Question
Horizontal rule and CSS problem
Replies
2
Views
1K
PeDa
PeDa
Mike Lewis
  • Locked
  • Question Question
How to refresh a Javascript file in the browser's cache?
Replies
4
Views
2K
Mike Lewis
Mike Lewis

Part and Inventory Search

Sponsor

Back
Top