Learn VBA & Macros in 1 Week!

CSS - Rollover Block Problems In Ie.

Full Excel VBA Course - Beginner to Expert

Rollover Block Problems In Ie.	View Content

I have a simple list rollover menu, and works fine in all browsers, but in ie the block element is not working as it should. When you rollover the links you have to have the mouse positioned over the text in the block to get it to show as a rollover, if you move to the right of the text (where in other browsers it still shows as a rollover) you lose the rollover effect. I have checked and checked and cannot see why this is happening in ie.

Here is my code for the navigation layer.

Code:

	<div id="navigation" style="position:absolute; left:89px; top:303px; width:193px; height:307px; z-index:3; overflow:visible">
		<p class="f-lp"><ul>
 <li><a href="index.html">HOME</a></li>
 <li><a href="events.html">EVENTS</a></li>
 <li><a href="news.html">NEWS</a></li>
 <li><a href="galleries.html">GALLERIES</a></li>
 <li><a href="timeline.html">TIMELINE</a></li>
 <li><a href="contact.html">CONTACT INFO</a></li>
</ul>
<p class="address f-lp">To234JA</p></p>
	</div>

And here is my css code

Code:

/* navigation */
#navigation {
	font-family: Tahoma;
	font-size: 14px;
	color : #ffffff;
	border: 1px solid #fff;
	border-width:0px 0px 1px 1px;
}
#navigation ul {
	list-style: none;
	margin: 0px;
	padding: 0;
	}

#navigation a {
	display: block;
	color: #FFFFFF;
	width: 178px;
	padding: 5px 5px 5px 10px;
	border: 1px solid #fff;
	border-width:0px 0px 1px 0px;
	text-decoration: none;
	}	

#navigation a:hover {
	color: #FFFFFF;
	background-color: #000000;
	padding: 5px 5px 5px 10px;
	}	
/* END OF Navigation */

Full Excel VBA Course - Beginner to Expert

<b> Block Problems In Ie6

Similar Tutorials

View Content

Hi guys

I was just wondering why cant i see these two <b></b> "blocks" on each side of my <UL> block in ie6 but in Firefox i can?

Screenshot of situation:

here is my code for the <b> blocks:
PHP Code:
.navbar b.lefty {
display:block; position:absolute; z-index:604;
height:100%; width:20px;
top:0px; left:-20px;
padding:0; margin:0;
background-color:#ffffff;
}

.navbar b.righty {
display:block; position:absolute; z-index:604;
height:100%; width:20px;
top:0px; left:136px;
padding:0; margin:0;
background-color:#ffffff;
}

Here is my code for the <UL> block:
PHP Code:
.navbar :hover ul {
z-index:604;
width:136px;
top:40px; left:0px;
padding:0; margin:0;
background-color:#333333;
text-align:left;}

Now here is my HTML:
PHP Code:
<ul>
      <b class="lefty">d</b>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <b class="righty">d</b>
</ul>

Ie Problems (first Line Of Block Misaligned)

Similar Tutorials

View Content

Hi, Hope someone here can help me, having trouble with IE - there's a surprise! - and block elements, more specifically <p> and <ul>.

As you can see from he

http://dvxl.servehttp.com/Sites/Development/InfoCAP/Sites/dynamic/

.. the first line of the top paragraph has a larger line height than the rest, same with the top <li> of the <ul>.

The xhtml is empty of styles, and the only styles applied to these elements a

Code:

#main_content p {
margin-top: 0px;
margin-bottom: 15px;
color: #306EB1;
font-family: Verdana, Arial, Helvetica, sans-serif; 
font-size: 0.7em;
text-align: justify;
text-justify: newspaper;
}

#main_content ul li {
color: #306EB1;
font-family: Verdana, Arial, Helvetica, sans-serif; 
font-size: 0.7em;
list-style-type: square;
}

#main_content li {
line-height: 15px;
}

In Firefox the line heights are consistant, am I missing something?

Thanks

Problems Displaying Divs Inline Or As A Block

Similar Tutorials

View Content

I have been trying in vain to get div elements on a page to behave how i want them to. I have a list of items, in the middle of which i need to display some tablular information witha picture along side it. This i have managed to acieve fine, but i can't get the next <li> to start below these 2, it starts alongside and the wraps underneath. I have tried everything. Can anyone help?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">

</style>
<title>Carlton</title>
</head>

