CSS - Image Problem

Hello,

I don't know whether this is the right forum for my issue, so apologies if it isn't.

To better understand the problem, kindly visit this page:

http://www.lightblu.com/contact.php

Basically, you see those 4 social networking logos? They are at the right position. However, when you click "Submit (without writing anything anything in the form), the errors will display, and the logos will shift downwards as a result. I don't want this. I want the logos to be at the same position.

Question: how could I do this? I'm trying to find the logic first before implementing it, which I can't even figure out.

Thanks guys

I put together a new web layout with divs and css at www.verbazon.net/index.php. I have a php include for that main content box text that shows up, and as you can see, it screws up the content box images separating them. If anyone can help me fix this I appreciate it. My Css file is located at www.verbazon.net/style.css

Hey,
I found a script that enlarges a picture when you hover over it. I edited the script a bit to fit my needs. However, the whole script works fine except that in IE there's a stacking problem. The enlarged image is shown below the thumbnail image (when you hover over the thumbnail image).

This is how it looks in IE: http://img122.imageshack.us/img122/6428/errorbm9.jpg
And this is how it should look (chrome):
http://img122.imageshack.us/img122/4663/correctax8.jpg

I tried to set the z-index of the enlarged image to 2 and that of the thumbnail to 1, but that doesn't seem to work.

the css:
Code:

.hoverbox{    /* For the list (ul tag) */
	float: left;
	cursor: default;
	list-style: none;
	width: 80%;
}

.hoverbox a{
	cursor: default;
}

.hoverbox a .preview{   /* hide the enlarged picture by default*/
	display: none;
}

.hoverbox a:hover .preview{   /* the enlarged image settings */
	display: block;
	position: absolute;
	top: 50px;
	left: 50px;
}

.hoverbox img{	/* the default settings for all images */
	background: #fff;
	border-color: #aaa #ccc #ddd #bbb;
	border-style: solid;
	border-width: 1px;
	color: inherit;
	padding: 2px;
	vertical-align: top;
}

.defaultImg{ /* width of the thumbnail  image */
	width: 100px;
	height: 75px;
}

.hoverbox li{
	background: #eee;
	border-color: #ddd #bbb #aaa #ccc;
	border-style: solid;
	border-width: 1px;
	color: inherit;
	display: inline;
	float: left;
	margin: 3px;
	padding: 5px;
	position: relative;
}

.hoverbox .preview{
	border-color: #000;
}

The html for the images
Code:

<ul class="hoverbox"> 
<li> 
	<a href="#"><img src="images/pictures/thumbnails/foto1.jpg" alt="description" class="defaultImg"/><img src="images/pictures/foto1.jpg" alt="description" class="preview" /></a> 
</li> 
<li> 
	<a href="#"><img src="images/pictures/thumbnails/foto2.jpg" alt="description" class="defaultImg" /><img src="images/pictures/foto2.jpg" alt="description" class="preview" /></a> 
</li> 
</ul>

Does anyone have a solution to my problem?

Thanks in advance

Hi all!

I am stuck with writing my first CSS style based website.
First you should know that I'm using a external CSS script.

What do I have?
I have a page with a background image.
Then I need text right? Well I need to align the text, to do so, I created this (for the index page):

Code:

<div id="content">
	<div id="colOne">
		<p></p>
	</div>

	<div id="colTwo">
		<p></p>
	</div>
</div>

To style it with CSS, I wrote this in my external STYLE.CSS script:
Code:

#colOne {
	float: left;
	width: 500px;
}

#colTwo {
	float: right;
	width: 184px;
}

This all works, I have 2 'tables' almost next to each other.

Well now you know how my script works, it may help you find a solution for my question:

-----
Because my background has light and dark colours, I want to create a 50% invisible background for my table, so the text is more visible and I am still able to see the background.

I found out, that I have to use a image and use this code:
Code:

<div style="width:250px;margin:0 auto;">  
<span style="float:left;filter:alpha(opacity=25);-moz-opacity:.25;opacity:.25;">
<img src="image.gif"></span> </div>

Let say image.gif is a black image100*100, when you apply this code, you will be able to look trough the image.

so I thought I could use it onto my tables, take a small black image, make it the background, let it repeat it so the whole table would be black, and then apply the code... but I don't know how, because the script is not written for a external CSS script, and I don't know how to use a image as a table background.

Can anyone please tell me how to do this?
I prefer that you complete my script(A)

Thanks for helping me out,

Stef

I have a <ul> which uses a list-style-image as a bullet, positioned outside. In FF this works fine, but in IE the bullet sometimes displays, sometimes appears obscured. It doesn't appear to be the flickering effect that other posts about bullets have mentioned. It is static and changes only on refresh.

Code:

