CSS - Ie Bug With Jumping Div-tags

Hi,

If I have

Code:

#parent {
  background-color: red;
  padding: 2px;
  margin: 2px;
}

#child1 {
  float: left;
}

#child2 {
  float: left;
}
</style>

<div id="parent">
  <div id="child1">
   Some text
  </div>
  <div id="child2">
   Some text 2
  </div>
</div>

Then the two child divs will appear underneath the parent one, whereas I want the background from the parent one to be the backdrop for the two child divs. if I remove float: left then they appear in it, but underneath each other. I want them side by side.

Is this possible with css?

Hello, I have made playersnutrition.com

As you can see, when you go to another page, the menu dosent stay at the top. How do I make it stay at the top????

Hi,

I have been battling with this issue for a while now and need the community's help here.
I am not the sole developer on this project and it's kind of difficult to work through other people's code - plus, I'm a developer, not a designer.

Anyow. Have a look at this page:

Article on Jakarta Globe Site

I implemented the drop down for the 'share article' feature. I'm using scriptaculous and costum-built JS to achive the effect. It's all good in IE - but you can see that in FF, the bread crumbs jump to the right when the drop down is activated. I have tried to implement a 'clearit' div like this:

CF Code:

Code:

<div class="article-body">
<div id="clearit"></div>

CSS:

Code:

#clearit {
display: block;
clear:both; }

With the effect, that in FF, the whole article jumps down a few pixels when the drop down is activated. (The bread crumbs don't jump to the right anymore.

I'm at loss now. Here's the CSS code for the relavant div's:

Code:

#article-heading {
 border-top:solid 4px black;
 background:url(../images/objects/module-head-bg.gif) repeat-x top; 	height:26px; }
.article-heading span {
 display:block;
 float:left;
 padding:5px 15px 5px 10px;
 height:16px; }
#slidedown_share {
	position:relative;
	width:123px;
	height:137px;
	background:#f4f2e6;
	border-left: solid #000 1px;
	border-right: solid #000 1px;
	border-bottom: solid #000 1px; 
	text-align:left;	
	left:510px;
}
.article-body {
	border-left:solid 1px black;
	border-right:solid 1px black;
	border-bottom:solid 1px black;
	background-color:white;
	padding:10px;
	margin-bottom:8px;
	font-size:11px;
}

Does anybody have an idea why this is happening and how I can avoid it?

Thank you for your help

Adrian

I'm trying to use the CSS hover state that I found on CSS Ninja, but for some reason when I hover over the images, they keep bumping upward. I've gone line by line trying to figure out which one it is, and I think it's the position:absolute line under a.feature01 .overlay01 .caption01; however, I can't get it to stop doing it even if I change the position to relative, fixed, etc. I ran it through the CSS validator as well and got no errors.

Here is the CSS code

Code:

 a.feature01
{
	display: block;
	position: relative;
}


	a.feature01:hover .overlay01
	{
		position: absolute;
		width: 185px;
		height: 130px;
	}


		a.feature01 .overlay01 .caption01
		{
			position: absolute;
			height: 30px;
			line-height: 30px;
			width: 100%;
			text-indent: -9999em;
			color: #000;
			font-size: 11px;
			bottom: 0;
			overflow: hidden;
		}
		a.feature01:hover .caption01
		{
			text-indent: 10px;
			background: rgb(255,255,255);
			/* for browsers that know rgba */
			background: rgba(255, 255, 255, 0.75);
		}

We've got something odd happening on our site. Check out:

newser.com/story/82843/conan-obriens-twitter-woman-shows-class.html

If you leave your browser window alone for about 5 minutes, eventually the content on the page jumps down. If you scroll, or mouseover the window, it jumps back. Any ideas on the issue?

One thing to note -- we're watch for breaking news periodically -- when something big happens, we load a banner above the nav via AJAX. Seems like this may be a factor even though it's usually empty.

I am trying to teach myself doing a tableless website using css and I am starting with header then working my way down

I spent all day trying to serach a way to stop the right end image cap to jump down the next row when firefox width browser is shrinked down but it doesn't do that in IE ..