<body>

<div id="wrapper">

<div id="topimg">
<img src="/carlton-newsite/img/planandbuy/planandbuy.gif" width="173" height="33">
</div>

<div id="secondimg">
<img src="/carlton-newsite/img/planandbuy/thebasics.gif" width="133" height="23">
</div>

<ul>
<li>Cinema Advertising is available in weekly blocks starting on Fridays.</li>
<li>It is possible to buy <em> guaranteed admissions</em> by TV region, <em> follow specific films</em> or <em> nominate individual screens</em>. </li>
<li>The minimum time unit available is 5 seconds. Prices differ based on commercial length with indeces using 30” as a base: </li>

<div id="listtable">
<table width="200" border="0" cellspacing="0" cellpadding="0" class="nobullet">
<tr>
<td width="105">
<li>
<div>5”</div>
</li>
<li>10”</li>
<li>
<div>20”</div>
</li>
<li>30”</li>
<li>
<div>40”</div>
</li>
<li>45”</li>
<li>
<div>50”</div>
</li>
<li>60”</li>
<li>
<div>90”</div>
</li>
</td>
<td width="95">
<li>
<div>.3”</div>
</li>
<li>.5”</li>
<li>
<div>.8”</div>
</li>
<li>.1.00”</li>
<li>
<div>.1.33”</div>
</li>
<li>.1.50”</li>
<li>
<div>.1.67”</div>
</li>
<li>.2.00”</li>
<li>
<div>.3.00”</div>
</li>
</td>
</tr>
</table>
</div>

<div id="bodyimg">
<img src="/carlton-newsite/img/digital_adver/satelite.jpg" width="220" height="182">
</div>

<li>Cinema commercials are shown on 35mm film, it is easy to get your TV ad transferred by our production department. </li>
<li>Lead times from booking to getting on screen are 3 weeks, although CSA’s <em> Early Booking Incentive</em> guarantees extra value if you can book your campaign 6 weeks in advance of start date. </li>
<li>Cinema Advertising Association <em> cinema buying guidelines</em> ensure your campaign meets industry agreed standards. </li>

</ul>
</div>

</body>
</html>

Problems With Ie And Css Sprite Rollover

Similar Tutorials

View Content

Hi, I'm trying to transmogrify a Listamatic menu http://css.maxdesign.com.au/listamatic2/vertical06.htm by adding my own graphic. But I'm not able to take out the borders or get my header to 'touch' the list. I've removed the borders from the CSS but I'm left with a gap between my images. See the file he http://cftest.mccormick.com/mc3stage/listbox.htm

What I really want is the rollover images to butt up against each other. Of course it looks fine in FF!

Can you help?

Glen

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
	<title>Listamatic2: Subtle box list</title>
 	<style type="text/css">
		#rnav {
			padding: 0px;
			margin: 0px;
			width: 223px;
			border-left: 1px solid #b48932;
			border-bottom: 1px solid #b48932;
			border-right: 1px solid #b48932;
		}
		#navcontainer { margin: 0px; }
		
		#navcontainer ul
		{
			margin: 0;
			padding: 0;
			list-style-type: none;
			font-family: verdana, arial, Helvetica, sans-serif;
		}
		
		#navcontainer li { margin: 0; }
		
		#navcontainer a
		{
			display: block;
			padding: 5px 10px;
			width: 203px;
			color: #000;
			background-color: #ADC1AD;
			text-decoration: none;
			font-weight: bold;
			font-size: .8em;
			background-image: url(assets/mc3_rnav_arrowon.gif);
			background-repeat: no-repeat;
			background-position: 0 0;
		}
		
		#navcontainer a:hover
		{
			color: #000;
			background-color: #889E88;
			text-decoration: none;
			background-image: url(assets/mc3_rnav_arrowoff.gif);
			background-repeat: no-repeat;
			background-position: 0 0;
		}
		
		#navcontainer ul ul li { margin: 0; }
		
		#navcontainer ul ul a
		{
			display: block;
			padding: 5px 5px 5px 30px;
			width: 185px;
			color: #000;
			background-color: #C5D8C5;
			text-decoration: none;
			font-weight: normal;
		}
		
		#navcontainer ul ul a:hover
		{
			color: #000;
			background-color: #889E88;
			text-decoration: none;
		}
		
		#rnavheader {
			padding: 0px;
			margin: 0px;
		}
