CSS - Custom Css For Ie

Hello, I'm working on converting my current table layout into strictly a CSS Layout . I've managed to get everything (layout wise at least...) displaying properly except for my right border. This is a small 30px x 1px drop shadow. I've been working with it for a few hours now, and I can't seem to get the image to even show up.

Here is my CSS code:
Code:

	#container {
		background-color: #726554; 
		width: 791px;
		text-align: left;
		margin: 0 auto;			
	} 
	#top {
		position: absolute;
		top: 0px;
		left: 0px;
		width: 791px;
		height: 145px;
		vertical-align: top;
	}
	#content {
		background: #726554 url(PHP/img/right.jpg) right repeat-y;
		margin-top: 30px;
		width: 496px;
		text-align: left;
		vertical-align: top;
		float: left;
	}
		
		#content p {
			color: #f1f1f1; 
			font-family: Tahoma; 
			font-size: 13px; 
			margin: 0 0 10px 12px;
		}
		#content .date {
			display: block;
			color: #ff9100; 
			font-family: Tahoma; 
			font-size: 13px; 
			font-weight: bold;	
		}
		
	#left {
		vertical-align: top;
		float: left;
		width: 265px;
		height: 671px;
	}
	#contact {
		clear: both;
		background: #726554 url(PHP/img/right.jpg) right repeat-y;
		font-size: 13px;
		font-family: Tahoma;
		text-align: center;
	}

I don't think you'll need any HTML code for this problem, but let me know if you do!

Thanks in advance,

Jason

Ive seen some sites using fonts i dont have on my computer how is this done and whats it called ? any help would be great.

Hello all,

I've been over at ALA and I came across this nice example on custom Borders and Corners and I've been playing with it but I'm still too green to get the effect I want.

Basicaly, I just want to get ride of the footer text section and allow the main body section to streach all the way into the footer. If I just delete the footer text, it leaves an offely large gap between the main content and the bottom of the 'box'.

So, how would I go about editing this example to not include a footer section, but still retain the bottom of the 'box'?

Thanks for any help!
Cheers,
Fozzy

I have a site, osake.garychus.com on which I am attempting to use a custom font called Lato. On MACS it is all messed up on the pages, on my 2nd laptop at home it shows up but in another font I believe. Am I doing something wrong?

When i add sifr to my site i am experiencing the following problems

1. Some elements disapear. ( the date componet )
2. theres a space at the start of each para.
3. text justify is not being applied.

u can see both the pages here

http://harshamv.com/test.php

the original page with out siFr

http://harshamv.com/index.php




Is there any way to add fonts to the web design better than this ?

I started using custom borders after seeing ALA's article on custom borders, but I'm running into a problem. If the overall width of the article isn't over 300px, then it doesn't bridge all the way, but I'm not wanting 300px width. Is there any way to eleminate the gap at the bottom. BTW, it's not just an IE thing, it's doing that in FF, and Opera too.

Here's my code:
Code:

div.Article {
  background: 
	url(images/menu/topleft.jpg) 
  top left no-repeat;
  }
div.Article h2 {
  background: 
	url(images/menu/topright.jpg) 
  top right no-repeat;
  font-size:1.3em;
  padding:15px;
  margin:0;
  color: #000;
  }
div.ArticleBody {
  background: 
	url(images/menu/right.jpg) 
  top right repeat-y;
  margin:0;
  margin-top:-2em;
  padding:15px;
  }
div.ArticleFooter {
  background: 
	url(images/menu/bottomleft.jpg) 
  bottom left no-repeat;
  }
div.ArticleFooter p {
  background: 
	url(images/menu/bottomright.jpg) 
  bottom right no-repeat;
  display:block;
  padding:15px;
  margin:-2em 0 0 0;
  }

HTML too:
Code:

<div class="Article" style="width: 210;">
  <h2><b>Menu</b></h2>
<div align="center">
  <div class="ArticleBody">
    <p>Text</p>
</div>
<div class="ArticleFooter">
  	<p style="color: #000;">
    A paragraph containing author information
    </p> 

    </div>
    </div>
	</div>

Thanks,
Marty J.

Is it possible to specify a custom image for a border style?

I've been wrapping my head around how to apply a border at the bottom of an image, using the following:

.menupic:link
{
border-top: 0px solid #ffffff;
border-right: 0px solid #ffffff;
border-bottom: 0px solid #ffffff;
border-left: 0px solid #ffffff;
}
.menupic:hover
{
border-top: 0px solid #ffffff;
border-right: 0px solid #ffffff;
border-bottom: 4px solid #ffffff;
border-left: 0px solid #ffffff;
}


