CSS - Horizontal Scrolling & Ie7

Hi folks,

I'm working on a website at the moment and having some issues 'fixing it' for Internet Explorer. The design scrolls horizontally, and using 'position:fixed;' on certain elements keeps them on the page while the rest scrolls - this works fine in Safari / Camino / Firefox etc. but as we know position:fixed; is broken in IE.

I tried applying the fix found at http://web.tampabay.rr.com/bmerkey/...tion-fixed.html but this only seems to work for regular vertical scrolling pages - when scrolled horizontally the "fixed" elements still scroll with the page.

Is there any way possible to get this to work? I really really want to avoid any of those javascript "jumpy" scripts to reposition the element all the time. Thanks all.

Good morning,

I have a problem with a layer(div) that I am putting over my page everytime the user clicks a button and a transaction is send to the host. My problem is that if there is an scroll and the user scroll, the message scrolls up and dissapears. I need to fix it to the center of the screen. I have tried with % instead of absolute px. Can anyone help me, please?. I am close to my deadline, so any help would be really apreciated.

I am attaching my code:
window.onbeforeunload=new Function("Procesando.style.visibility='visible';");

window.onblur=new Function("Procesando.style.visibility='hidden';");
//window.onfocus=new Function("Procesando.style.visibility='hidden';");

document.write('<div style="position:absolute; top:160; left:313; visibility:hidden; overflow:hidden; background-color:#CCCCCC; clip:rect(12,177,50,3); " id="Procesando">\n'+
'<select size=4 name="cbEspera" class="TextoTablaIzq" style="background-color:#CCB8E0; font-Weight:bold;">\n'+
'<option>&nbsp;</option>\n'+
'<option>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Procesando su petici'+unescape("%F3")+'n. &nbsp;</option>\n'+
'<option>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Espere por favor...&nbsp;</option>\n'+
'<option>&nbsp;</option>\n'+
'</select></div>\n');

Hey guys!! I got a quick question. I have a CSS layout page with 2 scrollbars. The first one for a news section and the second for a product. I have a lot of content for both sections, The scrollbars work fine, but on the main IE the scrollbars keep adjusting to the content that I have. if i have less content then its small.....
I want to have no scrolling on my main window.

Hi guys,

