CSS - Href Hover Causing Flickering Of Page

If you look at http://jordanmeeter.com/new/about.php and http://jordanmeeter.com/new/about/cd-collection.php you will see that the latter pages moves to the left and I believe stretches the pages. I removed the list, and sure enough the problem went away. But what is causing this? It's just a simple list...

BTW, the CSS is http://jordanmeeter.com/new/includes/x.css.

Hi, I'm new here and hope someone can help! I wasn't sure whether to post this in the CSS or Flash forum; it's a problem caused by Flash which I suspect needs some clever CSS to resolve.

My new website is carolineofbrunswick (dot) co (dot) uk. As you can see, there's a ton of blank space off to the right of the pages, and I can't figure out how to get rid of it.

It's caused by the Flash objects in the right-hand column. Changing the width attributes on those Flash objects just causes them to not appear at all, though the blank space still exists.

Can anyone help?

Cliff

Hi there,

I want to create a hyperlink to an external page from my web site.

Is it possible to show that external content on my page without using frame set.

From the attachment, link 1 & link 2 are external links inside a div.

I want to show it on the second div on the bottom.

Thanks.

Basically the home button is fixed and flickers where it is fixed and also where it is placed in the html code, when you hover over it.

Also when you hover over the javascript sliders the image in the slider moves way to the right.

Neither of these issues are happening in any other browser.

I'm looking at FF9...

I would really appreciate it if you could take a look at the issue and think of anything that could help - or point me in another direction...

The website is: caradinleydesigns.com.au

I can provide further bits if you need?

THANKS ONE HUNDRED MILLION IN ADVANCE ( I can up it if need be....?!)

I have a div absolutely sized with a wrapper div sized to take up 100% of both the width & height of the afore-mentioned div. The wrapper div has it overflow set to auto. Inside is several divs & anchors making up a tree.

In the CSS the anchors have hover effects that only alters the background color.

Everything seems fine, but the scrollbar flickers on each anchor mouseover. This only happens in IE. It seems that IE wants to recalculate the overflow on each mouseover.

Has anyone had similar results? Or any suggestions to solving this irritating effect?

I'm making a top navigation bar on my webpage, and when I set it to change from blue background to white background on hover it sometimes makes the whole page blink/flash. Any tips to fix this?

HTML:
Code:

<div id="topnav">
<ul>
	<li><a href="index.htm">Home</a>
	<li><a href="jokes.htm">Jokes</a>
	<li><a href="riddles.htm">Riddles</a>
	<li><a href="submit.htm">Submit A Joke</a>
	<li><a href="contact.htm">Contact</a>
	<li><a href="disclaimer.htm">Disclaimer</a>
</ul>
</div>

CSS:
Code:

div#topnav {
    height: 30px;
    width: 100%;
    border-top: solid #000 1px;
    border-bottom: solid #000 1px;
    background-color: #336699;
}
div#topnav ul {
    margin: 0px;
    padding: 0px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: small;
    color: #FFF;
    line-height: 30px;
    white-space: nowrap;
}
div#topnav li {
    list-style-type: none;
    display: inline;
    float: left;
}
div#topnav li a {
    text-decoration: none;
    padding: 7px 10px;
    color: #FFF;
}
div#topnav li a:link {
    color: #FFF:
}
div#topnav li a:visited {
    color: #CCC;
}
div#topnav li a:hover {
    color: #FFF;
    background-color: #3366FF;
}

Also, how would I center the links on the page?

hey, i have a question regarding css on my website:

http://poolghost.com/

my css file is located at http://poolghost.com/base.css

basically what i am trying to accomplish is having a:hover's color change to a different color on the right side of the layout. and i would like links on the right side to be underlined.

please advise.. thanks, --avery

I have a drop down menu located at http://www.fieldspianos.com/new/index.php

If you hover over the menu items they turn black and white when you are right on the text but not if you are in the area surrounding it which is what I also need to occur. You can view the source on the page for the html but I will include the css below.

