CSS - A:active Makes Text Shift.

The index page of my site shifts to the far left in IE. The background does not move (stays in center) but the rest of the page shifts far left. It only happens on the index page all others are fine. I would link to it but I am new and cannot post links...any suggestions?

Thanks.

I've noticed when I am replacing my filler text with text that is not as long, Firefox is shifting my layout over to the right.

For instance look at a look of filler text:
http://www.jaycutler.com/Eumyotheria/the_beast/favorites.html

Now for the replacing text:
http://www.jaycutler.com/Eumyotheria/the_beast/contest_history.html

You will notice if you use the sidebar (or the top nav) the shift occurs when you visit a page with a lot of content. In IE it is fine, but Firefox doesn't like.

Not sure why as I use replaced text. Any ideas?

The stylesheet is located here if needed:
http://www.jaycutler.com/Eumyotheria/css/stylesheet.css

Thanks for your time and any help that you can pass on.

Brian

Hello,
i have a DIV in which i have put a javascript for my top advertisement banner.

This banner is one of those that when the user moves their mouse over it, it expands.. is there anyway i can make it so when the banner inside the div expands, the DIV height expands accordingly to the height of the banner? and when it collpases, the div will shift back to original height?

thanks

I'm having some trouble adding css code to my div well it works but when i try to copy the div and paste it right under it, it works (pic1) but ones i add the css code (pic2) they both stack on top of each other i used a site that convert psd's to css code thats how i got the code i have 0% css knowledge so i dont even know what my problem is called or else i would Google it so if any one can help or point me in the right direction would be highly appreciated thanks in advanced

of course change $ for links to work

htt$://i47.tinypic.com/2nuspe9.gif : div_preview_no_css
htt$://i47.tinypic.com/28cdr2b.gif : div_preview_with_css

htt$://ww$.megaupload.com/?d=LDKDTSHJ : div_code
htt$://ww$.megaupload.com/?d=DGTIWKNX : css_code

DIV CODE:
PHP Code:
<div id="tabs">   <div id="albumcoverimg">     <img src="{album_cover_url}" alt="albumcover" />   </div>   <div id="titletext">     <p><h2>{artist_name}-{album_name}</h2></p>   </div>   <div id="descriptiontext">     <p><h3>{short_description}.</h3></p>   </div>   <ul id="infomenu">     <li>{album_price}</li>     <li>Genres:<a href="http://#"><span style="color:#298CDA;">Hip Hop/Rap,</a><a href="http://#"><span style="color:#298CDA;"> Music,</a><a href="http://#"><span style="color:#298CDA;"> Latino</span></a></li>       <li>Released: {month day, year}</li>       <li><span>&#8471;</span> {year : record_label}</li>       </ul>       <ul id="previewmenu">         <li><a href="http://#">{track_name}</a></li>         <li><a href="http://#">{track_name}</a></li>         <li><a href="http://#">{track_name}</a></li>       </ul>       <ul id="forummenu">         <li style="width:99.75%;"><a href="{forum_article_url}">Discuss in the Community</a></li>       </ul>       <div>         <img src="/images/tabss/toprowimg.gif" alt="toprow" />       </div>       <div>         <img src="/images/tabss/btmrowimg.gif" alt="btmrow" />       </div>       </div> 