It works fine in Mozilla, but I just cannot get the hover to work in IE, unless the border is completely solid and 1px+ for all a: states (kinda defeats what I'm trying to do), and it also works if I add float:left/right (which also is no good, as that messes up my design).

Anybody found a css work around this problem?

I am working on a project in which users will be able to sign up for a program, lets compare it to a myspace page... and they can customize the look and feel of that page to a very limited extent.

What is the best way to have them choose colors of the page through CSS, have those changes be there always applied to their page and their page alone?

I don't need help with the implementation, I currently have it to where users can choose from pre-built stylesheets and those are used, but how do you set it up to where what options they choose in the setup wizard are then creating a new stylesheet just for that user on the fly?

Thanks a ton,

SS

I'm creating a box that should be able to be scaled by either setting the size of the element containing the box, or the box itself.

Here is the HTML:
html4strict Code:
Original - html4strict Code <div id="container1"> <div id="panelBox1" class="panelbox"> <div class="header">My Panel Box</div> <div class="content"> <div>Content for the panel box. Content for the panel box. Content for the panel box. Content for the panel box. Content for the panel box. Content for the panel box. Content for the panel box. Content for the panel box Content for the panel box. Content for the panel box. Content for the panel box. Content for the panel box Content for the panel box. Content for the panel box. Content for the panel box. Content for the panel box Content for the panel box. Content for the panel box. Content for the panel box. Content for the panel box Content for the panel box. Content for the panel box. Content for the panel box</div> </div> </div>

  

  


 <div id="container1">


     <div id="panelBox1" class="panelbox">


         <div class="header">My Panel Box</div>


         <div class="content">


             <div>Content for the panel box. Content for the panel box. Content for the panel box. Content for the panel box.


             Content for the panel box. Content for the panel box. Content for the panel box. Content for the panel box


             Content for the panel box. Content for the panel box. Content for the panel box. Content for the panel box


             Content for the panel box. Content for the panel box. Content for the panel box. Content for the panel box


             Content for the panel box. Content for the panel box. Content for the panel box. Content for the panel box


             Content for the panel box. Content for the panel box. Content for the panel box</div>


     </div>


 </div> 

The CSS:
css Code:
Original - css Code div.panelbox { background: transparent url("Styles/Default/Images/panel_box_head_left.gif") no-repeat left top; padding: 0px; margin: 0px; } div.panelbox div.header { background: transparent url("Styles/Default/Images/panel_box_head_right.gif") no-repeat right top; line-height: 24px; margin-left: 3px; font-size: 0.8em; font-weight: bold; padding: 0px; } div.panelbox div.content { border: solid 1px #b3b3b3; margin: 0px; padding: 2px; height: 100%; } div.panelbox div.content div { width: 100%; height: 100%; overflow: auto; } #panelBox1 { height: 100%; }

  

  


 div.panelbox


 {


     background: transparent url("Styles/Default/Images/panel_box_head_left.gif") no-repeat left top;


     padding: 0px;


     margin: 0px;


 }


 div.panelbox div.header


 {


     background: transparent url("Styles/Default/Images/panel_box_head_right.gif") no-repeat right top;


     line-height: 24px;


     margin-left: 3px;


     font-size: 0.8em;


     font-weight: bold;


     padding: 0px;


 }


 div.panelbox div.content


 {


     border: solid 1px #b3b3b3;


     margin: 0px;


     padding: 2px;


     height: 100%;


 }


 div.panelbox div.content div


 {


     width: 100%;


     height: 100%;


     overflow: auto;


 }


  


 #panelBox1


 {


     height: 100%;


 } 

The content element should take up the remaining space left by the the header. How can I ensure that the height of the content is 100% of the box minus the height of the header?

as seen in this forum when posting a message,
i was wondering how they get it so that the title of
a section appears inside the border?
example:

------ Title here --------------------|
| |
| bit of content |
| |
| |
-------------------------------------

hello,

i'm placing a custom cursor on a stylesheet like so:

body { cursor: url(normal.cur), default; }

and a weird effect appeared on internet explorer... when the cursor is over any layers or images (i guess, over any actual elements), the custom cursor appears. but when it's on an empty area, say the page background, the default cursor appears instead. how can i fix this (while trying to maintain the default cursors for every other browser)?

thanks for any help!

to start: this is my first post and i hope this forum is as helpful as the others i am a member of..

i have a basic text game i am working on and code is already layed out for me.. but i am looking to give the game my own style.. i have created the look i want in photoshop and sliced and sent over to dreamweaver but i am a noob and dont know how to get the things functioning.. at all

pretty much everything can be set as the background except for the form but i want the blue gradient in input fields and images as buttons. i would like to have big font size in boxes and also have white letters.. also i want the whole centered x and y when viewer goes to page

like i said: im a noob and just getting back into the web dev stuff and am pretty rusty so if anyone can help me out i will be SOOOOOO thankful!!!

here is the link to the jpg.. let me know if you need the psd but i have 2 or 3 dif fonts in it that are not common fonts

Code:

http://i951.photobucket.com/albums/ad353/zac_exuro/Untitled-1-2.jpg

Nevermind, figured it out.

Here is the default css.css file for a php directory I use >> http://www.phpmydirectory.com/demo/template/default/css.css
I want to create custom fields in user/listee admin that allow a user/listee to choose things like scrollbar colors, page colors, text sizes etc on their individual listing page. Each listing page has a header.tpl file w/ <head>/</head> section. Each .tpl file calls the default css.css file above. How can I echo new css fields into either the css.css file or the actual listing.php of the listing page itself? I got a suggestion to use this but I cannot make it work.
Code:

<? if (on_page('listing.php')) { ?> etcetcetc

I've tried maybe 10 different ways. No luck. Should I convert the css file to php file & echo custom fields into it & call the php/css file to the listing page header?