</style>
</head>

<body>
<div id="rnavheader">
	<img src="assets/mc3_rnav_header.gif" />
</div>
<div id="rnav">
	<div id="navcontainer">
		<ul id="navlist">
			<li id="active"><a href="#" id="current">Item one</a></li>
			<li><a href="#">Item two</a></li>
			<li><a href="#">Item three</a></li>
			<li><a href="#">Item four</a></li>
			<li><a href="#">Item four</a></li>
		</ul>
	</div>
</div>
</body>
</html>

Css Rollover Problems With Firefox And Netscape

Similar Tutorials

View Content

I have just put my website live and it is running perfect in MS Explorer but in firefox and netscape the links at the bottom of the page are not working properly.

Site URL is http://www.updatetechnology.ie

here is the code i have for these links:

<TD><span class="grey"><a href="copyright.htm">Copyright</a> | <a href="sitemap.htm">Sitemap</a> | <a href="links.htm">Links</a> </span></TD>

and the corrseponding css class:

.grey {font-family: Arial, Helvetica, san serif; font-size: 9pt; TEXT-DECORATION:NONE; COLOR:#ffffff;
}
.grey A{
COLOR:#ffffff;
font-family: Arial, Helvetica, san serif;
font-size: 9pt;
font-weight: bold;
font-style: normal;
text-decoration: none;
font-variant: normal;
text-transform: none;

}
.grey A:HOVER{
COLOR:#000000;
font-family: Arial, Helvetica, san serif; font-size: 9pt ;font-weight: bold; TEXT-DECORATION:none
}
.grey A:MOUSEOVER{
COLOR:#000000;
font-family: Arial, Helvetica, san serif; font-size: 9pt; font-weight: bold; TEXT-DECORATION:NONE
}

In netscape when you roll over these links it is just keeping to the default site roll over colours whereas it should be set to the .grey class i defined..........

has anyone come across this before?? and if so is there a solution out there.

Thanks

Replace Image Link On Rollover Problems

Similar Tutorials

View Content

Hi--

I'm sure I'm missing something incredible easy, but I'm working on no sleep so please help!

I've got image buttons and for rollovers I want to have a simple color highlight on the top so I've got the image in the background of a <div> then in a nested <div> I put a 100% transparent .png inside a link tag. Using CSS, I said replace that with the semi-transparent .png.

In Firefox it displays the highlight at the bottom of the button image; in IE 6, it doesn't even display the background.

My code:
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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}
a img {border: none;}
.button {width: 193px; height: 116px; background-image:url(button.jpg);}
.button2 a:link {background-image:url(transparent.png); border: none; width: 193px; height: 116px; display: block;}
.button2 a:hover {background-image:url(hover.png); border: none; width: 193px; height: 116px;}
-->
</style></head>

<body>

<div class="button"><div class="button2"><a href="#"><img src="transparent.png" width="193" height="116" /></a></div></div>
</body>

</html>

Rollover Graphic Menu Problems: 20px Or So Shift

Similar Tutorials

View Content

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

<div> Id Block-like

Similar Tutorials

View Content

http://warcraftpress.com/theme/theme.html

I'm trying to have #footer be pushed down instead of the menu lapping over it. Basically, I want the menu to push it down, but it just overlays it.

Thanks

Block Elements In A Li Tag

Similar Tutorials

View Content

Hi Guys,

I have a generic Question/Problem to do with a Block Element (in this case a div) in an li tag. This seems to be a problem in browsers like IE8 and Safari but not IE7 and the latest FireFox version. Where with the div item 'drops down' a line from the li bullet.

Like this (. is the li):
.
Here is My Div Content

I want it to be like this:
. Here is My Div Content

Now this only doesn't happen if I just have plan text between the div with no class, so I'm thinking that something in my css dragHandle class may be at fault. Either that or I need to add something to it to do with float or display: line or block etc? Any thoughts or ideas are most appriciated (note I'm using a div in an li as I'm using the AJAX reorder list control and need something for a 'drag handle' to select an item in the list. The reorderlist uses ul and li to display itslef to I have to use this markup structure).

Here is my markup.

<ul>
<li>
<div class="dragHandle">
</div>
</li>
</ul>

DragHandle class is as follows
.dragHandle
{
width: 20px;
height: 25px;
background-image: url(/styles/icons/selectarrow.JPG);
background-position: center;
background-repeat: no-repeat;
cursor: move;
}