Here the url http://www.prismaze.com/ it showing only the header right now and it what I am having issue with .. there are 3 images in it .. left and right and the background ..

Here the html and css

<body>


<div id="logoheader">
<img src="templates/stlaware/images/stlaware_01.png" width="548" height="90" border="0" align="left" />
<img src="templates/stlaware/images/stlaware_05.png" width="55" height="90" border="0" align="right" />
</div>




</body>
</html>


------------------------
the css
------------------------

body {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
background-color : #FFFFFF ;
}
#logoheader {
background: url(../images/stlaware_03.png) repeat;
height: 90px;
width: 100%;
}



How do you stop image on the right side of the header (stlaware_05.png) from wrapping to the next row if Firefox browser is sized down in width?

Thanks ..

Bill

Please go to this page -

http://www.pacunionsonoma.com/real-estate-agent.asp?realtor=51

On the top right click on Active Listings

Then watch the top agent image, title, and intro text. It is out of place BUT only until the page finishes loading, then it "jumps" in place...

I've used css to change my alt tag text to be consistent in size and font to the rest of the site, however, a couple of my images are relatively thin, but are tall.

It seems that the alt tags get centered to the image, so you only see the middle of the tag, not the beginning and the end. Is there a way to wrap the text within the confines of the image.

Thanks.

Hi,

I have some code that looks like this .
#nav,#nav ul
which puts all the listed elements in a vertical list.
Now if I do ths
#nav ul..
this changes all the elemnts to a horizontal list.

What does the ',' do for the id css tags exactly as i thought it refered to nested <ul> lists but is doesn't.

Hello:

I am working on a website and cannot for the life of me figure out why the element called "innerloop" keeps appearing behind the menu element "nav". here is the html so far:
Code:

<title>Casa Grande Acclaim Realty</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="robots" content="index,follow" />


</head>

<body>
<div id="main">

	<div id="border"></div>

	<div id="contact_info">
	<p>Casa Grande Acclaim Realty<br/>
	11283 N. Henness Road<br />
	Casa Grande, Arizona 85194 <br />
	Phone: (520) 560-8366 <br />
	Fax: (520) 421-1444
	</p>
	</div>

	<div id="logo"></div>
	
	<div id="slogan">
	
	Serving All of Pinal County
	
	</div>

	
	<div id="nav">
	<ul>
	<li><a href="#">About Us</a></li>
	<li><a href="#">Our Listings</a></li>
	<li><a href="#">FAQs</a></li>
	<li><a href="#">Contact</a></li>
	</ul>
	</div>

<div id="innerloop">
lorem ipsizzum fo shizzle my bizzle
Blah blah blah blah blah blah blah
Blah blah blah blah blah blah blah
Blah blah blah blah blah blah blah
Blah blah blah blah blah blah blah
Blah blah blah blah blah blah blah
Blah blah blah blah blah blah blah
Blah blah blah blah blah blah blah
Blah blah blah blah blah blah blah
</div>		
		
</div>


</body>
</html>

And this is the css:
Code:

#main {
	width: 875px;
	background-color: white;
	border-style: inset;
	border-color: #800080;
	margin-left: auto;
	margin-right: auto;
	-moz-box-shadow: 5px 5px 5px 5px #008080;
	-webkit-box-shadow: 5px 5px 5px 5px 008080;
	box-shadow: 5px 5px 5px 5px 008080;
	-ms-filter: 

	}

#logo { 
	width:300px;
	height:170px;
	padding:0 0 0 0px;
	background:url(redonelogo.bmp) no-repeat;
	} 


#contact_info { 
		color: #800080;
		font-weight: 550px;
		font-variant: small-caps;
		font-size: 14px;
		float:right;
		padding-top:0px;
		padding-right:10px;
		}
#border {
	width: 875px;
	height: 57px;
	background-image: url(border.bmp);
	background-repeat: repeat-y;
	}

#slogan {
	float: right;
	font-variant: small-caps;
	margin-right:20px;
	padding-top:0px;
	font-size:18px;
	font-weight: 800px;
	text-align:right;
	color:#800080;
			}


