CSS - Bad Interaction Between Css-positioned Image And Widget

This could have been posted in the DHTML forum, but I'm guessing the problem is with my CSS bits rather than the DHTML as such so I'm posting here.

I've created a 'working' overlay for a page which has quite a bit of AJAX interaction. The connection the page will be used on is quite slow so I pop up a full screen table with 50% transparency to dim the main page, and the table has a box in the middle informing the user that the page is doing some work in the background.

This works great in IE and FF, but in Chrome and Safari the overlay seems to be preventing any interaction with the pages WHEN IT IS HIDDEN.

This is the correct/desired behaviour when the overlay is displayed - ie when the comms with the backed are happening I don't want the user to be able to push any other buttons or edit any other form elements - but when the layer is hidden (CSS = visibilty: hidden; display: none the layer still seems to prevent the user from clicking any of the controls (buttons, text fields, links etc).

The reason I think it is the overlay layer doing this is that if I double click anywhere on the page, the area that 'working...' overlay displays in when it IS displayed becomes selected/highlighted.

Is this a webkit oddity or am I doing something wrong?

(To display the overlay I just switch the CSS of that particular DIV to "visibility: visible; display; block", but I have also tried "display: inherit;" and "display: inline;").

Thanks,

FM

Hey guys,

I am in the process of adding a Twitter widget onto my website. I would like it to be very similar to that on http://www.spotify.com/us/about/what/. I am not sure how to edit the currently provided Twitter widgets to resemble that... Has anyone any idea?

PS. I am looking for a programmer for my startup company. No cash, but rather equity. We need someone fluent in PHP.

Anyone have a clue what I can add to this code to get it working right?!

Here is the code for one of them...

Code:

 <!-- AddThis Button BEGIN --> <td class="vbmenu_control" id="facebook" nowrap="nowrap"> <script type="text/javascript">var addthis_config = {"data_track_clickback":true};</script> <div class="addthis_toolbox addthis_default_style"> <a class="addthis_button_facebook"></a> </div> <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=***"></script> </td> <!-- AddThis Button END -->

Here is how it looks in FF...

http://i34.tinypic.com/28it845.jpg

Here is how it looks in IE...

http://i34.tinypic.com/27yanvb.jpg


Thanks for your help!!!

Hi,

Trying to get this widget to disappear using responsive design when the browser is less than 800px.

I'm using WordPress and the theme is already responsive.

Here's the media query in the style sheet now:

@media only screen and (max-width: 800px) {

/* and I added this part below (not working!) */

.page-title .widget-area {
display:none !important;
}

}

Please see http://simplemethod.ca to check it out. I'm trying to remove my big fancy title widget with the signup form in it (since it breaks in an ugly way when the responsive design kicks in!)

Thanks for helping friends. I hope my post made some sense! Perhaps I'm using the wrong class names for the style change... This part has got me a bit stumped.

Best Regards,

Drew

Hi,

I have created a accordion menu using a spry widget built into Dreamweaver CS3. However I want to amend this so that the menu is collapsed until the user clicks on a category.

Do I have to amend the CSS or the javascript to make it collapsed to begin with?

Any help would be appericated.


Thanks
Gary

I have a Calendar of Events that I actually made quite a while ago, and it works great, but now I'm incorporating it into a different site... I used to handle the events on the calendar with absolutely positioned spans, but I'm going to try and do something a little different (being able to have tooltip like hovers with the possibility of using lists in the hover), and you can't do that with spans... but my css doesn't seem to be behaving properly.

I've got some example data, the event(bitcalevent) is supposed to sit on the bottom of the day(bitweek div), but it doesn't... when it was a span it did (though I had to add border:0 and width:100%)... maybe there is another rule that I'm not seeing that isn't letting this happen???

[edit]Note that I made the bottom -10px just so it looks ok for now... but it's like it's not separating the bottom from the top... [/edit]

How do I apply a css drop shadow around the search widget generated by this script code?
Code:

<script type="text/javascript" src="http://cdn.widgetserver.com/syndication/subscriber/InsertWidget.js"></script><script type="text/javascript">if (WIDGETBOX) WIDGETBOX.renderWidget('dfacd65d-6514-4845-ad81-7249d33a6280');</script>
<noscript>Get the <a href="http://www.widgetbox.com/widget/college-search">College search</a> widget and many other <a href="http://www.widgetbox.com/">great free widgets</a> at <a href="http://www.widgetbox.com">Widgetbox</a>! Not seeing a widget? (<a href="http://support.widgetbox.com/">More info</a>)</noscript>