CSS CODE:
PHP Code:
#infomenu li a, #previewmenu li a  {    padding-left: 0px;    padding-right: 0px;    text-decoration: none;    width: 100%;    display: block; }  #previewmenu li, #infomenu li  {    width: 100%;    display: block;    margin: 0px; }  #btmrowimg, #toprowimg  {    visibility: visible;    position: absolute;    left: 6px;    z-index: 1;    width: 540px;    height: 23px; }  #descriptiontext p  {    font: 12px/14px Verdana;    margin: 0px;    text-align: left; }  #previewmenu li a  {    color: #000000; }  #descriptiontext  {    visibility: visible;    position: absolute;    left: 212px;    top: 96px;    z-index: 1;    width: 321px; }  #forummenu li a  {    text-decoration: none;    color: #000000;    height: 100%;    display: block; }  #albumcoverimg  {    visibility: visible;    position: absolute;    left: 14px;    top: 16px;    z-index: 1;    width: 189px;    height: 189px; }  #infomenu li a  {    color: #858989; }  #forummenu li  {    height: 100%;    display: block;    float: left;    margin: 0px; }  #previewmenu  {    font: 14px/17px Verdana;    margin: 0px;    padding: 0px;    list-style: none;    text-align: left;    position: absolute;    left: 256px;    top: 217px;    z-index: 1;    width: 284px; }  #titletext p  {    font: 22px/26px Verdana;    margin: 0px;    text-align: left; }  #titletext  {    visibility: visible;    position: absolute;    left: 212px;    top: 21px;    z-index: 1;    width: 329px; }  #toprowimg  {    top: 323px; }  #forummenu  {    font: 12px/13px Verdana;    height: 13px;    text-align: center;    margin: 0px;    padding: 0px;    list-style: none;    position: absolute;    left: 338px;    top: 321px;    z-index: 2;    width: 202px; }  #btmrowimg  {    top: 373px; }  #infomenu  {    font: 12px/14px "Lucida Sans Typewriter";    margin: 0px;    padding: 0px;    list-style: none;    text-align: left;    color: #858989;    position: absolute;    left: 22px;    top: 219px;    z-index: 2;    width: 190px; }  #tabs  {    margin: 0px auto 0px 0px;    width: 547px; } 

I am having a problem unique to IE 8. The right most nav button jumps down a bunch of pixels. This does not seem to be happening in any other browsers, except IE 8.

Some code involving said elements:
Code:

         #nav {
		right: 10px;
		top: 45px;
		position: absolute;
		background-color: black;
		height: 50px;
		width: 640px;
	}

	ul {
		text-overflow: clip;
		display: inline;
		border-bottom: 25px solid black;
	}

	li {
		list-style-type: none;
		float: left;
		margin-top:25px;
	}


	#aboutButton {
		display: block;
		height: 20px;
		width: 93px;
		background-image: url(images/nav/about_button2.gif);
		margin-left: 40px;
		clear: both;
	}

	#aboutButton:hover {
		display: block;
		background-position: 0px 20px;
		height: 20px;
		width: 93px;
		background-image: url(images/nav/about_button2.gif);
		clear: both;
	}

message me for a link to the site if you would like to see it in action. any help is appreciated. thanks!

I am editing a CSS layout I have found. Basically, I want a fixed header. The original layout had the fixed header (AP Div) take up 100% width with right positioning of 16px to allow for the scrollbar, but this was making it awkward for me to centre another div within the Header/AP Div, so I have edited my layout like this:

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=UTF-8" />
<title></title>
<style type="text/css" media="screen">
* {
	margin: 0px;
	padding: 0px;
}

#printhead {
	display:none;
}
html {
	height:100%;
	max-height:100%;
	padding:0;
	margin:0;
	border:0;
	background:#fff;
	font-size:80%;
	font-family: Arial, Helvetica, sans-serif;
	/* hide overflow:hidden from IE5/Mac */ 
/* \*/ 
overflow: hidden;/* */
}
body {
	height:100%;
	max-height:100%;
	overflow:hidden;
	padding:0;
	margin:0;
	border:0;
	background-color: #EAEBEB;
}
#content {
	display:block;
	height:100%;
	max-height:100%;
	overflow:auto;
	position:relative;
	z-index:3;
	word-wrap:break-word;
}
#info {
	width: 750px;
	margin-right: auto;
	margin-left: auto;
	background-color: #666666;
	padding-right: 25px;
	padding-left: 25px;
}
#head {
	position:absolute;
	width:800px;
	height:137px;
	z-index:5;
	border-top-style: none;
	border: none;
	background-color: #FFFFFF;
	left: -400px;
	margin-left: 50%;
}
.top-spacer {
	display:block;
	height:137px;
}
.btm-spacer {
	display:block;
	height:30px;
	background-color: #FFFFFF;
	width: 800px;
	margin-right: auto;
	margin-left: auto;
}
</style>
<style type="text/css" media="print">
html {
	padding:0;
	margin:0;
	border:0;
	background:#fff;
	font-size:10pt;
	font-family: arial, sans-serif;
	min-height: 100%;
	margin-bottom: 1px;
}
body {
	padding:0;
	margin:0;
	border:0;
}
#content {
	display:block;
	position:relative;
	z-index:3;
	word-wrap:break-word;
}
#head {
	display:none;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}
