CSS - Screen Update Issue When Loading Page Elements

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;
}

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

Hi,

Can somebody help me to style elemnts on the page using % as unit of measurement & relative positioning so they'd look like

-- - 20% - -- - 80% -
+----------+----------+
| Element3 | Element1 |
+----------+----------+
----------- | Element2 |
----------- +----------+
----------- | Element4 |
----------- +----------+

or even better like

-- - 20% - -- - 80% -
+----------+----------+
| Element3 | Element2 |
+----------+----------+
----------- | Element1 |
----------- +----------+
----------- | Element4 |
----------- +----------+

The html can be as simple as

Code:

<div id="Element1">Element1</div>
<div id="Element2">Element2</div>
<div id="Element3">Element3</div>
<div id="Element4">Element4</div>

I just figured out how to make a cool navigation bar with css, but adjusting the links in the bar also changes the style of all my other links on the page.

Is it possible to have two sets of link styles, one that only applies on the navigation bar and one that only applies on my other text?
The navigation bar and text each have their own div, if that helps at all.

How would you go about this?

Below is a sample of my CSS page, I'm having an issue with the floats that are commented out, they are affecting my th even though I haven't actually classed anything in my html... Any ideas?

<code>
/* CSS Document */

body {
margin: 0;
padding: 0;
background-color: #000;
color: white;
font-family: "Lucida Grande";
font-size: x-small;
}
table.outer {
border:1px solid #fff;
width: 178px;
}
/*.left {
float: left;
}
.right {
float: right;
}*/
table {
clear: right;
width: 700px;
line-height: 1.4em;
border-collapse: collapse;
border: 1px solid #000;
color: white;
background: #000;
font-family: "Lucida Grande";
font-size: x-small;
}</code>

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

Ok well the boss asked me to do a XHTML/CSS version of the website and get it up to snuff with web standards. Now I've done the coding to get the site to look the same in XHTML as it did before in HTML and tables... but there is one catch. I can't quite get my head around the easiest way to deal with captions underneath pictures. For example look at this page:

http://www.zeroonedesign.com/aboutus.html

Now in my version I haven't got the picture of the guys, or the "navigating our portfolio" bit.

Take a look at my version he

http://obelix.ca/zeroone/aboutus.html

I was thinking about creating little block divs and positioning them absolute on the page... but that doesn't seem like much of a solution as I could see the stylesheet growing considerably if there was a page with a lot of these pictures with captions. Any reccomendations? How do you guys do captions with pictures?

Hi,

I've been trying to integrate my blog into my website to look exactly the same. I am using the same style sheet for my blog as for the rest of my website.

Somehow, my logo and fonts and pictures are all smaller on the blog than on the real site.


I did a 'view source' and then pasted that into a file called test.php and testing different changes to my css from that file so it doesn't affect the rest of my site. The code is very similar between my regular site pages and my blog pages because I copied much of the header stuff directly into my blog template. I am totally perplexed as to the incredible shrinking page element dilemma.

I'm not sure how much code to paste in here to get the best help. What do I need to provide you to help me troubleshoot?

Any ideas?

pe123

Hi.

I have a question about how to edit specific elements in a profile page.


Take this as an example;
worldwideweb.teenspot.com/profiles/Mumfie

Scroll down and look at the box named "Specifics".
Lets say I want to edit "Location" in that section from Norway to Sweden by using CSS. What is the procedure I should follow?
The page allows you to edit CSS in an advanced page editor.

Should I search up the source for that page and do some modification by pasting a new code?

I'm working on a site with a div element with a fixed position, some 800 pixels from the left. The site is optimized for 1024x768. However, if a user with a resolution of 800x600 views the page, this div element will be missing, and the user won't be able to scroll over to see it. Is there some way I can get around this?

One idea would be to align the div on the right instead of the left, but I don't want a lot of whitespace between my content (on the left) and my div (on the right). I was hoping that I could specify a parent element with a relative position, and that position: fixed would reference the position of the parent element, but that only seems to work when the child div element is position:absolute, not position:fixed.

Thanks for any insight.

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..

Hi,

I am a wannabe css compiler...

Have the following problem.

wrote css for a square screen monitor and placed css box in an area to the right of center, my partner called and told me it sat to the left over the side menu onher wide screen.

I cannot figure out how to compensate the (top/left) position to cover both type screens...

Anyone help me?