#content ul {
	list-style-image: url(../assets/bullet.gif);
	list-style-position: outside;
	color: black;
	vertical-align: middle;
}
#content li {
	color: black;
	line-height: 1.8em;
	font-size: 12px;
}

Code:

<div id="content">
    <ul>	  
      <li>organisational development, training and coaching</li>
      <li>learning</li>
      <li>children's services</li>
      <li>evaluation and qualitative research</li>
      <li>public sector policy, strategy and enterprise</li>
      <li>partnership support and communities projects</li>
      <li>working with difficult and complex issues</li>
      <li>building capacity and capability</li>
    </ul>
</div>

It happens on a couple of other computers too. The page is XHTML 1.0 Strict. I tried to use a background image instead but would prefer not to do it this way.
Any advice would be good. Page is at sample page

I have a problem with my CSS in IE6 (surprise, surprise).

If you look at www.bluehatmedia.co.uk

you will notice that the left hand menu is for some reason on the far right (needing to scroll).
But if you look in FireFox, Netscape, Opera, Safari they all work fine.

But if you mouse over a link then the menu goes back to the left had side where it should be.

and when i remove the following from my CSS:

background-image:url(images/picture.gif);
background-repeat: repeat-y;
background-position: right top;

the background image doesnt display (obviously) and then menu goes back to the left.

Any ideas much appreciated

Tom

I want "alternate views" text and thumbimage stand on the same line. I dont understand why the image moves a line below. Please advise.


PHP Code:
 html:
#product .productimage .thumb {  float:left; width: 250px; border-bottom:1px dotted #ece7d1; }
#product img#thumbimage { float:right;    width: 16px; height: 16px; border: 0px; }

css:
            <div class="thumb">
                alternate views : <img src="http://www.refinethetaste.com/html/THEMES/default/images/pictures.png" id="thumbimage" />
            </div> 

Hi,
Code:

<a href="..." ><span class='openP'></span>Open this section</a>
	
<style type="text/css">
span.openP{
  background-image:url('images/plus.gif');
  background-repeat:no-repeat; 
  width:50px; 
  background-position:left center;}
</style>

Why does "Open this section" text appears over the image 'images/plus.gif'?
How do I make 'plus.gif' to be left or right to the text?

Does anyone have have an idea of why the problem I am about to describe is happening?

View this link in IE 6:
paintingshiva.com / 2006rd / www / template / gallery.html

can't post url.. take out spaces between slashes
URL


This site is a prototype for my website that I am redesigning. The page above will be one of the gallery pages. Right now, I ma using colored circles as placeholder content.

Rollover the right side ART navigational elements (colored circles).

The weird circumstance:
When I rollover, two different nav elements one after another (except for the first one), the div where the title elements are, fold up into the main content area (where the large colored circle is). But if you rollover the first one after this happens, everything goes back to normal.

I can not figure out why this is happening.

I built the ART navigational elements by adding a background image to the style of the anchor tags. There is also a JavaScript at the top of the page that is changing the style of each element to make the rollover effect.

Morning guys and girls,

I am getting a headache trying to straighten this bug out and could really do with a fresh pair of eyes.

The page is he www.BeeBee-Design.co.uk/dev.

It works fine in IE6 ( ) but not FF ( ).

The relevant piece of HTML is:

Code:

  <div class="navigation">
    <ul>
      <li class="navigation">
        <a class="nav" href="index.html#">HOME</a></li>
      <li class="navigation">
        <a class="nav" href="index.html#">SERVICES</a></li>
      <li class="navigation">
        <a class="nav" href="index.html#">HOTELS</a></li>
      <li class="navigation">
        <a class="nav" href="index.html#">QUOTE</a></li>
      <li class="navigation">
        <a class="nav" href="index.html#">BOOK</a></li>
      <li class="navigation">
        <a class="nav" href="index.html#">CONTACT</a></li>
    </ul>
  </div>

And the CSS:

Code:

div.navigation {
	font-family: Arial;
	font-weight: normal;
	word-spacing: 10px;
	padding: 0 40px 0 0;
	margin-top: 120px;
	line-height: 30px;
	background-color: #9A9FBA;
	text-align: center;
}

* html div.navigation {
	word-spacing: -6px;
}