#nav {
	width: 875px;
	float: left;
	margin: 0 0 1em 0;
	padding: 0;
	list-style: none;
	font-variant: small-caps;
	background-color: #FFFF00;
	border-bottom: 1px solid #008080; 
	border-top: 2px solid #008080; 
	margin-top: 10px;
	
	}

#nav li {
	float: left; }

#nav li a {
	display: block;
	padding: 8px 15px;
	text-decoration: none;
	font-weight: bold;
	color: #008080;
	border-right: 1px solid #ccc; }

#nav li a:hover {
	color: #800080;
	background-color: #fff; }

#innerloop
	{
	width: 860px;
	background-color: white;
	margin-left: auto;
	margin-right: auto;
	border-style: double;
	border-color: #800080;
	border-width: medium;
	
	}

I am rusty and stuck

I took out the html header stuff and stylesheet link to conform to forum rules

Thank you

I am having a heck of a time with this side sub-menu. I cannot seem to get the left margins to be equal in IE 6, 7 or 8?

My html:


Code:

<!-- show_menu2 -->
 <ul id="sub_menu" class="menu" style="margin-left:-5px;position: relative; background-color:#CFF">

    <li><a href="#" class="menu-expand menu-first navlev2" title="Project">Add-ons Project</a></li>
    <li><a href="#" class="menu-expand menu-parent navlev2" title="What Modules">Modules</a>
     <ul class="ullev3">
        <li><a href="#" class="menu-sibling menu-first navlev3" title="Modules Here">Module</a></li>
        <li><a href="#" class="menu-sibling navlev3" title="Admin Tools">Admin Tools</a></li>

        <li><a href="#" class="menu-current navlev3" title="Random">Code Snippets</a></li>
        <li><a href="#" class="menu-sibling menu-last navlev3" title="Droplet of Link">Droplets</a></li>
     </ul>
    </li>
    <li><a href="#" class=" navlev2" title="AMASP">AMASP</a>    </li>
    <li><a href="#" class=" navlev2" title="Templates">Templates</a> </li>

    <li><a href="#" class="menu-last navlev2" title="Backend Pages">Backend Themes</a></li>
 </ul>

  
          </div>
                          <!-- end of subnavigation --> 

My CSS:
Code:

#submenu
{
	padding: 0;
	/* [disabled]width: 247px; */
	/* [disabled]position: relative;
*/
	/* [disabled]left: -15px; */
}
#submenu a
{
	text-decoration :none;
	color :#5b9acf;
	padding-left :12px;
	display :block;
	background-image: url(../images/bullets_micro/square3.gif);
	background-repeat: no-repeat;
	background-position: 2px 50%;
}
#submenu a:hover
{
	color :#003366;
	background-image: url(../images/bullets_micro/square1.gif);
	background-repeat: no-repeat;
	/* [disabled]background-position: 4px 50%;
*/
}
#submenu a:active
{
	border: none;
}
#submenu a.menu-current
{
	font-weight :bold;
	color :#003366;
	background-image: url(../images/bullets_micro/asst3.gif);
	background-repeat: no-repeat;
	background-position: 4px 50%;
}
#submenu ul
{
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 0px;
	/* [disabled]margin-left: -25px;
*/
	/* [disabled]position: relative;
*/
	/* [disabled]left: -10px;
*/
}
#submenu ul li
{
	padding :5px 0;
	/* [disabled]line-height :1.4em; */
	font-size :12px;
	list-style-type :none;
	border-bottom :#cccccc 1px solid;
}
#submenu ul li.a
{
	padding: 0px 10px;
}
#submenu ul li li
{
	border-bottom :none;
	padding-bottom :0px;
	font-size :11px;
}
#submenu ul li li a:link,
#submenu ul li li a:visited
{
	color :#003366;
	background-image: url(../images/bullets_micro/diamond4.gif);
	background-repeat: no-repeat;
	background-position: 2px 50%;
}
#submenu ul li li a:hover
{
	background-image: url(../images/bullets_micro/diamond.gif);
	background-repeat: no-repeat;
	/* [disabled]background-position: 4px 50%;
*/
	color: #6DB9FA;
}
/* ====================== */