Ie Display:block?

Similar Tutorials

View Content

I have this CSS for my "globalNav" class:

.globalNav {width: 217px; background-image:url(images/barbackground.jpg); background-color: #1B619E; background-repeat: repeat-x; border-right: 1px solid #075284; position: absolute; left: 0px; top: 125px; height: 450px}

.globalNav A {background-color: #004E82; border-top: 1px solid #407AA1; border-bottom: 1px solid #00375C; border-right: #00406B; color: white; font-weight: bold; padding: 2px 5px 2px 5px; text-decoration: none; display: block}

This is my code for globalNav:

<div class="globalNav">
<a href="#">Global 1</a>
<a href="#">Global 2</a>
<a href="#">Global 3</a>
<a href="#">Global 4</a>
<a href="#">Global 5</a>
<a href="#">Global 6</a>
</div>

For whatever reason, display block won't work in IE unless I remove the width, height, and positioning. Anyone know any tricks to make this work?

Td Display Block???

Similar Tutorials

View Content

I would like to have a table with 6 td's across and the 7th td to break line and default to under neath the first td.
I tried using display block and firebug outline the area where my content should be but it is still to the right of the 6th td.
I would just like to do this to keep it in the same row so i can hide and show it dynamically outside of those first 6 td's.

i coudnt find the forum search feature...?

but anyone help with wht i am doing wrong? much appreciated

[css] Headers And The Containing Block

Similar Tutorials

View Content

In the attached gif, you should be able to see exactly what I mean, if I don't explain it well enough.

I have a containing block, #content_main, defined as such:
Code:

#content_main
{
	margin-left: 170px;
	padding: .5cm .25cm 50px;
}

Headers (h1, h2, h3, etc) are used inside #content_main and are defined like this:
Code:

h1, h2, h3, h4, h5, h6
{
	font-family: georgia, serif;
	border-bottom: 1px solid #009;
}

If you look at the attached gif, you'll see the problem. The top one is what happens. It extends the border-bottom to the width of the containing block, even though it places the text correctly. The second one "Something Else" is what I want it to look like. I edited that with Fireworks.

Since it renders the same in Firefox and IE, I figure it's my code that's wrong. Any thoughts?

MPEDrummer

Block Of Colour

Similar Tutorials

View Content

Hi, im trying to create a block of colour of various width. Im trying to do it with <span> like so

<span style="background-color:#336699; width:100px"></span>

Now why wouldnt that work and is there a better way to do what im trying to achieve?

Centering A Block

Similar Tutorials

View Content

Hi guys,

can you give me some tips to centering a block (<div>) of code? I would like it centered vertically and horizontally and I would also like the background of the element centered (so the whole thing).
text-align doesn't work, it only centers the text, not the element.

Thanks,
Josh

Display: Block; And Width: 100%

Similar Tutorials

View Content

I'm trying to use image sprites to make images on my website switch to another image when the user hovers over them. These images are each placed in their own td that are set at different percentages within a 100% table.

The reason I need to use percentages is because I want the table and images to re-size to fit each individual computer screen. They do this beautifully, but when I add the image sprite, which has "display: block;" in its CSS, my images wont re-size. They just cut off.

Is there a way to use image sprites without the display: block code? Or is there a similar way to make images seamlessly grow and shrink to fit a browser without using a width percentage?

Thanks!

Div Positioning...3 Block Layout

Similar Tutorials

View Content

I have been using css for a while, but mostly just for style, not layout. I am trying to do a site, with basically three divs. One on the left for content, two on the right...one for a menu, and the other showing an image.

I have stripped down the page to the smallest possible that I can show the problem. Basically, I want the image (red background) to be below the menu (dark purple bg), and both of them on the right of the content (lavendar bg).

I have validated the html, but I am not getting a response from the css validator right now.

Here is my html so far:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"(URL address blocked: See forum rules)">
<html>
<head>
<title>Vote YES Mosinee!</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
	body{
		padding: 0px;
		background-color: #FFF; 
		text-align: center;
    	font: 76% Verdana,Arial,sans-serif;
    }
    div#container{
		width:800px;
		margin: 0 auto;
		text-align: left;
		background:  #ff0;
	}
	div#content{
		background: #d1c9e2;
		width:550px;
	}
	div#nav{
		float: right;
		width:240px;
		background: #484393;
	}
	div#nav p{
		padding: 5px 0;
	}
	div#nav h2{
		font-size: 110%;
		color: #333;
	}
	div#imageSection{
		float: right;
		width: 240px;
		background: #ff0000;
	}