a.nav:link {color: #FFFFFF; text-decoration: none; background-image: url(images/navback.jpg); width: 117px; height: 30px;}
a.nav:visited {color: #FFFFFF; text-decoration: none; background-image: url(images/navback.jpg); width: 117px; height: 30px;}
a.nav:hover {color: #FFFFFF; text-decoration: none; background-image: url(images/rollover.jpg); width: 117px; height: 30px;}

li.navigation {
	display: inline;
	font-size: 18px;
	font-weight: normal;
	color: #FFFFFF;
}

The problem seems to be something to do with the way that IE will stretch the block to the width and height settings in the CSS and FF will not. Any suggestions greatly appreciated and will be rewarded with a packet of the finest Chocolate Digestives known to mankind.

I thank you.........

Hello,
I'm currently developing a new website for a clan but Internet Explorer isn't displaying the background image of the content area correctly.

It pushes the content area ~4px to the right from where it should be. I've tried reducing the size of the navigation element but that didn't work and in fact had the opposite effect of what I was looking for.

For some reason I can't link to an image, nor to the site itself to show you the error.

This is the code applicable to the content area.
Code:

#content
{
	width:770px;
	background-image:url(images/backgrounds/conbg.png);
	background-repeat:repeat-y;
	font-size:11px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 70px;
	margin-left: 130px;
	margin-right: 0px;
	vertical-align:top;
}

#contentlimit
{
	width:690px;
}

#condiv
{
	width:770px;
	margin-left: 130px;
	margin-right: 0px;
}

And this the Navigation element:
Code:

#nav
{
	width:130px;
	display:block;
	float:left;
	vertical-align:top;
	margin: 0px 0px 0px 0px;
}

.mlink a
{
	display: block;
	color: #666666;
	background-image:url(images/backgrounds/link.jpg);
	width: 130px;
	padding: .0px .0px;
	height:15px;
	text-decoration: none;
	text-indent: 10px;
}

.mlink a:hover
{
	color: #333333;
	text-decoration: none;
	background-image:url(images/backgrounds/linkhov.jpg);
}

At last check, with this current style sheet, the code was valid.

Any help appreciated,
Cold

the page is http://www.mostardesigns.com/fmrehabv2/

as you can see in FF it shows up right but in IE the little menu splitters on the left menu are like 10px high instead of 2px for some reason, help!

thanks in advance.

I been looking at a tutorial about roll over but I'm having a slight problem. I made the image I want to change but it aint working, can anyone please help me.

the code i have so far is:
CSS:
Code:

ul#link1 li a {
  background-position: 0 0;
}
ul#link1 li a:hover {
  background-position: 0 -28px;
/* the second number should be the negative height of the link. */
}
#link1 {
  background-image: url(images/nav_home.gif);
}

HTML:
Code:

<li class="link1"><a href="index.php">link1</a></li>

The image:

my page is at http://pageshree.com/index.php .

In the left hand column of the site, u see two titles of "navigation" and "support". the image is 80px and show fine for navigation, but for support it stops and doesnt finish off the image on the right hand side.

CSS is:
Code:

.subheads {
	height:18px;
	width:80px;
	margin:0;
	padding: 0 1em;
	background:#FFF url(images/subhead.gif) no-repeat;
	color:#FFF;
	font-size:12px;
	font-weight:bold;
	text-align:center;
}

HTML:
Code:

<span class="subheads">Navigation</span>

Any help?

Hey all. I've been putting together a website for my friend, and my css chops are admittedly pretty old and not that great anyway.
I'm wondering if anyone could give me some advice. I can't get a background-image in a <div> to load at all in a firefox browser, though it loads in safari. I've highlighted the particular image tag. Does anything look wrong?
_____________________________________
a:link { text-decoration: none;}
a:visited { text-decoration: none;}
a:hover { text-decoration: underline;}
a:active { text-decoration: none;}

body {
background-image: url("images/backcolor.jpg");
}

#site {
position: absolute;
top: 0px;
left: 0px;
width: 864px;
height: 576px;
background-image: url("images/backdrop.jpg");
overflow: auto;
}
____________________________
(snippet from html)
<body>
<div id="site">
<div id="nav">
<a href="about.html"><img src="images/about.jpg" border="0"></a>
<a href="resume.html"><img src="images/resume.jpg" border="0"></a>
<a href="portfolio.html"><img src="images/portfolio.jpg" border="0"></a>
<a href="links.html"><img src="images/links.jpg" border="0"></a>
</div>
<div id="image">
</div>
<div id="text">
<span class="main">
<span class="title">There is music in everything.</span><br>

<span class="link">In the very core of the emotions we emit as human beings there is sonic substance. Much like music, sound contains rhythm, texture, timbre and tone. It has the incredible capability of evoking and opening all of our senses: sight, taste, touch and smell. When a sound design is successful it is an art, a piece that is honored individually for its strength and intelligence, rather than its ability to support a production.</span> <br><br>

<span class="link">These are the qualities I strive for in my designs, to create sensory events that evoke emotional responses and aesthetic meaning. Sound can have great presence in a performance. It should always be welcomed. </span> <br><br>

<span class="link">Anthony Mattana is a junior sound design major at Carnegie Mellon University's School of Drama. Please feel free to contact at any time.</span>
</span>
</span>
<br><br><br>
<span class="main2">
<a href="mailto:anthmattana@gmail.com"><img src="images/sig.jpg" border="0"></a>
</span>
</div>
</div>
</body>
</html>