I've this div with overflow:auto.
This div is populated using xmlhttprequest (it's an IM chat) so it will be getting full to the point where there's an overflow and the scrollbar shows up.
What I would like to do is, whenever a new content line was added to the div (I'm using DOM to do so), the scroll (if overflow has happened) would go all the way down in a way where the last line of visible text in the div would always be the last line inserted.
I'm somewhat newbie at this stuff so, any help in the right direction would be great!

Thx

Hugo

Not sure if this is a CSS question or a Javascript question. Leaning towards CSS so here goes:

Please refer to:

http://www.larreamma.com/

When the page is first loaded the scrolling 'News & Events' content initially displays... outside the container it is allocated to(?). That is, a couple of lines briefly display below the 'News & Events' background. Once it is "loaded" it displays within the box, as expected. Can this be eliminated?

The scroller being used is 'DOMnews 1.0' from http://onlinetools.org/tools/domnews/ . I had inquired there some time ago but have not gotten a reply.

Thank you in advance.

I have 2 DIV's on a page, both DIV's are scrolling. I want to place 1 DIV below another. Is there a way of positioning the top of the bottom DIV a fixed distance below the bottom of the top DIV?

Hey,

I was half-way through doing an Unreal Tournament (fab game) related site using CSS and XHTML Strict, and suddenly IE6 decides it's going to mess me about. Surprise surprise!

A current version of the site can be found he
URL

The CSS of which can be found he
URL

In Mozilla and Konquerer it's perfect, but IE6 is shaving off the bottom bit of the document, leaving me unable to scroll all the way to the bottom. I find that it only renders one 'full screen' (F11) worth of content, before cutting it off, which is quite frankly bizarre. There should be five paragraphs of placeholder text visible. I'm also getting strange text-selection bugs, which I suspect are related.

I've found a few sites that tell of a common IE6 CSS scrolling bug, which can be fixed by either refreshing the page, or pressing F11 twice, or putting a clearing <div> underneath the content. This isn't the case here. I've also tried making the #main div relatively positioned (I hear IE6 doesn't like absolutely positioned divs all that much), and also setting 'height: 100%' in the body and #all divs, but to no avail.

Oh, and I'm using WinXP SP1, if that makes any difference.

Please please please help, I'm fast running out of hair to pull out.

Cheers.

Hi

I have a html menu which seems to be causing some problems to my stylesheet.

Everything was working before I used the following code to create a menu using a separate external stylesheet

The HTML
PHP Code:
<div id="submenu">
    <a class="MySubMenu" href="#">Link 1</a> | 
    <a class="MySubMenu" href="#">Link 2</a> | 
    <a class="MySubMenu" href="#">Link 3</a> | 
    <a class="MySubMenu" href="#">Link 4</a> | 
    <a class="MySubMenu" href="#">Link 5</a> | 
    <a class="MySubMenu" href="#">Link 6</a> | 
    <a class="MySubMenu" href="#">Link 7</a> | 
    <a class="MySubMenu" href="#">Link 8</a> |
    <a class="MySubMenu" href="#">Link 2</a> | 
    <a class="MySubMenu" href="#">Link 3</a> | 
    <a class="MySubMenu" href="#">Link 4</a> | 
    <a class="MySubMenu" href="#">Link 5</a> | 
    <a class="MySubMenu" href="#">Link 6</a> | 
    <a class="MySubMenu" href="#">Link 7</a> | 
    <a class="MySubMenu" href="#">Link 8</a></div> 





The CSS
PHP Code:
#submenu
{    
    padding:2px 0px 1px 0px;
    position:absolute;
    top:53px;
    left:1px;
    color:Silver;
    font-size:8pt;
    width:800px;
}

.MySubMenu:a, .MySubMenu:a:visited
{
    font-family:Arial;
    font-size:8pt;
    color:rgb(119,119,119);
    text-decoration:none;
    border:solid 1px rgb(241,241,241);
    padding:0px 5px 0px 5px;
}

.MySubMenu:a:hover
{
    font-family:Arial;
    font-size:8pt;
    color:rgb(119,119,119);
    background-color:rgb(230,230,230);
    text-decoration:none;
    border:solid 1px rgb(153,153,153);
    padding:0px 5px 0px 5px;
} 





I have attached 2 images so you can see what the problem is. As you can see, everything looks ok in the default.gif, but the scrolled.gif is what the screen looks like when I scroll to the right, the CSS style gets chopped off even thought the width is 100%.

The strange thing is, if I go to a page without that menu, I can scroll to the right without the pages css getting chopped off.

Can anyone help me fix this problem.

Thanks

I have been unable to resolve several problems with my first CSS attempt, most interestingly Firefox's inability to scroll through the main text div. Also, in IE I have been unable to overlap certain divisions and text is not properly limited in width.

Both the html and css validate at W3C, and other than not scrolling, Firefox displays ideally. I can't say I expected anything less than the present errors from IE.

A comparison of these issues is presented he
URL

The main page and CSS are available, respectively, at
URL
URL

I suspect the improperly-located div problem is somewhere in here (and likely due to a simple error)

Code:

#quotes {
	position: fixed;
	bottom: 0px; right: 15%;
	width: 85%; height: 35px;
	padding: 5px;
	
	margin: 10px;
	overflow: hidden;
	text-align: center;
	color: #CCCCCC; background-color: #336633;
}

#sig {
	position: fixed;
	z-index: 1;
	bottom: 25px; left: 85%;
	width: 20%; height: 35px;
	padding: 0.5em;
 
	/* Make the sig noticeable */
	font-size: 3.25em;
	font-weight: 600;
}