This is the basic layout of the menu:
Code:

<ul>
<li>About Us</li>
     <ul>
         <li><a href="#">Locations</a></li>

etc..etc..etc..


Here is the css:
Code:

/*Begin Content of drop down menu*/
a {
	outline:none;
}

* html div#dropdownmenu ul {
	float: left;
}

* {
	margin: 0;
	padding: 0;
}

div#dropdownmenu {
	float: left;
	background-color: #C8C6C6;
		font-size:11px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}

div#dropdownmenu ul li {
	list-style-type: none;
	float: left;
	background-color: #000000;
	position: relative;
}

div#dropdownmenu ul li:hover {
	list-style-type: none;
	background-color: #000000;
}


/*Hides drop downs when not overed over and reveals them when they are hovered over.*/
body div#dropdownmenu ul li ul {
	display: none;
}

body div#dropdownmenu ul li:hover ul {
	display: block;
}



div#dropdownmenu ul li ul {
	margin: 0;
	width: 13em;
	position: absolute;
	left: -1px;
}

div#dropdownmenu ul li ul li {
	width: 100%;
	background-color:#bdb35e;
	color: #660000;
	border-bottom: 1px solid #000;
	border-left: 1px solid #000;
	border-right: 1px solid #000;
	padding: 3px;
}

div#dropdownmenu ul li ul li:first-child {
	border-top: 1px solid #000;
}

div#dropdownmenu ul li ul li:hover {
	color: #FFFFFF;
	background-color: #000000;
}

div#dropdownmenu ul li ul li a {
	color: #660000;
	text-decoration:none;
	outline: none;
}

div#dropdownmenu ul li ul li a:hover {
	color: #FFFFFF;
	background-color: #000000;
	text-decoration:none;
	outline: none;
}

div#dropdownmenu ul li:hover ul, div#dropdownmenu ul li ul:hover {
	display: block;
}

Any help is greatly appreciated, this seems like it would be a simple fix but I can't figure it out. Maybe I am overlooking some small detail. Thanks!

I really can't seem to even find the words to describe this error. I have posted before in regards to another issue that seemed to have alluded you guys so i am posting again for another error that is more important.

What is the Error?
Ok basically the yahoo(google has same issue) ad lags when you scroll up and down. When I say lag i mean it sort of stays in it's position while the rest of the layout moves on, after a second it corrects itself.

I have excluded everything in my layout except the header, and even tried removing the ad from the div and everything and can't seem to figure out what is causing this issue.

http://www.unlimitedgamer.net/header_re.php

For users on WINDOWS (for some reason it works fine on MAC) based computers simply focus your eyes on the advertisement, and scroll up and down while watching it. It's impossible not to see it.

Note, this issue doesn't occur in IE7 (note sure about IE6)

Any help would be greatly appreciated as this lil bug is holding up the opening of my layout

Hey gang.

I have a very simple layout for a software interface.I am floating a vertical menu on the left, and to the right, is a horizontal navigation bar (float left), and below that (and to the right of the menu) is the main staging area for content (also float left).

So essentially everything is float left.

Inside the horizontal "path" bar I have a float left, and a float right, both holding two or three words of text. No problem.

I am also performing a clear:both after all of this jazz, to allow the footer of the software to show below all of the content regardless.

All is well in IE. In firefox, the horizontal nav bar DROPS below the menu, ONLY WHEN I have a float:right in the bar.


Im made a very primitive mockup with inline styles to show you whats up in firefox....why does this drop?

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
	<title>Untitled</title>
</head>

<body>



<div style="float:left;width:100px;background:#CCCCCC;">
this is it!<br>
this is it<br>
this is it<br>
this is it<br>
this is it<br>
this is it<br>
this is it<br>
this is it<br>
this is it<br>
this is it<br>
</div>

<!-- container -->
<div style="background:#444444;padding:20px;float:left;">

