CSS - Weird Problem With Css Scrolling
Hi there! Please have a look here. As you can see there's a scrolling box with a overflow:auto propriety set. All works well either in Firefox and Internet Explorer, but I had to use a hack to made it work with IE:
Code: #content { position: relative; margin-left: auto; margin-right: auto; padding-right: 25px; padding-left: 25px; font-family: Verdana,Arial,helvetica, sans-serif; font-size: 11px; text-align: justify; overflow: auto; width: 543px; height: 225px; background-image: url(img/centerblank.jpg); background-repeat: no-repeat; _background-attachment: fixed; } FF doesn't read the _background-attachment so all works fine.. problem is, this way the css code is no w3c compliant. Any ideas? Similar TutorialsSo I have the following website: http://www.itmustbecollege.com/ and it has a problem SOMEWHERE that I can't seem to figure out. The problem is that all of my pages now have a big "space" on the far right, forcing a huge horizontal size. I have tried to debug but can't seem to find out the exact problem. It is weird, because certain parts of the website have a "width: 100%" yet ENDS at the correct look, yet there is still that huge space! So, I have my CSS, works wonderfully (well, as expected) in FF2. Unfortunately, IE7, Safari 3, and Opera 9 all seem to ignore the whole stylesheet. UNLESS! Any one of the properties in the sheet is declared !important. Then, it applies the entire sheet the way I expect. What gives? The way I understand (understood?) specificity, the !important flag should only effect the specific line it's applied to, not the entire sheet. Right? I'm really confused. The stylesheet is included last, so all else being equal, should cascade properly and override the other sheets. Any ideas? I'm just going to use the !important for now, but I really don't like that. MPEDrummer I'm having a slight problem with the appearance of the border for the DIV below the navigation bar. Firefox runs the border through the entire width of the DIV, but IE stops the bottom border as soon as the last <LI> is reached.. Any ideas guys? Thanks in advance. http://www.manliusvillage.org/test/index.html The related CSS is below: Code: #navigation{ height:2.2em; line-height:2.2em; width:758px; margin:0 1px; background:#578bb8; color:#ffffff; } #navigation li{ float:left; list-style-type:none; border-right:1px solid #ffffff; border-bottom:1px solid #ffffff; white-space:nowrap; } #navigation li a{ display:block; padding:0 10px; font-size:0.8em; font-weight:normal; text-transform:uppercase; text-decoration:none; background-color:inherit; color: #ffffff; } * html #navigation a {width:1%;} #navigation .selected,#navigation a:hover{ background:#80b0da; color:#ffffff; text-decoration:none; } #sublinks{ float:left; height:1.4em; line-height:1.4em; width:758px; margin:0 1px; background:#578bb8; color:#ffffff; } #sublinks li{ float:left; list-style-type:none; white-space:nowrap; border-right:1px solid #578bb8; } #sublinks li a{ display:block; padding:0 5px; font-size:0.8em; font-weight:normal; text-transform:uppercase; text-decoration:none; background-color:inherit; color: #ffffff; } * html #sublinks a {width:1%;} #sublinks .selected,#sublinks a:hover{ color:#000000; text-decoration:none; } Hi, I have developed a page using only CSS with html. That means I have two files at the moment, layout.css and default.html. When I test it on my computer it works fine on IE6.0, Firefox, Netscape and Opera. I then decided to give it a go on the live internet. I created an account with geocities and uploaded all the required files. Now, when I loaded the page from IE6.0 the website is broken. Which means it is not displaying as it was when I was loading it from my computer. However Firefox and Opera are loading it fine. For me this is just weird, since if I download the html from the page (right click, view source), save it on my pc, and load it again from my computer (locally), it works fine on IE6.0 again. I know how I could solve this problem, however should I try solving this problem if my page is displaying fine on my computer (on the three browsers) but incorrectly on geocities? Ps: I am only using geocities for testing. Regards, Sim085 Hello. I've got a header div that my banner is in, below that, another div called "welcome". The background-color I set on the welcome div is somehow appearing at the very top of the container, right above my banner... I've tried adding a height to it but that just makes it worse. Not sure what else to do... The site is LeetWebmasters. My css: Code: p { margin:0px; padding:0px; color:#006699; line-height:20px; } h2 { padding:0px; margin:0px; font-size:24px; color:#006699; font-weight:100; border-bottom:1px dotted #ccc; } h3 { padding:0px; margin:0px; color:#006699; color:#006699; } html,body { padding:0px; margin:0px; background-image:url(main-bg.gif); font-family: Arial, Helvetica, sans-serif; font-size: 13px; } #container { margin: 0 auto; width: 922px; } #header { width: 922px; float: left; height: 130px; margin: 10px 0px 5px 0px; } #leftcolumn { border-left: 1px solid #ccc; border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; background-image:url(col_gradient.jpg); margin: 0px 5px 5px 0px; padding: 10px; height: 900px; width: 195px; float: left; } #welcome { text-align:center; padding:5px; background:#EAEAEA; color:#006699; } #latest_tuts { color:#006699; } #latest_tuts h3 { border-bottom:1px dotted #ccc; } #who_online h3 { border-bottom:1px dotted #ccc; } #search { position:absolute; margin-top:0px; margin-left:0px; } #newsletter { position:absolute; margin-top:0px; margin-left:0px; } #welcome a:link { color:#0066CC; } #content { color: #333; margin: 0px 5px 5px 0px; padding: 10px; width: 456px; display: inline; float:left; background-image:url(content_gradient.jpg); } #content a:link, a:visited { color:#0066CC; } #rightcolumn { color: #333; border-left: 1px solid #ccc; border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; background-image:url(col_gradient.jpg); margin: 0px 0px 5px 0px; padding: 10px; height: 900px; width: 196px; float: left; } #footer { text-align:center; width: 900px; clear: both; color: #878787; border: 1px solid #ccc; margin: 0px 0px 10px 0px; padding: 10px; height:35px; font-size:12px; background-image:url(footer_gradient.jpg); } #footer a:link { color:#0066CC; text-decoration:none; } #footer a:visited { color:#0066CC; text-decoration:none; } #footer a:hover { color:#006699; } #menu3 { width: 200px; border:1px solid #BCD2E6; border-style: solid solid none solid; } #menu3 li a { height: 24px; text-decoration: none; } #menu3 li a:link, #menu3 li a:visited { color: #8BADCF; display: block; background: url(menu3.gif); padding: 8px 0 0 10px; } #menu3 li a:hover { color: #627EB7; background: url(menu3.gif) 0 -32px; padding: 8px 0 0 10px; } #menu3 li { list-style:none; } #menu3 ul { padding-top:0px; margin-top:0px; padding-left:0px; margin-left:0px; margin-bottom:0px; } #description { font-size:10px; color:#006699; } Hey guys, I was wondering if you can help me out with something. On my blog I couldn't figure out how to get the page to align to the top, so I had to use a negative margin on the header. Well now it's fine in firefox, but looks all botched in IE. What a surprise, right? Can you take a look at help me figure out what I need to fix? www.illuminatedmind.net Thanks! Hi guys, I'm at the end of my rope about this. I have a three-column layout which is behaving fine in mozilla. IE, as usual, is causing problems. I've given the troublesome column a background color of yellow to emphasize the problem. There's a right padding sort of thing going on that's forcing the right-most column out of its place; might be easier if you just look at it: http://www.teamsnowvalley.com/home.php (still a work in progress. just sayin) the css behind the column: #content .left { float:left; padding-right:9px; background:yellow; width:179px; voice-family: "\"}\""; voice-family:inherit } html>body #content .left { width: 179px; } Can anyone tell what i'm doing wrong? Many thanks, M Hey guys, First post here. I've scoured the web for answers, searched this forum, and visited many CSS sites (alistapart, maxdesign.com.au, positioniseverything, htmldog, etc.) and haven't seen a problem like this. I'm learning CSS as we speak (or more correctly, as I type), and here's the issue. I have a space between my #header and #page. I can't get rid of it unless I put a border around the #page. I've posted four screens here so you can see what's going on in Safari and Firefox (the two browsers I use). #1 is what the site looks like now (as the code is below). #2 is with the #header removed, #3 is with the #header removed and a 1px border put around the #page, and #4 is with the #header there and the #page has a 1px border. It seems to me that the #page has a top margin, and I've tried margin-top: 0px; and tons of other combos, but I can't get that space to go away unless I put a border around #page. Here's my css: Code: /* basic elements */ body { font: 8pt/16pt georgia; color: #000000; background: #AEAEAE url(images/butterflybg.gif) no-repeat top center; } p { font: 8pt/16pt georgia; margin-top: 0px; text-align: justify; } h1 { font: italic bold 14pt georgia; letter-spacing: 1px; margin-bottom: 0px; color: #000000; } h2 { font: normal bold 12pt georgia; letter-spacing: 1px; margin-bottom: 0px; color: #000000; } h3 { font: normal 12pt georgia; letter-spacing: 1px; margin-bottom: 0px; color: #000000; } a:link { font-weight: bold; text-decoration: none; color: #FFFFFF; } a:visited { font-weight: bold; text-decoration: none; color: #D4CDDC; } a:hover, a:active { text-decoration: underline; color: #9685BA; } /* divs */ #header { background: url(images/2006_Header.png) no-repeat; width: 697px; height: 127px; padding: 0px; margin: 0px auto; } #page { width: 697px; background: url(images/2006_WideExt.png) repeat-y center; margin: 0px auto; padding: 0px; } #nav { background: url(images/2006_LNav.png) no-repeat left; padding: 0px; margin: 0px; width: 175px; height: 306px; float: left; } #content { background: none transparent; margin-top: 0px; } #text { } #footer { text-align: center; } And my html: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" > <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title></title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div id="header"> </div> <div id="page"> <div id="nav"> </div> <div id="content"> <div id="text"> <p>put text here</p> </div> <div id="footer"> <a href="http://devshed.com" title="Forums">xhtml</a> </div> </div> </div> </body> </html> Am I overlooking something simple? hey, i have a page that includes several flash files.. since its a translation company i have made a page in Russian but the upper flash menu refuses to appear in firefox but displays in internet explorer.. other flash files appear.. and i don't know if its related but in order to make the Russian appear correctly i had to save the php page as utf-8 with no BOM... appreciate any help since i am clueless as to this weird problem here is the page address : bit.ly/4SqdNw sorry new in the forums could not link it but copy and pase Hello, First off, if you know of a way to make round cornered boxes (that stretch hor and vert) in css using less than 6 divs, please be my guest. Now the problem I'm having is IE specific, when i load up the IE DOM inspector, i see that all the divs before the bottomleft div have a height that too big. i don't know what this could be from because i never set a height attribute for any of the divs. http://72.29.74.19/~majdkgf/tangerine/ NOTE: this doesn't happen to the last box I changed over all my CSS flyout menus from the CSSPlay method to the whatever:hover method. It's working great. I've just got a minor, but annoying, problem that occurs in IE (6 & 7 tested). URL 1 URL 2 Check out the left-side navigation menus on those two pages. Obviously they're different files, but the code is exactly the same for the menus (except the path for the links, of course). The pages even use the same stylesheet. So why, then, does the menu flutter when you hover over the "Our Dogs" <li> on the base level menu, but not move a pixel on the /dogs/ level menu? Here's the path to the stylesheet: Stylesheet 1 The site is question is: http:// w ww.stolen-bikes.org/index4.php The CSS is: http:// w ww.stolen-bikes.org/css/non_ie.css Basically I want the sidebar (blue div), to line up on the side as it is but up flush against the top as you would expect a floated content area with a floated sidebar next to it. If I take out the #sidebar in the css it DOES align right up at the top as I want it to. The minute you as a float:left or width or anything it jumps down to the end of the #masthead div and beginning of the #content div. Im pretty sure I have everything lined up correctly I just cant figure out why this is doing that! Please help! Hi fowks, Normally I'm able to solve CSS issues relatively easily, well with some experimentation at least. However, this one has really got me stumped. Basically, I'm developing a menu for a weblication which is based on the famous Suckerfish menus. Everything works ok in IE and Mozilla when in an Left-to-Right (LTR) environment, but it doesn't work quite so well when the direction is flipped to RTL. IE copes fine, but FF doesn't. The menu works itself, but the viewport doubles in size and scrolls off to the right, even though there are no elements there. Anyone got an idea as to what could be doing this? I've included the relevant files for you to trial. Thanks for having a look. Hope you can help. It's driving me nuts. Cheers, John Hi all, Normally I'm faithful to table layout in my page design, but try to stay aware of how CSS is comming along at least as far as browser compatibility issues go. I've been wanting to use CSS for its transperancy abilities, and with my first trial page I've sadly run into same reasons I've steered away from CSS for so long. Hopefully all is not lost, and I may find help here. My problem is with a div that has a background image, and another div inside that containing the text which uses semi tranperant background color and "overflow : auto" to set the text apart from the background and allow scrolling. In IE, everything looks beautiful, and I wondered for a moment why I stayed away form CSS for so long. Then I tried Mozilla... Scrolling the text in the div is painfully slow and unresponsive to the point its almost impossible to move where you want in the text. The opaque background changes in color once you move down and leaves a seperation between the two colors or opacity, and generally works poorly. Here is the link, and the source is small: http://coinmonger.com/now.html Hopefully this is due to my lack of expertise using CSS, and a work-around is available. Currently I've downsized the background image hoping it was image size that was causing the problem (as this is just a quick test to see if I could do this), but no change. The page even loads slower using the "moz-opacity" attribute. Any input is appreciated! I have a image marquee on a page and sometimes only the top halves of the images show up. usually after refreshing the page the full images show up but I still want to fix it. I've tried adjusting the overflow but it doesnt change it, and i cant figure out where in the code the problem is. heres the page with the marquee http://myspace.com/hheyh222 and here's the code for the layout. Code: <p><style> td.text td.text table table table, td.text td.text table fffbr, td.text td.text table .orangetext15, td.text td.text .redlink, td.text td.text span.btext {display:none;}td.text td.text table {background-color:transparent;}td.text td.text table td, td.text td.text table {height:0;padding:0;border:0;}td.text td.text table table td {padding:3;}td.text td.text table table br {display:inline;} .FriendsComments table table {display:none;} .friendsComments td {height:0px;} .FriendsComments td {background-color:transparent;} .FriendsComments td td b a {display:inline;} table table,table table table table,table table{background-color:transparent;width:300px;border:0px;} div,table,tr,td,th{background-color:transparent;text-align:left;border:0px;} ffffffa.navbar,font,.whitetext12,.btext,.orangetext15,.redbtext,.redtext,.blacktext12,.lightbluetext 8,strong,.blacktext10,.nametext,div b font font, div font font u,table table table table, table table table table td.text, td.text td.text table,table.contacttable{display:none;} .latestBlogEntry {display: none;} table tr td div div{ visibility:hidden; display:none; border:0px!important; background-color:transparent; }tr {background:transparent;} div table form tr td,td.text table,a.text, table div font div table form tr td,td.text table,a.text, table div font a, table div div,{visibility:hidden;di-splay:none} td.text table table {display:inline; visibility:visible;} embed{position:absolute;top:0px;left:0px;display:block;width:0px; height:0;} div table td font {display: none;} body div table td form option{display:none!important;} body div table td form select{display:none!important;} body div table td form {display:none!important;} font, br, p, div, table { color: 000000; font: 8pt arial; text-align: justify;} u{ color: 000000; font: 8pt arial; letter-spacing: 1px} i { color: 000000; background-color:f0ff00; font: 8pt arial; letter-spacing: 2px} s { color: 000000; font: 8pt arial; letter-spacing: -1px} b { color: 00aeff; background-color: ffffff; font: 8pt arial;} a:link, a:visited, a:active { color: be003a; font: 8pt arial; text-align: justify;} body{scrollbar-3dlight-color:000000; scrollbar-arrow-color:ffffff; scrollbar-track-color: ff2467; scrollbar-darkshadow-color:000000; scrollbar-face-color:000000; scrollbar-highlight-color:ffffff; scrollbar-shadow-color:000000;} .head1 { color: ffffff; font: 8pt arial; letter-spacing: 1px; padding: 0px; background-color: 00aeff; text-align:left; text-transform:uppercase; border-bottom: 0px dotted; border-color: transparent; display: block;} .head2{ color: ffffff; font: 7pt arial; letter-spacing: 1px; padding: 0px; background-color: transparent; text-align:right; text-transform:lowcase; border-bottom: 0px solid; border-color: transparent; display: block;} a:hover{ color: transparent; letter-spacing: 0px; font: 7pt arial; padding: 0px; background-color: transparent; text-transform:lowcase; border-bottom: 0px solid; border-color: transparent;} input.comment4 { color:ffffff; font-size:8px ; width:150px ; height:15px ; font-family:arial; background-color:ff2467; border-color:000000 ; border-width:1px ; border-style:solid ; letter-spacing:1px ; text-transform:uppercase ; line-height:7px ; font-weight:normal ;} textarea.box4{ background-color:ff2467; width:150px ; height:50px ; font-family:georgia; color:ffffff; line-height:13px ; font-size:11px ; border-color:000000 ; border-style:solid ; border-width:1px ; letter-spacing:1px ; font-weight:bold ; } </style> </HEAD> <BODY background=http://img340.imageshack.us/img340/8715/85p9j4iay0.png> <div style="position: absolute; left:0px; top:0px; overflow: auto; visibility:visible; z-index:0;"> <img src="http://img512.imageshack.us/img512/2333/layoutcopy2ev4.gif" alt="WOO" /> <a href="http://www.msplinks.com/MDFodHRwOi8vaG9tZS5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj11c2Vy" style="position:absolute; top:450px; left:565px;"> <img src="http://x.myspace.com/images/clear.gif" border="0" style="width:100px; height:50px;"></a> <a href="http://www.msplinks.com/MDFodHRwOi8vbWVzc2FnaW5nLm15c3BhY2UuY29tL2luZGV4LmNmbT9mdXNlYWN0aW9uPWludml0ZS5hZGRmcmllbmRfdmVyaWZ5 JmZyaWVuZElEPTQ2MTI4NjUy" style="position:absolute; top:380px; left:760px;"> <img src="http://x.myspace.com/images/clear.gif" border="0" style="width:100px; height:50px;"></a> <a href="http://www.msplinks.com/MDFodHRwOi8vdmlld21vcmVwaWNzLm15c3BhY2UuY29tL2luZGV4LmNmbT9mdXNlYWN0aW9uPXVzZXIudmlld0FsYnVtcyZmcmll bmRJRD00NjEyODY1Mg==" style="position:absolute; top:490px; left:685px;"> <img src="http://x.myspace.com/images/clear.gif" border="0" style="width:100px; height:50px; "></a> <a href="http://www.msplinks.com/MDFodHRwOi8vbWVzc2FnaW5nLm15c3BhY2UuY29tL2luZGV4LmNmbT9mdXNlYWN0aW9uPW1haWwubWVzc2FnZSZmcmllbmRJRD00 NjEyODY1Mg==" style="position:absolute; top:575px; left:575px;"> <img src="http://x.myspace.com/images/clear.gif" border="0" style="width:120px; height:60px; "></a> <a href="http://www.msplinks.com/MDFodHRwOi8vYmxvZy5teXNwYWNlLmNvbS9pbmRleC5jZm0/ZnVzZWFjdGlvbj1ibG9nLkxpc3RBbGwmZnJpZW5kSUQ9NDYxMjg2NTI=" style="position:absolute; top:580px; left:770px;"> <img src="http://x.myspace.com/images/clear.gif" border="0" style="width:100px; height:50px; "></a> </div> <div style="position: absolute; left:10px; top:350px; width:530px; height:330px;overflow: auto; visibility:visible; z-index:0;"> <center><br><br><br><br> <img src="http://img293.imageshack.us/img293/8942/finalsmallerxw1.gif" alt="Image Hosted by ImageShack.us" /><br><bR> <SELECT style="background-color: #050706; color: #ffffff; font-family: Arial; font-size: 11px; width: 200px; "> <OPTION>Music</OPTION> <OPTION>Suicide God Pill</OPTION> <OPTION>Fischerspooner</OPTION> <OPTION>Kimya Dawson</OPTION> <OPTION>Klaus Nomi</OPTION> <OPTION>Marilyn Manson</OPTION> <OPTION>Brian Eno</OPTION> <OPTION>Meg Lee Chin</OPTION> <OPTION>White Stripes</OPTION> <OPTION>Kidney Theives</OPTION> <OPTION>Mika</OPTION> <OPTION>The Eels</OPTION> </SELECT><br><br> <SELECT style="background-color: #050706; color: #ffffff; font-family: Arial; font-size: 11px; width: 200px; "> <OPTION>Movies</OPTION> <OPTION>Hedwig And The Angry Inch</OPTION> <OPTION>Phantom of the Paradise</OPTION> <OPTION>Velvet Goldmine</OPTION> <OPTION>Donnie Darko</OPTION> <OPTION>Muppet movies</OPTION> <OPTION>Zeitgeist</OPTION> <OPTION>Tarnation</OPTION> <OPTION>Rocky Horror Picture Show</OPTION> <OPTION>The Dreamers</OPTION> <OPTION>Harry Potter</OPTION> <OPTION>Shortbus </OPTION> </SELECT><br><br> <SELECT style="background-color: #050706; color: #ffffff; font-family: Arial; font-size: 11px; width: 200px; "> <OPTION>TV</OPTION> <OPTION>The Muppet Show</OPTION> <OPTION>Will & Grace</OPTION> <OPTION>Queer as Folk</OPTION> <OPTION>That 70s Show</OPTION> <OPTION>Mr. Bean</OPTION> <OPTION>Freaks and Geeks</OPTION> <OPTION>Still Standing</OPTION> <OPTION>Threes Company</OPTION> <OPTION>The Riches</OPTION> </SELECT><br><br> <SELECT style="background-color: #050706; color: #ffffff; font-family: Arial; font-size: 11px; width: 200px; "> <OPTION>Books</OPTION> <OPTION>Harry Potter</OPTION> <OPTION>Disco Bloodbath/Party Monster</OPTION> <OPTION>Freakshow</OPTION> <OPTION>Junior</OPTION> <OPTION>It's Kind of a Funny Story</OPTION> <OPTION>The Picture of Dorian Grey</OPTION> <OPTION>A Clockwork Orange</OPTION> <OPTION>etc.</OPTION> </SELECT><br><br> <img src="http://img216.imageshack.us/img216/3830/stuffscopyhn5.gif" alt="Image Hosted by ImageShack.us" /><br><br> <img src="http://img20.imageshack.us/img20/9248/poliwhirlwooonw3.gif" alt="Image Hosted by ImageShack.us" /><br><br> <a href="http://www.msplinks.com/MDFodHRwOi8vdG90YWxseWpzai5wcm9ib2FyZHM1NC5jb20vaW5kZXguY2dp" target="_blank"> <img src="http://img338.imageshack.us/img338/841/jamesbannerlb1.gif" border="0" alt="TOTALLY JAME ST JAMES" /></a><br><br> <img src="http://img211.imageshack.us/img211/9954/2bannerfinishedee6.gif" alt="Image Hosted by ImageShack.us" /> <br><br> <A HREF="http://www.msplinks.com/MDFodHRwOi8vd3d3LmNhZmVwcmVzcy5jb20vdmF1Z2hubWljaGFlbA==" TARGET="_blank"><IMG SRC="http://members.aol.com/sharksgp/vaughnshopbanner500.gif" WIDTH="500" HEIGHT="134" ALIGN="BOTTOM" NATURALSIZEFLAG="3" BORDER="0" ALT="MY OFFICIAL STORE"></A> <br><br> <object type="application/x-shockwave-flash" allowScriptAccess="never" allowNetworking="internal" height="270" width="435" style="width:435px; visibility:visible; height:270px;" border="0" data="http://www.myplaylist.org/mc/mp3player.swf?tomy=http://www.myplaylist.org/mc/config/config_black.xml&mywidth=435&myheight=270&file=http://www.myplaylist.org/loadplaylist.php?playlist=30916882"> <param name="allowScriptAccess" value="never" /> <param name="allowNetworking" value="internal" /> <param name="movie" value="http://www.myplaylist.org/mc/mp3player.swf?tomy=http://www.myplaylist.org/mc/config/config_black.xml&mywidth=435&myheight=270&file=http://www.myplaylist.org/loadplaylist.php?playlist=30916882" /> <param name="menu" value="false" /> <param name="quality" value="high" /> <param name="wmode" value="transparent" /> </object> </div> <div style="position: absolute; left:595px; top:180px; width:130px; height:170px; overflow: visible; visibility:visible; z-index:0;"> <marquee> <a href=http://www.msplinks.com/MDFodHRwOi8vd3d3Lm15c3BhY2UuY29tL3ZhdWdobl9taWNoYWVs><img border=0 src=http://img507.imageshack.us/img507/4663/vaughnpicro8.jpg> </a> <a href=http://www.msplinks.com/MDFodHRwOi8vbXlzcGFjZS5jb20vc3VpY2lkZWdvZHBpbGw=><img border=0 src=http://img296.imageshack.us/img296/9289/suicidegodpillpicby1.jpg> </a> <a href=http://www.msplinks.com/MDFodHRwOi8vd3d3Lm15c3BhY2UuY29tL2t1cnRteXNleHltYW4=><img border=0 src=http://img181.imageshack.us/img181/1350/alyssapicrl1.jpg> </a> <a href=http://www.msplinks.com/MDFodHRwOi8vd3d3Lm15c3BhY2UuY29tL3BhcmtlcnJ5YW5tdXNpYw==><img border=0 src=http://img410.imageshack.us/img410/7487/parkerpicap6.jpg> </a> </marquee> </div> <div style="position: absolute; left:245px; top:220px; width:200px; height:170px;overflow: auto; visibility:visible; z-index:0;"> <center><form method="post" action="http://comments.myspace.com/index.cfm?fuseaction=user.ConfirmComment"> <input name="friendID" value="46128652" type="hidden"> <textarea name="f_comments" class="box4">Leave me a comment</textarea><br> <input type="submit"class="comment4" value="? submit"></form> </div> I'm having a little trouble with the Overflow attribute on my side scrolling website. I have uploaded 2 versions one and two of the same site, one with
Code: overflow:hidden; overflow-x:visible; and one with just. Code: overflow:hidden; the first one is completely static in safari and won't scroll at all but scrolls really nicely in firefox (with a scroll wheel as there are no scroll bars). The second one has a horizontal scroll bar but goes really wierd and starts scrolling horizontally as well which I don't want to happen as it messes up my site. Is there a way to get the site to scroll horizontally without scrolling vertically? I have tried it both this way and by only using Code: overflow-y:hidden; but it has similar results. Any help on this would be greatly appreciated Hi. I have a table cell <td width="100%"> then a div <div style="width: 100%; height: 400px; overflow-x: scroll; overflow-y:scroll;"> then a table that are wider than td above. I firefox the div is not wider than the td above. In IE7 (not tested in IE6), the DIV does force the td above to be wider than it should. is there a way to make this work in IE7 as it should. Is it a bug in IE7? Any workarounds/ solutions for this?. If not possible to do with CSS then I would appreciate a workaround suggestion. Could I put an image or other element within the TD and set that width to 100% to make it as wide as the TD, and then user javascript to find actual pixelwidth of image or other element, and then use javascript to reset the width of the DIV..... Anybody??? Need it to work in IE6, IE7 and Firefox. Hello, I have set up a scrolling div area on a page I'm working on. In IE it is displayed nicely, but in Foxfire/Mozilla the div seems to have a top margin of around 6px. I've done everything I can think of to get rid of it, but it's still there. I'm thinking it's probably the way that it's being rendered by the browser, but I don't have any idea how ti fix it. If you could help that would be great.. PHP Code: div.main_page_scroll { height: 186px; width: 210px; overflow: auto; scrollbar-base-color: #C7E9FB; scrollbar-track-color: #C7E9FB; scrollbar-face-color: #C7E9FB; scrollbar-highlight-color: #C7E9FB; scrollbar-3dlight-color: #AEC9D6; scrollbar-darkshadow-color: #AEC9D6; scrollbar-shadow-color: #C7E9FB; scrollbar-arrow-color: #AEC9D6; font-family: tahoma; font-size: 9px; color: #211F1E; text-align: left; background-color:#C7E9FB; } thanks, Chris 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. omg I am going to fall from the window with this stupid language lol... Until yesterday, I was designing properly my site, using css and linking it in my php properly andddddddd.......... today I noticed a weird result. When I change something in css, I can see no result in the site. Even if I delete code from css, the site seems to be cached! I use Mozilla, I tried to clean cache, the css is properly linked... whats going on now Have anyone else faced a similar problem?... |