Novice at CSS. I have a Blogger website. I'm trying to put a CSS dropdown menu. In Safari, it works fine. Don't have access to Firefox, so I don't know, but in IE (6&7) the dropdowns are hidden behind any other widgets on the page.
I've seen plenty of forum posts regarding this issue with flash player, but none specifically addressing IE and Blogger widgets.

I've tried adjusting z-index in each li, ul.
I'm still really new at this, so I'd appreciate any help and specific guidance you can offer.

Website: crossfit-hr.com

CSS code (source from CSS MENU MAKER):
.menu{
width:945px;
border:none;
border:0px;
margin:0px;
padding:0px;
font-family:verdana,geneva,arial,helvetica,sans-serif;
font-size:12px;
font-weight:bold;
font-color:#FF0000;
z-index:200;
}
.menu ul{
background:url(removed for thread) top left repeat-x;
height:43px;
list-style:none;
margin:0;
padding:0;
}
.menu li{
float:left;
padding:0px 8px 0px 8px;
z-index:200;
}
.menu li a{
color:#000000;
display:block;
font-weight:bold;
line-height:43px;
padding:0px 10px;
text-align:center;
text-decoration:none;
}
.menu li a:hover{
color:#FF0000;
text-decoration:none;
}
.menu li ul{
background:#e0e0e0;
border-left:2px solid #0079b2;
border-right:2px solid #0079b2;
border-bottom:2px solid #0079b2;
display:none;
height:auto;
filter:alpha(opacity=95);
opacity:0.95;
position:absolute;
width:150px;
z-index:10000;
/*top:.5em;
/*left:0;*/
}
.menu li:hover ul{
display:block;
}
.menu li li {
display:block;
float:none;
padding:0px;
width:150px;
z-index:200;
}
.menu li ul a{
display:block;
font-size:12px;
font-style:normal;
padding:0px 8px 0px 8px;
text-align:left;
}
.menu li ul a:hover{
background:#949494;
color:#FF0000;
opacity:1.0;
filter:alpha(opacity=100);
}
.menu p{
clear:left;
z-index:200;
}
.menu #current{
background:url(removed for thread) top left repeat-x;
color:#FFFFFF;
}
=========================

HTML code for Widget:
<div class="menu">
<ul>
<li><a id="current" href="(removed for thread)" target="_self" >Home</a>
</li>
<li><a href="" target="_self" >Methods & Results</a>
<ul>
<li><a href="(removed for thread)" target="_self">Our Methods</a></li>
<li><a href="(removed for thread)" target="_self">See the Results</a></li>
</ul>
</li>
<li><a href="" target="_self" >How to Start</a>
<ul>
<li><a href="(removed for thread)" target="_self">Starting Options</a></li>
<li><a href="(removed for thread)" target="_self">Sign-Up Form</a></li>
</ul>
</li>
<li><a href="" target="_self" >Schedule & Prices</a>
<ul>
<li><a href="(removed for thread)=dctrh782_10dsmgnqhq" target="_self">Class Schedule</a></li>
<li><a href="(removed for thread)" target="_self">Prices</a></li>
</ul>
</li>
<li><a href="(removed for thread)" target="_self" >Coaches</a>
</li>
<li><a href="" target="_self" >Admin & Media</a>
<ul>
<li><a href="(removed for thread)" target="_self">Online Payments</a></li>
<li><a href="(removed for thread)=0" target="_self">Release Form</a></li>
<li><a href="(removed for thread)" target="_self">CFHR Photos</a></li>
<li><a href="(removed for thread)" target="_self">CFHR Videos</a></li>
</ul>
</li>
<li><a href="(removed for thread)" target="_self" >Contact</a>
</li>
</ul>
</div>

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

Hey all,

I am creating a site which sells Three 3G Mobile Phones and at the bottom of the pages i have a footer which is included into each page, see here.

If you view the site in Firefox then the footer is in the correct place and rests just where the main content finishes. However in IE the footer is miles down the page creating a box effect arround the content which to be honest looks crap.

If anyone would be so kind as to give me an idea why this is happening then i would be very grateful.

Also, there are many sites around which give tutorials etc about text decoration and such with CSS, but i am yet to find a really good begginers tutorial on how to layout a page with CSS and Divs, does anyone know of one?

Thanx for reading.

CSS Code (siteInfo is the footer in question:
Code:

#masthead{
	padding: 0px 0px 0px 0px;
	border-bottom: 1px solid #cccccc;
	width: 100%;
}