<!-- mainnav -->
<div style="background:#000000; padding:10px;">

	<!-- subnav -->
	<div style="float:left; background:#FF0000;">this is the first one</div>
	<!-- utilnav -->
	<div style="float:right; background:#FFCC00;">this is another.</div>
	<!-- clear -->
	<div style="clear:both;"></div>

		<!-- /close mainstage -->
</div>

<!-- main container -->
<div style="float:left; background:green;">thisis the main content</div>

</div>

<!-- clear -->
<div style="clear:both;"></div>

<!-- footer -->
<div style="background:#EEEEEE;">footer</div>

</body>
</html>

Im really starting to lose it. (my hair that is), and I know I must be missing something simple here....

thanks in advance gang!

John

Hi to all,

I have a problem with an empty div. I have created an empty div as follows: Code:

<div id="more"></div>Hello

Now I set the height property of the empty div equals to 20px. On IE 7.0 it looks fine, with the hello under the empty div, however in FireFox and Opera Hello is being display nearly inside the empty div. What can i do to fix this and make it display always under the empty div?

Thanks and Regards,
Sim085

ps: I am using the Strick Doc Type. and I need the empty only to colour it in a different colour (for style that is).

Hi,

I am finishing up my site and I have decided to add to footer image to each page but when I attempt to add it on a page that has padding whether it be after the text with padding or not the image is detached by approx the padding size from the bottom.

I have been toying around for hours but with no success.
I have also been reading some of the tutorials given to me by the members here which have helped greatly but I am stumped.

The image in question is Code:

<img src="images/footer.jpg" alt="For more information, please visit the FAQs or the forum." name="footer" id="footer" />

