|
CSS - Scroll Bar Flickers When The Page Is Loading(ie7)
Hi,
I have this strange issuewhich is only happening in IE7. When the page loads, the scroll bars begin to flicker. It stops after the page loads completely. And if the page is loading after an ajax request, it scroll bars keep flickering even after ajax response is completed. Please let me know if anyone has any answers to this issue. The HTML is as follows: <div id="db-overlay-popup-box" class="overlay-popup-box"> <div id="database-list-popup"><form>....</form></div></div> The CSS used for the div elements is given below. #db-overlay-popup-box { min-height: 200px; height: 400px; position: absolute; width: 40%; margin-left: 30%; top: 15em; border: 2px solid #3282b6; z-index: 999; padding: 10px; background-color: #fff; } #databaselist-databases { list-style-type : none; clear: both; overflow: auto; position: absolute; width: 90%; margin-left: 1em; padding-left: 1em; right: 1em; white-space: nowrap; } .overlay-popup-box { position: absolute; z-index: 999; width: 40%; margin-left: 30%; border: 2px solid #3282b6; padding: 10px; background-color: #fff; } Similar TutorialsThe css menu I have here on my site flickers when the mouse is moved from a parent category to the sub page menu. For example, if I hover on 'The Academy' link and move to the drop down menu, the sub menu disappears for a second. Any ideas how I can remedy this? Hello CSS Readers & Experts, I have a very common problem that Ive done some searches on, but yet to find the solution. My Image Rollover flickers. You can view this problem at www.clickcolumbia.com/onlinecommunity im guessing it has somethin to do with my css, heres the code a.mainlevel:link, a.mainlevel:visited { display: block; background: url(../images/menu_bg.png) no-repeat; vertical-align: middle; font-size: 11px; font-weight: bold; color: #ffffff; text-align: left; padding-top: 5px; padding-left: 18px; height: 20px !important; height: 25px; width: 100%; text-decoration: none; } a.mainlevel:hover { background-position: 0px -25px; text-decoration: none; color: #333333; } Please help I have had this bug in another web I built. I use a centered fixed layout with a relative positioned container and floated divs inside. In Firefox, when I rollover on a link in the menu the contents of some divs show over all content as if they where triggered by the rollover. I have no idea why this happens. Please check this link and rollover the links on the left column to see the bug. You'll see how the comments show again over themselves and the rest of the content. Very weird! Thank you! i have a layout that I am trying to get to work that I need some help with. I am getting records from a database and then displaying them side by side such as: header record1 record2 record3 record4 column1 column1 column1 column1 column1 column2 column2 column2 column2 column2 column3 column3 column3 column3 column3 column4 column4 column4 column4 column4 what I want is for the page to have to scroll to the right when lots of records are present, what happens now is that say record4 starts a new line and will be under the rest of the records not are their side. I can get it if I set the div container's width to something like 10000px but that wont work as sometimes they may be longer or shorter and I dont want a lot of white space to the right side. I want this accomplised dynamically so no matter how wide it is, it will show them all. I tried overflow: scroll but that didn't seem to work. Here is the code, its in php but its not big or too hard to figure out. PHP Code: echo '<div id="tableheader">'; for ($i=0; $i<count($info); $i++) { echo '<p>'.$info[$i][name].'</p>'; } echo '</div>'; for ($i=0; $i<count($data); $i++) { if (!($i & 1)) { echo '<div class="even">'; } else { echo '<div class="odd">'; } for ($j=0; $j<count($data[$i]); $j++) { if ($j == 0) { echo '<p><a href="homedata.php?record='.$data[$i][$j].'">'.$data[$i][$j].'</a></p>'; } else { echo '<p> '.$data[$i][$j].' </p>'; } } echo '</div>'; } echo '</div>'; ?> </div> and my css is: Code:
#tableData {padding: 0; margin: 0; border: 0; width: 10000px;}
#tableheader {background-color: #ACACAC;position: relative; float: left;}
.odd {background-color:#C0D8E1; position: relative; float: left;}
.even {position: relative; float: left;}
#tableData p {padding: 0 3px; margin: 0; border-right: 1px solid black; border-bottom: 1px solid black;display: block;}
Any ideas? Thanks Hello, I need some help. I have a personals website where I am going to start allowing users to personalize their profile page with css. My plan is to store their personal css scripts in a database and when their profile is viewed to dynamically load the css styles per individual. My question is, how do I implement this? How would I load style scripts from the database onto their page? One question that may negate my above question is...is this the best way to implement this type of feature (profile personalization)? I beleive css is powerful and probably the best way to go but I am open to anyone elses ideas for css implementation. Thank you very much for your time and help. I have a page that will not load external CSS. Tested in Firefox and Opera. If I remove the doctype then the CSS loads and affects the page. This is the HTML: Code: <!DOCTYPE HTML PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'> <html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'> <head> <title>Insert Notes</title> <meta http-equiv='content-type' content='text/html; charset=utf-8' /> <meta http-equiv='cache-control' content='no-cache' /> <meta http-equiv='pragma' content='no-cache' /> <meta http-equiv='expires' content='0' /> <link rel='stylesheet' type='text/css' href='/test.css' /> </head><body> <h1>Beer</h1> <p>test</p> </body></html> And this is the CSS: Code:
body{ background-color: gray;}
p { color: blue; }
h1{ color: white; }
Just wondering if there is such code that when you click something it replaces a certain item to a different item? Or is it Javascript? Any websites that feature this? When I scroll up and down my page, parts of my background image I have set (aka sliding door or box or container...) disappears!!! I don't understand, I tried getting rid of all the color and hover options and it still doesn't work right. I posted my code below if someone can help me!!! If needed I can always email the images if you can't work without them, I just need to get this figured out! Thanks a bunch!! Toni Lynne HTML <td width="247" class="splitright"> <div class="box"> <div class="box-outer"> <div class="box-inner"> <h2>Welcome to Joy!</h2> <p>Pastor Steve and Kim Schmelzer would like to thank you for viewing this site and blah blah blah blah. Enjoy! Pastor Steve and Kim Schmelzer would like to thank you for viewing this site and blah blah blah blah. Enjoy!</p> <br /> </div></div> </div> </td> CSS /* background box */ .box { background: url(images/bottom-left.gif) no-repeat left bottom; } .box-outer { background: url(images/bottom-right.gif) no-repeat right bottom; padding-bottom: 4%; } .box-inner { background: url(images/top-left.gif) no-repeat left top; } .box h2 { background: url(images/top-right.gif) no-repeat right top; padding-top: 4%; } .box h2, .box p { padding-left: 4%; padding-right: 4%; } .splitright { background: #ffffff; width:38%; float: right; overflow: hidden; text-align:justify; } a:link { color: #fea11d; text-decoration: none; } a:hover { color: #999999; text-decoration: none; } I have a div that uses overflow:scroll to allow a large amount of text to fit into a small space. Is there a way to make it so that when this div is loaded, it will scroll to the bottom of its contents instead of starting at the top by default? Thanks for any help. OK, I have a static sub-navigation on the left side of the page, which works just fine. You can see it here I'd like the sub-navigation to scroll to just beneath he header navigation, then stay put there, when the page is scrolled. Something like the Vogue web site does with the red navigation bar, which you can see here Can someone please explain, or give me an idea of how to accomplish this? I think it is with CSS. thanks alright I'm stumped so please please please help me out! I have a page that's 100% in height, and usually there's more information so you have to scroll down. but I can't seem to activate the scrollbar. I've tried overflow, messing with the height attribute, i have no idea how to solve this. my page: http://www.aapinboom.nl/luxeduinvil...ntroductie.html and this is the code: Code:
html,body {
background-image: url('../images/bg.gif');
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
font-family: "Trebuchet MS";
font-size: 13px;
height: 100%;
}
#center {
text-align: center;
width: 100%;
height: 100%;
}
#container {
margin-left: auto;
margin-right: auto;
width: 600px;
height: 100%;
border: 1px solid #B8B8B8;
background-color: #FFFFFF;
text-align: left;
}
thanks for any suggestions! Link To Site Dear CSS Guruz If you goto this page in IE and scroll down you will notice the text "Power, Safety, Simplicity, etc" Dissapears! This does not happen in Firefox. It could be a javascript issue but Im not really sure. Anybody have any clues what could cause this? Louis Hey all, I have a webpage w/a top, left column, and content column. The page has been designed using CSS. Is there anyway to load a seperate HTML page (of which I have no control) in my content column and keep the top (and possibly left) columns in place? Is there a way to do this w/CSS? (Basically I want frame functionality using CSS). So far my instincts say no... but before I spend too much time on solution I thought I'd check here. Thanks! BB Hello, Here's a link to a very short video (MOV format) showing the issue that I'm having. I'm guessing that it's CSS related. It seems like the screen update shouldn't be so obvious. The graphics involved are very small, as well. What could be causing this? Thanks for any help! blendernewbies dot com slash tmp slash screen_update_issue dot mov EDIT: well, it seems I can't post links! How am I supposed to accurately convey the issue without wasting people's time trying to describe it? Sigh. I will try to post the link in a written out format. I hope it doesn't violate anything doing it that way. The video is hosted on my own server and is about 800KB. Thanks. Hello dear programers This my problem If anyone can help me,I will be so thanksfull,: I have a full site script package which is in php,(I dont knoe php !! ) There is a style.css file,which I could change in colors and fonts,...but I want to change a page with new design and colors and style,I tried to edit style.css file (I deleted,changed it :/body, td, .forTexts/ but NOTHING happend!!)to make this page OK,But I couldnt,page doesnt load with its fonts and colors. ------------------------------------------ I past the original style.css : form { margin-top: 0px;margin-bottom: 0px;margin-left: 0px;margin-right: 0px;} .toptable { background-color: FF8D00; } a.toplink, a.toplink:hover, a.toplink:visited, a.toplink:active { color: white; text-decoration: none; } .forCopyright { font-family: Times New Roman; font-size: 11px; color: #EDD1D7; text-align: center; background-color: ff8d00; } body, td, .forTexts { font-family: Times New Roman; font-size: 13px; color: #000000; } a.menutxt, a.menutxt:hover, a.menutxt:visited, a.menutxt:active { font-family:Times New Roman; font-size: 13px; color: #F3FBB4; } .menutxt { font-family: Times New Roman; font-size: 12px; color: #000000; } th { font-family: Times New Roman; font-size: 12px; color: #000000; } .title { font-family: Times New Roman; font-size: 12px; color: #FFFFFF; background-color: #FF8D00; } .inpts { font-family: Times New Roman; font-size: 12px; color: #5D0400; background-color: #D1CDFF; border: 1px inset #000000; border-color: #000000; border-style:dashed; } .sbmt { font-family: Times New Roman; font-size: 13px; color: #1D0067; background-color: #cccccc; border: 5px outset #ffffec; } a.hlp, a.hlp:active, a.hlp:visited, a.hlp:hover { font-family: Times New Roman; font-size: 13px; color: black; text-decoration: none; cursor: help;} .line { background-color: 000000; } div.framebody { text-align: left; } td.inheader { background-color: cccccc; font-weight: bold; text-align: center; padding-left: 2px; padding-right: 2px; padding-top: 2px; padding-bottom: 2px; } td.item { background-color: cccccc; } h3 { font-weight: bold; font-size: 12px; } td.gray { color: gray; -------------------------------------------------------- and this is my new page styles : .style1 { color: #4c687e; font-weight: bold; font-size: 11px; font-family: Arial; } .style2 { font-family: Tahoma; font-size: 10px; } .style3 { font-size: 12px; font-weight: bold; color: #FFFFFF; } .style4 { font-family: Tahoma; font-size: 11px; font-weight: bold; color: #c10416; } .style5 {color: #FFFFFF} .style6 { font-size: 11px; font-weight: bold; } .style8 {font-family: Tahoma; font-size: 10px; color: #4c687e; } .style9 {font-size: 12px} .style10 { color: #0a2c50; font-family: Tahoma; font-size: 11px; } .style11 {color: #66809b} .style12 {color: #c10416} .style13 { font-family: Tahoma; font-size: 11px; font-weight: bold; color: #FFFFFF; } --------------------------------------------------- If I change the fonts and colors in new page manually,The page doesnt come up at all. please help me if you can. best regards Bear with me please. I am brand new to html/CSS etc... I just cobbled together a page a few days ago using someone elses code as a reference, I hardly know what I did or how it works, but it works just like I want it to - Background centered and stationary (no scrolling with content), but the content does scroll, with NO horizontal scroll bar. You can view it he bit(dot)ly/rbsZsH - THIS IS WHAT I WANT MY OTHER PAGE TO DO Ok, so feeling smug, I tried to do another one like it, without the sidebar/header, etc... For the most part it works, EXCEPT - I have an unexpected horizontal scroll bar that goes about 50% across the browser and allows the user to pull the content off-center across the background. I have nearly pulled my hair out trying to fix it and put a hidden message under the content just for fun.. (make lemonade when you get lemons, right?) You can view second page he bit(dot)ly/qMbYl2 - THIS IS THE GOOFY PAGE The only real clue I have is that the first page is set to 780px wide and has this comment in the container div: /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */ My second page container div is set to 802px because I am using an image from Photoshop rather than a background color. Thank you if any of you can shed light on the situation. P.S. - I'm sure I've totally butchered the code, and you can assume when you answer that I can cut and paste but not really understand what you are saying. Hi all, I have written a page with jsp and ajax to dynamically load page contents. I also added a hidden "processing.." message image with the following code: Code: <img src="<%=IMAGE_BASE_URL%>/processing-img.gif" id="processing" style="display:none;z-index:2;position:relative;top:250;right:-250"> this img tag was placed right after the <body> tag. When the user clicks on a link, I turned this css property to display:block so that it shows in the middle of the page. But strangely, when it is showing the processing message image, the entire page content after the <img> tag was shifted down a bit and showing an empty row! Does anybody know what's wrong with it? I've tried to change the display to inline using javascript but it still won't help... Any help would be appreciated..thanks.. I am an art student, and I'm trying to construct my own portfolio site. I am, however, new to CSS, so I dont really know what I'm doing. I'm using Dreamweaver CS3. I'm using a fixed 2 column template, with header and footer, and the left column as the side bar. Within the right column, I'm trying to make a scrollbar hovering near the top of the div, with clickable thumbnails of my work. Once the thumbnails are clicked on, a larger version of the image takes up the rest of the column. Does anyone have any idea how to accomplsh this? Even my web design teacher's stumped with this one. I thought about using frames, but thats html... Hi Guys, I'm building some forms, and when they are submitted, I'd like to integrate a method that will fade out the screen a bit, and show an animated "processing" .gif. Basically when the "submit" button is pressed, the form is being submitted to it's destination. The page will hang on the form until the next page is ready to load. While it's hanging there after submitting, I'd like the screen to fade out, and display an image in the center of the screen. I'm hoping this can be achieved with CSS, as I try to use as little Javascript as possible. What's the best way to achieve this? I figure if anything a javascript "onsubmit" function will be a good start. Can the screen be faded with CSS? hello. i am having some trouble, my page has a scroll bar at the bottom but there is nothing there to scroll. It is only a centimeter or so but still aint good!! It is just background...yet i have not idea why, can anyone please help... I have pasted two stylesheets that im using there is also a text one but i doubt that is the prob!! Code:
body {
margin:0px;
padding:0px;
font-family: Georgia;
color:#333;
background-color:#FFFFD2;
}
h1 {
margin:0px 0px 15px 0px;
padding:0px;
font-size:28px;
line-height:28px;
font-weight:900;
color:#ccc;
}
p {
font:11px/20px Georgia;
margin:0px 0px 16px 0px;
padding:0px;
}
#Content>p {margin:0px;}
#Content>p+p {text-indent:30px;}
a {
color:#ffffd2;
font-size:13px;
text-decoration:none;
/*font-weight:600;*/
font: Georgia;
}
a:link {color:#ffffd2;}
a:visited {color:#ffffd2;}
a:hover {background-color:#A4AA54;}
a.blue {
color:#0000CC;
font-size:11px;
text-decoration:none;
font-weight:600;
font: Georgia;
}
a.blue:link {color:#0000CC;}
a.blue:visited {color:#0000FF;}
a.blue:hover {background-color:#eee;}
#logodiv {
position:absolute;
top:6px;
left:14px;
width:91px;
height:126px;
background-image: url(../images/logo/gglogoweb.gif);
background-position: 1% 2px;
background-repeat:no-repeat;
visibility: visible;
z-index:1;
}
#slogandiv {
position:absolute;
top:0px;
left:0px;
width:100%;
height:137px;
background-color:#A4AA54;
visibility: visible;
z-index:0;
/* This is a fix for IE% */
voice-family: "\"}\"";
voice-family:inherit;
height:137px;
width:100%; /* the correct height */
}
/* "be nice to Opera 5" */
body>#slogandiv {height:137px; width:100%;}
#MenuBar {
position:absolute;
top: 136px;
left:0px;
width:100%;
height:32px;
padding-bottom:2px;
background-color:#667138;
border-bottom:0px solid #A4AA54;
line-height:17px;
z-index:1;
/* Again, the ugly brilliant hack. */
voice-family: "\"}\"";
voice-family:inherit;
height:32px;
}
/* Again, "be nice to Opera 5". */
body>#MenuBar {width:100%; height:32px;}
#Content {
position:absolute;
top: 175px;
left: 185px;
width: 81%;
padding:15px;
border: 0px solid #000000;
background-color:#ffffd2;
z-index:0;
}
body>#Content {width:81%;}
#Menu {
position:absolute;
top: 166px;
left:0px;
width:150px;
padding:10px;
background-color:#667138;
border-right:2px solid #A4AA54;
border-top:0px solid #A4AA54;
line-height:17px;
/* Again, the ugly brilliant hack. */
voice-family: "\"}\"";
voice-family:inherit;
width:150px;
}
/* Again, "be nice to Opera 5". */
body>#Menu {width:150px;}
and the other Code:
/* CoolMenus 4 - default styles - do not edit */
.clCMAbs{position:absolute; visibility:hidden; left:0; top:0}
/* CoolMenus 4 - default styles - end */
/*Style for the background-bar
.clBar{position:absolute; width:10; padding-right:10; height:10; background-color:#667138; layer-background-color:yellow; visibility:hidden}
/*Styles for level 0*/
.clLevel0,.clLevel0over{position:absolute; padding-top:3px; font-family:georgia; font-size:12px; font-weight:bold; text-align:center; }
.clLevel0{background-color:#667138; layer-background-color:#667138; color:#ffffd2;}
.clLevel0over{background-color:#A4AA54; layer-background-color:#A4AA54; color:#ffffd2;; cursor:pointer; cursor:hand; }
.clLevel0border{position:absolute; visibility:hidden; background-color:#667138; layer-background-color:#667138}
/*Styles for level 1*/
.clLevel1, .clLevel1over{position:absolute; padding:2px; font-family:georgia; font-size:11px; text-align:center;}
.clLevel1{background-color:#667138; layer-background-color:#667138; color:#ffffd2;}
.clLevel1over{background-color:#A4AA43; layer-background-color:#A4AA54; color:#ffffd2; cursor:pointer; cursor:hand; }
.clLevel1border{position:absolute; visibility:hidden; background-color:#A4AA54; layer-background-color:#A4AA54}
/*Styles for level 2*/
.clLevel2, .clLevel2over{position:absolute; padding:2px; font-family:tahoma,arial,helvetica; font-size:10px; font-weight:bold; text-align:center;}
.clLevel2{background-color:Navy; layer-background-color:Navy; color:white;}
.clLevel2over{background-color:#0099cc; layer-background-color:#0099cc; color:#667138; cursor:pointer; cursor:hand; }
.clLevel2border{position:absolute; visibility:hidden; background-color:#006699; layer-background-color:#006699}/* CSS Document */
i can paste the php file too if needed but it iwll have to be in another post because im running out of spce in this one!! If anyone can help that would be really appreciated! Thanks very much RF |
|||||||