As for the scrolling issue, which is my primary concern, I have read extensiively for similar problems, but cannot find any assistance. Solutions to the other issues are secondary at this point, but will be fixed eventually.


If anyone has any ideas, I would appreciate them. Thanks.
.dd.

Hello all,

I noticed there was similar post on this topic, though I was not able to fix my problem with that post, so I will post my own.

I have made a site with relative pos, and css. I have everything positioned nicely (on everything but IE, still working on that CSS), but I have a vertical scroll bar that goes down about 3 inches, the only thing, there is nothing down there to scroll to. I have tried to alter just about everything I can think of, but nothing seems to work. If you can believe it this has been plagueing me for about 3 weeks now. Any help would relieve a lot of stress. Thanks very much for your time.

bcode.

=========== CSS File============
.wdlogo {
visibility:visible;
position:absolute;
z-index:0;
left:10px;
top:10px;
}


.slidingtext {
visibility:visible;
position:relative;
z-index:2;
left:245px;
top:-200px;
}


.blacklink {
text-decoration: none;
color: #000000; }


.blacklink:hover {
text-decoration: none;
color: #000000;
}


.intro {
text-align: left;
color: #000000;
font-size: 12pt;
font-family: Lithograph, sans-serif;
position: absolute;
visibility: visible;
z-index: 2;
left: 360px;
top: 300px;
}


.center {
visibility: visible;
position: absolute;
z-index: 0;
top: 165px;
left: 85px;
}


.shadowleft {
width:32px;
background-image: url(images/Working/jpg/left_ver_5.jpg);
background-repeat: repeat-y;
background-position: right top;
}


.background {
background-image: url(images/Working/jpg/background.jpg);
background-repeat: repeat;
}


.shadowright {
width: 32px;
background-image: url(images/Working/jpg/right_ver_3.jpg);
background-repeat: repeat-y;
background-position: left top;
}


.top {
position: absolute;
visibility: visible;
top: 0px;
}


.dots {
position: relative;
visibility: visible;
z-index: 2;
left: 160px;
top: -150px;
}


.nav {
position: relative;
visibility: visible;
z-index: 2;
left: 5px;
top: 250px;
}


.bar1 {
position: relative;
visibility: visible;
z-index: 2;
left: 240px;
top: -460px;
}


.bar2 {
position: relative;
visibility: visible;
z-index: 2;
left: 240px;
top: -420px;
}


.bar3 {
position: relative;
visibility: visible;
z-index: 2;
left: 240px;
top: -380px;
}


.welcometext {
position: relative;
visibility: visible;
z-index: 2;
left: 245px;
top: -455px;
width:330px;
font-family: verdana, arial, sans-serif;
font-size: 11px;
line-height: 17px;
}


.whytext {
position: relative;
visibility: visible;
z-index: 2;
left: 245px;
top: -415px;
width:310px;
font-family: verdana, arial, sans-serif;
font-size: 11px;
line-height: 17px;
}


.empowertext {
position: relative;
visibility: visible;
z-index: 2;
left: 245px;
top: -375px;
width:310px;
font-family: verdana, arial, sans-serif;
font-size: 11px;
line-height: 17px;
}

=================================


==========XHTML File===============
<?xml version="1.0" encoding="iso-8859-1" ?>


<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!--
Author: Mathew Pridham
Date: April 2004
-->


<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>


<title>Web Diligence</title>

<link rel="stylesheet" type="text/css" href="wd.css" />

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="wdiespecific.css" />
<![endif]-->

<!--webbot bot="Include" endspan i-checksum="11150" -->

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />


</head>

<body topmargin="0" bottommargin="0" class="background">
<table cellpadding="0" cellspacing="0" align="center" width="800px">
<td class="shadowleft" height="100%" width="32px" rowspan="20">
</td>
<td width="800px" height="100%" bgcolor="#FFFFFF">

<img src="images/logo/JPEG/Logo/WedDiligence_ver_4.5.jpg" align="left" border="0" name="wdlogo" width="480px" height="252px" />

<object class="slidingtext" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="500" height="100">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="flash/banner/textslide_ver_2.swf" />
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<embed class="wdflyingtext" src="flash/banner/textslide_ver_2.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="500" height="100"></embed>
</object>

<img src="images/Working/gif/dotted4.gif" class="dots" border="0" />

<table style="position:relative; left:5px; top:-340px" class="nav" cellpadding="0" cellspacing="4" width="180px" border="0">
<tr>
<td align="right"><img src="images/Working/jpg/buttons/home_button_hit.jpg" border="0" name="home" /></td>
</tr>
<tr>
<td align="right"><a href="about.html" onmouseover="document.about.src='images/Working/jpg/buttons/about_button_over.jpg'" onmouseout="document.about.src='images/Working/jpg/buttons/about_button_up.jpg'"><img src="images/Working/jpg/buttons/about_button_up.jpg" name="about" border="0" width="143px" height="20px" /></a></td>
</tr>
<tr>
<td align="right"><a href="contact.html" onmouseover="document.contact.src='images/Working/jpg/buttons/contact_button_over.jpg'" onmouseout="document.contact.src='images/Working/jpg/buttons/contact_button_up.jpg'"><img src="images/Working/jpg/buttons/contact_button_up.jpg" name="contact" border="0" width="143px" height="20px" /></a></td>
</tr>
<tr>
<td align="right"><a href="design.html" onmouseover="document.design.src='images/Working/jpg/buttons/design_button_over.jpg'" onmouseout="document.design.src='images/Working/jpg/buttons/design_button_up.jpg'"><img src="images/Working/jpg/buttons/design_button_up.jpg" name="design" border="0" width="143px" height="20px" /></a></td>
</tr>
<tr>
<td align="right"><a href="portfolio.html" onmouseover="document.portfolio.src='images/Working/jpg/buttons/portfolio_button_over.jpg'" onmouseout="document.portfolio.src='images/Working/jpg/buttons/portfolio_button_up.jpg'"><img src="images/Working/jpg/buttons/portfolio_button_up.jpg" name="portfolio" width="143px" height="20px" /></a></td>
</tr>

</table>

<img src="images/Working/jpg/welcomebar.jpg" border="0" class="bar1" width="325px" height="23px" />
<div class="welcometext">
We are a small web design & development company, specialized in quality web design for small businesses.
</div>

<img src="images/Working/jpg/whybar.jpg" border="0" class="bar2" width="325px" height="23px" />
<div class="whytext">
We, at Web Diligence, understand your need for an attractive, high quality website at an affordable price.
We create websites that are an effective combination of functionality, style, and creativity.
We specialize in custom web design as well as website makeovers.
</div>

<img src="images/Working/jpg/herebar.jpg" border="0" class="bar3" width="325px" height="23px" />
<div class="empowertext">
Not the other way around. We believe that it is your idea's, as well as ours that will make your site convey the message you're aiming for.
Whether you're re-vamping an existing site, or starting from scratch, we can design a site that not only captures your imagination,
but also fits into a small business budget.

</div>
</td>

<td class="shadowright" height="100%" width="32px" rowspan="20">
</td>
</table>
</body>

</html>

Can someone point me to a tutorial (or if it's easy enough, just show me here) where I can learn how to make a scrolling div? Ideally, one that looks like this (this would be on a black-backgrounded page):



Thanks!...

does anyone know the code for a scroll text box? plz help

http://www.rodoslovlje.com/

Use IE e.g. Does anyone know how I can fix this.

Thnx

I've made an image to explain my problem pretty well :


imgur dot com /n8uOX

(apparently I am not allowed to posts links , however its kinda hard for me to explain the problem so its easier to just show it)

basically i want my page to always be rendered as I intended it to.
I am pretty sure my coding is quite bad and thats what caused the problem , yet if anyone have any way to fix this please post in this thread.


Thanks