CSS - Webite Graphic Error

Hi there,

I have two questions actually. I purchased this web template and am putting in my own logo but running into two problems:

1) I don't know how to adjust the css file to get the logo to move towards the bottom of brown header area (more in line with the nav text)

2) The logo I created looks okay in Internet Explorer, but is showing up as really pixelated in Firefox and I cannot seem to find any reasons why this is occurring.

I am including links to the website http://www.kohlrbaby.com/Communicating/index.html and CSS file http://www.kohlrbaby.com/Communicating/default.css , but have put in the exact associated code below:



CSS code associated with the logo as far as I can tell:
Code:

/** LOGO */

#logo {
	float: left;
	width: 430px;
	height: 96px;
}

#logo h1, #logo p {
	margin: 0px;
	line-height: normal;
	text-indent: -9999em;
}

#logo h1  {
	display: block;
	top: 0px;
	left: 0px;
	width: 430px;
	height: 96px;
}

#logo img  {
	top: 200px;
	left: 0px;

}


#logo p {
	margin: -50px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
}

HTML Code:

Code:

<div id="logo">
		  <a href="http://www.communicatingwell.com"><img src="images/CWlogo.gif" height="35" width="300"/></a>
</div>

I hope these are okay questions to post, I have tried to figure it out myself, but don't seem to be getting anywhere!

Many thanks for any ideas or help!

Hello there,

I have been trying to get a web site up and running and am having problems getting a graphic to be positioned to the left and a menu right justified.

So far I have been able to make the CSS compatible with both firefox and IE.

So far I've got


Code:

<table width="100%" bgcolor="#666666">
	<tr>
		<td>	
			<img src="images/logo.gif">
		</td>
		<td>
			<div class="menu" style="text-align:center">
				<div class="outerFirst"><a href="index.php"><span>Home</span></a></div>
				<div class="outerFirst"><a href="index.php"><span>Services</span></a></div>
				<div class="outerFirst"><a href="index.php"><span>Senoir Centers</span></a></div>
				<div class="outerFirst"><a href="index.php"><span>Calendar / Menu</span></a></div>
				<div class="outerFirst"><a href="index.php"><span>Contact Us</span></a></div>
				<div class="outerFirst"><a href="index.php"><span>About</span></a></div>
			</div>
		</td>
	</tr>
</table>

and for the CSS

Code:

#menu {
	height: 54px;
	margin: 3em 0; padding:0 1em;
	border-bottom: 0px solid black;	
}

div.outerFirst {
	float: left;
	width: 100px; height: 130px;
	margin: 0 0px 0 0;
	background: url( '../images/greyFirst.gif' ) 0 -50px no-repeat;
	}
div.outerFirst a {
	cursor: pointer;
	display: block;
	margin: 0; padding:0;
	width:100px; height:54px;
	overflow:hidden;
	font-family: Arial;
	font-size:0.7em;
	font-weight:normal;
	color:#FFFFFF;
	text-decoration: none;
	background: url( '../images/greyFirst.gif' ) top left no-repeat;
	}
div.outerFirst span {
	height: 54px;
	display: block;
	margin:0; padding: 25px 0px 0px 0px;
	}

I know that I've got tables in there, but I don't know how the image and the menu be on the same level without it.