#printhead {
	height:100px;
	background:#fff;
	font-size:24pt;
	color:#000;
	border-bottom:1px solid #000;
}
</style>
</head>
<body>
<div id="head"></div>
<div id="content">
  <div class="top-spacer"></div>
  <div id="info"> 
    <p>Type goes here and here
      Type goes here and here
      Type goes here and here
      Type goes here and here
      Type goes here and here
      Type goes here and here </p>
    <p>&nbsp;</p>
  </div>
  <div class="btm-spacer"></div>
</div>
</body>
</html>

Basically, I have cheated to centre the AP Div, but now in Firefox, when there is overflow, the Div underneath the header moves over to accommodate the scrollbar, but the header doesn't.

Can anyone suggest a workaround for this? Thanks.

I am having a problem with IE. I have an anchor nested inside a list item with display: block applied. Because it is a block-level element (now), I applied a height. In Firefox/Win, it works wonderfully. In IE6/Win, the anchor area shrinks! If I leave it out, Firefox still works, but IE has gaps showing the background color of the body! I am okay with this problem since this page is for a friend, but I would like to know if there is a way to fix this for future reference.

CSS:
Code:

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 <html lang="en">
 <head>
 <title>Choose a Page</title>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 <style type="text/css">
 /* <![CDATA[ */
 
 body {
 font-family: arial, helvetica, verdana, geneva, sans-serif;
 font-size: 11.5pt;
 margin: 0;
 padding: 0;
 color: #fff;
 background-color: #000;
 }
 
 h1, h3 {
 text-align: center;
 }
 
 h2, #pgdesc, #img{
 text-align: center;
 margin: 0;
 padding: 0;
 }
 
 ul {
 margin: 0 0.5% 0;
 width: 25%;
 float: left;
 height: 100%;
 padding: 0;
 border: 4px solid #009;
 border-top: 1px solid #009;
 list-style-type: none;
 list-style-position: outside;
 }
 
 li {
 background-color: #039;
 width: 94%;
 padding: 3%;
 margin: 0;
 border-top: 4px solid #009;
 }
 
 li a {
 background-color: #099;
 height: 1%;
 margin: 0;
 padding: 0 0 0 4%;
 display: block;
 font-weight: bold;
 }
 
 a {
 text-decoration: none;
 }
 
 a:link {
 color: #009;
 }
 
 a:link:hover {
 color: #00f;
 background-color: #0ff;
 }
 
 #active {
 background-color: #f0f;
 }
 
 /* ]]> */
 </style>
 </head>
 <body>
 <h1>Directions</h1>
 <ul>
   <li><a href="index.html" title="E.T. Phone Home">Home</a></li>
   <li><a id="active">Directions</a></li>
   <li><a href="gbc.html" title="View GameBoy/GameBoy Color games">GameBoy/GB Color</a></li>
   <li><a href="gba.html" title="View GameBoy Advance games">GameBoy Advance</a></li>
   <li><a href="nes.html" title="View Nintendo/Famicom games">NES/Famicom</a></li>
   <li><a href="snes.html" title="View Super NES/Super Famicom games">SNES/Super Famicom</a></li>
   <li><a href="ggear.html" title="View Game Gear games">Game Gear</a></li>
   <li><a href="genesis.html" title="View Genesis MegaDrive games">Genesis/MegaDrive</a></li>
   <li><a href="32x.html" title="View 32X games">32X</a></li>
   <li><a href="psx.html" title="View PlayStation games">PlayStation</a></li>
 </ul>
 <h2>Select a page</h2>
 <div id="pgdesc">Select a console/handheld and then a letter of the alphabet to see the list of games for that letter.</div>
 <h3>Note: This page does not host ANY emulators. If you came here looking for an emulation site, you will not find anything.</h3>
 <div id="img">
   <img id="atari" src="atari2600.jpg" alt="Atari 2600">
 </div>
 </body>
 </html>
 

