Just a wee IE problem

D

Disco Octopus

Duende wrote :
Just wondering how to fix this to get rid of the horizontal scroll bar in IE
6. I have SP2 and all updates for IE. Works fine in Firefox 1, NS 7 & just
about in Opera 7.

http://wipkip.us/test/
http://wipkip.us/test/css/eye.css

Please pardon the text. My mind tends to wounder when I write.

change this....

#content {
padding-bottom: 10px;
padding-top: 0px;
top: 100px;
text-align: left;
float: right;
margin-left: 3em;
background-image: url(../images/up-rt-corner.gif);
background-position: top right ;
background-repeat: no-repeat;
margin-right: 15.5em;
}


#content {
padding-bottom: 10px;
padding-top: 0px;
top: 100px;
text-align: left;
float: right;
margin-left: 3em;
background-image: url(../images/up-rt-corner.gif);
background-position: top right ;
background-repeat: no-repeat;
}
 
R

Richard

Duende said:
Just wondering how to fix this to get rid of the horizontal scroll bar in
IE 6. I have SP2 and all updates for IE. Works fine in Firefox 1, NS 7 &
just about in Opera 7.

Please pardon the text. My mind tends to wounder when I write.

Set your div "content" to 75% of the width.
 
D

Disco Octopus

Disco Octopus wrote :
Duende wrote :

change this....
.....
sorry... try agin.......

change this....
#content {
padding-bottom: 10px;
padding-top: 0px;
top: 100px;
text-align: left;
float: right;
margin-left: 3em;
background-image: url(../images/up-rt-corner.gif);
background-position: top right ;
background-repeat: no-repeat;
margin-right: 15.5em;
}


to this....

#content {
padding-bottom: 10px;
padding-top: 0px;
top: 100px;
text-align: left;
float: right;
margin-left: 3em;
background-image: url(../images/up-rt-corner.gif);
background-position: top right ;
background-repeat: no-repeat;
padding-right: 15.5em;
}
 
R

rf

Duende said:
Just wondering how to fix this to get rid of the horizontal scroll bar in IE
6. I have SP2 and all updates for IE. Works fine in Firefox 1, NS 7 & just
about in Opera 7.

http://wipkip.us/test/
http://wipkip.us/test/css/eye.css

It's because you are floating both the content and the menu right. IE has
serious bugs in float, especially right. It adds up all the widths of the
floated elements (ignoring, or perhaps including, such things as margins
(the margin-right on the content)) and gets it wrong, pushing the HTML
element way out to the right. You can see this if you supply html {border:
solid 5px green;}.

The fact that you also absolutely position the menu (as well as floating it)
may not help. Or may be it's the other way round?

Anyway, removing the float: right from the content div fixes things. There
are a few artifacts to clear up but not to worry.
 
D

Duende

While sitting in a puddle Mark Parnell scribbled in the mud:
Not sure - could be something to do with the float: right; and position:
absolute; on the #menu div. You shouldn't need to absolutely position
it.
When I just use float right instead of absolute the menu goes under the
#content.
FWIW, it's the same in IE 5.01 and 5.5. Looks nasty in IE4.01.

Nice design, BTW.

Thanks. Kinda simple though.
 
M

Mark Parnell

Previously in alt.html said:
When I just use float right instead of absolute the menu goes under the
#content.

Interesting. Try the suggestions others have made, then try removing it
again.
Thanks. Kinda simple though.

Nothing wrong with that. No frames though? ;-)
 
D

Duende

While sitting in a puddle rf scribbled in the mud:
It's because you are floating both the content and the menu right. IE
has serious bugs in float, especially right. It adds up all the widths
of the floated elements (ignoring, or perhaps including, such things as
margins (the margin-right on the content)) and gets it wrong, pushing
the HTML element way out to the right. You can see this if you supply
html {border: solid 5px green;}.

The fact that you also absolutely position the menu (as well as floating
it) may not help. Or may be it's the other way round?
If I remove the float I loose the little corner. If I remove the absolute
the menu goes below the #content. Doesn't seem right to use both.
Anyway, removing the float: right from the content div fixes things.
There are a few artifacts to clear up but not to worry.
Removing the float: right from the content div fixes the horizontal scroll
bit but makes my little corner go away. :(

Thanks Cheers Richard
 
D

Duende

While sitting in a puddle Disco Octopus scribbled in the mud:
sorry... try agin.......

change this....
#content {
padding-bottom: 10px;
padding-top: 0px;
top: 100px;
text-align: left;
float: right;
margin-left: 3em;
background-image: url(../images/up-rt-corner.gif);
background-position: top right ;
background-repeat: no-repeat;
margin-right: 15.5em;
}


to this....

#content {
padding-bottom: 10px;
padding-top: 0px;
top: 100px;
text-align: left;
float: right;
margin-left: 3em;
background-image: url(../images/up-rt-corner.gif);
background-position: top right ;
background-repeat: no-repeat;
padding-right: 15.5em;
}

Sorry but it looks the same using padding-right as it does with margin-
right.

Thanks
 
R

Richard

Duende said:
Just wondering how to fix this to get rid of the horizontal scroll bar in
IE 6. I have SP2 and all updates for IE. Works fine in Firefox 1, NS 7 &
just about in Opera 7.

Please pardon the text. My mind tends to wounder when I write.


Added a division called container, set to 98% width and the site works just
fine for me.

div.container {width:98%;}

in #content, you should have "float:right;".
This is why the menu now drops to the bottom right.
If you add other divisions below the content and menu, then in #menu add
"clear:both;" or "float:none;".
 
D

Duende

While sitting in a puddle Duende scribbled in the mud:
Just wondering how to fix this to get rid of the horizontal scroll bar
in IE 6. I have SP2 and all updates for IE. Works fine in Firefox 1, NS
7 & just about in Opera 7.

http://wipkip.us/test/
http://wipkip.us/test/css/eye.css

Please pardon the text. My mind tends to wounder when I write.
Thanks for all your input. After trying many more things I think what finally
fixed it was to remove the float: right; from the #content. I've only been at
this for about 2 weeks so I knew it had to be something simple.
 
N

Neal

Duende:
Sorry but it looks the same using padding-right as it does with margin-
right.

Looking the same and being the same are not the same. Esse quam videri.
 
R

rf

Duende said:
While sitting in a puddle rf scribbled in the mud:
Removing the float: right from the content div fixes the horizontal scroll
bit but makes my little corner go away. :(

I *did* mention artifacts :)

Anyway I see that you have them cleared up.
 
R

Richard

Duende said:
While sitting in a puddle Duende scribbled in the mud:
Thanks for all your input. After trying many more things I think what
finally fixed it was to remove the float: right; from the #content. I've
only been at this for about 2 weeks so I knew it had to be something
simple.

Yep. You worked it out just fine.

http://www.geocities.com/r_bullis/

Main difference is I use a container as a wrapper for the whole thing.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,744
Messages
2,569,479
Members
44,899
Latest member
RodneyMcAu

Latest Threads

Top