#navBar{
	float: left;
	width: 15%;
	margin: 0px;
	padding-right: 2px;
	height: 100%;
}

#headlines{
	float:right;
	width: 45%;
	padding-right: 2px;
}

#content{
	float: left;
	width: 70%;
	padding: 0px 0px 0px 0px;
	background-color: #FFFFFF;
	position: inherit;
}
#siteInfo{
	clear: both;
	font-size: 75%;
	color: #FFFFFF;
	padding: 10px 10px 10px 10px;
	text-align: center;
	background-color: #CCCCCC;
	border-top: 1px solid #107FA4;
	position: relative;
	font-weight: bold;
}

Edited to add CSS.

hey guys

JonnoWalmsley.com is giving me grief. I have a nav bar which is position:absolute; bottom:0px (so stuk to the bottom of the screen at all times, with the appropriate z-index etc).

It works fine on FF, but IE seems to be starting from the center of the page, which effectively pushes the nav bar over to the right, and partially off the screen on smaller screens.

Code:

<div style="position:fixed; bottom:0px; background-color:#0a2a1a; width:899px;">...nav links...</div>

I need IE to render the same as FF, and start the nav panel from the left.

Any ideas?

IE Screenshot
FF Screenshot

We don't use position absolute for anything else on our site, but it seems that our drop down still goes under some content.

Here is the css:

Code:

#nav {
	background-image: url('../images/nav-full-bg.jpg');
	background-repeat: repeat-x;
	width: 967px;
	height: 69px;
	padding: 0;
	margin: 0;
	overflow: hidden;
}

#nav, #nav ul { /* all lists */
	padding: 0;
	margin: 0;
	list-style: none;
	line-height: 1;
}

#nav a {
	display:block;
	padding: 11px 12px 13px 12px;
	font-weight:bold;
	font-size: 13px;
	font-family: "Trebuchet MS", Bitstream Vera Sans, Verdana;
	color: #626262;
	margin: 0;
	text-decoration: none;
}

#nav li { /* all list items */
	float: left;
}

#nav li ul { /* second-level lists */
	position:absolute;
	width: 200px;
	left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
	border-bottom: 2px solid #808080;
	background-image: url(../images/davidpng2.png);
	z-index: 900;
}

#nav ul li {
	float: left;
	width: 10em; /* width needed or else Opera goes nuts */

}

#nav li ul li a{
	padding:5px;
	display: block;
	width: 190px;
	color: #000;
	font-weight:normal;
	font-family:verdana;
	font-size:11px;

}

#nav li ul li a:hover{
	background-color:#a2c9f4;

}

#nav li ul ul { /* third-and-above-level lists */
	margin: -23px 0 0 200px;
;
}

#nav li ul li ul li a{
	display: block;

}

#nav li:hover ul ul, #nav li.sfhover ul ul {
	left: -999em;

	
}

#nav li:hover ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul { /* lists nested under hovered list items */
	left: auto;

}

Hi

I've come up on the old <select> elements showing through <div>s that are made visible on top of them.

What I want to do is find out the id's of the select elements under my <div> so that i can hide them using CSS / Javascript.

The basic layout of my page is a grid of <select> elements, each one of these would have a hidden <div> layer associated with it containing extra information etc.

By the side of each of the <select> elements is a little image / button that the user will click and the layer with the extra stuff in is made visible. The layer will overlap a number of <select> elements (not the parent <select> element).

Each <div> pops up in a different position (calculated dynamically as an x,y offset from the parent) can I find the Ids of the elements it overlaps?

Hope this is clear, and thanks in advance.

flipflops.

I have created a 2-column liquid layout that works perfectly in Safari, FF(Win & Mac), Netscape(Win & Mac), IE5(Mac) and IE6(Win).

In IE5 and 5.5 (Win) I don't get any images. the images are all position:absolute, with their containers set to position: relative. I tried them at first as simple image tags with a class assigned. I then tried to wrap them in Divs with ids. I also messed a little with the z-indexes. Nothing has worked so far.

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

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css" media="screen"><!-- @import url(css/base.css); --></style>
<style type="text/css" media="print"><!-- @import url(css/print.css); --></style>	
</head>