Any help with the CSS and html (if I've missed something) would be awesome.

Thanks!

- K

Hi people

I have a graphic which has a specific Hue.
I would like to allow users who have IE to change the Hue of that graphic by picking it from a combo-box

Is there a way to change the Hue of a graphic in runtime by changing CSS filters or by some other technique?

regards

Hi There

I'd really appreciate some help on this please.

I keep getting a problem on just one PC (my client's!!), where a left hand graphic disappears, but shows up on everyone else's browsers in firefox, opera, IE6 and safari. She's running Windows XP with IE6 and firefox.



Can anyone suggest why the left hand black logo panel does not show up on her system?

Any help would be most appreciated.

Thanks!

I'm a php/css/graphic designer and I'm looking for some small to medium projects to work on. I charge less than most people and I get everything done in a fast,professional manner. You can contact me at ajay@bountyx.net or AIM: stareatceiling. Thank you in advance.

Hello,

I need to make some unordered lists within a page appear with a graphic as a bullet, and some appear with a disc. My current code is:

Code:

ul {list-style-image: url(../img/redarrow.gif)} 

But this makes all unordered lists appear with the graphic, and of course if I comments out that code, all unordered lists appear with a disc.

Please let me know if it is possible to code it so that I can have both in a page.

Thanks!

I'm trying to have the contact information for a site to always appear in a right div next to the main content div. I would like it to always appear in the top right of the div, no matter how much the user scrolls down. This way, the information is always visible.

I tried experimenting with background images in certain divs, but Firefox (but not IE) was having trouble displaying it the way I wanted.

I've seen it in action before, so I'll post a URL if i can find where.

Hi,

can anyone help me with this problem? I using a graphic with individual boxes on it for links. I want to place text in the boxes describing the link. When I set the padding-top and line - height properties. The text aligns prefect with the graphic. The problem I am having is the padding-top property lowers the graphic placing it below the rest of the table elements. Below is the code for the table cell and the css style.

<td height="261" valign="top"><table width="198" height="410" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="198" height="410" valign="top" class="td_1"><a href="#">Home</a> <br />
<a href="neoceram.php">Design</a> <br />
<a href="pyroceram.php">Development</a> <br />
<a href="patterns.php">Management</a> <br />
<a href="drilling.php">Portfolio</a> <br />
<a href="tints.php">Contact Us</a> <br /></td> </tr>

.td_1 {
background-image:url(nav_bar.gif);
background-position:left;
background-repeat:no-repeat;
background-color: transparent;
padding-top: 66px;
width: 154;
font-size: 12px;
font-weight:600;
line-height: 21px;
position: absolute;
font-family:Arial, Helvetica, sans-serif;
}

Thanks for all your help,

mdh2000

I know the user can enable printing of bg grcs and colour,
this is an administrative thing so I can put in the manual that they need to do that in their browser if they want to print a certain page. I have certain rectangles on the page that align perfectly with areas on the background graphic on the screen. However, when I print preview in Firefox this synch is lost and the rects don't line up with the bg graphic. Kravvitz will hate this page cuz it has a few xhtml errors. I don't know how to make those errors go away without ruining something else. For example,
"no system id specified."

Quote:
Your document includes a DOCTYPE declaration with a public identifier (e.g. "-//W3C//DTD XHTML 1.0 Strict//EN") but no system identifier (e.g. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"). This is authorized in HTML (based on SGML), but not in XML-based languages.



so if I put that system identifier in it then
the page fails to lock if I render a secure version of it because http://www.w3.org is insecure content, and erodes consumer confidence.


The "name" attribute well if you don't have it when you post, I don't think the posts will register it, will they?

I have proprietery attributes also and they are kinda necessary.
The rest of the errors I could probably clear, but 21 is not so bad compared to 2,874.....


Anyway here is an example
http://demo.tixrus.us/98

How can I get this page to print correctly???

I'm trying to create a 'fluid' (i.e. easily resizeable) box that has a image in the top left corner, and a different image in the top right corner.

----CSS------

.display {
background-color:transparent;
margin:20px 10px 40px 10px;
width:45%;
}

.displayTopLeft {
background-image:url('../images/document_logo.gif');
background-repeat:no-repeat;
background-position:top left;
border-left: solid 2px #0099CC;
padding-left:40px;
height:27px;
float:left;
}

.displayHdr {
float:left;
border-top: solid 2px #0099CC;
padding-top:7px;
font-weight:bold;
background-color:#fff;
}

.displayTopRight {
background-image:url('../images/document_corner.gif');
background-repeat:no-repeat;
background-position:top right;
height:27px;
width:27px;
float:right;
}

.content {
padding:5px 12px 5px 12px;
background-color:#fff;
border-right:solid 2px #0099CC;
border-left:solid 2px #0099CC;
border-bottom:solid 2px #0099CC;
}

----HTML-----

<div class="display">

<div class="displayTopLeft" ></div>
<div class="displayHdr">Ethos</div>
<div class="displayTopRight"></div>

<div class="clear"></div>

<div class="content">
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing
etc etc
</p>
</div>

</div>

It almost works the way I want,except the border of the 'DisplayHdr' div only covers the text 'Ethos', and I need it to cover all the space between the 'DisplayTopLeft' div and the 'DisplayTopRight' div. (It's not possible to put a border on the 'DisplayTopRight' div since it's meant to represent a folded corner)

Is what I'm trying to do possible? Or am I missing something incredibly simple?

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

I am getting a CSS validation error
It is: 251 * Parse Error / textarea { border: 1px solid silver; width: 80%; }

If I comment the CSS in question out, it gives me another CSS error a little bit farther down in the stylesheet... not sure why it is doing that or how to just fix this validation error, as the ones that come up after it are similar.

My end goal is to make the page look normal in FF2. Currently in FF2 some of the text in the purple "Sesame Street" box is blocked out.

I didn't create this page, but have been asked to figure out why it looks like this in FF2. I am no CSS expert, but would love to hear from one!

Thanks for your help.

Hello Fellas:

http://global.espritwebdesign.com/muros.html

This webpage will display correctly on IE, Chrome and Safari
But not on Firefox 11 What strikes me the most is the error is very odd. Im Clueless. Can you visite the web page see it for yourself, and maybe give me a hint what could be? Any clues?

I'm getting an error on IE5 for Mac on one of my pages, and I've been unable to figure out how to fix it. Here's the page (the problem is in the MPI Status Bar area):

http://medieval.shadowedrealm.com/mpi/index.php

If you have Firefox or IE6 on your computer, I'm sure it works fine. The problem seems to only be on IE5 for mac, where the browser stretches each of the <li>s all the way across the page, making the page extremely wide.

Basically, I tried to set my CSS so that there are 6 rows of three columns each. I'm pretty sure that this has to do with the strictness of the IE5 mac browser, and I've read articles about trying to fix similar problems to this one on various sites, but I still can't figure out how to fix this specific problem.

Here's my CSS code for the status bar:
Code:

.statusbar {width: 532px;
margin-left: 10px;
opacity: .60;
filter: alpha(opacity=60);
-moz-opacity: .60;
display: block;
text-align: left;
background: #000000;
border: 4px ridge #2B5E17;
}

.titleback{height: 20px;
width: 528px;
background: #00032F;
border-top: 1px solid #16570B;
border-bottom: 1px solid #16570B;
border-left: 1px solid #114E6F;
border-right: 1px solid #114E6F;
}

.titleback ul{padding: 0;
margin: 0;
list-style-type: none;
width: 526px;
}

.titleback li {width: 240px;
float: left;
margin-left: 2px;
margin-top: 2px;
text-align: center;
font-weight: bold;
font-size: 12px;
}

.title{color: #FF0000;
height: 20px;
width: 520px;
padding: 2px;
font-weight: bold;
margin-left: 2px;
text-align: left;
font-size: 13px;
}

.text{width: 520px;
height: 96px;
font-weight: bold;
font-size: 9px;
margin-left: 1px;
}

.text ul{padding: 0;
margin: 0;
list-style-type: none;
width: 520px;
margin-left: 2px;
}

.text li {width: 168px;
height: 16px;
display: inline-block;
float: left;
margin-left: 1px;
border-left: 1px solid #808080;
border-right: 1px solid #808080;
}

.category {width: 168px;
margin-left: 2px;
margin-top: 1px;
}

.mostrecent{width: 528px;
height: 15px;
padding: 1px;
background: #1F1F1F;
border-top: 1px solid #16570B;
border-left: 1px solid #114E6F;
border-right: 1px solid #114E6F;
text-align: center;
font-weight: bold;
font-size: 9px;
}

Here's the HTML for the status bar, minus the php code:
Code:

<div class="statusbar">
  <div class="titleback">
    <div class="title">
      MPI Status Bar
    </div>
  </div>
  <div class="text">
    <ul>
    <li>
       <div class="category">
         <a href="http://medieval.shadowedrealm.com/mpi/category.php?Category=Agriculture">
         Agriculture</a>
		 <?php
			//PHP code
		 ?>
	   </div>
    </li>

This code repeats for two more similar <li>s before I close off the <ul> tag, and then I repeat with similar <ul>s five more times before I close off the title <div>. Hopefully this makes sense.

Does anyone know how I can correct for this error within my CSS code?