</style>
</head>
<body>
<div id="container">
	<div id="nav">
		<ul>
			<li>There will be a menu here.</li>

			<li>It will have many items.</li>
			<li>It will have many items.</li>
			<li>It will have many items.</li>
			<li>It will have many items.</li>
			<li>It will have many items.</li>
			<li>It will have many items.</li>

			<li>It will have many items.</li>
			<li>It will have many items.</li>
		</ul>
	</div>
	<div id="imageSection">
		<img src="(URL address blocked: See forum rules)" alt="Children">
	</div>
	<div id="content">

		<p>Vote YES is dedicated to reaching out to the members of the Mosinee community and to raising awareness of the situation our elementary students face each school day.  Through their efforts, they hope to gain the support of Mosinee's voters and help the community create a facility that enables an optimal and safe learning environment.</p>

<p>After years of failed referendums and the advent of another proposed addition, numerous community members have come together and organized "Vote YES" (VOTE for Your Elementary School).  The organization was formed to support the referendum proposed by the school board and help educate individuals around the community.  </p>

<p>On April 3, 2007, the voters of the Mosinee School District will be asked to approve a referendum to address space inadequacies and safety issues at the current elementary school.  The VOTE YES group formed for a number of different reasons.  Teachers and parents found it difficult to ignore the glaring parking issues, overcrowding in the cafeteria, the use of hallways and storage closets for classes, and the 20-year band-aid solution of adding portable classrooms.  Taxpayers couldn't ignore the problem and individuals throughout the community stepped forward to help.  </p>

<p>Many More Paragraphs....</p>
	</div>
</div>
</body>
</html>

How can I achieve this?

Buttons In <a> Where Display: Block

Similar Tutorials

View Content

I have several <a>'s on my page, where their display is set to block, and I want to put a submit button in each of them. When I put the <button> in the <a></a>, though, the submit button doesn't go to the processing page, it just goes where the <a> was headed.

How to I get the submit button to go to the processing page and not where the <a> was headed? I could put the submit button below the <a> block, but that's very unattractive, and I want the user to be able to click anywhere in the block to go to the next page (except for where the submit button is.) Any help much appreciated!

Is It Ok To Mix Inline And Block Elements?

Similar Tutorials

View Content

Hi!

Is it OK to mix inline and block elements?

For example:

<imp ... />

<p> .... </p>

Thanks

Css Selectable Block Test

Similar Tutorials

View Content

I have a caption text in a span tag appear on an image rollover.

I'm trying to make the caption text selectable and having a terrible time. Can anyone point me in the right direction?

Thanks!

Here is my code:

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" />
<title>testing</title>
<style type="text/css">
<!--
body {
	background-color: #FFFFFF;
	}

div#img a span {display: none;}

div#img a:hover span{display: block;
   position:fixed; top: 300px; left: 350px; width: 125px;
   padding: 5px; margin: 10px;
   color: #AAA; background: black;
   opacity: .5;
   font: 10px Verdana, sans-serif; text-align: left;
}




-->
</style></head>

<body>

<div id="img"><a href="#"><img src="http://i43.tinypic.com/2irct0.jpg" width="500" height="392" border="0"/><span>here is the caption text!</span></a></div>
</body>
</html>

Icons Next To Text Block

Similar Tutorials

View Content

I'm trying to put an icon next to a block of text, but I have a bunch of strange width problems. I'd like it to be directly next to the news story, but without the text wrapping. So far, my solution causes the gap between the icon and the text to get really huge as resolution increases. What I want is for the icon to be about 20 or 30 pixels away regardless of the resolution.

Any simple way for me to do this? I'm still trying to get the hang of all this CSS stuff.

News page: http://www.brickfilms.com/

Story code:
Code:

<div id='newsItem'><img src="<?echo $icon;?>" width="64" height="64" class="newsIcon">
<div id='newsText'>
<h3 class='newsTitle'><?echo $title;?></h3>
<p class='newsStory'><i>by <?echo $author;?>, <?echo $date;?></i><br>
<?echo $story;?>
</p>
<br></div>
</div>

The CSS is at http://www.brickfilms.com/brickfilms.css

Thanks in advance.