<body>
<div id="container">
<div id="head">
<div id="headerTitle"><img src="images/headerTitle.gif" alt="Ken Dalton" height="100" width="325" border="0"/></div>
<div id="headerGraphic"><img src="images/headerGraphic_Home.gif" alt="Header Graphic" height="100" width="400" border="0"/></div>
</div>
<div id="leftColumn">
<img src="images/typewriter_Home.gif" alt="typewriter" height="220" width="120" border="0"/>
<p class="linkSelectedTop1">Welcome</p>
<p class="link1"><a href="bio.php">Biography</a></p>
<p class="link1"><a href="blog.php?category=">Musings</a></p>
<p class="link1"><a href="guestBook.php">Guest Book</a></p>
<p class="link1"><a href="links.php">Links</a></p>
<p class="link1"><a href="mailto:ken@kendalton.com">Contact</a></p>
</div>
<div id="rightColumn">
<div id="rightPages48"><img src="images/rightPages48.gif" alt="graphic" height="600" width="48" border="0"/></div>
<div id="krdPortrait"><img src="images/krdPortrait.gif" alt="Portrait of Ken Dalton" height="200" width="175" border="0"/></div>
<h1>Welcome</h1>
<p class="clear">&nbsp;</p>
</div>
<div id="footer"><p>&nbsp;</p></div>
</div>
</body>
</html>

The CSS...

html {
height: 100%;
margin: 0 auto;
padding: 0;
text-align: left;
background-color: #000000;
}

body {
height: 100%;
margin: 0;
padding: 0;
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 80%;
background-color: #000000;
}


a {
text-decoration: none;
color: #A50023;
}

#container {
position: relative;
margin: 0;
padding: 0;
min-height: 100%;
}

* html #container {
height: 100%;
}

#head {
position: relative;
background-image: url("../images/headerBlend.gif");
background-repeat: repeat-x;
background-position: 0 0;
text-align: left;
margin: 0;
padding: 0;
height: 100px;
}

#headerTitle {
position: absolute;
top: 0;
left: 0;
z-index: 10;
}

#headerGraphic {
position: absolute;
top: 0;
right: 0;
z-index: 9;
}

#rightPages48 {
position: absolute;
top: 0px;
right: 0;
z-index: 10;
}

#krdPortrait {
position: absolute;
top: 0px;
right: 64px;
z-index: 10;
}

#leftColumn {
float: left;
top: 100px;
left: 0;
z-index: 10;
width: 120px;
margin: 0;
padding: 0;
background-color: #000000;
text-align: right;
}

#leftColumn p {
font-weight: bold;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 0px;
padding-right: 9px;
padding-top: 3px;
padding-bottom: 3px;
}

#leftColumn a {
color: #BFA673;
}

#leftColumn a:hover {
color: #A50023;
}

.link1 {
border-top: 1px solid #606880;
margin-top: 0px;
margin-bottom: 0px;
padding-right: 9px;
padding-top: 3px;
padding-bottom: 3px;
}

.linkSelected1 {
color: #A50023;
border-top: 1px solid #606880;
margin-top: 0px;
margin-bottom: 0px;
padding-right: 9px;
padding-top: 3px;
padding-bottom: 3px;
}

.linkSelectedTop1 {
color: #A50023;
margin-top: 0px;
margin-bottom: 0px;
padding-right: 9px;
padding-top: 3px;
padding-bottom: 3px;
}

#rightColumn {
position: relative;
min-height: 100%;
margin: 0;
margin-left: 120px;
padding: 0;
background-image: url("../images/rightColumnFill48.gif");
background-repeat: repeat-y;
background-position: 100% 0%;
background-color: #FFFFFF;
text-align: left;
}

* html #rightColumn {
height: 100%;
}

#rightColumn h1, h2, h3, h4, h5, h6, p {
margin-left: 36px;
margin-right: 320px;
margin-top: 0px;
margin-bottom: 0px;
}

#rightColumn h1 {
font-size: 200%;
color: #606880;
padding-top: 36px;
}

#rightColumn p {
color: #333333;
margin-top: 9px;
}

#clear {
width: auto;
height: 500px;
margin-right:48px;
margin: 0;
padding: 0;
margin-right:48px;
background-color: Transparent;
}

#footer {
width: auto;
height: 72px;
margin: 0;
padding: 0;
background-color: #000000;
}

#footer p {
margin-top: 36px;
}

Hi,

I have to managed site looking like this http://www.kuczyn.com/ using css. Now, I have only one problem left that I cant fix by myself - the ^&%$# footer positioning. It seems to work ok in IE (staying always at the bottom of the page, and if the content is stretching the page, then staying at the bottom of it) but it fails to work in Firefox win 1.06 and Opera win 8.

Please, help me if you can, because Im going to crash my head on the wall with this bug

Thanks for any advice!