Hello all,

I'm having a bit of trouble with a list of relative, floated <li> elements, each containing a single absolutely positioned div that appears on hover. I'm using the :hover pseudo-class currently but I will use JavaScript for IE6 once it displays correctly.

The code is below. The problem is that the <div> appears on top of it's parent element but behind all other elements.

Code:

		#wrapper-body ul.staff-list{
			list-style-type:none;
			padding-top:10px;
			position:relative;
		}
	
		#wrapper-body ul.staff-list-team{ width:313px; padding-top:0; padding-bottom:15px; margin-bottom:20px; border-bottom:1px solid #d7e3a9; }
	
			#wrapper-body ul.staff-list li{
				float:left;
				width:230px;
				position:relative;
				padding:8px 0 8px 15px;
				z-index:1;
			}
			#wrapper-body ul.staff-list-team li{ width:151px; padding-left:0; padding-left:5px; }
			#wrapper-body ul.staff-list-team li.right{ padding-left:5px; }
			#wrapper-body ul.staff-list-clerks li{ float:none; width:310px; padding-left:5px; }
			#wrapper-body ul li.highlight{ background-color:#f4f6ec; }
				#wrapper-body ul.staff-list li p{
					padding:0 0 9px 0;
					margin-left:91px;
				}
	
				#wrapper-body ul.staff-list li small{
					padding:0 0 5px 0;
					margin-left:91px;
				}
		
				#wrapper-body ul.staff-list-clerks li span{
					color:#A6302B;
					display:block;
					float:left;
				}
		
				#wrapper-body ul.staff-list-clerks li span.clerk-name{ width:140px; }
				#wrapper-body ul.staff-list-clerks li span.clerk-phone{ width:120px; background:url(../img/structure/clerks-phone.gif) 0 2px no-repeat; padding-left:23px; }
				#wrapper-body ul.staff-list-clerks li a.clerk-email{ display:block; float:left; height:16px; width:16px; background:url(../img/structure/clerks-mail.gif) 0 3px no-repeat; }
		
		
				#wrapper-body ul.staff-list li div.staff-list-detail{
					display:none;
					background:url(../img/structure/staff-list-bottom.gif) left bottom repeat-x;
					padding-bottom:3px;
					margin-top:-15px;
					left:4px;
					z-index:10;
					top:15px;
					position:absolute;
				}

				#wrapper-body ul.staff-list li div.staff-list-detail a{ background:url(../img/structure/staff-list-bullet.gif) no-repeat 0 4px; padding-left:8px; }

				#wrapper-body ul.staff-list li:hover div.staff-list-detail{
					display:block;
}

An image of what is happening below:


Thanks for reading!

Hi,

I'm working on my homepage at www.wecook.co.uk and want the grey background to at least be big enough to fill the whole page on most resoultions - currently on my monitor (1280 x 1024) it ends and i get a white at the bottom of the page - could someone suggest how i can adjust my css to fix this?

any help is appreciated.

thanks

I am trying to create a printable address book. The output is in the following format, with more tables for each entry:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>Header Test</title>
		<link rel="stylesheet" type="text/css" href="documents/directory/style.css" />
	</head>
	<body>
	<h1>Stanley Road Baptist Church</h1>
	<h2>Address Book 2005</h2>
	<div class="pagebreak"></div>
	<table>
	<tr>
		<th colspan="2">
			Joan Facer
		</th>
	</tr>
	<tr>
		<td>
			Abbeystead<br />New Road<br />Lancaster<br />Lancashire
		</td>
		<td>
		</td>
	</tr>
	<tr>
		<td colspan="2">
			<hr />
		</td>
	</tr>
	</table>
	<table>
	<tr>
		<th colspan="2">
			Matt Fletcher
		</th>
	</tr>
	<tr>
		<td>
			6 Baycliffe Crescent<br />Morecambe<br />Lancashire<br />LA4 4EQ
		</td>
		<td>
			01524 426559<br />
			matt@1stmorecambe.net<br />
			07792 148897
		</td>
	</tr>
	<tr>
		<td colspan="2">
			<hr />
		</td>
	</tr>
	</table>
	</body>
</html>

I am trying to make it so that it never breaks the page in the middle of an entry, but it will not play ball.

I am using the following CSS declaration to get the effect:

Code:

table {
	page-break-inside:avoid;
}

But it isn't working at all. Any suggestions?