Thank you to all who try to help!

It seems the form that creates unwanted space in IE.

Site in question:
http://www.phaseninedesign.com/p/uber/

HTML:
Code:

	<div id="topMenu">
	<form action="#" method="post">
		<div id="reviewsBut"><a href="#"><img src="images/reviewsBut.gif" alt="Reviews" /></a></div>
		<div id="articlesBut"><a href="#"><img src="images/articlesBut.gif" alt="Articles" /></a></div>
		<div id="aboutBut"><a href="#"><img src="images/aboutBut.gif" alt="About" /></a></div>
		<div id="contactBut"><a href="#"><img src="images/contactBut.gif" alt="Contact" /></a></div>
		<div id="sponsorsBut"><a href="#"><img src="images/sponsorsBut.gif" alt="Sponsors" /></a></div>
		<div id="loginButTop"><a href="#"><img src="images/loginButTop.gif" alt="Sponsors" /></a></div>
		<div id="passwordBoxTop"><input type="password" id="password" onFocus="if(this.value=='password')value=''" onBlur="if(this.value=='')value='password';" value="password" /></div>
		<div id="userTopBox"><input type="text" id="user" onFocus="if(this.value=='Username')value=''" onBlur="if(this.value=='')value='Username';" value="Username" /></div>
	</form>
	</div>

-----------------------

CSS:
Code:

#topMenu{
	width: 1005px;
	height: 23px;
	margin-left: auto;
	margin-right: auto;
	background-color: #282a1d;
	background-image: url(images/topMenuBG.gif);
	border-right: 1px solid black;
	border-left: 1px solid black;
}

I've tried moving the form outside of the dive that its in, but
that makes the space even bigger.

Hello CSS gurus,

When I add an italic font style to my web page, it causes a vertical shift in IE6. Everything is fine in Firefox.

Can anyone tell me what is happening with this?

Vertical Shifted with Italics:
http://www.innovations-online.com/t...ch_news_it.html

No Italics is Fine:
http://www.innovations-online.com/t.../tech_news.html

The same problem occurs with oblique.

Thanks in advance!

Darin

I have a few lines of text inside a nested div. Everything is fine if I leave it at that but as soon as I add some more, the whole page (wrapper) get shifted left by 9 pixels. It causes a 'jump' hen navigating between this page and the rest of the site.

All of these pages are quite simple and were created from the same index page.
HTML
Code:

<div id="wrap">
 <div id="content_awards">
   <div id="subcontent_awards">
    <div class="award_col">

	<h3>Subtitle 1</h3>
     	Winner<br /><br />
     
	<h3>Subtitle 2</h3>
     	Winner<br /><br />
     
     	<h3>Subtitle 3</h3>
     	Commended<br /><br />

	<!--
	<h3>Subtitle 4</h3>
     	Commended<br /><br />
	-->

    </div>
   <br style="clear:both;" />
   </div>
 <br style="clear:both;" />
 </div>
 <br style="clear:both;" />
</div>

CSS
Code:

body
{
	padding:2px 0 0 0;
	margin:0;
	text-align:center;
	font-size:14px;
	background-color:#FFFFFF;
}

#wrap
{
	margin:0 auto;
	width:760px;
	padding:0;
	text-align:center;
}

#content_awards
{
	margin:0 auto;
	padding:20px 0 0 0;
	width:754px;
	color:#FFFFFF;
	text-align:left;
	background-color:#31578E;
	clear:both;
}

#subcontent_awards
{
	margin:0 auto;
	padding:0 10px 10px 10px;
	width:734px;
	background-image:url('images/bg_awards_shadows.jpg');
	background-repeat:no-repeat;
	background-color:#31578E;
	clear:both;
}

div.award_col
{
	float:left;
	margin:0 0 0 1px;
	padding:0 10px 0 20px;
	width:152px;
	line-height:130%;
	font-size:12px;
}

Thanks,

Hi,

i made a page with DIVs and floats and all that and everything is peachy.
i got myself an ecommerce solution, re-designed the interior to be tableless and now have a problem with IE that i cannot seem to get rid off.
live example: www. chocolateriewanders.com/shop