If you need me to upload the pics I can do that (website down atm hence the code instead of a url)
(With how great you guys are, I can nearly guarantee that It will only require an extra line added to the css)

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=utf-8" />  <link rel="stylesheet" type="text/css" href="./index.css" media="all" />  <link rel="shortcut icon" href="http://torquesro.info/favicon.ico" />  <meta name="verify-v1" content="RhiSLQkMtmAKlbQN7TUe1DnWYD/Mxl0ROy7UiZlDGCU=" />  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />  <title>TorqueSRO - FAQ</title>  <meta name="description" content="We offer tools for Silkroad Online in order to provide advanced functions, automate game options and deliver new functionality."/>  <meta name="keywords" content="Silkroad, Silkroad Online, Torque, TorqueSRO, tClientless, silkroad clientless, silkroad walkthrough, silkroad tools, Mmorpg, silk, sr33, cheat, hack, sro"/>  <meta name="copyright" content="Copyright TorqueSRO - 2009"/>  <meta name="author" content="UrbanGrafix"/>  <meta name="Distribution" content="Global"/>  <meta name="Rating" content="General"/>  <!--[if IE]>  <style type="text/css" media="all">.borderitem {border-style:solid;}</style>  <![endif]-->  </head>  <body>  <div id="container">  <div id="main">  <a href="/index.html"><img src="images/HomeButton.jpg" id="HomeButton"  alt="TorqueSRO" /></a>  <a href="/tclientless.html"><img src="images/clientless.jpg" id="clientless"  alt="tClientless" /></a>  <a href="/faq.html"><img src="images/FaqButton.jpg" id="FaqButton"  alt="FAQs" /></a>  <a href="/videos.html"><img src="images/VideosButton.jpg" id="Links"  alt="Videos" /></a>  <a href="/forum"><img src="images/ForumButton.jpg" id="AboutButton"  alt="Forum" /></a>  </div>    <div id="ad">  </div>    <div id="main1">  <img src="images/mainlogo.jpg"  alt="TorqueSRO" name="Domi2" id="Domi2" /><img src="images/Main2ndBannerSRO.jpg"  alt="" name="Main2ndBanner" id="Main2ndBanner" /></div>      <div id="Content">  <div id="ContentMain">  <p style="text-align: left"><a href="#a">Q. I’m getting an error when  I run tClientless, it says the side-by-side configuration is incorrect.</a></p>  <p style="text-align: left"><a href="#b">Q. How do I login multiple  accounts?</a></p>  <p style="text-align: left"><a href="#c">Q. tClientless crashed! Why  did this happen?</a></p>  <p style="text-align: left"><a href="#d">Q. How can I make a  character a master for every character logged in through tClientless?</a></p>  <p style="text-align: left"><a href="#e">Q. I want to delete an  alias, how can I do that?</a></p>  <p style="text-align: left"><a href="#f">Q. tClientless says the  authentication failed and/or cannot connect to the server.</a></p>  <p style="text-align: left"><a href="#g">Q. I missed out on the BETA,  will I be able to use tClientless?</a></p>  <p style="text-align: left">&nbsp;</p>  <p style="text-align: left">&nbsp;</p>  <p style="text-align: left">&nbsp;</p>  <p style="text-align: left">&nbsp;</p>  <p style="text-align: left">&nbsp;</p>    <p style="text-align: left"><strong><a name="a" id="a"></a>Q. I’m getting an error when  I run tClientless, it says the side-by-side configuration is incorrect.</strong><br />    A.  Download and install this: <a href="http://www.microsoft.com/DOWNLOADS/details.aspx?FamilyID=9b2da534-3e03-4391-8a4d-074b9f2bc1bf&displaylang=en">http://www.microsoft.com/DOWNLOADS/details.aspx?FamilyID=9b2da534-3e03-4391-8a4d-074b9f2bc1bf&displaylang=en</a> </p>      <p style="text-align: left"><br />    <strong><a name="b" id="b"></a>Q. How do I login multiple  accounts?</strong><br />    A.  Simply type the account information and hit login again, tClientless will  handle everything.</p>      <p style="text-align: left"><br />    <strong><a name="c" id="c"></a>Q. tClientless crashed! Why  did this happen?</strong><br />    A.  Well, first you should note that tClientless is only in the BETA (development)  stages. The reason it crashed it likely due to incorrect parsing, send the  “lastpacket.txt” file to bot90210 so that I can fix this issue.</p>      <p style="text-align: left"><br />    <strong><a name="d" id="d"></a>Q. How can I make a  character a master for every character logged in through tClientless?</strong><br />    A.  Go to File->Master Manager and enter the character’s name. They will be  saved as a global master and will be able to use master commands for every  character.</p>      <p style="text-align: left"><br />    <strong><a name="e" id="e"></a>Q. I want to delete an  alias, how can I do that?</strong><br />    A.  Go to File->Alias Manager and delete the alias entry.</p>      <p style="text-align: left"><br />    <strong><a name="f" id="f"></a>Q. tClientless says the  authentication failed and/or cannot connect to the server.</strong><br />    A.  This could happen for various reasons, the most common are that our server is  experiencing issues or you are not registered with the BETA test.</p>      <p style="text-align: left"><br />    <strong><a name="g" id="g"></a>Q. I missed out on the BETA,  will I be able to use tClientless?</strong> <br />    A. Possibly.  We’ve limited the users that can join the BETA because we don’t want to  overload the server, if the server can handle 300 users comfortably then you  will increase the limit. We’ve made tClientless connect to our servers because  we’re sick of people posting it elsewhere.</p>  </div>  <img src="images/footer.jpg" alt="For more information, please visit the FAQs or the forum." name="footer" id="footer" />  </div>        <form action="http://www.google.com/cse" id="cse-search-box" target="_blank">  <div align="right">    <input type="hidden" name="cx" value="partner-pub-4151060843783741:adaty3-25z5" />    <input type="hidden" name="ie" value="ISO-8859-1" />    <input type="text" name="q" size="20" />    <input type="submit" name="sa" value="Search" />  </div></form><script type="text/javascript" src="http://www.google.com/cse/brand?form=cse-search-box&lang=en"></script>    <a href="http://validator.w3.org/check?uri=referer"><img          src="http://www.w3.org/Icons/valid-xhtml10-blue"          alt="Valid XHTML 1.0 Transitional" height="31" width="88" /></a>  <a href="http://jigsaw.w3.org/css-validator/check/referer">      <img style="border:0;width:88px;height:31px"          src="http://jigsaw.w3.org/css-validator/images/vcss-blue"          alt="Valid CSS!" /></a>      </div>  <script type="text/javascript">  var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");  document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));  </script>  <script type="text/javascript">  try {  var pageTracker = _gat._getTracker("UA-10605650-1");  pageTracker._trackPageview();  } catch(err) {}</script>  <!-- Piwik -->  <script type="text/javascript">  var pkBaseURL = (("https:" == document.location.protocol) ? "https://torquesro.info/piwik/" : "http://torquesro.info/piwik/");  document.write(unescape("%3Cscript src='" + pkBaseURL + "piwik.js' type='text/javascript'%3E%3C/script%3E"));  </script>  <script type="text/javascript">  try {  var piwikTracker = Piwik.getTracker(pkBaseURL + "piwik.php", 1);  piwikTracker.trackPageView();  piwikTracker.enableLinkTracking();  } catch( err ) {}  </script><noscript><p><img src="http://torquesro.info/piwik/piwik.php?idsite=1" style="border:0" alt=""/></p></noscript>  <!-- End Piwik Tag -->  </body>  </html>  