My test page: (pardon the blue background I just added this to see the container.)
http://new.ssmarts.org/page.html


Thanks so much.

Hello!

Can anyone help me with this one... I'm trying to figure out how to change the following css/html (or if it's even possible) so it still works after removing the surrounding <span> tag. (There is additional javascript which shows/hides the div but I've removed it so it's simpler to read).

So the current html below would be shortened to:

Code:

<a href="javascript:void(0);" class="sddm"><u>Settings</u>
<div id="m1" class="alignl">
<a href="#">HTML Drop Down</a>
<a href="#">DHTML Menu</a>
<a href="#">JavaScript DropDown</a>
<a href="#">Cascading Menu</a>
<a href="#">CSS Horizontal Menu</a>
</div>
</a>

ORIGINAL CSS/HTML:

Code:

<style type="text/css">

/* Drop Down Menu */

span.sddm {
	z-index: 30;
	white-space: nowrap;
	position: relative;
}

span.sddm a {
	text-decoration: none;
}

span.sddm a:hover {
	text-decoration: none;
	color: blue;
}

span.sddm div {
	position: absolute;
	display: none;
	margin: 0;
	padding: 0;
	background: #fff;
	border: 1px solid #3366cc;
	border-top: 1px solid #c9d7f1;
	border-left: 1px solid #c9d7f1;
	top: 18px;
}

span.sddm div a {
	position: relative;
	display: block;
	margin: 0px;
	padding: 2px 5px;
	width: auto;
	text-align: left;
	text-decoration: none;
	white-space: nowrap;
}

span.sddm div a:hover {
	background: #3366cc;
	color: #fff;
}

span.sddm .alignl {
	left: 0px;
}

span.sddm .alignr {
	right: 3px;
}

</style>

<span class="sddm">
<a href="javascript:void(0);"><u>Settings</u> <small>▼</small></a>
<div id="m1" class="alignl">
<a href="#">HTML Drop Down</a>
<a href="#">DHTML Menu</a>
<a href="#">JavaScript DropDown</a>
<a href="#">Cascading Menu</a>
<a href="#">CSS Horizontal Menu</a>
</div>
</span>

Hi, i have to display a list of links horizontally, wrapped in a <ul> tag. For seo reasons now these links have to be wrapped in <h2> tags. In IE6 + IE7 this causes a linebreak and the links are displayed in a vertical list.
sth like

#myId LI {
display:inline-block;
}
#myId LI H2{
display:inline-block;
}

solves the problem for Firefox but not for IEs. Do you know a solution? Would be highly appreciated!

here the html

<ul id='myId'>
<li><h2><a htref=...>somewhere</a></h2></li>
<li><h2><a htref=...>somewhere</a></h2></li>
</ul>


OK Found out a
float:left in the li
was missing

I want to center and element, more specifically div elements with css. I have looked through source code from many websites. It seems there is not a simple solution to centering text. I have tried using:
Code:

.content {
     align: center;
}

I would like my content to remain centered even when the browser is resized.

Instead for using "right: 400px" this works however for my resolution but not for the next guy.


I am lost and would like an explanation. For other thread there were vague mentions about rightmargin and left margin. Unfortunately experimenting proved unsuccessful; therefore, leading me to write this thread. I greatly appreciate all help provided.

Thanks

I am currently setting the body id of my pages to highlight what item I am on...
Such as:
body#news #news_tab a,
{
border-bottom: 1px solid #fff;
background: #fff;
color: #000;
}

But I was wondering if it was also possible to somehow make a div appear (changing display from hidden to block) by putting an id in the body tag....But since the div isn't a link, for some reason I can't make it work.

I tried:

Adding this div:
<div id="news" style="display:none">Testing Me</div>

Adding this body tag:
<body id="news">

And then adding this style definition:
body#news #news
{
display: block;
}

but it still doesn't display. Is this just not possible? Is there anyway around it?

Thanks!