- the 3 floated images leave the div in IE (do not wrap) [thats the smaller problem]
- if you click on 'Gift Boxes', then the content is moved down quite a bit opposed to the looks in Firefox, were its all aligned correctly.

i tried to apply the holly hack - but i am not very comfortable with it.

right now the 'shop' site does not validate and i have no idea why either (html validation)

If someone could help me out, that would be great
(and yeah i want to succeed in validation too! but this shop is pretty crazy put together and i have no clue about php and whatnot it utilizes .... btw, most pages are put together with php from a database and TPL files, which i can edit)

That title is probably a little confusing but it is what's happening.

I have an inline list (<li>) that will shift to the right when I hover over links that have been visited. The links that have never been visited do not cause this problem. It's very strange and I'm not sure what's up.

The page...

http://www.vaska.com/a/

The css...

http://www.vaska.com/a/css/c.css

To get the menu to appear, hover over the "menu/options" and it will appear. I know for a fact that these issues are not becaused by the javascript in this file...somehow it's a CSS issue.

I'm having the problem in Safari and Firefox...I'm not sure about IE/PC and such, but I'm betting the problem is there as well.

Thanks for any help...v

Hi all,

I'm a CSS newbie and I need your help, pleeease!
I tried to make a rollover graphic menu today.
And of course I got completely stuck with this code:

Code:

/* Header */

#header {
position: absolute;
	background: url(images/header.jpg) no-repeat;
	width: 830px; 
}
#menu, #menu li a:hover, #menu li.current a {
	background: url(images/link_menu.jpg) no-repeat;
}
#menu {
	margin: 115px 0px 0px 29px ;
	width: 600px ;
	height: 75px ;
	list-style-type: none;
}
#menu li {
	float: left;
	margin: 0px 0px 0px 0px;
	width: 120px;
	height: 75px;
}
#menu li#menu-contact {
	margin: 0;
}
#menu li a {
	display: block;
	padding: 75px 0px 0px 0px;
	height: 75px;
	overflow: hidden;
}
html>body #menu li a {
	height: 0;
}
#menu li#menu-home a:hover, #menu li#menu-home.current a {
	background-position: 0px -75px 120px 29px;
}
#menu li#menu-about a:hover, #menu li#menu-about.current a {
	background-position: -120px -75px;
}
#menu li#menu-gallery a:hover, #menu li#menu-gallery.current a {
	background-position: -240px -75px;
}
#menu li#menu-foto-shop a:hover, #menu li#menu-foto-shop.current a {
	background-position: -360px -75px;
}
#menu li#menu-contact a:hover, #menu li#menu-contact.current a {
	background-position: -480px -75px;
}

The rollover works, but somehow it shifts to the right
Like this:
URL

What am I doing wrong? Why does it shift?

Thanks in advance...

title doesnt really explain it, but i cant really explain it well in 1 line.

code I use is at bottom of the post

but using the below code. If I take out the border-top declaration in #bodycontainer, it seems to lose the margin-top that is declared in the flashcontainer. when i say lose, the background-color of the bodycontainer no longer exists above the flashcontainer. it seems as the flashcontainer overlays the parent and moves up or whatever, if that makes any sense.

this is in Firefox 3.0.3

code validates as transitional (and even strict if i change the doctype)

i cannot figure out why either. i've used firebug to see if any CSS was overriding, but it doesnt seem to be any

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>Test</title>

<style type="text/css">
<!--

body {
	margin: 0;
	padding: 0;
}

#bodycontainer {
	width: 960px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 10px;
	background-color: #000;
	border-top: 1px solid yellow;  /*  remove this line   */
}

.flashcontainer {
	width: 950px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 5px;
	border-top: 1px solid red;
}

-->
</style>
</head>
<body>

<div id="bodycontainer">
	<div class="flashcontainer">
	<img src="images/home_flash_area.jpg" width="950" height="240" alt="flash container" title="flash container" />
	</div>
	<h2>Some Title</h2>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed doamet, consectetur adipisicing elit, sed do.</p>
</div>

</body>
</html>

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