Code:

html, body {  	margin:0;  	padding:0;  }    body {  	background-image: url(images/bglong209.png) ;  	background-repeat: repeat-x;      text-align:center;  	padding:0px;  }  .p {  	margin:0px;  	padding:0px;  	font-size: inherit;  	font-family: inherit;  	font-weight: inherit;  	text-align: inherit;  	color: inherit;  	line-height: inherit;  	vertical-align: top;  }  #container {  	width:654px;  	margin:0px auto;  	top: 0;  }  #ad {  	  }  p {  	padding-top:0px;  	margin-top:0px;  	color: #000;  	background-color: #FFF;  }  img {  	border:0px;  }  .AbsWrap {  	position: relative;  	left: 0;  }  .rowWrap {  	width: 100%;  }  .clearfloat {  	clear:both;  	height:0px;  }  #main {  	width:654px;      margin:0px auto;  	border: 0px none #f0f0f0;  	top:0;  }  #main1 {  	width:654px;      border: 0px none #f0f0f0;  	margin:0px auto;  		  }  #main2 {  	width:654px;      border: 0px none #f0f0f0;  	margin:0px auto;  }  #Content {  	background:#fff;  	clear:both;  	width: 654px;  	font-family: Arial, Helvetica, sans-serif;  	font-size:10px;  }  #ContentMain {  	padding-left: 10px;  	padding-right: 10px;  	padding-top: 20px;  	margin:0px auto;  	border: 0px none #f0f0f0;  	}    #HomeButton {  	margin:0px auto;  	margin-top:0px;  	width:163px;  	height:47px;  	margin-bottom:0px;  	float:left;  	display:inline;    }  #clientless {  	margin-left:0px;  	margin-top:0px;  	width:164px;  	height:47px;  	margin-bottom:0px;  	float:left;  	display:inline;    }  #FaqButton {  	margin-left:0px;  	margin-top:0px;  	width:101px;  	height:47px;  	margin-bottom:0px;  	float:left;  	display:inline;    }  #Links {  	margin-left:0px;  	margin-top:0px;  	width:99px;  	height:47px;  	margin-bottom:0px;  	float:left;  	display:inline;    }  #AboutButton {  	margin-left:0px;  	margin-top:0px;  	width:127px;  	height:47px;  	margin-bottom:0px;  	float:left;  	display:inline;    }  #Domi {  	margin-left:0px;  	margin-top:59px;  	width:320px;  	height:272px;  	margin-bottom:0px;  	float:left;  	display:inline;  	font-size: 9px;  }  #Domi1 {  	margin-left:0px;  	margin-top:59px;  	width:334px;  	height:272px;  	margin-bottom:0px;  	float:left;  	display:inline;  	font-size: 9px;  }  #Domi2 {  	margin-left:0px;  	margin-top:59px;  	width:654px;  	height:271px;  	margin-bottom:0px;  	float:left;  	display:inline;  	font-size: 9px;  }  #tClientlessBanner {  	margin-left:0px;  	margin-top:59px;  	width:333px;  	height:192px;  	margin-bottom:0px;  	float:left;  	display:inline;    }  #MainBlueBanner1 {  	margin-left:0px;  	margin-top:0px;  	width:59px;  	height:83px;  	margin-bottom:0px;  	float:left;  	display:inline;    }  #colwrap3 {  	float:left;  	width:273px;  	margin-top:0px;  	margin-left:0px;  }  #DownloadButton {  	margin-left:0px;  	margin-top:0px;  	width:47px;  	height:48px;  	margin-bottom:0px;  	float:left;  	display:inline;    }  #colwrap5 {  	float:left;  	width:226px;  	margin-top:0px;  	margin-left:0px;  	border: 0px solid #f0f0f0;    }  #Downloadlatestversionbanner {  	margin-left:0px;  	margin-top:0px;  	width:226px;  	height:25px;  	margin-bottom:0px;  	float:left;  	display:inline;    }  #colwrap7 {  	float:left;  	width:89px;  	margin-top:0px;  	margin-left:0px;  	border: 0px solid #f0f0f0;    }  #BlueTinyBanner {  	margin-left:0px;  	margin-top:0px;  	width:7px;  	height:11px;  	margin-bottom:0px;  	float:left;  	display:inline;    }  #Bluelongbanner3 {  	margin-left:0px;  	margin-top:0px;  	width:89px;  	height:11px;  	margin-bottom:0px;  	float:left;  	display:inline;    }  #Bluelongbanner2 {  	margin-left:0px;  	margin-top:0px;  	width:137px;  	height:23px;  	margin-bottom:0px;  	float:left;  	display:inline;    }  #MainBlueBanner2Long {  	margin-left:0px;  	margin-top:0px;  	width:274px;  	height:35px;  	margin-bottom:0px;  	float:left;  	display:inline;    }  #Main2ndBanner {  	margin-left:0px;  	margin-top:0px;  	width:654px;  	height:87px;  	margin-bottom:0px;  	float:left;  	display:inline;  }  #interface {  	margin-left:0px;  	margin-top:0px;  	width:654px;  	height:615px;  	margin-bottom:0px;  	float:left;  	display:inline;  }  #footer {  	margin-left:0px;  	margin-top:0px;  	width:655px;  	height:93px;  	margin-bottom:0px;  	float:left;  	display:inline;  }  #Version {  	font-size:9px;  	color: #FFF;  	font-weight: bold;  	font-variant: small-caps;  	background-color: #416F7C;  	font-family: Verdana;  	text-align: left;  }  #container #Content #ContentMain p a font {  	color: #0000FF;  }  

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">

I've tried several differnt doc types, but all of them prevent my left menu items' text to change colors when you hover over the text.

Is this common? Is it my code?

You'll also notice the 2 pages below have some general layout css issues, like too much white space above the grey line AND though they both use the same right bar (I uses a PHP include) the format is different in both. The green line is the toughest...it won't extend the height of the page.

Any ideas?

I attached my style sheet as well. thanks.

http://bowtree.org/latest/luminaries.php
http://bowtree.org/latest/index.php

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!

Here's the site: http://www.entertainmentengineering.com/v6.issue01/page.01.html

Issue is only in IE. When the window size is to small, the right columns drop down to form a new line. In FF it works exactly like I want it to where the excess is just off screen.

Any idea how to fix this issue? Much thanks!