CSS - [wordpress] Post Excerpt Double Image Issue

Hello,

I'm new to CSS but code is beginning to make more sense, for the most part. I've been able to transform an existing template into something more custom.

The theme over all has turned out well and I'm happy with it. There is one snag that I'm running into and I really would appreciate someone with more experience and a better understanding of css framework to give me guidance.

The issue: The "Comments/Respond" section for each blog post is getting pushed down rather far and there are odd little blue dots showing up to the right, just below the post itself, but before the beginning of the comments section.

Now, I did try plugging the CSS code into the validation service and have found some warnings. The thing is, many of these issues were in the template (I didn't change them or edit them). So would the errors that the validation tool found be interfering with how the comment section is getting pushed down?

Example of errors:

Quote:
318 input[type="text"], textarea Property box-shadow doesn't exist in CSS level 2.1 but exists in : inset 1px 1px 1px rgba(0,0,0,0.1) inset 1px 1px 1px rgba(0,0,0,0.1)
319 input[type="text"], textarea Property -moz-box-shadow doesn't exist : inset 1px 1px 1px rgba(0,0,0,0.1) inset 1px 1px 1px rgba(0,0,0,0.1)
320 input[type="text"], textarea Property -webkit-box-shadow doesn't exist : inset 1px 1px 1px rgba(0,0,0,0.1) inset 1px 1px 1px rgba(0,0,0,0.1)
823 .wp-caption Property -moz-border-radius-bottomleft doesn't exist : 3px 3px
824 .wp-caption Property -moz-border-radius-bottomright doesn't exist : 3px 3px
825 .wp-caption Property -moz-border-radius-topleft doesn't exist : 3px 3px
826 .wp-caption Property -moz-border-radius-topright doesn't exist : 3px 3px
1149 .submitbutton Value Error : float attempt to find a semi-colon before the property name. add it
1286 pre Property -webkit-text-size-adjust doesn't exist : 140% 140%
1289 code Property -webkit-text-size-adjust doesn't exist : 160% 160%
1296 #access, .entry-meta, .entry-utility, .navigation, .widget-area Property -webkit-text-size-adjust doesn't exist : 120% 120%
1299 #site-description Property -webkit-text-size-adjust doesn't exist : none none


The thing is, I'm rather confused as to where to pinpoint the gap.

In the CSS stylesheet the blog posts which are called out as "Content" live under an id called "Main". The comments seem to live under Main as well and seem to be in their own segment. I just can't figure out how to either pull the comment segment/table whatever you'd call it up more snug with the post, or eliminate whatever excess space is pushing comments down so far and causing the mysterious blue dots.

I would post a link to what I'm talking about but I'm too new to the forum.

Thanks in advance!

I have painted myself into a corner, and it's time to paint myself out...Hopefully with help from someone here!

For the images on my website, I have added a two color border around every image (in Photoshop)...A 1-pixel green border (#6e888f) on the outside of the image, and then a 1 pixel white border just inside that. See example he

mableyhandler dot com

As I add more and more images to the site, it is getting harder to keep up with adding the border in Photoshop every time. Is there a (semi-easy) way to do this in HTML? OR maybe in CSS?

The challenge is that it needs to be a double border...And, it needs to be a permanent design element (the image is clickable, but the border colors should not change on rollover).

Thanks very much

I've checked the class, and it's peachy, I've added a style= "margin: 0 auto;" tag, a style="text-align: center;" tag.

I've tried everything I can think of.

The image isn't receiving any parent styling that is holding it back from centering that I am aware of.

Will somebody please learn me!

URL is :
www . dalcon .com / business / skype-for-asterisk/

the image I'm referring to is the skype for asterisk image.

Sorry about broken link, I don't have the rep around here to not be considered a spammer yet I guess (it won't let me post a link)

I am trying but failing to get this to work. I have used a slider (bxslider)and made some changes to it so that I have my other slides visible.

Then I have added a background png so that the right and left images are covered with a transparent png with around 80% opacity.

Now the problem I am having is that because I have applied this image to the div it is now stopping the links being active.

Can anyone help me get this right, I need the transparent png to be over the main viewport so the right and left images are not fully shown. If you view this url you will see what i mean:

http://www.barryzimmerman.co.uk/new/

When you see the text for each slide, it should be an active link to the website, but because of the png it is stopping this. I really want to achieve this, so any help much appreciated.

The css files are he
http://www.barryzimmerman.co.uk/new/css/design.css
http://www.barryzimmerman.co.uk/new/css/content.css

Please help

Look at this page http://hometown.tmhdesign.com

See the right hand column, top element labeled "Quick Connections"? The icons are a bg on the containing div element that is holding an ul. I have that bg exactly where I want it in FF, but in IE7 is higher than it should be by about 5-10 pixels.

for some reason i cant figure out, i cant get a background image to show up at all in my document. ive tryed validating both CSS and HTML, ive tryed different approaches to adding a background image in CSS and even removing individual styles to try to find the source of the issue. I am new to this forum and this is my first post. if anyone can tell me why this isnt working i would greatly appriciate it.


here is the code:


Code:

<html>
<head>
    <title>Home</title>
    <style type="text/css">
body
{
background:#3D1400;
}
/******modual positioning******/
div#container
{
width:48em;
height:41em;
margin-right:auto;
margin-left:auto;
margin-top:auto;
margin-bottom:0em;
padding:1em;
padding-top:0em;
background:#00BFBF;
}
/******* this is where im trying to put a background image*/
div#headding
{
background:url("") purple repeat-x;
width:48em;
height:4em;
padding:1em;
margin-bottom:3.5em;
margin-left:-1em;
}
img.bd
{
position:relative;
width:50em;
height:0.5em;
left:-1em;
top:-0.5em;
}
nav
{
margin-top:-1em;
margin-left:0em;
margin-bottom:3em;
width:48em;
height:1.5em;
background:#ffffff;
padding-left:0em;
border-radius:0.2em;
}
/*side bar*/
div#side_left
{
width:10em;
height:29em;
float:left;
background:#4CD2D2;
}
#contests, #featured_blog, #featured_discussion, #featured_poll
{
width:10em;
margin:0.8em;
color:#0D1A8C;
font-weight:900;
font-size:0.8em;
background:#79DDDD;
padding:0.5em;
}
hr.side
{
border:0.1em solid #0D1A8C;
width:10em;
}
/*side bar end*/
div#featured_photo
{
float:left;
margin-left:1em;
width:20em;
height:20em;
background:#000000;
overflow:hidden;
border-radius:1em;
}
div#top_rated_photos
{
float:right;
width:16em;
height:20em;
background:#111111;
}
footer
{
position:relative;
height:4em;
width:58.6em;
margin-right:auto;
margin-left:auto;
background:#000000;
text-align:center;
padding:2em;
font-size:0.8em;
}
a.f
{
color:#ffffff;
text-decoration:none;
border-right:.1em solid #ffffff;
padding-right:1em;
margin-right:0.3em;
padding-left:0.3em;
margin-left:0.3em;
}
/**********Photo Gallery**********/
a.tr_img img.top_r
{
height:3.9em;
width:3.9em;
float:left;
border:0.1em solid #000000;
}
a.tr_img img.top_r:hover
{
margin:0em;
border:.1em solid #ff0000;
}
/******text styles******/
h1
{
font-size:2em;
text-transform:capitalize;
border-bottom:0.2em solid #8C8CE8;
color:#8C8CE8;
}
span#fp
{
color:#999999;
float:right;
margin-right:1em;
font-weight:bold;
display:block;
}
/***************************************NAVIGATION BAR***************************/
/*top level styles*/
ul.top_link li 
{
float:left;
background:#ffffff;
position:relative;
display:inline;
border-right:0.1em solid #00BFBF;
border-left:0.1em solid #00BFBF;
}
ul.top_link a 
{
display:block;
position:relative;
font-size:1.3em; 
color:#000000;
text-decoration:none;
padding-left:1em;
padding-right:1em;
}
/* style the top level hover incase images fail *//* dropdown ul styles */
ul.top_link li.sub_link a 
{
padding-right:0.5em;
padding-left:0.5em;
width:8em;
}
ul.top_link >li:hover
{
background:#000080;
}
ul.top_link >li>a:hover
{
color:#ffffff;
}
ul.top_link li:hover.sub_link, ul.top_link li.sub_link a:hover, ul.top_link li.sub_link a.mn_active
{
background:#000080; 
color:#ffffff;
}
/********* dropdown sytles *********/
ul.top_link li ul 
{
position:absolute;
top:2em; 
left:0;
z-index:1;
visibility:hidden; 
}
ul.top_link li > ul 
{
top:auto; 
left:auto; 
}
ul.top_link li:hover ul, ul.top_link, ul.top_link a:hover ul 
{
visibility:visible; 
}
ul.top_link ul li
{
border:none;
height:auto;
float:left;
width:8em;
top:0.15em;
left:-2.6em;
padding:0em;
text-align:left;
background:#ffffff; 
}
ul.top_link ul li a 
{
float:left;
font-size:0.8em;
text-decoration:none;
display:block;
height:2em; 
line-height:2em;
text-align:left; 
}
/************************** ~DROPDOWN STYLES~ *************************/
.top_link li.sub_link ul 
{
background:#ffffff;
padding-left:0em;
}
.top_link li.sub_link ul li a 
{
width:8em;
}
.top_link li.sub_link ul li a:hover 
{
background:#000080;
color:#6385A6;
}    </style>
    <base href="index.html" />
</head>
<body>

     <div id="container">
	     <div id="headding">
	         <h1>Welcome to purple panda bear &hearts;</h1>
			 <img src="" class="bd" />
			 <img src="" class="bd" />
			 <img src="" class="bd" />
		 </div>
		 		 
		 <nav>
		     <ul class="top_link">
			     <li class="top_link">
				     <a href="index">home</a>
					 <ul>
					     <li class="sub_link">
						     <a href="">sub link</a>
						 </li>
					     <li class="sub_link">
						     <a href="">sub link</a>
						 </li>
					     <li class="sub_link">
						     <a href="">sub link</a>
						 </li>
					 </ul>
				 </li>
				 <li class="top_link">
				     <a href="index">blog</a>
					 <ul>
					     <li class="sub_link">
						     <a href="">sub link</a>
						 </li>
					     <li class="sub_link">
						     <a href="">sub link</a>
						 </li>
					     <li class="sub_link">
						     <a href="">sub link</a>
						 </li>
					 </ul>
				 </li>
				 <li class="top_link">
				     <a href="index">forum</a>
					 <ul>
					     <li class="sub_link">
						     <a href="">sub link</a>
						 </li>
					     <li class="sub_link">
						     <a href="">sub link</a>
						 </li>
					     <li class="sub_link">
						     <a href="">sub link</a>
						 </li>
					 </ul>
				 </li>
				 <li class="top_link">
				     <a href="">forum</a>
					 <ul>
					     <li class="sub_link">
						     <a href="">sub link</a>
						 </li>
					     <li class="sub_link">
						     <a href="">sub link</a>
						 </li>
					     <li class="sub_link">
						     <a href="">sub link</a>
						 </li>
					 </ul>
				 </li>
				 <li class="top_link">
				     <a href="index">gallery</a>
					 <ul>
					     <li class="sub_link">
						     <a href="">sub link</a>
						 </li>
					     <li class="sub_link">
						     <a href="">sub link</a>
						 </li>
					     <li class="sub_link">
						     <a href="">sub link</a>
						 </li>
					 </ul>
				 </li>
				 <li class="top_link">
				     <a href="index">anime</a>
					 <ul>
					     <li class="sub_link">
						     <a href="">sub link</a>
						 </li>
					     <li class="sub_link">
						     <a href="">sub link</a>
						 </li>
					     <li class="sub_link">
						     <a href="">sub link</a>
						 </li>
					 </ul>
				 </li>
				 <li class="top_link">
				     <a href="index">login</a>
					 <ul>
					     <li class="sub_link">
						     <a href="">sub link</a>
						 </li>
					     <li class="sub_link">
						     <a href="">sub link</a>
						 </li>
					     <li class="sub_link">
						     <a href="">sub link</a>
						 </li>
					 </ul>
				 </li>
			 </ul>
		 </nav>
		 
		 <div id="side_left">
		     <div id="contests">
			     Featured Contests
				 <hr class="side" />
				 <a href="">Bunnys vs. Pandas</a>
				 <a href="">Dianoaurs vs. Elefants</a>
				 <a href="">Pickles vs. Ice Cream</a>
		     </div>
		 
		     <div id="featured_blog">
			     Featured Blogs
			     <hr class="side" />
			     <a href="">blog 1</a> by, 
				 user 1<br />
			     <a href="">blog 2</a> by,
				 user 2<br />
			     <a href="">blog 3</a> by,
				 user 3<br />
		     </div>
		 
		     <div id="featured_discussion">
			      Featured Forums
				  <hr class="side" />
				  <a href="">Anime discussion</a>
				  <a href="">Panda discussion</a>
				  <a href="">Epicness </a>
		     </div>
			 
			 <div id="featured_poll">
			     Featured Poll
			     <hr class="side" />
			     What is your favorate fuzy animal?<br />
			     <input type="radio" value="bunnys" />Bunnies<br />
				 <input type="radio" value="pandas" />Pandas<br />
				 <input type="radio" value="kittys" />Kittys
			 </div>
		 </div>
		 

	 </div>
	 
	 <footer>
	     <a href="" class="f">footer link</a>
		 <a href="" class="f">footer link</a>
		 <a href="" class="f">footer link</a>
		 <a href="" class="f">footer link</a>
		 <a href="" class="f">footer link</a>
		 <a href="" class="f">footer link</a>
	 </footer>


</body>
</html>

I'm having another link issue. I have images in a <ul> that are links. (It's a gallery using Slimbox + Mootools). Everything looks fine in FF. However, in IE, I get these little maybe 2 or 3 pixel (width) link lines that are blue and then purple when visited. They are not on every image. In fact, my <ul> has 4 lines of six images, and the little extra pixel lines fall in the margin after the first image of every line. Here's my CSS:

Code:

a img {
  border: 0 none;
  margin: 4px 4px 10px 4px;
  text-decoration: none;
}

a:hover img {
  border: 1px solid #e5cb43;
  margin: 3px 3px 9px 3px;
}

ul.photog  {
			list-style-position: outside; 
			padding: 0px; margin: 0px;
			border: none;
			background-color: #979089;
			width: 850px;
			text-align: center;
			margin-right: auto;
			margin-left: auto;
	
			
		}

		li.photog  {
			margin: 0px;
			padding: 0px;
			list-style-type:none;
		}	

Strange thing is that I have another <ul> that uses identical code to that one and doesn't have the problem I am experiencing with this one. Any help would be greatly appreciated. Thanks in advance!

I need to have numerous images overlap exactly on top of one another at the upper left corner of a frame cell.

When I use absolute positioning, the image is not where it is supposed to be in relation to the table cell.

Relative works, but I cannot seem to overlay the images, as adding images via relative layers just acts as if the images are not in layers at all (i.e. they take up the same space that they would in a normal flowing page)

Is there any way I can make the images be placed relative to the corner of the table cell?

I'm somewhat new to layers, so any help would be greatly appreciated.

Here is example code


<TABLE WIDTH=500 HEIGHT=500 BORDER=0>
<TR>
<TD width=300 height=100>

Need image1 to go in this cell, as well as image2, image3, and image4. All need to overlap perfectly in relation to the constraints of this table cell.

Here is the code I use in the cell for the first 2 layers which just flow one under the other- yet I need them to overlap.

<div id="Layer1" style="position:relative; width:518px; height:322px; z-index:1; visibility: visible;"><img src="images/Map2.gif" usemap="#Map" border=0></div>
<div id="Layer2" style="position:relative; width:518px; height:322px; z-index:2; visibility: hidden;"><img src="images/iloverlay.gif" usemap="#Map" border=0></div>

</TD>
<TD></TD>
</TR>
<TR>
<TD></TD>
<TD></TD>
</TR>
<table>

hi,

Ive got a mixture of CSS and tables (not ideal i know) the problem is the image to the top right.

ive added the image within the container and then the rest of the site content is within a table just below the container line within the index page.

How do i get the image over the tabled data?

URL: http://www.primaryictsupport.co.uk/clients/swinnow/

Thanks for any help...
Mike

Nevermind, folks over at codingforums helped me.

Hi to all,

I have a problem to show full image on background.The css which i am using is good if the screen size is 17 inches or less but above 17 inches background image does not expand to full width and height.

One thing i want to clear that we can't repeat that image .

any solution to this problem will be appreciated.

thanks

I am using eclipse ide to develop a html page. It has a preview function where I can see the background image correctly. However when I run this in a an external browser (IE/Firefox) the background image does not appear. I can go to the location of the image in the browser and see it, also I can view source in browser and it is as below. Also the image is in the same directory as the html page. Any help at all on this would be very much appreciated.


Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
	
	<head>
		<style>
		 body {margin-left: 0px;margin-right: 0px;background:url(bg-gray.gif) repeat center left;color: #000000;}
		</style>	
		<meta http-equiv="Content-Type" content="text/xhtml; charset=UTF-8" />
		<title>Login</title>
	</head>
	
	<body >
	</body>	
</html>

Hi,

I need to create a object like in the attached image (worldmap.gif). The image itself in not hot, just the text;s above it. When the user hovers over the text, two things should happen:

1- The corresponding image should swap with a darker version (Attached: img_continent_africa.gif etc)
2- and a dropdown menu should appear as shown in worldmap.gif.

My question is: How should I approach this from a css layout perespective. How do I position the over-state images.

thanks,

Zain

hey all,

k, i'm using an image replacement method that I have successfully used before, but the image will not show up in IE.

It seems to have something to do with the .replace class, but i can't figure it out.

here's the css;
Code:

.replace { 
position:relative;
/* hide overflow:hidden from IE5/Mac */ 
/* \*/ 
overflow: hidden; /* 
*/ 
} 

.replace span { 
display:block; 
position:absolute; 
top:0; 
left:0; 
z-index:1; /*for Opera 5 and 6*/ 
} 

#homeh1, #homeh1 span { 
background:url(images/h1_home.gif) no-repeat left;
height:60px;
width:312px;
} 

and the html;
Code:

<h1 id="homeh1" class="replace">home<span></span></h1>

And here's the offending page.

any help'd be greatly appreciated.

thanks.

I have a page setup like this....

<table height="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr><td valign="top" class="lt_bar"><img src="template/blue_234/images/lt_shd.jpg" /></td>
<td valign="top"></td>
<td valign="top" class="rt_bar"><img src="template/blue_234/images/rt_shd.jpg" /></td>
</tr>
</table>

and:

.lt_bar {
width: 27px;
background-image: url("images/lt_shd.jpg");
background-repeat: repeat-y;
float: left
}
.rt_bar {
width: 27px;
background-image: url("images/rt_shd.jpg");
background-repeat: repeat-y;
float: right;
}

In IE all is fine, in FireFox the right side shows, the left side does not. any clues...